Membuat galeri gambar sederhana dengan css

Hai sobat, setelah tadi malam akun ku di banned sama google entah karena apa atau ada yang bisa nembus password yang jelas aku bersyukur sekali accountku ini bisa kembali lagi, kalau tidak apalah dayaku, dan tak terasa juga blog ku ini sudah hampir setahun, karena bulan november 2010 itu aku bikin blog ku ini, semoga tidak akan terjadi apa - apa lagi dengan blog ku ini aminn. ( jadi curhat siapa juga yg mau dengerin ) ok untuk postingan kali ini saya kan membahas cara membuat galeri gambar sederhana dengan css.

DEMO

Ini cuman kode sederhana saja anda bisa kembangkan lagi biar lebih keren dari pada ini, Dan anda hanya juga perlu menambahkan Gadget HTML/Javascript saja untuk menyimpan kode css dan html di bawah ini, anda juga bisa meletakan di postingan dalam mode Edit html.

<style type="text/css">
.zinto {
    background-color: #ccc;
    border: 3px solid #dac;
    padding: 0;
    font: 12px/20px Arial, sans-serif;
    -moz-box-shadow: 0 0 5px 2px #000;
    -webkit-box-shadow: 0 0 5px 2px #000;
    box-shadow: 0 0 5px 2px #000;
    width: 150px
    }

.zinto img {
    display: block;
    margin: 0 0 3px 0;
    max-width: 100%
    }

.left {
    margin: 5px;
    float: left;
    text-align: center
    }
</style>

<div class="zinto left">
<img src="Url gambar" alt="Judul gambar" />
Disini tulisan deskripsi buat gambar anda.
</div>

Jika ingin menambah gambarnya anda cukup menambah kode HTML nya saja yang seperti ini.

<div class="zinto left">
<img src="Url gambar" alt="Judul gambar" />
Disini tulisan deskripsi buat gambar anda.
</div>

Semoga bermanfaat.