Pasang Image Slider di Blog

Dalam masalah modifikasi template, banyak para blogger menemukan kreatifitas-kreatifitas, yang biasa disebut widget content. Nah buat temen-temen yang ingin pasang Image Slider di blognya jangan khawatir karna tulisan ini akan membantu anda memenuhi keinginan itu. Lalu bagaimana caranya? ikuti langkah-langkah dibawah ini:
1. Sign In ke blog anda.

2. Tuju tab Layout -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Pasang script dibawah ini persis di ATAS </head>

<script src='http://roele112.googlepages.com/jquery.js' type='text/javascript'></script>
<script src='http://roele112.googlepages.com/slider.js' type='text/javascript'></script>

7. Setelah itu cari kode berikut ini:

]]></b:skin>

8. Setelah ketemu, tambahkan kode dibawah ini tepat di ATAS kode diatas tadi.

#myslides{
background:#2c3133; /*background slider foto bisa diganti*/
}
.stepcarousel{
position: relative; /*jangan diganti*/
overflow: scroll; /*jagan diganti*/
width: 972px; /*bisa dirubah sesuai width outer-wrapper*/
height: 165px; /*bisa dirunah sesuai tinggi yang diinginkan*/
margin: 0px 14px 5px 14px;
background:#2c3133;
}
.stepcarousel .belt{
position: absolute; /*jangan diganti*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*jangan diganti*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px 17px ; /*margin setiap panel*/
width:220px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#202325;
height:140px;
border:1px solid #393f42;
}
.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:#040404; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px 10px 10px 10px; /*margin around each panel*/
padding:0px 0px;
}

9. Selanjutnya cari kode dibawah ini:
<div id='content'> atau <div id='outer-wrapper'>

10. Setelah ketemu, tambahkan kode dibawah ini tepat di ATAS kode tadi.


<!-- Myslides -->
<div id='myslides'>
<script type='text/javascript'>
stepcarousel.setup({
 galleryid: 'mygallery', //id of carousel DIV
 beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
 panelclass: 'panel', //class of panel DIVs each holding content
 panelbehavior: {speed:500, wraparound:true, persist:true},
 defaultbuttons: {enable: true, moveby: 2, leftnav: ['http://web2feel.com/images/rem1.jpg', -14, 60], rightnav: ['http://web2feel.com/images/rem2.jpg', 0, 60]},
 statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
 contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<div class='stepcarousel' id='mygallery'>
<div class='belt'>
<div class='panel'>
<a href='#' title='Righteous Kill'>
<img alt='#' height='120' src='http://web2feel.com/remedy/wp-content/uploads/rkl.jpg' width='200'/>
</a>
</div>
<div class='panel'>
<a href='#' title='50 cents'>

<img alt='#' height='120' src='http://web2feel.com/remedy/wp-content/uploads/50c.jpg' width='200'/>
</a>
</div>
<div class='panel'>
<a href='#' title='Remedy Games'>
<img alt='#' height='120' src='http://web2feel.com/remedy/wp-content/uploads/max.jpg' width='200'/>
</a>
</div>
<div class='panel'>
<a href='#' title='Batman is back'>
<img alt='#' height='120' src='http://web2feel.com/remedy/wp-content/uploads/bats.jpg' width='200'/>
</a>
</div>
<div class='panel'>
<a href='#' title='Post with links'>
<img alt='#' height='120' src='http://web2feel.com/remedy/wp-content/uploads/crys.jpg' width='200'/>
</a>

</div>
</div>
</div>
</div>
<!-- /Myslides -->