Created (c) by Princexells Seyka (Princelling Saki)
Headlines News :
Home » » cara membuat Menu Galery Menggunakan CSS Float

cara membuat Menu Galery Menggunakan CSS Float

Written By ๖̶̶̶ۣۜc-mp3ñk on Sunday, May 13, 2012 | 1:30 PM

 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:















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




Share this article :

3 comments:

  1. keren sob tutorialnya, bisa di coba nih. thanks ya dah mau berbagi

    ReplyDelete
  2. @catatan google: thank udah mampir sob :D

    ReplyDelete
  3. kunjungan balik dari banesia tukar link gan http://banesia.blogspot.com BANESIA LINK agan sudah di pasang

    ReplyDelete

 
█║▌│█│║▌║││█║▌│║▌║█║║▌
Copyright © 2012. ๖̶̶̶ۣۜc-mp3ñk - Some Rights Reserved