Cara membuat slide dengan efek marquee

Animasi slide foto atau gambar dengan menggunakan efek marquee, tidak kalah menarik bila dibanding dengan animasi flash. Selain lebih ringan, animasi slide ini dilengkapi efek onmouseover, sehingga pada saat pointer mouse diletakkan diatas salah satu gambar atau foto yang sedang berjalan secara otomatis akan berhenti. Dan pada saat itu pula terjadi efek transform yang mengakibatkan gambar menjadi berukuran lebih besar. Dan pada saat bersamaan apabila pointer mouse ditahan beberapa saat diatas gambar, maka akan muncul sebuah "tooltip" atau catatan mengenai gambar - gambar tersebut.

Berikut bentuk animasi slide dengan efek marquee :

Bila anda berminat untuk memasang animasi ini pada atau anda, silahkan ikuti langkah - langkah berikut ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<script type='text/javascript'> $(document).ready(function(){ $("a.tooltip").easyTooltip(); }); </script> <script type='text/javascript'> //<![CDATA[ (function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery); //]]> </script>    <style type="text/css"> <a href="http://www.carabuatwebgratis.com/2011/05/cara-membuat-slide-dengan-efek-marquee_04.html"/></a> div.animasislide{margin 2px; padding-top:6px; border: 5px solid #D8D8D8; border-style:double; background-color:#F2F2F2; width:auto; float:left; text-align:center;} div.animasislide img{margin:3px; width:100px; height:100px; border: 3px solid #D8D8D8; border-style:double; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */} div.animasislide a:hover img{width:200px; height:100px;} </style>

6. Simpan Template.

Langkah selanjutnya anda tinggal menampilkan Animasi slide foto atau gambar pada halaman depan blog anda.
Perhatikan langkah berikut :
1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div id="tooltip"><a href="http://www.carabuatwebgratis.com/2011/05/cara-membuat-slide-dengan-efek-marquee_04.html"/></a> <div align="center" class="animasislide"> <marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="100%">  <a href="ULR ARTIKEL" target="_blank" title="KETERANGAN ARTIKEL ATAU GAMBAR  >>KLIK UNTUK MEMBACA ARTIKEL INI."><img src="ULR GAMBAR" /></a>  <a href="ULR ARTIKEL" target="_blank" title="KETERANGAN ARTIKEL ATAU GAMBAR  >>KLIK UNTUK MEMBACA ARTIKEL INI."><img src="ULR GAMBAR" /></a>  <a href="ULR ARTIKEL" target="_blank" title="KETERANGAN ARTIKEL ATAU GAMBAR  >>KLIK UNTUK MEMBACA ARTIKEL INI."><img src="ULR GAMBAR" /></a>  <a href="ULR ARTIKEL" target="_blank" title="KETERANGAN ARTIKEL ATAU GAMBAR  >>KLIK UNTUK MEMBACA ARTIKEL INI."><img src="ULR GAMBAR" /></a>  <a href="ULR ARTIKEL" target="_blank" title="KETERANGAN ARTIKEL ATAU GAMBAR  >>KLIK UNTUK MEMBACA ARTIKEL INI."><img src="ULR GAMBAR" /></a>  </marquee></div> </div>

Catatan :
Diantara kode diatas terdapat kode link seperti berikut :

<a href="ULR ARTIKEL" target="_blank" title="KETERANGAN ARTIKEL ATAU GAMBAR >>KLIK UNTUK MEMBACA ARTIKEL INI."><img src="ULR GAMBAR" /></a>

Silahkan ganti ULR ARTIKEL , KETERANGAN ARTIKEL ATAU GAMBAR , dan ULR GAMBAR, milik anda.

5. Simpan.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Judul: Cara membuat slide dengan efek marquee; Ditulis oleh Unknown; Rating Blog: 5 dari 5

CSS BORDERBanyak sekali properti dari fitur css border, yang semuanya berfungsi mengatur tampilan gaya dan warna dari sebuah border. Berikut beberapa properti dari fitur css ... readmore
Cara buat slide show CarouselMenambah lagi koleksi slide show, dan slide ini menggunakan efek Carousel atau berputar seperti komedi putar. selain berfungsi untuk menampilkan gambar, slide show ... readmore
Mengenal 5 bagian utama pada template bloggerMemiliki Blog sangat menyenangkan, tapi terkadang kita masih merasa kesulitan pada saat kita ingin mengedit template. Walaupun sudah banyak tutorial-tutorial yang d ... readmore
Cara buat gallery dengan efek hover zoomingTambah lagi koleksi cara buat gallery. Berbeda dengan yang lalu, anda bisa lihat DISINI. Gallery yang ini lebih menarik dan cara kerjanya juga lebih enak dipandang. ... readmore
Cara membuat background warna gradasiUntuk membuat background dengan warna gradasi, kita tidak perlu lagi menggunakan gambar sebagai backgroundnya. Tapi sekarang kita bisa menggunakan salah satu dari f ... readmore