Membuat Galeri Gambar Sederhana Dengan CSS

Ok untuk postingan kali ini saya kan membahas cara membuat galeri gambar sederhana dengan css, silahkan Lihat Demo

Gimana Sobat Sederhana sekali kan, biarlah sederhana, kalo kita kembangkan lagi pasti jadi luar biasa hehehe
 Dan semoga bisa menjadi galeri buat gambar - gambar anda. . . .

Ok ke tahap pembuatan.

1. Masuk di blog anda
2. klik Rancangan
3. Klik tambah gadget
4. Pilih HTML / Javascript
5. Masukan kode di bawah ini di dalam nya

<style type="text/css">
.zinto {
background-color: #BBB;
border:1px solid #FFF;
padding: 2px;
font: 11px/1.4em Arial, sans-serif;
-moz-box-shadow: 0 0 5px 2px #FFF;
-webkit-box-shadow: 0 0 5px 2px #fff;
box-shadow: 0 0 5px 2px #fff;
}
.zinto img {
border: 1px solid #CCCCCC;
vertical-align:middle;
margin-bottom: 3px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
z-index:1;
}
.zinto img:hover {
height:250px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
-ms-transform:scale(1.5);
-moz-box-shadow: 0 0 5px 2px blue;
-webkit-box-shadow: 0 0 5px 2px blue;
box-shadow: 0 0 5px 2px blue;
z-index:2;
border:5px solid #BBB;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.left {
margin: 0.3em 0.9em 0.5em 0;
float:left;
text-align:center;
font-size:13px;
}
.left a{
color:blue;
}
.left a:hover {
color:red;
}
</style>
<div class="zinto left" style="width:150px; height:250px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR3Vk1oJg0g2GPzR-SwlZoB0hRtMnCrbdJmJAlVFcJqnMabGt8PT4ivUdXE8eVTMuz66x8VceEUjhemEH58RQd7w-uWwxro2bJy-zPugr3pyjdG4xwN2DsuyrFyg_gzLEfFW14UpPHf6kz/s1600/bad_boys_sm.jpg" alt="Bad Boy" height="200" width="150" />
<br />
Disini Deskripsi gambar<br />
Sentuh Gambar nya gan
</div>
<div class="zinto left" style="width:150px; height:250px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAE7CWMbWgbV2h7cXD8Jx56SoX-GcZnzFQxOGfPiULWqk7-jPxLasM5H3gcPW7VkFBqxJUw84Y-v5hRFeFrHjVJu6mbBzf8bmuz63Dw_yrxfrHJvygpEn8xghqX5DH0J4zblI5q0rPGRs/s1600/cute-korean-girl-beach03.jpg" alt="Cewek korea" height="200" width="150" />
<br />
Disini Deskripsi gambar
</div>
<div class="zinto left" style="width:150px; height:250px;">
<img src="http://www.eanext.com/wp-content/plugins/wp-o-matic/cache/715e0_cute_asian+girl+hairstyle.jpg" alt="Cewek korea" height="200" width="150" />
<br />
Disini Deskripsi gambar
</div>
<div class="zinto left" style="width:150px; height:250px;">
<img src="http://i664.photobucket.com/albums/vv1/Green-Smoke/Asian%20So%20Hot%201/Sexy_Korean_Girl__1_7.jpg" alt="Cewek korea" height="200" width="150" />
<br />
Disini Deskripsi gambar
</div>
<div class="zinto left" style="width:150px; height:250px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL6UK8kHERBwSJzUvreFV0xlhyphenhyphenjq7thY4kPryImNx8Ocz8R5HEzhmuQQGQjAZDteYJlUE-ifIWFzx2NXuOEbB6XnMT3yTU98BkCTRRwyzg4bPKZCqx_KXTULr9DVkH-q64uUZ8jtgsYME/s400/Seo_You_Jin_Beauty_Korean_Girl_2.jpg" alt="Cewek korea" height="200" width="150" />
<br />
Disini Deskripsi gambar
</div>
<div class="zinto left" style="width:150px; height:250px;">
<img src="http://t2.gstatic.com/images?q=tbn:ANd9GcTabQ1XAuwVA1D9eunFRM-PynXL1o-G8uKV4QCW3-QKcoTrJ0_mnxDlUKOD" alt="Cewek korea" height="200" width="150" />
<br />
Disini Deskripsi gambar
</div>

Pengertian kode

Kode warna Biru ganti dengan URL gambar anda

Kode berwarna merah ganti dengan Deskripsi gambar atau dengan nama gambar

setelah itu silahkan Klik SIMPAN

Tapi ada yang perlu anda ingat, misalnya anda simpan di sidebar tentukan berapa gambar yang akan di tampilkan di sana karena sidebar itu kan kecil jadi kalo banyak gambar kelihatan gak enak sebaiknya simpan di area yang lebar seperti main-wrapper atau dimana lah yang penting lebar. ok cukup sekian dari saya semoga bermanfaat dan wassalam. . . .

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Membuat Galeri Gambar Sederhana Dengan CSS. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://bungkaryo.blogspot.com/2012/03/membuat-galeri-gambar-sederhana-dengan.html" target="_blank">Membuat Galeri Gambar Sederhana Dengan CSS</a>

:: Get this widget ! ::

- Reviewer: Unknown - ItemReviewed: Membuat Galeri Gambar Sederhana Dengan CSS