Home » » Membuat Galeri Gambar Dengan Css

Membuat Galeri Gambar Dengan Css

Written By Nether Blog on Tuesday, July 24, 2012 | 11:26:00 PM

Dengan membuat Css galeri ini cukup membantu untuk menampilkan gambar yang banyak, Baik digunakan untuk menampilkan photo atau bisa juga untuk membuat postingan pada blog yang menampilkan cukup banyak gambar.

Seperti terlihat pada gambar dibawah ini :


Ariansyah
Catatan-Ariansyah
Ariansyah
Catatan-Ariansyah
Ariansyah
catatan-ariansyah
Ariansyah
catatan-ariansyah








Anda juga bisa mengganti gambarnya sendiri, Mengubah deskripsi, dan lainnya. silahkan di atur lagi sesuai kebutuhan.

Berikut Source-Code dari tampilan diatas :

<style type="text/css">
div.img
{
  margin: 2px;
  border: 1px solid #333333;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}
div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #000000;
}
div.img a:hover img {border: 1px solid #333333;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}
</style>
<br />
<div class="img">
<a href="#" target="_blank"><img alt="Ariansyah" height="90" src="http://4rie-code.googlecode.com/files/A.gif" width="110" /></a>
 <br />
<div class="desc">
Catatan-Ariansyah</div>
</div>
<div class="img">
<a href="#" target="_blank"><img alt="Ariansyah" height="90" src="http://4rie-code.googlecode.com/files/R.gif" width="110" /></a>
 <br />
<div class="desc">
Catatan-Ariansyah</div>
</div>
<div class="img">
<a href="#" target="_blank"><img alt="Ariansyah" height="90" src="http://4rie-code.googlecode.com/files/I.gif" width="110" /></a>
 <br />
<div class="desc">
catatan-ariansyah</div>
</div>
<div class="img">
<a href="#" target="_blank"><img alt="Ariansyah" height="90" src="http://4rie-code.googlecode.com/files/E.gif" width="110" /></a>
 <br />
<div class="desc">
catatan-ariansyah</div>
</div>
Semoga Bermanfaat..

0 komentar:

Post a Comment

Silahkan berikan komentar anda yang baik.