Membuat Gallery Foto Type Horizontal

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 horizontal.

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.

#galleryh {
padding:0;
margin:0 auto 5em auto;
list-style-type:none;
overflow:hidden;
width:495px;
height:240px;
border:1px solid #888;
background:#fff url(http://lh6.ggpht.com/_wC8_9aR_6uE/S272aNA7urI/AAAAAAAACN4/e6jc1jjglA0/gallery%20cover%20h.gif);
}
#galleryh li {
float:left;
}
#galleryh li a {
display:block;
height:240px;
width:28px;
float:left;
text-decoration:none;
border-right:1px solid #fff;
cursor:default;
}
#galleryh li a img {
width:28px;
height:240px;
border:0;
}
#galleryh li a:hover {
background:#eee;
width:320px;
}
#galleryh li a:hover img {
width:320px;
}

Keterangan :
  • Warna Merah, Background 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="galleryh">
<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
Labels: ,