Cara Membuat Simple Slide Show

Cara Membuat Simple Slide Show

13 Comments

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



"keep spirits and do the best"
Mau belajar trick dan tips blogging lengkap dan mudah?... BACA DI SINI

About the Author

Blogonol adalah Blog - 0 atau blog kosong dengan konten tutorial blog, seo, widget, template gratis, dan blog info yang dikonsep secara sederhana untuk belajar membangun blog yang lebih baik.