Pada postingan kali ini saya akan share cara membuat slide pada sidebar blog. Cara membuatnya sangat mudah dan tidak akan memberatkan loading blog anda. Untuk melihat hasilnya, lihat pada halaman depan blog saya juga memasang slide untuk tutorial ini.
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, kuning dan pink dengan punya anda
Backlinks Please Thanks
| URL |
| Code For Forum |
| HTML Code |
Anda Sekarang Sedang Baca Artikel Tentang Cara Membuat Animasi Slide Efek Marquee Di Blog , Boleh Menyebar Luaskan Artikel Ini Atau Mengcopy Paste Artikel Cara Membuat Animasi Slide Efek Marquee Di Blog ini Jika Memang Berrmanfaat. Tapi Saya Harap Anda Jangan Lupa Menyertakan Link Cara Membuat Animasi Slide Efek Marquee Di Blog Sumbernya. Thank's
Posting Komentar - Back to Content