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;
}
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
- Klik Page Element
- Klik Add Gadget
-
- Klik plus button (+) for HTML/JavaScript. (img)
- 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
thanks banget atas informasinya jadi tambah pengetahuan nich..salam kenal ya bossssss
BalasHapusHai mampir nih sbelum beraktifitas.. blognya keren sob..
BalasHapusHai sobat.. blog ini dofollow ya.. yo gabung di dofollow blog community.. .. ini link sy :
BalasHapusNama : Link Tea
Url : http://linktea.blogspot.com
mantap templatenya
BalasHapus3. 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.
BalasHapusbasement finish