Membuat Slide Fhoto Di Blog

Haloo Teman2ku semuanya.... gimana nih kabarnya... untuk kali ini saya akan membahas " Cara Membuat Slideshow photo Di Blogspot " . untuk melihat contoh seperti apa yang saya maksudkan, silahkan lihat di bawah header blog ini atau klo sudah gak ada lagi teman2 bisa lihat contohnya disini.

langkah langkah pembuatan Slide sebagai berikut:

*.Seperti biasa, silahkan teman2 menuju ke halaman dasbor klik tata letak trus edit html

*.masukkan kode di bawah ini dan letakkan di atas ]]></b:skin>

#myslides{
background:#t;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width:928px;/*Width of Carousel Viewer itself*/
height: 105px; /*Height should enough to fit largest content's height*/
margin: 15px 10px 0px 12px;
background:#t;
}

.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: 10px 15px ; /*margin around each panel*/
width:440px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#t;
height:80px;
border:1px solid #0113FE;
}

.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;
}

NOTES:
Silahkan teman2 Atur/sesuaikan dengan ukuran templatenya masing2 ( background, width, height, margin )

*.Dan Kemudian letatakkan kode di bawah ini setelah ]]></b:skin>atau sebelum kode</head>

<script SRC='http://web2feel.com/remedy/wp-content/themes/zinmagremedy/js/slider.js' TYPE='text/javascript'/>

*.selanjutnya copy kode di bawah ini dan letakkan diatas kode <div id='content-wrapper'> (bila ingin meletakkannya di bawah header) atau bisa juga meletakkannya di atas kode berikut <div id='footer-wrapper'> (bila ingin meletakkannya diatas footer)

<!-- Myslides -->
<div id='myslides'>
<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: 2, leftnav: [&#39;http://web2feel.com/images/rem1.jpg&#39;, -14, 30], rightnav: [&#39;http://web2feel.com/images/rem2.jpg&#39;, 0, 30]},
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>

<div class='stepcarousel' id='mygallery'>
<div CLASS='belt'>

<div class='panel'>
<a href='link target' target='new' title='#'><img alt='#' height='60' src='link gambar' width='420'/> </a>
</div>

<a href='link target' target='new' title='#'><img alt='#' height='60' src='link gambar' width='420'/> </a>
</div>

<a href='link target' target='new' title='#'><img alt='#' height='60' src='link gambar' width='420'/> </a>
</div>

<a href='link target' target='new' title='#'><img alt='#' height='60' src='link gambar' width='420'/> </a>
</div>

<a href='link target' target='new' title='#'><img alt='#' height='60' src='link gambar' width='420'/> </a>
</div>

<a href='link target' target='new' title='#'><img alt='#' height='60' src='link gambar' width='420'/> </a>
</div>

<a href='link target' target='new' title='#'><img alt='#' height='60' src='link gambar' width='420'/> </a>
</div>

<a href='link target' target='new' title='#'><img alt='#' height='60' src='link gambar' width='420'/> </a>
</div>

</div>
</div>

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

*.Terakhir Save.

NOTES:
Silahkan teman2 Atur/sesuaikan dengan ukuran templatenya masing2 ( background, width, height, margin )


Semoga Bermanfaat....