Cara membuat galeri foto(Image Gallery) di blog dengan CSS
Cara membuat galeri foto(Image Gallery) di blog dengan CSS
Langsung saja pada tips blogger kali ini saya membahas Cara Membuat Galeri Foto(Image Gallery) di Blog Dengan CSS. Bagi Anda yang membuat blog dengan tujuan berbagi foto atau gambar dengan orang lain pasti ingin sekali galeri foto atau gambar di blognya tampil rapi dan indah.
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 :
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>
Posting Komentar