Di artikel kali ini kita akan mencoba untuk membuat iklan yang bertumpuk tersebut menjadi slide dengan jquery carousel. Tutorial ini saya ambil dan kembangkan lagi dari sumber http://jquery.com/. Buat narablog yang ingin memonitize blognya ini sangat berguna sekali karena bisa meringankan loading dan bisa menempatkan banyak iklan di dalamnya tanpa boros tempat di template. Jquery carousel ini juga bisa di tempatkan di sidebar, footer dan tempat lain yang sekiranya sobat anggap pantas. Juga mempunyai animasi yang tanpa harus di clik dengan kata lain autoslide. Iklan yang cocok di tempatkan adalah mini banner, okeh..berikut cara membuatnya.
- Masuk ke rancangan/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/AVvXsEiDRvEKGuDnWd9SWtG4GPqMg0nxuxpmTAVyW3P4loQ2LiKwvO3THq6XVnLh8wIvV8xpPYxoBAM2fkyWI255RIthOGhzfSBs8V7tvTBZA5Qm975NX_aHGkUbfV1Sn7tOq10kMqODDxBIESvu/" 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/AVvXsEgXEsX3NEYNBm6bFPn9D3xo4POvbzq_2Z5pQtdQdpO35L0_iDOqEPptO80PaIA2F1zMtoLh-61auwY3en4cGUqbf6MWG7gcMWEXtnIL-vwOWZTIwX14deQwwgtAP0-Udo7ebRhLmeZHB-g/s128/panahasmara.gif) 0 -31px no-repeat}a#prev:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXEsX3NEYNBm6bFPn9D3xo4POvbzq_2Z5pQtdQdpO35L0_iDOqEPptO80PaIA2F1zMtoLh-61auwY3en4cGUqbf6MWG7gcMWEXtnIL-vwOWZTIwX14deQwwgtAP0-Udo7ebRhLmeZHB-g/s128/panahasmara.gif) 0 0 no-repeat}a#next{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXEsX3NEYNBm6bFPn9D3xo4POvbzq_2Z5pQtdQdpO35L0_iDOqEPptO80PaIA2F1zMtoLh-61auwY3en4cGUqbf6MWG7gcMWEXtnIL-vwOWZTIwX14deQwwgtAP0-Udo7ebRhLmeZHB-g/s128/panahasmara.gif) -32px -31px no-repeat}a#next:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXEsX3NEYNBm6bFPn9D3xo4POvbzq_2Z5pQtdQdpO35L0_iDOqEPptO80PaIA2F1zMtoLh-61auwY3en4cGUqbf6MWG7gcMWEXtnIL-vwOWZTIwX14deQwwgtAP0-Udo7ebRhLmeZHB-g/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>Kalu berhasil maka hasilnya akan seperti di contoh bawah
- Masukan script iklan di sini
- MASUKAN SCRIPT IKLAN DI SINI
- MASUKAN SCRIPT IKLAN DI SINI
- MASUKAN SCRIPT IKLAN DI SINI
Yups!! mudah-mudahan berguna dan bermanfaat iklan mini banner yang telah terpasang dengan menggunakan Jquery dan CSS3. Oia, BTW memangnya benar kalu bisa dapat dollar dari ngeblog? Kalu ada sobat yang bisa tolong ajarin utta soalnya utta ga paham yang namanya cari duit di internet.
