Membuat Slideshow Warna Gradiasi Silver

Tutorial kali ini adalah tutorial lanjutan dari cara membuat slideshow ringan. Kode yang digunakan kurang lebih sama dengan yang sebelumnya,namun warna dan efek gradiasinya sekarang dibuat lebih real/nyata. Kita akan membuat versi silvernya. Mari ke TKP.

( Klik pada gambar untuk melihat tampilan preview nya)

1. Login ke Account/Dashboard blog anda.

2. Masuk ke menu Design/Rancangan.

3. Klik Add a Gadget dan pilih HTML/JavaScript.

4. Masukkan kode di bawah ini:

<style type="text/css">
#slider{width:580px;height:270px;background:-moz-linear-gradient(top, #aaa, #bbb, #bbb);position:absolute;overflow:hidden;}
#slider #sizzles img{width:550px;height:226px;position:absolute;margin:10px 14px;padding:0px;border:1px solid #888}
#slider .sizzle_caption{position:absolute;margin-top:15px;margin-left:5px;font-weight:bold;color:white;font-size:15px;}
#slider .sizzle_title{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK9zYHVRZiH9bxUfE5RmvnmdfSYPfrJICMF7WzRMrMZLZ1KQjvbY3MHZaFZbP7MiUuswIrQ_tabzR2zxZo7Fnj51YA9gAEg2il0eJxiqQyM3e6IUI02wKTPwzs9b8GzMSqPoTEd_zH7RM/') repeat transparent;position:absolute;left:15px;top:40px;height:28px;padding:0px 20px;}
#slider .sizzle_title a{color:#ffc909;font:20px calibri;font-weight:bold;text-shadow:0px 1px 0px #000;}
#slider .sizzle_title a:hover{color:#fff909;}
#slider #sizzle_items{background:-moz-linear-gradient(top, #bbb, #aaa, #999);position:absolute;bottom:0;left:0;line-height:10px;width:100%;padding:10px;}
#slider #sizzle_items,#subHeader #sizzle_items a{color:#fff;font-size:14px calibri;font-weight:bold;cursor:pointer;text-shadow:0px 1px 1px #000;}
#slider #sizzle_items a:hover{color:#000!important;text-shadow:0px 2px 2px #fff;}
#slider .title a{font-size: 18px;color:#888;line-height:25px;}
#slider .title h1{font-size:37px;margin:0px;padding:0px;color:#333;}
.pagehal{padding: 2px 8px;margin-right:5px;border:1px solid #444;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;background:-moz-linear-gradient(top, #eee, #666);}
.pageaktif {color:#fff;text-shadow:0 1px 2px #333;padding: 2px 8px;margin-right: 5px;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;border:1px solid #444;background:-moz-linear-gradient(top,#fff,#666,#444);}
</style>
<script type="text/javascript" src="http://h1.ripway.com/keichiro/JavaScript/jquery.js"></script>
<script type="text/javascript" src="http://h1.ripway.com/keichiro/JavaScript/slideshowleo.js"></script>

<div id="slider">
<div id="sizzles">
<a href="Link Tujuan Gambar"><img id="sizzleImg0" src="URL Gambar" /></a>
<div id="sizzle_title0" class="sizzle_title">
<a href="Link Tujuan Gambar">Judul</a>
</div>

<a href="Link Tujuan Gambar"><img id="sizzleImg0" src="URL Gambar" /></a>
<div id="sizzle_title0" class="sizzle_title">
<a href="Link Tujuan Gambar">Judul</a>
</div>

<a href="Link Tujuan Gambar"><img id="sizzleImg0" src="URL Gambar" /></a>
<div id="sizzle_title0" class="sizzle_title">
<a href="Link Tujuan Gambar">Judul</a>
</div>

<a href="Link Tujuan Gambar"><img id="sizzleImg0" src="URL Gambar" /></a>
<div id="sizzle_title0" class="sizzle_title">
<a href="Link Tujuan Gambar">Judul</a>
</div>

<a href="Link Tujuan Gambar"><img id="sizzleImg0" src="URL Gambar" /></a>
<div id="sizzle_title0" class="sizzle_title">
<a href="Link Tujuan Gambar">Judul</a>
</div>

<div class="clear"></div>
</div>
<div id="sizzle_items">
<a id="sizzle_item_0" class="pagehal" onclick="slider.home.header.expand(0);">1</a>
<a id="sizzle_item_1" class="pageaktif" onclick="slider.home.header.expand(1);">2</a>
<a id="sizzle_item_2" class="pagehal" onclick="slider.home.header.expand(2);">3</a>
<a id="sizzle_item_3" class="pagehal" onclick="slider.home.header.expand(3);">4</a>
<a id="sizzle_item_4" class="pagehal" onclick="slider.home.header.expand(4);">5</a>
</div>
<script type="text/javascript">
slider.home.header.items[0] = [0];
slider.home.header.items[1] = [1];
slider.home.header.items[2] = [2];
slider.home.header.items[3] = [3];
slider.home.header.items[4] = [4];   
slider.home.header.set_timer();
</script></div>

5. Ganti teks berwarna hijau dengan url link tujuan gambar (halaman yang terbuka ketika gambar di klik)

6. Ganti teks berwarna merah dengan url gambar (url tempat anda menyimpan gambar)

7. Ganti teks berwarna biru dengan judul post/gambar

Contoh format penulisan:

<a href="http://anggaleoputra.blogspot.com/2010/09/free-blogger-template-3-kolom-rounded.html"><img id="sizzleImg0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLZ88p3g4KeAXoOMGEpm5Mc5Xsexw5en-suQ8RCrkc1651bINwKMGxbGvnWVZ9RKdBHQUnmA0JNRsr1MqPJGseMfduCpDDl0a3Po84CC9KZdCIgPX9u2YaEKRnmom4zrsx7rY32pUhb78/" /></a>
<div id="sizzle_title0" class="sizzle_title">
<a href="http://anggaleoputra.blogspot.com/2010/09/free-blogger-template-3-kolom-rounded.html">Rounded Black</a>
</div>

Nb: Untuk contoh diatas,sebaiknya menggunakan gambar berukuran 550x260px.. agar gambar tidak berubah bentuk ataupun terlihat memanjang dan memendek. Atau anda bisa mengkreasikan ukurannya sendiri sesuai dengan lebar kolom widget anda.

8. Save widget.

9. Beralih ke menu Edit HTML, cari kode </head> dan ganti kode tersebut dengan kode dibawah ini :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
</head>

10. Save template , dan lihat hasilnya.

Semoga bermanfaat.