Cara 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. Silahkan anda lihat contoh gallery dibawah ini, mudah - mudahan cara ini bisa membantu :

Cara buat web

Cara buat blog

Efek membesar pada gambar

Efek gambar melayang

Efek gambar transparant

Cara buat daftar isi

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...
Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Judul: Cara membuat gallery menggunakan CSS Float; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Cara membuat gambar memutarFitur CSS memungkinkan kita untuk membuat banyak hal khususnya membuat tampilan halaman web ataupun blog menjadi lebih menarik. Pada waktu yang lalu saya sudah bany ... readmore
• Cara buat Fitur Slide AccordionKarya baru lagi saya buat dan kupersembahkan untuk anda yang selalu setia mampir di blog ini.  Widget ini saya beri nama Fitur Slide Accordion. Selain tampilan ... readmore
• Transformasi 2DTransformasi adalah sebuah efek yang memungkinkan perubahan suatu unsur atau elemen seperti bentuk, ukuran dan posisi. Dengan CSS3 transformasi, kita dapat mengubah ... readmore
• CSS LISTSeperti halnya HTML List, fitur css List juga berfungsi untuk membuat sebuah List atau tanda pada daftar. Dalam hal ini ada tiga macam bentuk yang bisa kita gunakan ... readmore
• Cara Membuat Rounded Corner Memang asyik bila kita sudah berhadapan dengan kode css, sebab dengan kode-kode css kita bisa buat efek apa saja seperti :  efek rounded corner, text shadow ... readmore