Menambahkan Slider Posting Feature (Jquery Smart) untuk Blogger.

Menambahkan Slider Posting Feature (Jquery Smart) untuk Blogger.

Banyak sekali featur Slide Show untuk blog/ web dan featur  ini akan menambah cantik tampilan blog atau web.  Dan untuk kali ini saya akan memberikan cara menambah slider postingan dengan Jquery Smart agar blog/ web terlihat manis yang contohnya seperti ini:

Pergi ke Edit-Desain yang tampak garis HTLM menggunakan tombol CTRL + F dan paste kode ini sebelum .

<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script><script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script><script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script><script type="text/javascript">jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap:"both", scroll:2, animation:"slow" }); function mycarousel_initCallback(carousel) { jQuery('#featured-next-button').bind('click', function() { carousel.next(); return false; }); jQuery('#featured-prev-button').bind('click', function() { carousel.prev(); return false; }); jQuery('.button-nav span').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); }; jQuery('#feature-carousel').jcarousel({ wrap:"both", scroll:1, auto:10, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null });});</script><style type="text/css">.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}.jcarousel-skin-tango .jcarousel-next-horizontal {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhexJPGoA3Nq1bbTbgWf4O3L4-gWTvQDMskYm4vWqfe85-OiOXYNGv_Xt9QHRwyjbFUuTbDMOhbzer6RizTUJ4FYeOHErg7YubtgAqfYqHyVFyec7jUIzRRi1qsCuGmDdGv6g0QvUzZYvTC/s1600/image-slider-button.png) no-repeat scroll -46px 0;cursor:pointer;height:254px;right:20px;position:absolute;top:0;width:46px;}.jcarousel-skin-tango .jcarousel-prev-horizontal {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhexJPGoA3Nq1bbTbgWf4O3L4-gWTvQDMskYm4vWqfe85-OiOXYNGv_Xt9QHRwyjbFUuTbDMOhbzer6RizTUJ4FYeOHErg7YubtgAqfYqHyVFyec7jUIzRRi1qsCuGmDdGv6g0QvUzZYvTC/s1600/image-slider-button.png) no-repeat scroll 0 0;cursor:pointer;height:254px;left:20px;position:absolute;top:0;width:46px;}.jcarousel-container {position: relative;}.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}.jcarousel-next {z-index: 3;display: none;}.jcarousel-prev {z-index: 3;display: none;}#news-slider{background-color:#FFFFFF;padding:20px 0;}#news-slider img{border:none;height:254px;width:307px;}</style>

Simpan template. Berikut-Layout-> Page Elements Klik untuk menambahkan gadget HTML / Javascript dan paste kode:

<div id='news-slider'><ul class='jcarousel-skin-tango' id='mycarousel'><li><a href='SLIDE-1-Url Post'><img src='SLIDE-1-Url Gambar'/></a></li><li><a href='SLIDE-2-Url Post'><img src='SLIDE-2-Url Gambar'/></a></li><li><a href='SLIDE-3-Url Post'><img src='SLIDE-3-Url Gambar'/></a></li><li><a href='SLIDE-4-Url Post'><img src='SLIDE-4-Url Gambar'/></a></li><li><a href='SLIDE-5-Url Post'><img src='SLIDE-5-Url Gambar'></a></li></ul></div>