Panduan Lengkap Cara Menampilkan Image Caption di Blogger

Cara Menampilkan Image Caption di Blogger

---

Sebagai catatan, cara ini terutama untuk posting yang dibuat dengan Updated Editor. Mungkin bisa juga untuk Old editor, tapi saya belum coba ;)

Untuk mengaktifkan Post editor menggunakan Updated editor, silahkan login ke Blogger dulu pastinya. Lalu masuk ke Settings, menuju ke tab Basic. Selanjutnya menuju ke Global Settings, lihat pilihan Select post editor, dan pilih Updated editor. Kemudian, klik tombol SAVE SETTINGS.

Selanjutnya, mari kita utak-atik kode HTML di template blog kita. Buka tab Layout, klik Edit HTML. Selanjutnya, ikuti tahapan berikut ini.

1. Tambahkan Kode CSS di Template

Cari kode tag ]]></b:skin> dan selanjutnya di atas kode tersebut masukkan kode CSS ini:

/* ========== image caption css BEGIN ========== */
.cap {
 border:1px solid #b0c0dd;
 background-color:#eef6ff;
 -moz-border-radius: 6px;
 -khtml-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px;
 padding:5px;
 text-align: left;
 font-family: Tahoma, Verdana, Trebuchet MS, Georgia, Arial;
 font-size: 11px;
 line-height: 12px;
 }
.separator {
 overflow:hidden;
 }
.cap img {
 padding:0;
 border:0;
 margin:0;
 }
/* ========== image caption css END ========== */

Kalau mau silahkan ubah beberapa parameter sesuai keinginan, terutama warna border dan background-color. Kalau mau ubah yang lain silahkan juga, tapi hati2 kalo salah bisa kacau... ;)

Bila sudah selesai, silahkan klik tombol SAVE TEMPLATE.

2. Edit Kode Image Saat Membuat Posting

• Pada Post editor, gunakan mode "Edit HTML"
  
• Masukkan kode ini pada tempat yang diinginkan:
  
  

  SILAHKAN KETIK TEKS KETERANGAN GAMBAR (IMAGE CAPTION) DI SINI
  
  
  

  
  
• Beralih ke mode "Compose"
  
• Tempatkan cursor pada posisi paling kiri teks image captions (lihat  gambar di bawah ini)
  
• Masukkan image ke dalam posting dengan cara klik tombol Insert image di toolbar.

2.a. Penempatan image di kiri (left)

• Setelah image telah kita masukkan dan sudah terlihat di Post editor, tentukan penempatan image, untuk penempatan di kiri pilih "left".
  
• Selanjutnya, beralih kembali ke mode "Edit HTML"
  
• Cari tag image yang baru saja dimasukkan. Pada penjelasan ini saya mencontohkan pemasangan sebuah file image argentina-vs-brasil.jpg, dan kode image tersebut akan terlihat seperti ini (perhatikan teks yang diblok dan juga teks yang diberi garis bawah warna magenta):
  
• Pindahkan seluruh property yang ada di atribute style pada tag a ke dalam atribute style yang ada pada tag div untuk image caption (tag div yang ada tulisan class="cap"). Caranya (lihat gambar), blok seluruh property style di tag a, lalu di-cut (tekan Ctrl+X di keyboard), kemudian tempatkan cursor pada bagian depan atribute style di tag div caption, lalu paste (Ctrl+V) di posisi cursor tersebut.
  
• Edit value pada property width sesuai ukuran lebar gambar. Misalnya pada contoh gambar tersebut, ukurannya 298 x 225 pixel, maka masukkan value width-nya dengan angka 298px. Tapi sebenarnya sih terserah juga mau dikasih angka berapa aja, nanti hasil tampilannya bisa terlihat pada mode "Compose".
• Silahkan edit keterangan gambar sesuai keperluan, termasuk misalnya menambahkan link ke sumber gambar, dan sebagainya
• Selesai deh.. ;)

2.a. Penempatan image di kanan (right).

• Lakukan langkah yang sama seperti di atas, hanya saja pada saat penempatan gambar pilih "right". Catatan: pada mode "Compose", walaupun sudah dipilih posisi "right", posisi image akan tetap berada di kiri. Lho, gimana toh? Tenang aja, silahkan beralih ke mode "Edit HTML" dan ikuti langkah seperti di atas. Nanti ketika kembali ke mode "Compose", image-nya bakal pindah ke kanan.
  

2.c. Penempatan image di tengah (center).

• Mirip seperti di atas, penempatan gambar pilih "center". Tapi khusus untuk penempatan di tengah, ada sedikit perbedaan, yaitu harap ganti value 1em pada property margin-left dan margin-right pada atribute style dengan value: auto, sehingga atribute margin lengkapnya akan menjadi: margin-left:auto; margin-right:auto;

Gimana, nggak terlalu ribet kan? Intinya sih begini:

Copy-paste kode image caption pada mode "Edit HTML", masukkan dan tempatkan gambar di mode "Compose", cut-paste atribute style dan ubah value width di mode "Edit HTML" (untuk penempatan di tengah ubah juga value margin). Selanjutnya tinggal edit teks keterangan gambarnya.

Kalau kira-kira bakal sering pasang image caption, sebaiknya masukkan saja kode image caption ini sebagai template postingan. Silahkan masuk ke Dashboard -- Settings -- Formatting -- Post Template. Copy kodenya, dan paste pada isian Post Template, lalu klik SAVE TEMPLATE. Nantinya, kode ini akan selalu muncul saat kita membuat posting baru.

SILAHKAN KETIK TEKS KETERANGAN GAMBAR (IMAGE CAPTION) DI SINI

*

*

*

LIVE DEMO

Image Caption Pada Posisi Di KIRI

Berebut bola (image by Kompas):
Duel antara dua pemain (itu siapa sih pemain yang pake nomer punggung 18 sama yang sebelahnya?) dalam pertandingan antara Argentina melawan Brazil.

ini buat ngetes tampilan image caption di postingan blogger, supaya keliatan kayak di wordpress. mudah-mudahan hasilnya bagus... oke deh, langsung aja kita coba.

ini buat ngetes tampilan image caption di postingan blogger, supaya keliatan kayak di wordpress. mudah-mudahan hasilnya bagus... oke deh, langsung aja kita coba. ini buat ngetes tampilan image caption di postingan blogger, supaya keliatan kayak di wordpress. mudah-mudahan hasilnya bagus... oke deh, langsung aja kita coba. ini buat ngetes tampilan image caption di postingan blogger, supaya keliatan kayak di wordpress. mudah-mudahan hasilnya bagus... oke deh, langsung aja kita coba. ini buat ngetes tampilan image caption di postingan blogger, supaya keliatan kayak di wordpress. mudah-mudahan hasilnya bagus... oke deh, langsung aja kita coba.

coba dilihat-lihat, kira-kira gimana hasilnya? bagus apa nggak? bikinnya ribet banget ya? tunggu script otomatisnya nanti, kalo ada... :P daripada daripada, kan mendingan mendingan... :)

Kode lengkap image caption:

Berebut bola (image by Kompas):
Duel antara dua pemain (itu siapa sih pemain yang pake nomer punggung 18 sama yang sebelahnya?) dalam pertandingan antara Argentina melawan Brazil.

*

Image Caption Pada Posisi Di KANAN

Ini image caption pada posisi di kanan. Sekalian nyoba caption width-nya 200px untuk ukuran image width 298px (lebar caption lebih kecil dari lebar image). Posisi gambar bisa diubah, pada contoh ini gambar digeser ke kiri 50 px (ada tambahan properti style pada tag img yaitu position:relative; left:-50px;) supaya gambar orangnya fokus di tengah.
Image credit: Kompas

ini buat ngetes tampilan image caption di postingan blogger, supaya keliatan kayak di wordpress. mudah-mudahan hasilnya bagus... oke deh, langsung aja kita coba.

ini buat ngetes tampilan image caption di postingan blogger, supaya keliatan kayak di wordpress. mudah-mudahan hasilnya bagus... oke deh, langsung aja kita coba. ini buat ngetes tampilan image caption di postingan blogger, supaya keliatan kayak di wordpress. mudah-mudahan hasilnya bagus... oke deh, langsung aja kita coba. ini buat ngetes tampilan image caption di postingan blogger, supaya keliatan kayak di wordpress. mudah-mudahan hasilnya bagus... oke deh, langsung aja kita coba. ini buat ngetes tampilan image caption di postingan blogger, supaya keliatan kayak di wordpress. mudah-mudahan hasilnya bagus... oke deh, langsung aja kita coba.

coba dilihat-lihat, kira-kira gimana hasilnya? bagus apa nggak? bikinnya ribet banget ya? tunggu script otomatisnya nanti, kalo ada... :P daripada daripada, kan mendingan mendingan... :)

Kode lengkap image caption:

Ini image caption pada posisi di kanan. Sekalian nyoba caption width-nya 200px untuk ukuran image width 298px (lebar caption lebih kecil dari lebar image). Posisi gambar bisa diubah, pada contoh ini gambar digeser ke kiri 50 px (ada tambahan properti style pada tag img yaitu position:relative; left:-50px;) supaya gambar orangnya fokus di tengah.
Image credit: Kompas

*

Image Caption Pada Posisi Di TENGAH

Caption di tengah.
Kali ini caption width-nya dikasih angka 400px untuk image width 298px (lebar caption lebih besar dari pada lebar image). Tag a juga dihilangkan supaya gambarnya nggak jadi link (kalau menghapus tag a hati-hati tag img -nya jangan sampai terhapus).

ini buat ngetes tampilan image caption di postingan blogger, supaya keliatan kayak di wordpress. mudah-mudahan hasilnya bagus... oke deh, langsung aja kita coba.

ini buat ngetes tampilan image caption di postingan blogger, supaya keliatan kayak di wordpress. mudah-mudahan hasilnya bagus... oke deh, langsung aja kita coba. ini buat ngetes tampilan image caption di postingan blogger, supaya keliatan kayak di wordpress. mudah-mudahan hasilnya bagus... oke deh, langsung aja kita coba. ini buat ngetes tampilan image caption di postingan blogger, supaya keliatan kayak di wordpress. mudah-mudahan hasilnya bagus... oke deh, langsung aja kita coba. ini buat ngetes tampilan image caption di postingan blogger, supaya keliatan kayak di wordpress. mudah-mudahan hasilnya bagus... oke deh, langsung aja kita coba.

coba dilihat-lihat, kira-kira gimana hasilnya? bagus apa nggak? bikinnya ribet banget ya? tunggu script otomatisnya nanti, kalo ada... :P daripada daripada, kan mendingan mendingan... :)

Kode lengkap image caption:

Caption di tengah.
Kali ini caption width-nya dikasih angka 400px untuk image width 298px (lebar caption lebih besar dari pada lebar image). Tag a juga dihilangkan supaya gambarnya nggak jadi link (kalau menghapus tag a hati-hati tag img -nya jangan sampai terhapus).

LIVE DEMO

*

( sumber : http://zonsdigital.blogspot.com )