Cara membuat gambar slide show sperti pada atas blog ini

1.Login ke akun blogger anda, masuk ke dashboard--> Design - -> Edit HTML.

2.cari kode ini </head> dengan scroll, ane saranin pake find (crtl+F) .

3.Copy code di bawah ini dan paste sebelum kode ini </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/AVvXsEjl4z1Iqlm7QawSEo4aso2ChWBVsceJFe51K0_zco45vpEYjTm_nL-9TBJZfyipy5Z8lbaNYopRM9ciq7fp-crf5QUVACUNZOpSAsjQafvR52JVHYeQ8dZ9uU5RMRxSekR1_Hy2LcDfg7fg/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/AVvXsEjl4z1Iqlm7QawSEo4aso2ChWBVsceJFe51K0_zco45vpEYjTm_nL-9TBJZfyipy5Z8lbaNYopRM9ciq7fp-crf5QUVACUNZOpSAsjQafvR52JVHYeQ8dZ9uU5RMRxSekR1_Hy2LcDfg7fg/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>

4.setelah di paste save  template anda.

5.setelah itu pergi ke  Layout --> Page Elements.

6.Click pada 'Add a Gadget'.

7.pilih 'HTML/Javascript' dan salin kode berikut :

<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>

NOTE : ganti ato replace,

SLIDE-X-LINK-HERE dengan link postingan( link jika gambar d klik).

SLIDE-X-IMAGE-ADDRESS-HERE dengan link/ alamat gambar ato foto agan sekalian.

ini sebagai contohnya :

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYY_1NacZuVE9SC5MFrhP11pSIh1l7P6_mFUKvHqBMNDNJvk2MAsgQ8CqGJOIhEJygxfybdpIhrlEaSU30iSA1O5s1PrM5psyqujM2PC2R1VhYvHgc5s5e-4cOHQFvowDwu-hjXldffUzI/s1600/slide1.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicR2G3pqELsqcF3BaQNp-rm9znEmqxYebgIuFInmx1UUwfv_pE1G8H6ovGwJnPAZvV0twSlKIk88Ji15iyJtRo9XdGXEg37Vxl-5YiQI-Vo-Q2QLge_Spb4YWfLIrq8E0Z1H34_AjNnwbL/s1600/slide2.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0172zJLvg11oepk4-0X1KiZbV4l_BTFMLYvmzpUDIP2uymddZ9k8PD3s4nyP_DAphQKLeA6a0v0WYzo6-4wyhJfhA98MYFfxJI1XoslR3aeToBZvYcwZdgySDmVpf401bQzigfCecmpHi/s1600/slide3.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuol04YewwQzEqd80zyeDCOpkvMP6iNb5ExLzATVIJd2zFOCmCduGYSX3xMyY8P_BZSod0mxdcNBYWOur9nOXw_U8lhpJpC52G2pKzJ0flaqSf4ueUhQJO6w96uujqthv5uk7Pf6Kg97eA/s1600/slide4.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrA5WfuuegNYrU69f-Ah8zh0QPvfyPnzixC4n7dsEMMQaLYNzvLzFltvHLecBLnB1ystaOxXmhDSQvfEofuiYOmULeJx0DjlJF2KKWNdV56WcE4cO5m4jQLI3geP5NABF2XwXrCMjGXEhI/s1600/slide5.jpg'/></a></li>
</ul>
</div>

 sumber :http://gj37765.blogspot.com/2011/03/how-to-add-smart-jquery-featured-slider.html
 ( setelah di edit dan di slin seadanya)