Memasang iklan mini banner dengan Jquery carousel dan CSS3

Di artikel kali ini kita akan mencuba untuk membuat iklan slide dengan jquery carousel. Tutorial ini saya ambil dan kembangkan lagi dari sumber http://jquery.com/. Ini sangat berguna sekali kerana boleh meringankan loading dan boleh menempatkan banyak iklan di dalamnya tanpa boros tempat di template. Jquery carousel ini juga boleh di tempatkan di sidebar, footer dan tempat lain yang sekiranya anda anggap pantas. Juga mempunyai animasi yang tanpa harus di clik dengan kata lain autoslide.

Login ke Blogger --> Design
Klik add gadgets lalu pilih html/javascript
Kemudian masukan kode di bawah

<div id="iklancuy"><div id="buttons"> <a href="#" id="prev">prev</a><a href="#" id="next">next</a> <div class="clear"></div></div><div class="clear"></div><div id="slides"> <ul> <li><img src="http://www.anime-network1.com/hostgator125.gif" width="240" height="240" alt="Slide 1" /></li> <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAig31qxXdxLkD4KwvGcJ7ngflUK8bPBw4_cPQtn24dt-mva9KIBSwOrvhAxti7D-HuhdUSVDH55PwvgQM68OJt7EwONnTLJTevFEwGsHMYIdhguhmEuGMrWmJJP-RPxhBObLKYxYP0ghr/" width="240" height="240" alt="Slide 2" /></li> <li>Masukan script iklan di sini</li> <li>MASUKAN SCRIPT IKLAN DI SINI</li> <li>MASUKAN SCRIPT IKLAN DI SINI</li> <li>MASUKAN SCRIPT IKLAN DI SINI</li> </ul> <div class="clear"></div> </div></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> </script> <script> $(document).ready(function(){var speed=5000;var run=setInterval('rotate()',speed);var item_width=$('#slides li').outerWidth();var left_value=item_width*(-1);$('#slides li:first').before($('#slides li:last'));$('#slides ul').css({'left':left_value});$('#prev').click(function(){var left_indent=parseInt($('#slides ul').css('left'))+item_width;$('#slides ul:not(:animated)').animate({'left':left_indent},200,function(){$('#slides li:first').before($('#slides li:last'));$('#slides ul').css({'left':left_value})});return false});$('#next').click(function(){var left_indent=parseInt($('#slides ul').css('left'))-item_width;$('#slides ul:not(:animated)').animate({'left':left_indent},200,function(){$('#slides li:last').after($('#slides li:first'));$('#slides ul').css({'left':left_value})});return false});$('#slides').hover(function(){clearInterval(run)},function(){run=setInterval('rotate()',speed)})});function rotate(){$('#next').click()} </script> <style> #iklancuy{width:255px;height:300px;margin:0 auto;padding-top:10px;overflow:hidden}#slides{overflow:hidden;position:relative;width:250px;height:250px;border:1px solid #ccc;-webkit-box-shadow: 1px 2px 4px #333; -moz-box-shadow: 1px 2px 4px #333;-moz-border-radius: 5px; -webkit-border-radius: 5px;}#slides ul{position:relative;left:0;top:0;list-style:none;margin:0;padding:0;width:750px}#slides li{width:250px;height:250px;float:left}#slides li img{padding:4px}#buttons{padding:0 0 5px 0;float:right}#buttons a{display:block;width:31px;height:32px;text-indent:-999em;float:left;outline:0}a#prev{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz4gIZ7UM37xAFWAnu2oceGHln0dZjmtIZ3JdctVaaqem4TNDn1k9g6cugBeHe2tfyF_K3fNt0EG5NkcKT_wpc07AIUktW_ZdYI42p6upaYOpia7WNyZfJ6aXaCVsLJ2KkCF7QC_CTs8E/s128/panahasmara.gif) 0 -31px no-repeat}a#prev:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz4gIZ7UM37xAFWAnu2oceGHln0dZjmtIZ3JdctVaaqem4TNDn1k9g6cugBeHe2tfyF_K3fNt0EG5NkcKT_wpc07AIUktW_ZdYI42p6upaYOpia7WNyZfJ6aXaCVsLJ2KkCF7QC_CTs8E/s128/panahasmara.gif) 0 0 no-repeat}a#next{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz4gIZ7UM37xAFWAnu2oceGHln0dZjmtIZ3JdctVaaqem4TNDn1k9g6cugBeHe2tfyF_K3fNt0EG5NkcKT_wpc07AIUktW_ZdYI42p6upaYOpia7WNyZfJ6aXaCVsLJ2KkCF7QC_CTs8E/s128/panahasmara.gif) -32px -31px no-repeat}a#next:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz4gIZ7UM37xAFWAnu2oceGHln0dZjmtIZ3JdctVaaqem4TNDn1k9g6cugBeHe2tfyF_K3fNt0EG5NkcKT_wpc07AIUktW_ZdYI42p6upaYOpia7WNyZfJ6aXaCVsLJ2KkCF7QC_CTs8E/s128/panahasmara.gif) -32px 0 no-repeat}.clear{clear:both} #slides:hover{-webkit-box-shadow: 2px 4px 6px #333; -moz-box-shadow: 2px 4px 6px #333;} </style>

Save dan lihat hasilnya.
Kalu berhasil maka hasilnya akan seperti di contoh bawah

prevnext

• 
• 
• Masukan script iklan di sini
• MASUKAN SCRIPT IKLAN DI SINI
• MASUKAN SCRIPT IKLAN DI SINI
• MASUKAN SCRIPT IKLAN DI SINI

Mudah-mudahan berguna dan bermanfaat iklan mini banner yang telah terpasang dengan menggunakan Jquery dan CSS3.