Thumbnail Image Tampil Dengan Tombol Close

Langkah Pertama

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Copy script dibawah ini, kemudian paste tepat diatas kode </head>

<link href='http://sites.google.com/site/epgstudiosite/javascript/thumbnailviewer.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/epgstudiosite/javascript/thumbnailviewer.js' type='text/javascript'>
</script>

7. Save

Langkah Kedua

1. Masuk ke Entri Baru

2. Copy kode dibawah ini untuk menampilkan gambar thumbnail

<p><a href="http://img443.imageshack.us/img443/7170/sunseti.jpg" rel="thumbnail"><img src="http://img443.imageshack.us/img443/7170/sunseti.jpg" style="width: 50px; height: 50px;" /></a> <a href="http://img189.imageshack.us/img189/4835/street.gif" rel="thumbnail" style="width: 200px; height: 200px;"><img src="http://img189.imageshack.us/img189/4835/street.gif" style="width: 50px; height: 50px;" /></a> <a href="http://img191.imageshack.us/img191/9053/portraitthumb.jpg" rel="thumbnail"><img src="http://img191.imageshack.us/img191/9053/portraitthumb.jpg" style="width: 50px; height: 50px;" /></a> <a href="http://img193.imageshack.us/img193/359/listenmusicthumb.jpg" rel="thumbnail" style="width: 200px; height: 200px;"><img src="http://img193.imageshack.us/img193/359/listenmusicthumb.jpg" style="width: 50px; height: 50px;" /></a> <a href="http://img29.imageshack.us/img29/641/weedo.gif" rel="thumbnail"><img src="http://img29.imageshack.us/img29/641/weedo.gif" style="width: 50px; height: 50px;" /></a> <a href="http://img443.imageshack.us/img443/994/babyhand.jpg" rel="thumbnail"><img src="http://img443.imageshack.us/img443/994/babyhand.jpg" style="width: 50px; height: 50px;" /></a></p>

NB:
♀ Kode warna merah merupakan alamat gambar pertama.
♀ Kode warna coklat merupakan alamat gambar kedua
♀ Kode warna biru merupakan alamat gambar ketiga
♀ Kode warna kuning merupakan alamat gambar keempat
♀ Kode warna hijau merupakan alamat gambar kelima
♀ Kode warna ungu merupakan alamat gambar keenam
♀ Anda dapat menambahkan gambar sebanyak yang anda sukai denambah kode seperti pada contoh diatas.
♀ Jangan lupa atur width dan height gambar yang disesuaikan dengan keinginan anda

3. Jika yang ingin ditampilkan berupa link, copy kode dibawah ini :

<p><a href="http://img443.imageshack.us/img443/7170/sunseti.jpg" rel="thumbnail" title="Pemandangan">Pemandangan 1</a></p><p><a href="http://img189.imageshack.us/img189/4835/street.gif" rel="thumbnail" title="Pemandangan">Pemandangan 2</a></p><p><a href="http://img191.imageshack.us/img191/9053/portraitthumb.jpg" rel="thumbnail" title="Gadis cantik">Gadis Cantik 1</a></p><p><a href="http://img193.imageshack.us/img193/359/listenmusicthumb.jpg" rel="thumbnail" title="Gadis cantik">Gadis Cantik 2</a></p><p><a href="http://img29.imageshack.us/img29/641/weedo.gif" rel="thumbnail" pemandangan="title">Pemandangan 3</a></p><p><a href="http://img443.imageshack.us/img443/994/babyhand.jpg" rel="thumbnail" title="Buah-buahan">Anggur</a></p>

NB:
♪  Kode warna merah merupakan alamat gambar
♪  Kode warna coklat merupakan judul dari link yang muncul ketika disorot mouse
♪  Kode warna biru merupakan nama link yang akan tampil di blog

Setelah selesai mengotak atik kode yang akan tampil pada blog, baik berupa gambar thumbnail maupun link, Silahkan terbitkan entri.

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's

Related Post