Memasang Banner Rotasi dengan Jquery

Jquery memang tidak ada habis - habisnya dibahas, seperti air laut di kuras hehehe. Memasang Banner Rotasi dengan Jquery pada template blogspot merupakan cara menghemat tempat. Dengan efek seperti slideshow photo menambah keindahan tersendiri untuk template kamu namun disamping itu trik ini pun akan menambah size atau berat blog kamu tentunya. sekarang kamu berhak memilih, dipasang atau tidak, cekidot Demo!

• 
• 
• 
• 

Instalasi pada template blogspot

1. Login ke blogger
2. Masuk ke Rancangan >> Elemen halaman
   
3. tambahkan sebuah gadget (Saran : pilih tempat yang strategis untuk memasang iklan)
   
4. pilih HTML/Javascript, lalu tambahkan kode di bawah ini tepat di dalamnya
   
   <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script class="jsbin" src="http://medienfreunde.com/lab/innerfade/js/jquery.innerfade.js"></script>
   <style>
   #bannerrot {margin: 0; padding:0;}
   #bannerrot ul, #bannerrot ol{list-style:none !important; margin:0 !important; padding:0 !important;}
   ul#bannerimg li img{border: 1px solid #ccc;-moz-border-radius:5px;width:125px;height:125px;padding: 4px !important;margin: 0 !important;}
   ul#bannerimg li a{text-decoration: none !important;}
   </style>
   <div id="bannerrot">
   <ul id="bannerimg">
   <li><a href="TULIS URL DISINI" title="TULIS JUDUL URL DISINI"><img src="TULIS URL GAMBAR DISINI"/></a></li>
   <li><a href="TULIS URL DISINI" title="TULIS JUDUL URL DISINI"><img src="http://4.bp.blogspot.com/-uA2cWRl9A-U/Td4BG-U5qcI/AAAAAAAAB0k/tf31Crkpt8E/s1600/banner+oketrik.png" /></a></li>
   <li><a href="TULIS URL DISINI" title="TULIS JUDUL URL DISINI"><img src="http://4.bp.blogspot.com/-bJ7lAxIK6KU/Td4BDSPrZOI/AAAAAAAAB0Y/WNTO4jKRTgo/s1600/images4.jpg" /></a></li>
   <li><a href="TULIS URL DISINI" title="TULIS JUDUL URL DISINI"><img src="http://3.bp.blogspot.com/-yYBmx3x6ArQ/Td4BD-32MvI/AAAAAAAAB0c/eIyua5TgWoE/s1600/images.jpg"/></a></li>
   </ul>
   </div>
   <script>
   $(document).ready(
   function(){
   $('ul#bannerimg').innerfade({
   speed: 1000,
   timeout: 5000,
   type: 'sequence',
   containerheight: '125px'
   });
   });
   </script>
   
   Keterangan :
   
   • tulisan yang berwarna biru tersebut dapat kamu ganti
   • kecepatan, ukuran gambar, dan hiasan dalam banner tersebut dapat dirubah sesuai keinginan kamu, tanyakan bila kamu bingung dengan meninggalkan komentar di bawah okey :D
   
5. Simpan dan lihat hasilnya
   

Bagaimana mudah bukan Memasang Banner Rotasi dengan Jquery pada template blogspot? Mungkin itu saja yang bisa saya sampaikan pada kesempatan ini. oiya klo mu bertanya, silahkan tinggalkan pesan di bawah komentar ini.

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg