Memasang gambar slide pada blog

Cara memasang slide show photo di sidebar Blog:


Mau pasang pasang widget slide show photo ini di blog anda? 
Caranya sebenarnya mudah kok, disini saya akan jelaskan bagaimana caranya memasang widget slide show photo secara step-by-step


1. Login ke blogger seperti biasanya.

2. Masuk ke dashboard blog anda, lalu Pilih opsi 'Tata Letak'. 

tutorial cara memasang slide show photo blog

3. Klik 'Tambahkan Gadget' lalu akan keluar pop-up, Pilih HTML/JavaScript.
tutorial cara memasang slide show photo blog

4. Beri judul di kolom judul, lalu masukan kode HTML ke dalam kotak konten seperti berikut ini:
tutorial cara memasang slide show photo blog

Anda tinggal copy-paste kode HTML (yang berwarna biru) dibawah ini:
<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 
250px;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 
250px;
   height: 250px;
}
</style>
<div id="content-slider">
<img src="
URL FOTO 1" />
<img src="URL FOTO 2" />
<img src="URL FOTO 3" />
<img src="URL FOTO 4" />
</div>


5. Ganti tulisan berwarna merah "URL FOTO 1/2/3/4" dengan url foto anda yang telah di host atau di upload ke website album foto online seperti photobucket / picasa / flicker, dll.

6. Anda bisa menambahkan sebanyak mungkin foto yang anda mau, tinggal menambahkan saja kode HTML URL FOTOnya. 

7.  Anda bisa mengedit tinggi & lebar dari foto tersebut. Kode HTML yang saya berikan cocok untuk sidebar blog berukuran 250 pixel atau lebih. Anda dengan mengganti kode HTML berwarna pink dengan ukuran yang anda mau sesuai dengan ukuran sidebar blog Anda. 

Posting Komentar

Post a Comment (0)

Lebih baru Lebih lama