Cara Membuat Simple Slide Show

Slide Show ini lebih sederhana ketimbang cara membuat sliding feature post yang sebelum pernah saya posting. Tampilannya tidak kalah menarik dan di jamin tidak lelet ditempatkan di blog anda. Sekarang mari kita bahas cara membuat simple slide show ini, ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://bloekoetoek-blogonol.googlecode.com/files/blogonol-slideshow.js' type='text/javascript'/>
<style type='text/css'>
ul.slideshow{list-style:none; width:400px; height:250px; overflow:hidden; position:relative; margin:0; padding:0; font-family:Arial,Helvetica,Trebuchet MS,Verdana; }
ul.slideshow li{position:absolute; left:0; right:0}
ul.slideshow li.show{z-index:500}
ul img{width:400px; height:250px; border:none}
#slideshow-caption{width:500px; height:70px; position:absolute; bottom:0; left:0; color:#fff; background:#000; z-index:500}
#slideshow-caption .slideshow-caption-container{padding:5px 10px; z-index:1000}
#slideshow-caption h3{margin:0; padding:0; font-size:16px}
#slideshow-caption p{margin:5px 0 0 0; padding:0}
</style>

Klik Simpan Template
Selanjutnya klik Rancangan lagi
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<ul class="slideshow">
<li><a href="#"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcQi3bsrgNx2QZlW8usp1hLNhHTexySlZn65LYL0Q9jcq49f1nR9" title="judul gambar 1"
alt="deskripsi gambar 1" /></a></li>

<li><a href="#"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSC4hhV85L6rR8E_4orJuFFmgMQAGEkLahRizLN0TLLLFofgQdy" title="judul gambar 2" alt="deskripsi gambar 2" /></a></li>

<li><a href="#"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcTUulXmOmQfig52BbjbWnVHc76_hGioRxQqVZesUgv6vM2BP2D8" title="judul gambar 3" alt="deskripsi gambar 3" /></a></li>

<li><a href="#"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRIZzxTcdcqZdBKIXR5_p7c4xMloe9wnf5sbJ6FU7fSkV-_K3qO" title="judul gambar 4" alt="deskripsi gambar 4" /></a></li>
</ul>

Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu


Cara Membuat Simple Slide Show