.
Membuat Simple Slide Show Sederhana
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>
Selanjutnya klik Rancangan lagi
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya
Selamat mencoba dan sukses selalu
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'/>Klik Simpan Template
<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:200px; 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>
Selanjutnya klik Rancangan lagi
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya
<ul class="slideshow">Klik Simpan dan lihat hasilnya
<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>
Selamat mencoba dan sukses selalu
--------------------
BlackBerry
--------------------
BlackBerry
BlackBerry Storm
Iphone 3Gs
Sony Ericsson K660i
Notebook Sony VAIO
Yahoo! Messenger
Sony Ericsson Xperia X1
Notebook ACER
Love Letters
Notebook COMPAQ
Apple MacBook Pro
O2 smartphone
Bloo for Android
TweetDeck
--------------------
BlackBerry
--------------------
BlackBerry
BlackBerry Storm
Iphone 3Gs
Sony Ericsson K660i
Notebook Sony VAIO
Yahoo! Messenger
Sony Ericsson Xperia X1
Notebook ACER
Love Letters
Notebook COMPAQ
Apple MacBook Pro
O2 smartphone
Bloo for Android
TweetDeck
--------------------
----------------------------
----------------------------
KOSONG... ^_^
----------------------------