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'/>7. Save
<script src='http://sites.google.com/site/epgstudiosite/javascript/thumbnailviewer.js' type='text/javascript'>
</script>
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
Tips Blogger
- Scroll Tampil Dipostingan Jika Diperlukan
- Membuat background Pada Judul Sidebar
- Menambahkan Twitter Button di Blog
- Membuat Saving Energy Dengan Gambar Sendiri
- Fixed Guestbook Slide Effect With jQuery
- Naruto Emot Untuk Komentar
- Efek Animasi Dasar Pada Blog
- Cara Mudah Membuat Tool Tip Dengan CSS
- Cara Mudah Membuat Textarea
- Membuat Menu Iklan (jQuery Ads Popout)
- Cara Membuat Slideshow Gambar (with jQuery)
- Membuat Simple Menu
- Efek-efek Tulisan Menggunakan CSS3
- Membuat Menu Daftar Isi Jtoctree
- Image Zoom Effect With Jquery
- Shoutbox Light Effect
- Membuat Hover Image CSS3 Pada Blog (Seperti Blog ini )
- Bertabur Cinta
- Light Hover Horizontal Menu With CSS For Blogger
- Cara Memindah-Mindahkankan Gambar Dengan jQuery
- Cara mudah memasukkan banyak Tab Widget pada sidebar
- Cara Pasang Efek Kupu - Kupu Berterbangan
- Merobah Domain Menjadi CO.TV
- Cara Memasang Efek Bintang Berjatuhan di Blog
- Make Border-Radius