Tips Cara Membuat Galeri Foto(Image Gallery) di Blog Dengan CSS akan sangat membantu Anda dalam membuat dan menempatkan galeri foto Anda di blog. Dimana foto atau gambar Anda akan tampil secara thumbnail dan ketika anda meletakkan kursor di atas thumbnail tersebut gambar Anda akan tampil muncul secara penuh. Seperti contoh di bawah ini :
Menarik sekali bukan? Anda bisa membuat galeri foto ini pada posting blog atau sebagai widget di blog Anda. Langsung saja kita mulai :
1. Berikut script css image gallery yang Anda butuhkan :
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent
overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally
*/
z-index: 50;
}
</style>
2. Berikut kode html untuk membuat galeri foto Anda :
<div class="gallerycontainer">
<a class="thumbnail" href="http://www.radiohead.com/"><img
src="nature/1.jpg" width="100px" height="66px" border="0"
/><span><img src="nature/1 t.jpg" /><br />Simply
beautiful.</span></a>
<a class="thumbnail" href="#thumb"><img
src="nature/2 t.jpg" width="100px" height="66px" border="0"
/><span><img src="nature/2.jpg" /><br />So real,
it's unreal. Or is it?</span></a>
<a class="thumbnail" href="#thumb"><img
src="nature/3 t.jpg" width="100px" height="75px" border="0"
/><span><img src="nature/3.jpg" /><br />Beautiful island</span></a>
<br />
<a class="thumbnail" href="#thumb"><img
src="nature/4 t.jpg" width="100px" height="70px" border="0"
/><span><img src="nature/4.jpg" /><br />Why's so green</span></a>
<a class="thumbnail" href="#thumb"><img
src="nature/5 t.jpg" width="100px" height="75px" border="0"
/><span><img src="nature/5.jpg" /><br />Lovely pink</span></a>
<a class="thumbnail" href="#thumb"><img
src="nature/6 t.jpg" width="100px" height="70px" border="0"
/><span><img src="nature/6.jpg" /><br />Beautiful sunset</span></a>
<br />
</div>
3. Berikut penempatan kedua script di atas secara lengkap :
<html>
<head>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent
overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally
*/
z-index: 50;
}
</style>
</head>
<body>
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img
src="URL ALAMAT GAMBAR THUMBNAIL" width="100px" height="66px" border="0"
/><span><img src="URL ALAMAT GAMBAR" /><br />JUDUL GAMBAR</span></a>
<a class="thumbnail" href="#thumb"><img
src="URL ALAMAT GAMBAR THUMBNAIL" width="100px" height="66px" border="0"
/><span><img src="URL ALAMAT GAMBAR" /><br />JUDUL GAMBAR</span></a>
<a class="thumbnail" href="#thumb"><img
src="URL ALAMAT GAMBAR THUMBNAIL" width="100px" height="66px" border="0"
/><span><img src="URL ALAMAT GAMBAR" /><br />JUDUL GAMBAR</span></a>
<br />
<a class="thumbnail" href="#thumb"><img
src="URL ALAMAT GAMBAR THUMBNAIL" width="100px" height="66px" border="0"
/><span><img src="URL ALAMAT GAMBAR" /><br />JUDUL GAMBAR</span></a>
<a class="thumbnail" href="#thumb"><img
src="URL ALAMAT GAMBAR THUMBNAIL" width="100px" height="66px" border="0"
/><span><img src="URL ALAMAT GAMBAR" /><br />JUDUL GAMBAR</span></a>
<a class="thumbnail" href="#thumb"><img
src="URL ALAMAT GAMBAR THUMBNAIL" width="100px" height="66px" border="0"
/><span><img src="URL ALAMAT GAMBAR" /><br />JUDUL GAMBAR</span></a>
<br />
</div>
</body>
</html>
Anda bisa meletakkan script di atas dalam posting atau sebagai widget di blog Anda. Berikut contoh hasilnya :
/>
Simply
beautiful.
/>
So real,
it's unreal. Or is it?
/>
Beautiful island
/>
Why's so green
/>
Lovely pink
/>
Beautiful sunset
Demikian tips blogger Cara Membuat Galeri Foto(Image Gallery) di Blog Dengan CSS semoga bermanfaat.
14 komentar:
ternyata susah jg ya...
bnyk skali script-y...
terima Kasih INfonya, Menambah wawasan yang sedikit ini :D
ckckckck... (@_@)| pusing
maaf pak kayaknya agak rumit ya,bisa dibreak down step by step biar lebih jelas dalm mempraktekanya.makasih
thx mas bro
makasih
wah mantap nie info nya sangat bagus ..........
dan poto nya sangat indah indah.........
mantap juga nie poto poto nya sangat keren dan sangat indah..........
bagusss potonya kaka
salam kenal yaa
info yang sangat bagus gan.
salam kenal ya dan terus berkarya
sebelum di masukkin gambarnya ada baiknya do compress dulu biar ga berat
sudah kucoba dan BISA niy..keren bow
makasih banyak info nya gan,,,,,
wah nice gan...thx
Posting Komentar
Silahkan berikan komentar Anda...