Cara Buat Tampilan Gambar Gallery (Berdampingan) Blogspot

Iklan
Tutorial yang akan saya sampaikan kali ini yaitu menampilkan gambar secara berdampingan / Gallery Design. Cara ini kurang lebih seperti tutorial gambar berdampingan pada post saya sebelumnya. Bedanya tampilan ini lebih powerful.

Nantinya tampilan gambar / photo yang sobat posting bisa terlihat cantik, jika gambar yang sobat posting banyak maka ini solusinya. Code ini bisa sobat manfaatkan untuk blogspot wallpaper sobat. Tampilanya seperti ini :

Nah untuk membuat agar gambar seperti diatas, sobat bisa memasukkan code Script berikut ini pada posting blog sobat :


<div class="snap_preview">
<style type="text/css">
.gallery{margin:auto;}.gallery-item{float:left; width:33%;} .gallery-caption { margin-left: 0; }
</style>
<br />
<div class="gallery snap_nopreview">
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Tambahan Link 1" target="_blank">
<img border="0" height="100" src="URL Gambar 1" width="150" /></a>
</dt>
</dl>

<dl class="gallery-item">
<dt class="gallery-icon"><a href="Tambahan Link 2" target="_blank">
<img border="0" height="100" src="URL Gambar 2" width="150" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Tambahan Link 3" target="_blank">
<img border="0" height="100" src="URL Gambar 3" width="150" /></a>
</dt>
</dl>
Tambkan Script gambar baru di sini....
</div>
</div>

Perhatikan :

# Tambahan Link 1, 2 ,3  :  Bisa sobatkan taruh link untuk gambar sobat, jadi nanti ketika gambar di Klik maka akan menuju link yang sobat masukkan tadi, sobat bisa juga taruh link gambar di situ..
# URL Gambar 1, 2, 3  :  Taruh alamat/url Gambar sobat yang sudah di Upload (contoh : http://4.bp.blogspot.com/-Vt_us6RStxM/T88WdUL2w_I/AAAAAAAADPU/kUF3w_k5WUA/s400/Tampilan+Gallery+Blogspot.jpg )
# Angka 100 dan 150 pada setiap script gambar merupakan ukuran gambar sobat yang akan ditampilkan, silahkan subah 100 (untuk tinggi gambar), dan 150 (untuk panjang gambar)
# Tambkan Script gambar baru di sini.... : nah di situ tempat sobat menambah code script untuk gambar sobat selanjutnya,,, silahkan copy code berikut ini sebanyak gambar yang akan sobat tampilakan,,, :
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Tambahan Link" target="_blank">
<img border="0" height="100" src="URL Gambar" width="150" /></a>
</dt>
</dl>
Setelah itu jangan lupa save / Publish nanti akan kelihatan hasilnya... Selamat mencoba sob.