Percantik blogmu dengan menu slide show bergaya tombol kanan kiri

Untuk sobat blogger yang ingin membuat slide show bergaya tombol kanan kiri silahkan ikuti langkah mudah berikut ini

1.Login ke akun blogger dashboard pilih layout(tata letak)
2.Klik Edit HTML Download Full Template
3.Centang Expand Widget Templates
4.Cari kode yang seperti ini </head>
5.Copy paste kode dibawah ini persis di atas kode tadi

<script src='http://h1.ripway.com/asepcanda/jquery-1.2.6.min.js '/>
<script src='http://h1.ripway.com/asepcanda/slider.js '/>
<style type='text/css'>
#mygallery{overflow: hidden;}
</style>

<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;mygallery&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 3, leftnav: [&#39;http://img2.pict.com/20/41/65/944053/0/tl.jpg&#39;, -48, 0], rightnav: [&#39;http://img2.pict.com/0f/3c/c8/944061/0/tr.jpg&#39;, 0, 0]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
}

</script>

6.Cari kode yang seperti ini ]]></b:skin>
7.Copy paste kode dibawah ini persis di atas kode tadi

#myslides{

background:#000 url(http://img3.imageshack.us/img3/3386/asepcanda.jpg) repeat-x;
width: 800px;
height:165px;
margin-bottom:5px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 800px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;

}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;

}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/

}

.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}

8.Save template
Catatan warna ungu itu untuk latar belakang bagraound silahkan ganti dengan link image kepunyaan sobat bisa juga dengan poto seperti punya saya9.Klik Page Element
10.Klik Add a gadget HTML/javascrift copy paste kode dibawah ini

<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- 1st Template -->
<div class="panel">
<a href="http://masih-berharap.blogspot.com/" target="blank" title="Still wish blog"> <img alt="Blog asep canda" width="160" src="http://img10.imageshack.us/img10/6816/125g.gif" height="110"/> </a>
</div>
<!-- end code of 1st -->


<!-- 1st Template -->
<div class="panel">
<a href="http://masih-berharap.blogspot.com/" target="blank" title="Still wish blog"> <img alt="Blog asep canda" width="160" src="http://img44.imageshack.us/img44/2737/26800962.png" height="110"/> </a>
</div>
<!-- end code of 1st -->

<!-- 1st Template -->
<div class="panel">
<a href="http://masih-berharap.blogspot.com/" target="blank" title="Still wish blog"> <img alt="Blog asep canda" width="160" src="http://img44.imageshack.us/img44/9822/56515930.png" height="110"/> </a>
</div>
<!-- end code of 1st -->

<!-- 1st Template -->
<div class="panel">
<a href="http://masih-berharap.blogspot.com/" target="blank" title="Still wish blog"> <img alt="Blog asep canda" width="160" src="http://img225.imageshack.us/img225/672/61057460.png" height="110"/> </a>
</div>
<!-- end code of 1st -->

<!-- 1st Template -->
<div class="panel">
<a href="http://masih-berharap.blogspot.com/" target="blank" title="Still wish blog"> <img alt="Blog asep canda" width="160" src="http://img10.imageshack.us/img10/6816/125g.gif" height="110"/> </a>
</div>
<!-- end code of 1st -->


<!-- 1st Template -->
<div class="panel">
<a href="http://masih-berharap.blogspot.com/" target="blank" title="Still wish blog"> <img alt="Blog asep canda" width="160" src="http://img44.imageshack.us/img44/2737/26800962.png" height="110"/> </a>
</div>
<!-- end code of 1st -->

<!-- 1st Template -->
<div class="panel">
<a href="http://masih-berharap.blogspot.com/" target="blank" title="Still wish blog"> <img alt="Blog asep canda" width="160" src="http://img44.imageshack.us/img44/9822/56515930.png" height="110"/> </a>
</div>
<!-- end code of 1st -->

<!-- 1st Template -->
<div class="panel">
<a href="http://masih-berharap.blogspot.com/" target="blank" title="Still wish blog"> <img alt="Blog asep canda" width="160" src="http://img225.imageshack.us/img225/672/61057460.png" height="110"/> </a>
</div>
<!-- end code of 1st -->




</div></div></div>

Lalu save beres dech gitu cara nya sob gampang kan gitu aja kok repot
Jika ada pertanyaan silahkan tinggalkan komentarnya dibawah ini ...
Trik ini udah saya uji coba yang mau lihat demonya silahkan >> Lihat disini

Posted in: Info Terkini,Tip Blogging,Tip Trik Internet