Cara memasang Poto Slide show pada blog

Hmmmmm... apa kabar sob, dah lama nie gak posting pengetahuan di blog ini, toh aku lagi sibuk ma blog baru, kunjungi ya Fauzulmuslimin, jika teman-teman ingin Tukar Link di blog Fauzulmuslimin aja.
langsung aja ya pada inti permasalah

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

->> 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/AVvXsEg06LRD0QWRSrUAijK5E5QQTXFt_hhyyvmPP4GXq-giWYNXLORmF39vzI64S639EeXm5_UAQVPUdpJBXAyMEiZbC7v7s4g9zgnnd99IhFFtr5JfeQyhdKdGfJQT7uEdG8aeOv52iYWvW5LI/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/AVvXsEg06LRD0QWRSrUAijK5E5QQTXFt_hhyyvmPP4GXq-giWYNXLORmF39vzI64S639EeXm5_UAQVPUdpJBXAyMEiZbC7v7s4g9zgnnd99IhFFtr5JfeQyhdKdGfJQT7uEdG8aeOv52iYWvW5LI/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.