cara membuat Menu Galery Menggunakan CSS Float

 Dengan menggunakan fitur CSS float ini, sebuah element dapat kita letakkan dari sebelah kiri ke kanan dan seterusnya. CSS Float ini biasa nya sangat sering digunakan untuk Galerry gambar ataupun untuk element lain nya. Tapi, pada contoh Saya yang ada di bawah ini. Saya menggunakan fitur CSS Float ini untuk membuat Gallery gambar tentang beberapa postingan yang telah Saya buat. Silahkan Anda ganti sendiri sesuai dengan gallery gambar yang Anda punya. Fitur gallery dengan CSS Float ini sangat bagus sekali bagi Anda yang mempunyai sebuah Blog dengan tema Gambar ataupun wallpaper. Untuk lebih lengkap nya, silahkan Anda perhatikan contoh gallery yang ada dibawah ini, semoga dengan ada nya contoh ini bisa menjadi sebagai rujukan untuk Blog Anda:

Ninja Saga

Poin Blank

Sekarang mari kita mulai bagaimana langkah-langkah cara membuat nya:

Langkah 1:
1. Masuk akun blogger lalu pilih menu Rancangan > Edit Html
2. Jangan Lupa backup dulu template Blog anda
3. Jangan lupa klik ‘Expand Widget Templates’
4. Copy-paste kode berikut ini dan taruh di atas kode </head>

<style type='text/css'> div.gallery { margin: 2px; border: 2px solid #D8D8D8; background-color:#2E3030; height: auto; width: auto; float: left; text-align: center; } div.gallery img { height: 150px; width: 198px; display: inline; margin: 1px; border: 2px solid #ffffff; } div.gallery a:hover img { border: 2px solid #000000; /* for IE */ filter:alpha(opacity=40); /* CSS3 standard */ opacity:0.4; } div.label { border: 2px solid #D2D2D2; background-color:#000000; text-align: center; font-weight: normal; height: 80px; width: 198px; padding:0px; margin: 1px; } </style>

Note :

• Untuk yang warna Merah adalah Nilai Tinggi dari gambar.
• Untuk yang warna Biru adalah Nilai Lebar dari masing-masing Element.
• Dan Untuk yang warna Hijau adalah Nilai Tinggi dari Deskripsi Gambar atau Judul Gambar.

5. Save Template anda.

Langkah 2.

Copy kode di bawah ini paste kan di Postingan Anda atau pada sidebar Blog Anda.

<div class="gallery"> <a href="URL LINK TARGET" target="_blank"><img src="URL GAMBAR" /></a> <div class="label"> JUDUL TARGET</div> </div>
<div class="gallery"> <a href="URL LINK TARGET" target="_blank"><img src="URL GAMBAR" /></a> <div class="label"> JUDUL TARGET</div> </div>

Note :

• Untuk yang warna Merah adalah Link Target dari gambar
• Untuk yang warna Biru adalah URL gambar
• Dan Untuk yang warna Hijau adalah Judul atau keterangan gambar.

Jika Anda ingin menampilkan banyak Gambar pada Gallery, Anda cukup mengCopy paste ulang kode yang di atas.


Akhir nya selesai sudah Tutorial tentang Bagaimana Cara Membuat Menu Gallery Menggunakan CSS Float. Semoga dengan adanya Tutorial ini bisa membantu Anda dalam membuat nya. Dan semoga Bermamfaat.

sumber :
http://ahmad-roni.blogspot.com/2012/04/cara-membuat-gallery-menggunakan-css.html