Membuat Keterangan Gambar (Image Caption)

Jika kita membaca-baca buku hampir semua gambar yang disertakan dalam artikel selalu diberi keterangan gambar (image caption) hal ini berfungsi untuk memperjelas gambar dan agar antara gambar dengan artikel ada saling keterkaitan. Pembaca akan dengan mudah memadukan antara artikel dengan gambar, hal ini karena pembaca pada umumnya akan merasa yakin jika artikel disertai gambar. Secara default Blogger tidak memberikan fasilitas ini, sehingga kita perlu menambahkan beberapa baris kode agar gambar yang kita sertakan dalam artikel dapat diberi keterangan dibagian bawah. Walaupun kode image caption yang akan kita gunakan belum 100% otomatis, tapi tidak ada salahnya Blogger TuneUp menyuguhkannya, mungkin diantara pembaca ada yang mampu membuatnya menjadi otomatis tanpa ada modifikasi manual.

Integrasi Image Caption Pada Template

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"

Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode dibawah ini tepat diatas kode pada langkah 3:

/* Image Caption */
.keterangan {border: 1px solid #ddd;text-align: center;background-color: #eee;padding: 10px 0 10px 0;-moz-border-radius: 10px;-khtml-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}
.keterangan img {margin: 0px 0px 10px 0px;padding: 0px;border: 1px solid #ddd;}
.keterangan p.keterangan-text {margin: 0px;padding: 0px 0px 0px 0px;font-size: 12px;font-weight: bold;line-height: 12px;font-family: Arial, Helvetica, sans-serif;font-style: normal;color: #333333;}

Langkah 5
Simpan template...

Modifikasi Kode Gambar

Langkah A
Upload gambar pada artikel
Langkah B
Edit kode gambar melalui mode Edit HTML

Langkah C
Cari dan perhatikan kode dibawah ini (utamakan kode dengan warna biru):

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/contoh.jpg"> <img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 220px; height: 320px;" src="URL-GAMBAR/contoh.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXX"/></a>

Langkah D
Tambahkan kode Image Caption seperti dibawah ini (kode warna biru untuk image caption):

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/contoh.jpg"> <div class="keterangan" style="width:240px"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 220px; height: 320px;" src="URL-GAMBAR/contoh.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXX"/><p class="keterangan-text">Contoh Keterangan Gambar</p></div></a>

Langkah E
Terbitkan artikel

Keterangan:

• Perhatikan langkah D, lebar gambar adalah 220px maka lebar image caption harus 240px. Nilai ini diperoleh dari penambahan 20px dari lebar gambar, sederhananya 220px + 20px = 240px. Hal ini agar diperoleh bingkai image caption yang simetris antara sisi kiri dan sisi kanan.
• Kode <p class="keterangan-text">Contoh Keterangan Gambar</p> ini adalah teks yang digunakan untuk keterangan gambar, ubahlah "Contoh Keterangan Gambar" sesuai keterangan gambar yang anda inginkan.
• Kode <div class="keterangan" style="width:240px"> ini adalah kode untuk membuat image caption, nilai 240px disesuaikan dengan lebar gambar dengan penambahan 20px seperti yang sudah dijelaskan diatas.

Selamat mencoba dan semoga berhasil. Tinggalkan pesan pada komentar jika mengalami kesulitan dan Happy Blogging... :)

Bloghack Tips Trik