Cara Membuat Animasi Slide Efek Marquee Di Blog

Cara Membuat Animasi Slide Efek Marquee Di Blog | Pada postingan kali ini saya akan share cara membuat slide pada sidebar blog. Cara membuatnya sangat mudah dan tidak akan memberatkan loading blog anda. yuk kita mulai cara membuatnya di blog.

Berikut cara memasang animasi slide dengan efek marquee pada blog :
1. Login ke Blogger
2. Klik Rancangan
3. Pilih Edit HTML
4. Cari kode </head>
5. Lalu copy kode di bawah ini dan letakkan di atas 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://teknik-blog-tutorial.blogspot.com/2012/04/cara-membuat-animasi-slide-efek-marquee.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 dulu Template anda
7. Langkah selanjutnya anda tinggal memanggil kode animasi slide gambar, yaitu :
Pilih Rancangan => Tambah Gadget > HTML/Javascript

<div id="tooltip"><a href="http://teknik-blog-tutorial.blogspot.com/2012/04/cara-membuat-animasi-slide-efek-marquee.html"/></a>
<div align="center" class="animasislide">
<marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="100%">

<a href="Url Postingan anda" target="_blank" title="keterangan postingan"><klik untuk membaca><img src="Url gambar anda" /></klik></a>

<a href="Url Postingan anda" target="_blank" title="keterangan postingan"><klik untuk membaca><img src="Url gambar anda" /></klik></a>

<a href="Url Postingan anda" target="_blank" title="keterangan postingan"><klik untuk membaca><img src="Url gambar anda" /></klik></a>

<a href="Url Postingan anda" target="_blank" title="keterangan postingan"><klik untuk membaca><img src="Url gambar anda" /></klik></a>

<a href="Url Postingan anda" target="_blank" title="keterangan postingan"><klik untuk membaca><img src="Url gambar anda" /></klik></a>

</marquee></div>
</div>

8. Simpan dan lihat hasilnya

Keterangan :
Silahkan anda ganti kode yang saya beri warna merah, biru dan pink dengan punya anda