25 Mei 2010

Membuat Galery Photo tipe Mendatar

Hai sobat t'Net!!giman nih kabr nya..dah lama aku gak posting tentang tutorial Blogger yah. Tapi bukan berrarti saya tidak kana membuat postingan tentang blog, saya akan tetap pada komitmen. Saya akan tetap memberikan informasi/trik kepada sobat t'Net semua.
Nah kali ini kita akan memberi trik untuk membuat Galery Photo secara Mendatar (Horizontal). Dimana teman2 dapat memberikan sedikit penjelasan pada gambar itu. Nah tampa panjang lebay langsung saja kita berbicara tentang bagaimana cara membuatnya,bukan???

Unatuk cara membuatnya, kita Mulai dari langkah berikut.
Langkah Pertama
  • Masuk ke Blogger dengan ID saudara
  • Pada dasbor, pilih Tata Letak/ Layout
  • Lalu pilih Edit HTML
  • Cari kode berikut ]]></b:skin>
  • Lalu letakkan kode di bawah ini, tepat dibawah kode yang anda cari tad


#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;
}

  1. Warna Hijau adalah tinggi dan lebar dari galeri photo anda. Silahkan anda ganti angkanya sesuai dengan blog anda
  • Lalu Silahkan Anda simpan
Langkah Kedua
  • Pilih Page Element 
  • Pilih Add Gadget 
  • Pilih plus button (+) Pada HTML/JavaScript.
  • COPAS 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>


  1. Yang warna Hijau, Adalah judul foto/nama/image
  2. Yang warna Merah, Adalah alamat  foto kamu, silahkan anda ganti
  • Silahkan Anda simpan
Selesai deh,,semoga bermanfaat..
Karta Jaya H Tambunan
_GBU_

Masukkan email kamu untuk berlangganan tulisan dengan saya :

Delivered by FeedBurner