Rabu, 24 Desember 2014

Cara Memasang Widget Slide Show Photo Pada Sidebar Blog



1. Login ke blogger.

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

3. Klik 'Tambahkan Gadget' akan keluar pop-up, Pilih HTML/JavaScript.

4. Beri judul di kolom judul, masukan kode HTML ke dalam kotak konten


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, atau bisa juga diganti dengan url dari foto/gambar di blog anda.

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 cocok untuk sidebar blog berukuran 250 pixel atau lebih. Anda bisa  mengganti kode HTML dengan ukuran yang anda mau sesuai dengan ukuran sidebar blog Anda. 



 


 

1 komentar: