Cara Memberi Keterangan Gambar Pada Posting Blog

Cara Memberi Keterangan Gambar Pada Posting Blog. Jika kita sering membaca koran, kita pasti sering melihat photo / gambar yang berfungsi sebagai ilustrasi atas berita / artikel tertentu. Nah, biasanya pada bagian bawah photo /gambar tersebut diberi keterangan sehubungan dengan photo / gambar tersebut. Dalam dunia blog, kita juga dapat melakukan hal yang serupa, yaitu menambahkan photo / gambar ilustrasi dan kemudian kita dapat memberikan keterangan di bawah gambar ilustrasi tersebut. Jika tertarik, silakan ikuti tipsnya berikut ini bersama Tips dan Trik Blog.

Kita semua mengetahui bahwa untuk memasang photo / gambar pada postingan blog dapat dilakukan dengan dua cara. Pertama, dengan cara mengupload gambar secara langsung dari PC (komputer) dan kedua, dengan cara menempatkan / mengupload gambar pada suatu layanan photo hosting (misalnya, photobucket, flicker, dll) kemudian linknya dipastekan (ditempatkan) pada postingan blog.

Jika kita menggunakan cara yang pertama, kita akan mendapati scriptnya seperti contoh di bawah ini.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_dATSF_iv-iw/TEBbj4e-yTI/AAAAAAAADzc/QaXcvWavVIA/s1600/hacker1.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 109px; height: 122px;" src="http://4.bp.blogspot.com/_dATSF_iv-iw/TEBbj4e-yTI/AAAAAAAADzc/QaXcvWavVIA/s200/hacker1.jpg" alt="" id="BLOGGER_PHOTO_ID_5494492217407883570" border="0" /></a>

Untuk memberi keterangan gambarnya, caranya adalah dengan menyisipkan teks (keterangan) pada script gambar tersebut. Tuliskan teks (keterangan) pada teks yang berwarna merah seperti di bawah ini.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_dATSF_iv-iw/TEBbj4e-yTI/AAAAAAAADzc/QaXcvWavVIA/s1600/hacker1.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 109px; height: 122px;" src="http://4.bp.blogspot.com/_dATSF_iv-iw/TEBbj4e-yTI/AAAAAAAADzc/QaXcvWavVIA/s200/hacker1.jpg" alt="" id="BLOGGER_PHOTO_ID_5494492217407883570" border="0" /> keterangan gambar </a>

Jika kita menggunakan cara yang kedua, maka contoh scriptnya adalah seperti di bawah ini.

<a href="http://s209.photobucket.com/albums/bb287/yono_pati/?action=view&current=hp.jpg" target="_blank"><img src="http://i209.photobucket.com/albums/bb287/yono_pati/th_hp.jpg" alt="Photobucket" border="0" /></a>

Untuk memberi keterangan gambarnya, caranya juga serupa yaitu dengan menyisipkan teks (keterangan) di antara script tersebut. Perhatikan teks yang berwarna merah.

<a href="http://s209.photobucket.com/albums/bb287/yono_pati/?action=view&current=hp.jpg" target="_blank"><img src="http://i209.photobucket.com/albums/bb287/yono_pati/th_hp.jpg" alt="Photobucket" border="0" /> Keterangan Gambar </a>

Hasilnya seperti di bawah ini.

keterangan gambar

dan

Keterangan Gambar

Jika kita perhatikan, posisi gambar di atas adalah di tengah (center) secara horizontal, hal ini disebabkan karena pada waktu menguploadnya, Tips dan Trik Blog memilih opsi “center” sedangkan tulisan (keterangan)nya rata kiri sehingga terlihat kurang bagus.

Oleh karena itu, untuk menjadikan keterangan gambar menjadi rata tengah, kita dapat menambahkan script <div style="text-align: center;"> dan </div> yang mengapit script di atas, sehingga selengkapnya menjadi seperti ini.

<div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_dATSF_iv-iw/TEBbj4e-yTI/AAAAAAAADzc/QaXcvWavVIA/s1600/hacker1.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 109px; height: 122px;" src="http://4.bp.blogspot.com/_dATSF_iv-iw/TEBbj4e-yTI/AAAAAAAADzc/QaXcvWavVIA/s200/hacker1.jpg" alt="" id="BLOGGER_PHOTO_ID_5494492217407883570" border="0" /> keterangan gambar </a></div>

<div style="text-align: center;"><a href="http://s209.photobucket.com/albums/bb287/yono_pati/?action=view&current=hp.jpg" target="_blank"><img src="http://i209.photobucket.com/albums/bb287/yono_pati/th_hp.jpg" alt="Photobucket" border="0" /> Keterangan Gambar </a></div>

Setelah itu, hasilnya seperti di bawah ini.

keterangan gambar

dan

Keterangan Gambar

Oh, iya jika kita perhatikan, keterangan gambar pada image yang kedua berada di samping gambar, jika menginginkan di bawah gambar, kita dapat menambahkan <br> sebelum keterangan gambar, selengkapnya menjadi seperti ini.

<div style="text-align: center;"><a href="http://s209.photobucket.com/albums/bb287/yono_pati/?action=view&current=hp.jpg" target="_blank"><img src="http://i209.photobucket.com/albums/bb287/yono_pati/th_hp.jpg" alt="Photobucket" border="0" /> <br> Keterangan Gambar </a></div>

dan hasilnya akan menjadi seperti di bawah ini.

Keterangan Gambar

Selamat Mencoba!!