Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.

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, proBlogiz 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
mylittletiger
mylittletiger
Add caption
mylittletiger
Add caption
mylittletiger
Add caption
mylittletiger
Add caption
mylittletiger
Add caption
mylittletiger
Add caption
mylittletiger
Add caption
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......
Semoga tip dan trik ini membantu dan menjadi solusi......bila ada pertanyaan atau saran silahkan publis di form komentar ini

Artikel Terkait Lainnya:
Click here for comments

10 komentar

ilmu baru bagi saya gan, makasih infonya.

REPLY

Assalamu'alaikum Wr. WB

Mas, kalau memberi nama pada bawah fotonya bagaimana ?

http://problogiz.blogspot.com/2012/08/cara-buat-thumbnail-gambar-di-postingan.html

tolong kirim via email ke: kios717@yahoo.com

Sekian.

Wassalamu'alaikum Wr. WB

REPLY

@Kios 717
sudah saya kirim caranya melaui email Anda

best
admin

REPLY

makasih ya sobat blogger atas artikelnya,, oh ya saya juga punya bebarapa tips mengenai blog di sini http://galleryimran.blogspot.com/

REPLY

good share gan, jangan lupa berkunjung ke blog ane

REPLY

misi mas mau nanya kalau codenya di letakkan di halaman depan blog bisa gak? auto post gt.. tolong dibantu caranya mas kirim via email dvodca@gmail.com

REPLY

kunjungi balik ya :)
https://kabellistrikjogja.blogspot.co.id/

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|