Cara Membuat Gallery Menggunakan CSS Float

Pada Tutorial Blog kali ini akan Saya bahas Bagaimana Cara Membuat Gallery Menggunakan CSS Float. Dimana pada postingan Saya sebelum nya sudah banyak Saya bahas mengenai Topik tentang gambar, baik itu untuk Gallery gambar pada postingan ataupun untuk sebuah plugin. Bagi Anda yang belum membaca nya, silahkan baca beberapa Tutorial di bawah ini:

* cara membuat auto acak slideshow Gambar
* cara membuat gambar berjejer secara horizontal dan vertical

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:

Cara Memasang Meta Tag Google, Bing, dan Yahoo Di Blog

Cara Memasang Iklan di Bawah isi Postingan

Tampilan Posting jadi Satu Halaman Penuh Tanpa Sidebar

Cara Menyesuaikan Video di Blogger - Bagian 1

Cara membuat Auto Acak Slideshow Gambar

Cara Membuat Recent Post dengan Slide Bundaran

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, Jika belum tahu Baca di sini
3. Jangann 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 Orange adalah Nilai Lebar dari masing-masing Element.
* Dan Untuk yang warna Kuning adalah Nilai Tinggi dari Deskripsi Gambar atau Judul Gambar.

5. Save Template

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 Ungu adalah URL Link Target dari Gambar.
* Untuk yang warna Pink adalah URL GAMBAR.
* Dan Untuk yang warna Hijau adalah Judul dari Gambar 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 Gallery Menggunakan CSS Float. Semoga dengan adanya Tutorial ini bisa membantu Anda dalam membuat nya. Dan semoga Bermamfaat.