Cara Buat Thumbnail Gambar di Postingan

Cara Membuat Gambar atau Album Thumbnail di Blogger

proBlogiz

Gambar thumbnail atau album thumbnail dapat dibuat di postingan / artikel Blogger dengan menggunakan software atau coding ( perintah kode). Pada tuorial Blogger kali ini, akan sharing tips dan triks, Cara Membuat Thumbnail Gambar atau Album di Postingan. Pembahasan saat ini saya fokuskan membuat gambar thumbnail dengan coding (kode perintah) HTML pada postingan. Sedangkan cara membuat thumbnail dengan software, Anda bisa membacanya di artikel Cara Buat Album Thumbnail Dengan Windows Live Writer.

Langkah membuat thumbnail di postingan blogger adalah sebagai berikut :

Upload gambar Anda ke freehost seperti GoogleSite, Imageshack, Photobucket atau Picasaweb dan lain-lain. Setelah meng-upload gambar selanjutnya salin atau copy link gambar.

Buat Entri Baru >>> Gunakan mode HTML ( bukan Compose).

Copy kode berikut dan pastekan di Editor post mode HTML untuk menyisipkan gambar di dalamnya:

<A HREF="url image anda" target="_blank" title="Click to view" ><IMG HEIGHT=50 WIDTH=50 SRC=" url image anda " alt="image name" /></A>

Ukuran image " HEIGHT=50, WIDTH=50 " bisa disesuaikan dengan ukuran thumbnail yang Anda inginkan.

Contoh diatas saya menggunakan gambar "mylittletiger", setelah saya upload di google.site

dengan url : https://sites.google.com/site/problogiz/home/mylittletiger.jpg

Membuat Kumpulan Gambar Thumbnail / Album

Untuk membuat album thumbnail Anda bisa membuatnya dengan tabel dan memasukkan kode di atas dalam setiap sel. Sebagai contoh jika Anda ingin empat gambar thumbnail menggunakan kode ini.

Sisipkan kode diatas antara kode tag <td>...</td> table dibawah :

<table> <TR> <TD>code thumbnail </ TD> <TD>code thumbnail  </ TD> <TD> code thumbnail  </ TD> <TD> code thumbnail </ TD> </ TR> </ table>

Hasilnya seperti dibawah :

Untuk membuat album thumbnail diatas lebih menarik dengan penambahan border, cellspasing,cellpadding ataupun judul album, Anda bisa memberikan kode-kode tambahan.

Misalnya untuk menambah border table dan cellspasing, cellpadding :

tambahkan codenya di dalam tag <table> sehingga menjadi :

<table cellspacing=a cellpadding=b  border=c bordercolor="d">

Untuk memberi judul pada album tambahkan code berikut setelah tag <table> :

<table> <caption>judul album</caption>

Contoh hasil album kalau kode-kode diatas digabungkan :

Animal Gallery

mylittletiger

Add caption

Untuk membuat album seperti diatas kodenya kurang-lebih seperti ini :

<table border="4" bordercolor="yellow" cellpadding="5" cellspacing="15" style="width: 80%px;"> <caption>Animal Gallery</caption><tbody><tr><td>"url gambar"</td><td> "url gambar" </td><td> "url gambar" </td></tr><tr><td> "url gambar" </td><td> "url gambar" </td><td> "url gambar" </td></tr></tbody></table>

Tentunya Anda bisa menambah dan memodifikasi sendiri agar lebih menarik, mungkin merubah ukuran border, warna, atau kode lainnya ataupun penambahan kolom dan baris pada table.

Silahkan Anda coba sendiri tip Cara Buat Thumbnail Gambar di Postingan ini, dengan selera dan keinginan sobat......

lihat juga yang ini : Effeck 3D keren tanpa tex dengan css.