ehem ehem..batuk dulu sebelom mulai..hahah kayak guru SD aja.xixixi. oke  klo dari kemaren saya share tentang gosip..ehh ternyata gosip itu membosankan hehe  maka dari itu pada kesempatan kali ini saya share tutorial blogger  cara bikin widget auto slide. dengan widget ini pengunjung bisa lebih mengetahui artikel favorit blog anda. postingan serupa pernah saya bahas sebelomnya tips menambah fitur slider postingan di blogger. saya sarankan agar link/URL artikel yang anda tampilakan dalam widget ini adalah artikel andalan blog sobat.





OKE LANGSUNG SAJA YAA.

1.  silahkan login bloger masing masing

2.  klik tab menu design | edit html

3. disini ada dua cara yang bisa anda coba.(tergantung template blog yang sedang anda pakai)   silahkan cari kode <body> atau </head>

4. setelah ketemu salah satu kode di atas silahkan copy paste kode dibawah ini dan paste di bawah salah satu kode di atas.(pilih salah satu saja)


<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:860px;
height:230px;
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>


5. setelah selesai silahkan klik simpan .

6. klik lagi menu design | page element |add a gadget | lalu pilih javascript/html

7. kemudian copy paste kode dibawah ini .


<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="http://cara2daninfo.blogspot.com/2011/09/cara-bikin-widget-entri-populer-slide.html"><img class="smooth_slider_thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSL2Cl48zyYlBDINtz5ipPmBQgLn_OZrTQABpXD2t90AwcyIJgSD7yeiZLyfEnNl3uzyUk6tOobJnbufAoFSQBpR4Qzz72-0W8J0dhL-9ZqyNfGVPFESl_0csgi_QfQb81Z3Xt5K2k9Ws/s1600/dofollow250A.jpg" alt="" /></a>
<h2><a href="http://cara2daninfo.blogspot.com/2011/09/cara-bikin-widget-entri-populer-slide.html">cara bikin widget entri popular slideshow</a></h2>
<span>ditengah malam yang sunyi senyap tiba-tiba terimspirasi bikin posting tutorial bloger hehehe..
dari pada melamun dan bersedih karena sikap seseorang yang tak mau berubah mendingan tulis post hitung-hitung buat pelajaran pribadi(catatan online) benar gak? hehe..</span>
<p class="more"><a href="http://cara2daninfo.blogspot.com/2011/09/cara-bikin-widget-entri-populer-slide.html">Selengkapnya...</a></p>
<!-- /smooth_slideri -->
</div>
<div class="smooth_slideri">
<!-- smooth_slideri --><a href="http://cara2daninfo.blogspot.com/2011/08/software-cara-belajar-sholat.html"><img class="smooth_slider_thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqwgDVa13SAl5XnpUgh87bqFpwkSvAYcKXrAfY7ARnqqcUv7YS2Ptnu6W42FzWrB-BUaJkWaivtF8tod3dd6faGC5QP62eZbivFe8DAhWbCs0qZNGzjq3mA4z09H8_ap0TcWtG7ykOHDk/s1600/1.jpg" alt="" /></a>
<h2><a href="http://cara2daninfo.blogspot.com/2011/08/software-cara-belajar-sholat.html">aplikasi untuk belajar sholat</a></h2>
<span>met pagi all pengunjung blog rajacolek and princeess farah (yang selalu ada dalam hatiku) ehem ehem ngarep.com heheh
bagi sebagian orang dewasa kadang malu untuk belajar kepada orang lain apalagi belajar sama orang yang usianya lebih muda..miskipun dirinya tidak begitu tau cara2 sholat yang benar</span>
<p class="more"><a href="http://cara2daninfo.blogspot.com/2011/08/software-cara-belajar-sholat.html">Selengkapnya...</a></p>
<!-- /smooth_slideri -->
</div>
<div class="smooth_slideri">
<!-- smooth_slideri --><a href="http://cara2daninfo.blogspot.com/2011/04/happy-bday-sayang.html"><img class="smooth_slider_thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0fVU6eA6x4ctusfSpWuIF5Hv4JKOGMspXjnLAZoAd-gnI2waFmsslq59kMo3i4H52kq4VgN6NN0WNi6qgqI3x9bkiQ-zOE45MHn1w_ZDEh8PllatjADa3dDfLm3C2t4YgZ2mRgEJi-TY/s1600/c4dcc2cc0179a0.gif" alt="" /></a>
<h2><a href="http://cara2daninfo.blogspot.com/2011/04/happy-bday-sayang.html">ucapan ulang tahun buat pacar</a></h2>
<span>HAPPY B'DAY MY LOVE....SEMOGA SEHAT SELALU DAN SELALU SEMANGAT DLAM BERAKTIFITAS DAN TAK LUPA SEMOGA SEMAKIN SAYANG GAN PACARMU RAJA COLEK
DAN TERARHIR SEMOGA FARAH SUKSES SELALU APAPUN YANG DI INGIKANNYA DI DUNIA MAUPUN DI AHERAT.</span>
<p class="more"><a href="http://cara2daninfo.blogspot.com/2011/04/happy-bday-sayang.html">Selengkapnya...</a></p>
<!-- /smooth_slideri -->
</div>
<div class="smooth_slideri">
<!-- smooth_slideri --><a href="http://cara2daninfo.blogspot.com/2011/09/cara-pasang-auto-readmore-tampil-dengan.html"><img class="smooth_slider_thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8egw5U4oZaDvU-zvUNUZ9e3RMLJdAwCMsvnozo8Dq4YBACWd8bMEcp8Qf0erRpe5Q_K8gxb5ojcrLoNlomLn589vb_gNtVP3IjomlsWu2at9_N10qye4-pljJD0oZDDsbLoldGk0mwiU/s1600/ScreenHunter_01+Sep.+24+18.24.gif" alt="" /></a>
<h2><a href="http://cara2daninfo.blogspot.com/2011/09/cara-pasang-auto-readmore-tampil-dengan.html">cara pasang auto readmore bergambar</a></h2>
<span>mungkin sobat bingung yaaa readmore tampil dengan gambar?? hehehe habis bingung mau bikin judulnya
hehe...itu maksudnya postingan yang tampil di homepage ketika readmore otomatis itu berfungsi akan menampilkan gambar disetiap postingan kecuali postingan sobat tidak berisi gambar.
</span>
<p class="more"><a href="http://cara2daninfo.blogspot.com/2011/09/cara-pasang-auto-readmore-tampil-dengan.html">Selengkapnya...</a></p>
<!-- /smooth_slideri -->
</div>
<div class="smooth_slideri">
<!-- smooth_slideri --><a href="http://cara2daninfo.blogspot.com/2011/09/cara-modifikasi-meta-taq-agar-di-sukai.html"><img class="smooth_slider_thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkOLPJPPNv1bMOzUJHdgDgoFfvJ3wXv2bTya-YyJEioPlJ2eOlKv3_9v93j0dwGla_Ooq2O4G7kL321p96SNnBlqoHbh2I1M9VMsV4uFCDrXLlcgpbZt2pTFOcXkSdxhrbOKwwPRLfHSg/s1600/rajaklik.jpg" alt="" /></a>
<h2><a href="http://cara2daninfo.blogspot.com/2011/09/cara-modifikasi-meta-taq-agar-di-sukai.html">cara modifikasi meta taq agar disukai search engine</a></h2>
<span>meta taq keyword berfungsi untuk meningkatkan SEO (search engine optimization) agar blog/website lebih mudah dianalisa,di-crawl dan di-index search engine google,yahoo,bing dan yang lainnya, </span>
<p class="more"><a href="http://cara2daninfo.blogspot.com/2011/09/cara-modifikasi-meta-taq-agar-di-sukai.html">Selengkapnya...</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>
<li><a id="sldr4" href="#" >4</a></li>
<li><a id="sldr5" href="#" >5</a></li>
</ul>
<br class="sldrbr" />
<div class="sldrlink"><a href="http://newbeingetop.wordpress.com/2011/12/07/cara-bikin-wid…e-artikel-blog/ " target="_blank">rajacolek</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>


KETERANGAN:

silahkan ganti  yang saya beri warna BIRU dengan  URL /link artikel yang ingin sobat tampilkan.

ganti yang berwarna MERAH dengan  URL gambar artikel anda.

ganti yang berwarna  ORINGE  dengan diskripsi singkat artikel anda.

ganti yang berwarna UNGU dengan judul artikel anda.

UPDATE:

jika kode script di atas error. anda bisa download     di link dibawah ini

http://www.ziddu.com/download/17737077/scriptautosliderkontenblog.txt.html

blog wordpress gratisan  agak sensitiv dengan kode kode script .

TIPS MENDAPATKAN LINK GAMBAR DI SEBUAH ARTIKEL:

buka artikel anda kemudian arahkan cursor mose ke gambar yang di inginkan  / lalu klik kanan tepat di gambar yang ingin diambil linknya./ dan pilih copy link location.  selesai....

contoh tuttorial  di atas menampilakan 5 artikel slideshow  dalam widget  tersebut, anda bisa menambah lebih banyak artikel untuk ditampilkan  cukup dengan menambahkan kode berikut

 <!-- /smooth_slideri -->
</div>
<div class="smooth_slideri">
<!-- smooth_slideri -->

setelah itu masukkan link  artikel+link gambar|diskripsi singkat | dan judul artikel.  kode scriptnya anda tiru saja yang sudah ada di atas. INFO ini jika anda ingin menambah lebih dari 5 artikel yang akan ditampilkan.

OYA...JANGAN LUPA DI SIMPAN YAAH...:D

selamat mencobat semoga Tutorial Blogger ini bermamfaat dan semoga berhasil...ukuran lebar dan tinggi widget bisa anda  ganti di bagian CCS nya.

berikan tanggapan anda ............................................makasih..