Membuat Gallery Foto type Vertikal

Untuk menampilkan foto / image dalam blog ada beberapa cara diantaranya dengan menampilkan image secara individu ( satu image ), akan sangat menarik bila kita dapat menampilkan image secara bersama dalam satu foto album yang menyatu dalam blog.
 

Kali ini kita akan membuat Gallery foto / image yang menyatu secara Vertikal.

Kita langsung ke TKP saja biar jelas
Langkah Pertama

  • Login ke akun Blogger kamu.
  • Dari halaman dashboard, pilih Edit HTML.
  • Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
  • Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut.

#gallery {
padding:0;
margin:0;
list-style-type:none;
overflow:hidden;
width:320px;
height:425px;
border:1px solid #888;
background:#000000 url(http://lh5.ggpht.com/_wC8_9aR_6uE/S271afOZWGI/AAAAAAAACNw/kXy4T5aYIQM/gallery%20cover.gif);
}
#gallery li {
float:left;
}
#gallery li a {
display:block;
height:30px;
width:320px;
float:left;
text-decoration:none;
border-bottom:1px solid #fff;
cursor:default;
}
#gallery li a img {
width:320px;
height:30px;
border:0;
}
#gallery li a:hover {
background:#eee;
height:239px;
}
#gallery li a:hover img {
height:239px;
}

Keterangan :
  • Warna Merah, Backgroud Gallery.
  • Warna kuning,  Tinggi dan lebar gallery ( menyesuaikan dengan foto / image yang akan kita tampilkan )

Langkah kedua
  1. Klik Page Element
  2. Klik Add Gadget
  3.   AddGadget
  4. Klik plus button (+) for HTML/JavaScript. (img)

    HTML
  5. Copy and paste kode dibawah ini

<ul id="gallery">
<li><a href="#">
<img src="http://lh6.ggpht.com/_wC8_9aR_6uE/SjnEMWmzE4I/AAAAAAAAAG8/W1bMtjiRhN4/s128/Dolphin.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#">
<img src="http://lh6.ggpht.com/_wC8_9aR_6uE/Sk-BzKk-LwI/AAAAAAAAARo/TpU0OXHgKIo/s128/blue%20bird%20of%20paradise.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#">
<img src="http://lh6.ggpht.com/_wC8_9aR_6uE/Sk-B6YpJMqI/AAAAAAAAARw/v8Gs89YufXM/s128/blue-bird-of-paradise2.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#">
<img src="http://lh6.ggpht.com/_wC8_9aR_6uE/SjnELl2eISI/AAAAAAAAAGk/A6RBjIL-fNY/s128/cat.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#">
<img src="http://lh6.ggpht.com/_wC8_9aR_6uE/SmbIu2bUlfI/AAAAAAAAAf8/MgO-E-n5WRY/s128/red%20panda%203.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#">
<img src="http://lh4.ggpht.com/_wC8_9aR_6uE/SpqssB0hGEI/AAAAAAAABOI/7DSe25HalOg/s128/Superb%20Fairy-wren3.jpg" alt="#6" title="#6" /></a></li>
<li><a href="#nogo">
<img src="http://lh4.ggpht.com/_wC8_9aR_6uE/Spqu77YGCZI/AAAAAAAABOo/wrHrSYK_sNU/s128/Superb%20Fairy-wren5.jpg" alt="#7" title="#7" /></a></li>
</ul>


Simpan dan lihat hasilnya.

Keterangan :
  • Warna Merah, Nama / judul foto / image.
  • Warna Limau, Alamat URL foto / image ( gunakan foto / image dengan ukuran yang sama = bila tidak sama, tidak masalah tapi akan membuat foto / image jadi agak kabur karena akan secara otomatis ukuran menyesuaikan dengan gallery yang ada )
________________________________________________________

Ok.. Selamat mencoba..!

Semoga bermanfaat....!!

Sumber : Web design and Assistance-css play

About Mahdi e

- Berbagi itu indah -

5 comments:

  1. thanks banget atas informasinya jadi tambah pengetahuan nich..salam kenal ya bossssss

    BalasHapus
  2. Hai mampir nih sbelum beraktifitas.. blognya keren sob..

    BalasHapus
  3. Hai sobat.. blog ini dofollow ya.. yo gabung di dofollow blog community.. .. ini link sy :

    Nama : Link Tea
    Url : http://linktea.blogspot.com

    BalasHapus
  4. mantap templatenya

    BalasHapus
  5. 3. Wow! You are definitely a magician. I have always liked to know others feelings and thoughts, but I must say your article is one of the best I have read. And I suggest others to read it.
    basement finish

    BalasHapus

Note :

Komentar yang mengandung usur pornografi / sara / kekerasan akan dihapus.
Terima kasih komentarnya...!
Semoga bermanfaat...!