Cara Membuat Slide dengan Efek Marquee

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> :

<!-- begin Tooltips -->
<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>
<!-- end tooltips -->


<style type="text/css">
<a href="http://www.langgengpermata.com"/></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

<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  &gt;&gt;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.