Cara Membuat Tampilan Gallery Foto Unik di Blogspot
Bingung ingin membuat tampilan gallery foto unik di blogspot dengan ukuran kecil yang ditata rapi seperti dibawah ini???
Mau tau cara membuatnya?
Berikut instruksi dalam pembuatannya (copy paste kode berikut dibawah ini):
<div class='snap_preview'><div><center><font color="#0066FF" size="4">Cara Membuat Tampilan Gallery Foto Unik di Blogspot</font></center></div>
<style type='text/css'>
.gallery {
margin: auto;
}
.gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%; }
.gallery img {
border: 2px solid #cfcfcf;
}
.gallery-caption {
margin-left: 0;
}
</style>
<div class='gallery snap_nopreview'><dl class='gallery-item'>
<dt class='gallery-icon'>
<img src="http://i109.photobucket.com/albums/n54/blue_generation04/Beamahakarya/IMG_0630.jpg" width="128" height="96" class="attachment-thumbnail" >
</dt></dl><dl class='gallery-item'>
<dt class='gallery-icon'>
<img src="http://i109.photobucket.com/albums/n54/blue_generation04/Beamahakarya/IMG_0631.jpg" width="128" height="96" class="attachment-thumbnail">
</dt></dl><dl class='gallery-item'>
<dt class='gallery-icon'>
<img src="http://i109.photobucket.com/albums/n54/blue_generation04/Beamahakarya/IMG_0642.jpg" width="127" height="96" class="attachment-thumbnail">
</dt></dl><br style="clear: both" /><dl class='gallery-item'>
<dt class='gallery-icon'>
<img src="http://i109.photobucket.com/albums/n54/blue_generation04/Beamahakarya/IMG_0672.jpg" width="127" height="96" class="attachment-thumbnail">
</dt></dl><dl class='gallery-item'>
<dt class='gallery-icon'>
<img src="http://i109.photobucket.com/albums/n54/blue_generation04/Beamahakarya/IMG_0673.jpg" width="128" height="96" class="attachment-thumbnail">
</dt></dl><dl class='gallery-item'>
<dt class='gallery-icon'>
<img src="http://i109.photobucket.com/albums/n54/blue_generation04/Beamahakarya/IMG_0674.jpg" width="128" height="96" class="attachment-thumbnail">
</dt></dl><br style="clear: both" />
<br style='clear: both'/>
</div>
</div>
(stop!! copy paste sampai disini)
Tugas Anda berikutnya,
Bila hanya ingin mengganti tampilan foto saja, Anda bisa rubah alamat gambar yang berwarna merah dengan alamat gambar yang Anda inginkan.
Namun Anda juga dapat mengotak-atiknya, bila sudah mengetahui/mempelajari bahasa HTML.
Mudah-mudahan bermanfaat,
Bagaimana menurut Anda??
Baca Juga Artikel Terkait
Blogging
- Cara Setting Gmail di Microsoft Outlook 2010
- Setting Google Mail di Outlook Password Incorrect
- Cara Menghilangkan Tulisan Diberdayakan oleh Blogger
- Pasang Related Post Artikel Terkait dengan Fungsi Scrolling
- Cara Membuat Nomor Page Navigation di Blogger
- Update Terbaru Blog Ini Dialihkan ke Netpreneurspot.blogspot.com
- Tips Menjadikan Posting Tertentu Selalu Tampil di Halaman Utama
- Cara Membuat Kotak Text Area Scrolling Untuk Link Exchanger
- Cara Tambahkan Pesan Informasi dibawah Komentar Posting Blog
- Trik Merubah Warna dan Memperbesar Link URL Saat akan di Klik
- Rahasia Cerdas Meningkatkan Jutaan Pengunjung ke Blog Anda
- Cara Mengaktifkan Fitur Baru Template Selular Blogger
- Cara Membuat Script Select All Pada Text Area Link Exchanger
- Tips Meledakkan Pengunjung Blog Gratis dengan Fwebtraffic
- Perubahan Logo Baru Iklan Google Adsense Menjadi Ad Choices
- Tips Cara Membuat Space Sponsor Iklan Banner Teratur di Blog
- Bloggers.com Komunitas Mengenal Blogger Terbaik Dunia
- Blog Pribadi Netpreneur Blog Indonesia (NBI) ukafahrurosid.blogspot.com
- Cara Gampang Pasang Widget Translate translateth.is
- Pasang Link Exchanger / Tukar Link di ukafahrurosid.blogspot.com
- Trik Cara Membuat Daftar Isi Berdasarkan Kategori Dalam Blogspot
- Thehack3r.com dan cinema3satu.blogspot.com Menghilang
- Cara Membuat Kotak Search (Search Box) Yang Bergaya Di Blog
- Bagaimana Cara Agar Blog Dapat Diakses Via HP Dengan Mudah
- Triks Menghapus Jumlah Nomor Posting Pada Arsip Blogger
Gallery Photo
- Pelatihan Wirausaha Di Kampus Pusat Inkubasi Kemandirian PKPU
- Friend’s Graduation I Wisuda UPI 22 April 2010
- Gallery Foto Mahasiswa PLP UPI di SMK Negeri 2 Kota Bandung
- Wisuda IAIN Banten 15 Oktober 2009
- Liburan Iedul Fitri di Banten 2009
- Road to SM Planning 2009
- Profil dan Foto Presenter Tina Talisa
- Foto Daar El Qolam
- Foto "Me & Friends"
- Foto Kuliah Kerja Nyata (KKN UPI) 2008
- Foto Bea Mahakarya DPU-DT
- Photo and Images
Tags: Blogging, Gallery Photo
Subscribe to:
Post Comments (Atom)
Tinggalkan Komentar
20 Respones to "Cara Membuat Tampilan Gallery Foto Unik di Blogspot"
udah sy baca ka..
makasih ya..
maaf jg nagih2 trus.. hehehe...
6:19 AM
lepas copy, paste nya d mana ya?
9:47 PM
berjaya!!
Trimas ya..
have a nice day!
12:29 AM
Alhamdulillah nemu ini, makasih sob :)
6:31 PM
Thnkz Gan ,,,
Visit back please ,,
www.deevro.co.cc ,,
thnkZ ,,
7:49 PM
wah terima kasih, pak. atas tutorialnya :)
4:44 AM
wah ini dia gan yang aku cari...tapi gmana buat zoom nya...?
8:33 PM
punya saya kox gax rapi ya...apa ada ksalahan di kodenya...?
9:24 PM
makasih pak de, walaupun awalnya susah tuk menyesuaikan ukuran gambar tapi sekarang udah bisa. trus saya + title ma gambar aku jadikan link.
6:29 AM
WAH AKU MSH BLUM NGERTI
4:13 PM
Muanteeeeeeeeeeptepteptep..Mas Uka!!
http://www.alandiny.tk/2011/10/gallery-album-foto-alandiny.html
5:49 AM
dicoba,tanks gan
4:52 AM
siip, pateen.......
3:48 PM
nitip tukar link http://www.jubersradio.com/
11:47 PM
KEREN
NGE BANTU BANGET
THANKS YA
SEKALIAN KUNJUNGI BLOG SAYA
http://fashiondar.blogspot.com/
6:34 PM
simple sob, ane coba dulu deh.. ntar kalo makin belepotan ngadu dimari lagi.. hehehe.. salam kenal..
10:55 AM
makasi mas informasinya, saya lihat demo nya kok ga bisa di klik ya?
gimana cara agar photo kalau di klik jadi pop up windows?
Thanks
12:49 PM
thx mas
http://duniagame7.blogspot.com/
3:37 PM
kalo judul nya membuat gallery foto simpel di blogspot lebih tepat mas daripada unik, tapi sekedar saran aja kok mas
9:45 PM
Trima kasih atas sarannya..
Post a Comment