Photo Slide Show

Script image slide show ini saya dapatkan ketika mendunlut template by “ www.falconhive.com “ . kemudian saya modif sedikit . ( red. salah satunya dengan meminjam file image dari free Css Templates ).

Source File | View Demo

Untuk menambahkan scipt image slide show tersebut yang perlu kita perhatikam ialah menambah credit by free css templates dan falconhive pada blog anda.

Cara Menambahkan script.

PERTAMA :

Buka tab Layout - Edit Html. pada bagian Css-nya ( sebelum tag : ]]></b:skin> ) masukan syntax Css slide ini.

#myslides{ 
background:none; 
}

.stepcarousel{ 
position: relative;overflow: scroll; 
width: 790px; /*lebar yg perlu kita sesuaikan*/ 
height: 165px;margin: 0px 14px 5px 14px;background:none; 
}

.stepcarousel .belt{ 
position: absolute; left: 0;top: 0;

}

.stepcarousel .panel{ 
float: left;   overflow: hidden;margin: 10px 17px ;  
width:175px; background:#F2F2F2; 
height:140px; border:1px solid #DFDFDF;

}

.stepcarousel .panel p{ 
text-align: left; overflow: hidden;margin: 5px 5px ;  
}

.stepcarousel .panel h2{ 
text-align: left;height:20px; overflow: hidden;  
margin: 2px 5px ;   font-size:16px; 
font-weight:bold;  text-align:center; 
font-family:Georgia,century gothic,Arial,verdana, sans-serif;

}

.stepcarousel .panel img{ 
float: left; background:#F2F2F2; 
margin: 10px 10px 10px 10px; padding:0px 0px; 
}

Note :


Perhatikan baris ke 7 di atas, merupakan nilai lebar yang perlu anda sesuaikan dengan ukuran lebar blog anda.

( red . untuk bahan perbandingan bagusnya anda melihat juga pada script aslinya ).

KEDUA :

Di atas atau d bawah tag penutup : </head> simpan javascript ini.

<script src='http://jaloee.googlepages.com/Sjquery.txt' type='text/javascript'/>

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

KETIGA :

Cari kode html

<div id='content-wrapper'>

dalam beberapa template mungkin berbeda-beda, bisa content, page wrapper dll.

setelah ketemu masukan di bawahnya kode html ini.

<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://i120.photobucket.com/albums/o190/jaloewig/mangga%20magazine/img11.gif&#39;, -14, 30], rightnav: [&#39;http://i120.photobucket.com/albums/o190/jaloewig/mangga%20magazine/img13.gif&#39;, -4, 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='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='Url Image.jpg' width='200'/> </a> 
</div>

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

Anda perhatikan baris antara yg berwarna merah merupakan kode yang perlu anda copy paste berulang-ulang sesuai kebutuhan anda untuk menampilkan beberapa photo.

Silahkan ganti atau isi Url image.jpg ( png.gif ). yang merupakan alamat gambar biasa anda menyimpan-nya semisal Photobucket. dll