Tempat Berbagi Berita, Cerita dan Derita

Kategori Yang Kalian Suka

Post ini diterbitkan pada : Tuesday, October 12, 2010

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)

Slideshow

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('http://lh4.ggpht.com/_f7ChQS4URE4/TJIhQ5YacCI/AAAAAAAABEA/DVbK4tBj5Uo/bgslider.png') 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="http://lh6.ggpht.com/_f7ChQS4URE4/TJJWhmitqxI/AAAAAAAABEM/tvQFyFMMVnM/Rounded%20Black%20CSS3.jpg" /></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.

Do you like this post? You can share it with your community..
Dapatkan update artikel lewat email

Artikel Terkait

5 comments:

Wah mantab sekali ini . . .
Salam.

Salam kenal juga. ^^

Sob,
Error nih
Gambarnya gak keganti"

yg ini gambarnya error sob
kalo mau dicoba
pakek trik ane nih

sama kayak disini

http://anggaleoputra.blogspot.com/2010/09/cara-membuat-slideshow-jquery.html

cuma kode yg atas ane rubah jadi gini

monggo dicoba

/* Slider content------- */
#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('http://lh4.ggpht.com/_f7ChQS4URE4/TJIhQ5YacCI/AAAAAAAABEA/DVbK4tBj5Uo/bgslider.png') 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);}

]]>

Reyz: thanks atas infonya.. mungkin lebih jalan kalo pake cara lama kali yah hehe..^^

My Tweet

 
Site Meter
© 2008 Blogger Abstrak | Template by : O-zone | Owner : Angga Leoputra