Memasang Banner Rotasi Super Keren Di Blog

blogging   4 comments  

Buat Agan dan Sista yang kepingin blog atau websitenya dihiasi dengan banyak banner disatu tempat aja dan muncul secara bergantian, silahkan aja disimak trik berikut ini. Btw, udah pada tau kan apa itu banner rotasi? Yaitu tadi, banner yang nongolnya bergantian. Nah, dengan widget banner rotasi ini, Agan dan Sista kagak perlu repot mikirin tempat, cukup tentuin wigdet tersebut di satu tempat di blog atau web kita, maka banner pun akan secara bergantian nongol disitu. Dan Agan atau Sista bebas memasang berapa aja banner yang mau ditongolin. Keren kan? :D
Jadi widget banner rotasi  ini emang menghemat tempat, selain itu juga kagak membebani loading blog...kecuali kalu Agan atau Sista memasang 1000 banner sekaligus di widget ini, pasti bikin berat loading blog. Jadi nyang wajar-wajar aja masangnya, Gan! :$ 

DEMO

:t cekidot aja di tampilan banner yang nongol di header blog ini, Gan! :t

Wokeh deh! Buat yang pengen buru-buru pasang, cekidot aja langsung ke cara memasang banner rotasi super keren di blog.

1. Yang pasti Agan/Sista kudu bin harus login dulu ke akun blog sendiri.
2. Jangan lupa backup dulu template Agan/Sista.
3. Setelah itu pilih Template dan pilih lagi Edit HTML.
4. Terus cari kode ]]></b:skin> dan pastekan kode HTML dibawah ini tepat diatas ]]></b:skin> tadi.


#bannerrotasi {margin-left: 0; padding:0} #bannerrotasi ul, #bannerrotasi ol{list-style:none !important; margin:0 !important; padding:0 !important;} ul#bannerimg li img{border: 1px solid #ccc;padding: 4px !important;margin: 0 !important;} ul#bannerimg li a{text-decoration: none !important;} #banner_1, #banner_2, #banner_3 {display:none;}


5. Setelah itu cari lagi kode </head> dan pastekan script dibawah ini tepat diatas </head> tadi.


<script src='https://googledrive.com/host/0B0okpx-nV7xYYWg3NTZXbDlKNzQ' type='text/javascript'/> <script type='text/javascript'> $(document).ready( function(){ $('ul#bannerimg').hide(); $('ul#bannerimg:first').show(); $('ul#bannerimg').cekidotbanner({ speed: 500, timeout: 20000, type: 'random', containerheight: '80px' }); } ); </script>


6. Save dulu tempalte Agan/Sista.
7. Selanjutnya pilih menu Tata Letak
8. Terus pilih Tambahkan Gadget (terserah mau nempatin banner dimana aja boleh)
9. Pastekan kode HTML dibawah ini kedalam kotak Tambahkan gadget tadi.


<div id="bannerrotasi"> <ul id="bannerimg"> <li id="banner_1"><a href="URL TARGET BANNER" target="_blank" ><img src="URL GAMBAR BANNER"/></a></li> <li id="banner_2"><a href="URL TARGET BANNER" target="_blank" ><img src="URL GAMBAR BANNER"/></a></li> <li id="banner_3"><a href="URL TARGET BANNER" target="_blank" ><img src="URL GAMBAR BANNER"/></a></li> </ul> </div>


10. Save deh dan selesai.

Trik memasang banner rotasi super keren di blog yang ane contohin diatas adalah untuk menampilkan banner sebanyak 3 buah banner, dan kalau Agan/Sista pengen masang lebih dari itu, Agan/Sista tinggal tambahkan lagi dibelakang kode #banner_1, #banner_2, #banner_3 dengan kode #banner_4, #banner_5, #banner_6 dan seterusnya sesuka Agan/Sista.

setelah itu tambahkan lagi kode gambarnya di kotak Tambahkan Gadget tadi dengan <li id="banner_4"><a href="URL TARGET BANNER" target="_blank"><img src="URL GAMBAR BANNER"/></a></li> dan seterusnya.

Gampangkan?

Sekian dan semoga bermanfaat lagi ________ :d