cara pasang Feature Slider Jquery di blogspot

untuk memasang widget slider caranya cukup simple dan tidak begitu rumit cuma mengikuti beberapa langkah-langkah mudah dan edit html yang singkat.

bagi anda yang ingin mencoba memasang featur slider jquery ini silahkan ikuti panduan singkat dibawah ini

->> dalam keadaan login blog pergi ke menu daboard-> layout-> edit html
--> jangan lupa ceklist kotak kecil disebelah expand widget template
--> sebaiknya back-up dulu template original sebelom melakukan pengeditan
--> silahkan copy kode ini dan pate di atas kode </head>

<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/AVvXsEgbGJWHpoyIOTnChU7dE2zha6gNM8nypedwx6p9A3ntMXSMtgb8ZGYjHKNAVT9F_WIuWq1LOe_IfUoMNrdAE0ZMTbARKNzqjRxlqgWJ_5gUXgT6KtD_XzNaT6sC8z0ItJ0YzO5lFbY-q3Dw/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/AVvXsEgbGJWHpoyIOTnChU7dE2zha6gNM8nypedwx6p9A3ntMXSMtgb8ZGYjHKNAVT9F_WIuWq1LOe_IfUoMNrdAE0ZMTbARKNzqjRxlqgWJ_5gUXgT6KtD_XzNaT6sC8z0ItJ0YzO5lFbY-q3Dw/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>

--> silahkan simpan template.

setelah itu anda masuk ke design-> page elemen-> add a gadget-> pilih javascript/html

--> copy pate kode dibawah ini di javascript/html


<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='SLIDE-1-LINK-HERE'><img src='SLIDE-1-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-2-LINK-HERE'><img src='SLIDE-2-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-3-LINK-HERE'><img src='SLIDE-3-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-4-LINK-HERE'><img src='SLIDE-4-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-5-LINK-HERE'><img src='SLIDE-5-IMAGE-ADDRESS-HERE'/></a></li>
</ul>
</div>


NOTA:

-silahkan ganti yang saya beri warna merah dengan link postingan blog anda yang ingin ditampilkan pada slider

- silahkan ganti yang berwarna biru dengan link/URl gambar anda .sesuaikan sendiri dengan selera anda.

selamat mencoba semoga berhasil..semoga.. tutorial blogger ini bermamfaat   ...
buat pengguna wordpress yang ingin download template premium gratis silahkan
DOWNLOAD GRATIS DISINI

.happy blogging