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>
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 :
|
|
| ||||||
|
|
| ||||||
|
|
|
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
10 komentar
ilmu baru bagi saya gan, makasih infonya.
REPLYAssalamu'alaikum Wr. WB
REPLYMas, 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
@Kios 717
REPLYsudah saya kirim caranya melaui email Anda
best
admin
makasih ya sobat blogger atas artikelnya,, oh ya saya juga punya bebarapa tips mengenai blog di sini http://galleryimran.blogspot.com/
REPLYSusah Gimana nih
REPLYgood share gan, jangan lupa berkunjung ke blog ane
REPLYsama-sama belajar sobat
REPLYmisi 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
REPLYkunjungi balik ya :)
REPLYhttps://kabellistrikjogja.blogspot.co.id/
Boleh mintak wa nya?
REPLYSilahkan Berkomentar
ConvertKomentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan