Ketika kita bekerja dengan Blogger
pastinya menginginkan adanya fitur tambahan slide show foto biar blog
keliahatan lebih dinamis. Dengan Memiliki blog yang bagus sudah tentu menjadi
impian semua blogger, akan tetapi kita harus memperindah tampilan blog kita
agar pengunjung blog lebih betah lagi membaca artikel-artikel yang kita posting.
Sebenarnya tampilan blog yang simple & dinamis lebih disukai oleh reader
atau pembaca. Akan tetapi jauh lebih bagus bila kita mempunyai ciri khas pada
blog kita, salah satunya bisa dengan cara memasang wigdet slide show photo yang
berisi foto-foto kita pada sidebar blog.
Fitur Widget ini berisi foto-foto kita yang akan
tampil secara bergantian secara otomatis. Memasang widget ini jauh lebih
praktis & menghemat tempat daripada menyimpan foto di widget
'Gambar/Picture', karena semua foto-foto kita bisa tampil bergantian secara
slide hingga tampak seperti menonton sebuah video. Berikut cara pembuatannya di
Blog
1.
Login Ke Blogger
2.
Selanjutnya Masuk Ke Menu tata Letak Dan Atur Akan di Letakan Dimana Widget Slide Show,
 |
| HALAMAN TATA LETAK BLOG |
3. Kemudian Tambahkan Gadget dan Pilih Widget HTML/Javascript
4.
Selanjutnya Paste Code Dibawah ini, di halaman HTML/JavaScript, lihat gambar dibawah ini
Script Slide Show Foto
 |
| COPY SCRIPT DIBAWAH KE HALAMAN 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" />
<img src="URL FOTO 5" />
</div>
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" />
<img src="URL FOTO 5" />
</div>
5.
Ganti tulisan berwarna kuning "URL FOTO 1/2/3/4/5" 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.
8.
Hasilnya akan Tampak Seperti Gambar dibawah
ini
 |
| HASIL SLIDE SHOW |
Selamat Mencoba
No comments:
Post a Comment