Cara Membuat Animasi Gundam Terbang di Blog

Buat sobat blogger yang punya template berlatar belakang cerah, nich ada script unik yang keren banget efek gundam terbang. Script ini akan menampilkan gambar gundam yang sedang beterbangan secara random di blog sobat. Untuk melihat previewnya silakan lihat di sini
Script ini menggunakan javascript gambar gif dan robot gundam ini akan terbang di blogmu gambar ini mempunyai ukuran 144 pixel sehingga tidak akan memberatkan waktu loading blog sobat. Script efek gundam beterbangan secara default menggunakan gambar gundam yang keren dan unik. Gambar robot gundam bisa disesuaikan dan juga bisa menggunakan lebih dari 3 gambar. Buat yang tertarik memasang script ini Silahkan ikuti cara di bawah

Cara Pemasangan

Login ke blog sobat.
Klik "Design" kemudian klik "Edit HTML".
Cari kode </Head> kemudian copy-paste kode dibawah ini tepat diatas kode </Head>. =========================================================================

<SCRIPT SRC='http://monozcore-project.googlecode.com/files/MonozCore_Halloween.js' type='text/JavaScript'/>
<SCRIPT type='Text/JavaScript'>
function JSFX_StartEffects()
{
JSFX.AddGhost(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid-V0F3vAjZBuWLAec1gQrgLL2TtP4VlLNFJRfYMz6bbQybfctBXyKke-jzOGXeVktdQc_22PsH3VzeFINPEnMXYrDS6CbvQY-Q-Oqf2yjLUfA-dArNoWOzll_xNTKiZ48sR3t7EIjifw8/s1600/hugeng1.gif&quot;);
}
window.onload = JSFX_StartEffects;
</SCRIPT>

=========================================================================



Kode "JSFX.AddGhost(&quot;URL link gambar&quot;);"merupakan kode script untuk mendeklarasikan array gambar. Untuk menambah gambar silakan tambahkan baris kode script ini pada script diatas.

Kode "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid-V0F3vAjZBuWLAec1gQrgLL2TtP4VlLNFJRfYMz6bbQybfctBXyKke-jzOGXeVktdQc_22PsH3VzeFINPEnMXYrDS6CbvQY-Q-Oqf2yjLUfA-dArNoWOzll_xNTKiZ48sR3t7EIjifw8/s1600/hugeng1.gif" merupakan kode URL link gambar yang digunakan. Untuk merubah gambar silakan ganti baris kode ini dengan URL link gambar yang ingin digunakan.

Klik "Save" dan lihat hasilnya...

.....SELAMAT MENCOBA.....

Read more ...

Cara Mudah Menambah Footer di Blogspot

Cara Mudah Menambah Footer di Blogspot - Udah lama banget kayaknya gak update blog. Nah, pada pagi hari yang cerah ini admin mau bagikan trik keren Cara Mudah Menambah Footer di Blogspot. Mungkin sudah banyak yang bahas artikel ini, tapi saya bisa jamin tingkat kemudahan dan keberhasilan 90%. Kenapa saya berani bilang begitu ? ya karena saya juga baru selesai menambahkan footer disalah satu blog saya. Saya akan beberkan Cara Mudah Menambah Footer di Blogspot sebanyak 2,3, atau 4. Sekarang terserah kamu mau pilih yang mana untuk dipasangkan di blog kamu. Berikut demo footer 3 kolom yang  sudah saya tambahkan :

Footer 3 Kolom Blogspot

Tutorial Cara Mudah Menambahkan Footer di Blogspot

• Login dengan akun blogger kamu terlebih dahulu
• Pilih Rancangan --> Edit HTML
• Jangan Lupa Beri centang pada Expand Template Widget 
• Cari kode  ]]></b:skin> dan letakkan kode dibawah ini tepat diatasnya

#footer-column-divide { clear:both; } .footer-column { padding: 10px; }

• Cari kode seperti seperti berikut :

<div id='footer-wrapper'> <b:section class='footer' id='footer' showaddelement='yes'/> </div> atau <div id='footer'> <b:section class='footer' id='footer' showaddelement='yes'/> </div> 

• Setelah ketemu, tambahkan kode di bawah ini tepat di bawah <b:section class='footer' id='footer' showaddelement='yes'/> atau di <div id='footer-wrapper'> ( jika belum ketemu, mungkin kode seperti ini : <div id='footer'> )

Jika ingin membuat footer 2 kolom. Gunakan kode ini :

<div id='footer-column-divide'>
<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>

Jika ingin footer 3 kolom. Gunakan kode ini :

<div id='footer-column-divide'>
<div id='footer1' style='width: 33%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 33%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 33%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Membuat footer menjadi 4 kolom. Gunakan kode ini :

<div id='footer-column-divide'>
<div id='footer1' style='width: 25%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 25%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div id='footer4' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col4'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Langkah terakhir adalah menyimpan hasil editan. Selamat mencoba :)

Read more ...

Cara Membuat/Menambahkan Sidebar Sendiri

Langkah dan Cara Membuat Sidebar Blog Sendiri

Sebagai ilustrasi,sengaja kami share dengan media gambar,biar ga jlimet geto :D
Saat template satu kolom yang saya miliki dilihat dari view 'Rancangan / Design' maka akan tampil seperti ini:


Lihat Gambar Lebih Besar Klik disini

Sekarang,sobat klik 'EDIT HTML' seperti yang diyunjukkan pada gambar dibawah ini:


Lihat Gambar Lebih Besar Klik disini

Setelah itu,sobat cari kode / barisan css berikut (gunakan Ctrl+F di keyboard untuk mempermudah pencarian)

#outer-wrapper {

Nah,nanti barisan kode css ditemplate sobat akan tampak seperti ini,yah meskipun ga persis (meskipun satu kolom khan beda template :D) :


Lihat Gambar Lebih Besar Klik disini

**dalam gambar ada 3 kode angka yang saya beri tanda lingkaran,dari ketiga angka tersebut harus sama,#header ,#outer-wrapper dan untuk #footer.

Nah,lanjut ya,tepat dibawah barisan kode #outer-wrapper { misal template milik saya barisan #outer-wrapper { tampil seperti ini:

#outer-wrapper {
margin: 0px auto;
width:500px;
background:white url() top left repeat-y;
}

letakkan kode barisan css sidebar baru kita berikut setelah barisan kode tadi:

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Nah,ingat meletakkannya juga harus benar ya gan,kurang lebih nanti akan tampil seperti ini:


Lihat Gambar Lebih Besar Klik disini

Setelah itu,cobat cari kode <body> (gunakan Ctrl+F di keyboard untuk mempermudah pencarian)


Lihat Gambar Lebih Besar Klik disini

Setelah sobat menemukan kode <body> letakkan persis dibawahnya kode ini:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' maxwidget='2' showaddelement='yes' preferred='yes'/>
</div>

Jika sobat meletakkannya benar maka akan tampak seperti ini:


Lihat Gambar Lebih Besar Klik disini

Kode inilah yang akan tampil dimana saja kita inginkan keberadaannya,jika sobat ingin meletakkan widget ini difooter,header dan lain sebagainya,sobat cari sendiri tempatnya ya (Insya Allah kita akan bahas nanti)

Lanjut ya,setelah sobat terapkan langkah-langkah diatas,simpan template sobat dan lihat pada tab 'Rancangan / Design' dan TADA!!!!! maka nanti akan tampil seperti ini:

Lihat Gambar Lebih Besar Klik disini

Nah,widget di ujung sebelah kanan atas blog ini sangat tepat jika digunakan untuk fitur serach,profil,dll,untuk contoh fisiknya sobat lihat saja di SINI

Sekarang dari template sobat satu kolom,sobat sudah bisa ciptakan sidebar sendiri khan? Selamat berkreasi dan semoga berhasil ya gan! see you:D

Read more ...