Cara Membuat Sliding Feature Post

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut
di bawah kode ]]></b:skin>

<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/smoothscroll.js' type='text/javascript'/>
<link href='http://www.digitalbunch.com/wp-content/uploads/2011/07/smooth-slider-hacktutors.css' id='smooth_slider_css-css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/hacktutorsscript.js' type='text/javascript'/>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/jquery-hacktutors.js' type='text/javascript'/>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/slide1.js' type='text/javascript'/>
<style media='screen' type='text/css'>
#smooth_sldr {
width:560px;
height:180px;
background-color:#ffffff;
border:0px solid #999999;
}
#smooth_sldr_items {
padding:10px 18px 0px 26px;
}
#smooth_sliderc {
width:516px;
height:140px;
}
.smooth_slideri {
width:506px;
height:140px;
}
.sldr_title {
font-family:Georgia, Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
font-style:normal;
color:#000000;
}
#smooth_sldr_body h2 {
line-height:17px;
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
font-style:normal;
color:#000000;
margin:0px 0 5px 0;
}
#smooth_sldr_body h2 a {
color:#000000;
}
#smooth_sldr_body span {
font-family:Arial, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
font-style:normal;
color:#333333;
}
.smooth_slider_thumbnail {
float:left;
margin:0px 5px 0 0px;
width:165px;
height:120px;
border:1px solid #000000;
}
#smooth_sldr_body p.more a {
color:#000000;
font-family:Arial, Arial, Helvetica, sans-serif;
font-size:12px;
}
#smooth_sliderc_nav li {
border:1px solid #333333;
font-size:12px;
font-family:Arial, Arial, Helvetica, sans-serif;
}
#smooth_sliderc_nav li a {
color:#000000;
}
.sldrlink {
padding-right:40px;
}
.sldrlink a {
color:#333333;
}
#slider {
background:#333;
height:205px;
display:block;
margin:22px 0 10px 10px;
width:565px;
}
</style>

Klik Save Template
Selanjutnya klik lagi Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<div id="slider">
  <script type="text/javascript">
stepcarousel.setup({
galleryid: 'smooth_sliderc', //id of carousel DIV
beltclass: 'smooth_sliderb', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'smooth_slideri', //class of panel DIVs each holding content
autostep: {enable: true, moveby:1, pause:7000},
panelbehavior: {speed:500, wraparound: false, persist:false},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://www.shoutmeloud.com/wp-content/plugins/smooth-slider/images/button_prev.png', -8, 70], rightnav: ['http://www.shoutmeloud.com/wp-content/plugins/smooth-slider/images/button_next.png', 0, 70]},
statusvars: ['imageA', 'imageB', 'imageC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
onslide:function(){
 jQuery("#smooth_sliderc_nav li a").css("fontWeight", "normal");
 jQuery("#smooth_sliderc_nav li a").css("fontSize", "12px");
 var curr_slide = imageA;
   jQuery("#sldr"+curr_slide).css("fontWeight", "bolder");
 jQuery("#sldr"+curr_slide).css("fontSize", "17px");

  }
})
</script>
  <noscript>
  </noscript>
  <div id="smooth_sldr">
    <div id="smooth_sldr_items">
      <div id="smooth_sldr_body">
        <div id="smooth_sliderc">
          <div class="smooth_sliderb">
            <div class="smooth_slideri">
              <!-- smooth_slideri --><a href="MASUKKAN ALAMAT LINK ARTIKEL 1 ANDA"><img class="smooth_slider_thumbnail" src="MASUKKAN ALAMAT GAMBAR ANDA 1" alt="MASUKKAN JUDUL 1 DI SINI" /></a>
              <h2><a href="MASUKKAN ALAMAT LINK ARTIKEL 1 ANDA">MASUKKAN JUDULNYA DI SINI 1</a></h2>
              <span>MASUKKAN KETERANGAN TENTANG LINK ARTIKEL ANDA 1 DI SINI</span>
              <p class="more"><a href="MASUKKAN ALAMAT LINK ARTIKEL 1 ANDA">Read More</a></p>
              <!-- /smooth_slideri -->
            </div>
            <div class="smooth_slideri">
              <!-- smooth_slideri --><a href="MASUKKAN ALAMAT LINK ARTIKEL 2 ANDA"><img class="smooth_slider_thumbnail" src="MASUKKAN ALAMAT GAMBAR 2 ANDA" alt="MASUKKAN JUDUL 2 DI SINI" /></a>
              <h2>
                <a href="MASUKKAN ALAMAT LINK ARTIKEL 2 ANDA">MASUKKAN JUDUL 2 DI SINI</a>
              </h2>
              <span>MASUKKAN KETERANGAN TENTANG LINK ARTIKEL 2 ANDA DI SINI</span>
              <p class="more"><a href="MASUKKAN ALAMAT LINK ARTIKEL 2 DI SINI">Read More</a></p>
              <!-- /smooth_slideri -->
            </div>
            <div class="smooth_slideri">
              <!-- smooth_slideri -->
<a href="MASUKKAN ALAMAT LINK ARTIKEL 3 ANDA"><img class="smooth_slider_thumbnail" src="MASUKKAN ALAMAT GAMBAR 3 ANDA" alt="MASUKKAN JUDUL 3 DI SINI" /></a>
              <h2><a href="MASUKKAN ALAMAT LINK ARTIKEL 3 ANDA">MASUKKAN JUDUL 3 DI SINI</a></h2>
              <span>MASUKKAN KETERANGAN TENTANG ARTIKEL 3 ANDA DI SINI</span>
              <p class="more"><a href="MASUKKAN ALAMAT LINK ARTIKEL 3 ANDA">Read More</a></p>
              <!-- /smooth_slideri -->
            </div>
            <!-- /smooth_slideri -->
          </div>
        </div>
      </div>
    </div>
    <ul id="smooth_sliderc_nav">
      <li><a id="sldr1" href="#" >1</a></li>
      <li><a id="sldr2" href="#" >2</a></li>
      <li><a id="sldr3" href="#" >3</a></li>
    </ul>
    <br class="sldrbr" />
    <div class="sldrlink"><a href="http://blogonol.blogspot.com/" rel="follow" target="_blank">blogonol</a></div>
  </div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#smooth_sliderc_nav a').click(function() {
var id = jQuery(this).attr('id');
        var step_to_slide = id.replace(/sldr/, "");
        document.getElementById(id).href = "javascript:stepcarousel.stepTo('smooth_sliderc', "+step_to_slide+")";
    });
});
</script>

Silahkan ganti tulisan yang berwarna merah sesuai petunjuk
Catatan:
Yang dimaksud dengan MASUKKAN ALAMAT LINK ARTIKEL 1 ANDA adalah alamat link pertama anda. Misalnya http://blogonol.blogspot.com/2011/04/cara-memvalidasi-css.html alamat tersebut anda masukkan lagi sesuai perintah. Contohnya seperti di bawah ini.

Petunjuknya seperti ini
<!-- smooth_slideri --><a href="MASUKKAN ALAMAT LINK ARTIKEL 1 ANDA"><img class="smooth_slider_thumbnail" src="MASUKKAN ALAMAT GAMBAR ANDA 1" alt="MASUKKAN JUDUL 1 DI SINI" /></a><h2><a href="MASUKKAN ALAMAT LINK ARTIKEL 1 ANDA">MASUKKAN JUDULNYA DI SINI 1</a></h2>               <span>MASUKKAN KETERANGAN TENTANG LINK ARTIKEL ANDA 1 DI SINI</span>               <p class="more"><a href="MASUKKAN ALAMAT LINK ARTIKEL 1 ANDA">Read More</a></p>          
              <!-- /smooth_slideri -->