Membuat gallery menggunakan CSS Float

Dengan menggunakan fitur CSS float, sebuah elemen dapat kita letakkan dari sebelah kiri kekanan dan seterusnya, yang memungkinkan unsur-unsur lain berada di sekitarnya. Float sangat sering digunakan untuk gambar. Dalam hal ini kita gunakan fitur CSS Float untuk membuat gallery gambar ataupun foto, terutama bagi teman blogger yang blognya banyak menampilkan gambar ataupun foto
OK...,  bila anda berminat silahkan anda bisa ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode diatas :

<style type="text/css">
div.gallery
{
  margin: 2px;
  border: 2px solid #D8D8D8;
  background-color:#ECECEC;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}   
div.gallery img
{
  height: 100px;
  width: 125px;
  display: inline;
  margin: 5px;
  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:#ffffff;
  text-align: center;
  font-weight: normal;
  height: 40px;
  width: 120px;
  padding:3px;
  margin: 5px;
}

</style>

Catatan :

• Atur nilai lebar gambar/ foto dan kotak label pada kode berwarna merah diatas (nilainya sama).
• Atur nilai tinggi gambar/foto pada kode berwarna biru diatas.
• Atur nilai tinggi kotak label pada kode berwarna ping diatas.

6. Simpan Template

Langkah selanjutnya anda tinggal menambahkan kode dibawah ini pada saat menulis artikel, jangan lupa tambahkan kode pada bagian Edit HTML . Cara ini bila gallery akan ditampilkan pada halaman posting. 
 

Tapi bila anda ingin menampilkan Gallery pada sidebar blog anda. Berrarti anda tinggal menambah gadget. Perhatikan langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div class="gallery">
<a target="_blank" href="ULR DOKUMEN GAMBAR/FOTO"><img src="ULR GAMBAR/FOTO"/></a>
<div class="label">Buat label gambar disini</div>
</div>

<div class="gallery">
<a target="_blank" href="ULR DOKUMEN GAMBAR/FOTO"><img src="ULR GAMBAR/FOTO"/></a>
<div class="label">Buat label gambar disini</div>
</div>

Catatam :

• Silahkan anda ganti tulisan berwarna ping dengan ULR DOKUMEN GAMBAR/FOTO milik anda, dan warna biru dengan label gambar/foto anda.
• Silahkan anda ganti tulisan berwarna merah dengan ULR GAMBAR/FOTO milik anda, dan warna biru dengan label gambar/foto anda.
• Untuk menambahkan gambar/foto, anda tinggal menambah kode berikut : 

<div class="gallery">
<a target="_blank" href="ULR DOKUMEN GAMBAR/FOTO"><img src="ULR GAMBAR/FOTO"/></a>
<div class="label">Buat label gambar disini</div>
</div>

5. Simpan

Selamat mencoba ya...