Latest Stories


Logo Blogger (modif)
Image caption adalah teks atau tulisan yang terdapat di bagian bawah sebuah gambar yang fungsinya untuk menerangkan gambar tersebut. Contoh image caption atau keterangnan gambar banyak kita temui pada halaman artikel di portal berita dimana di bawah gambar yang ditampilkan terdapat sedikit teks yang menerangkan berita terkait.

Selain untuk sekedar memberikan keterangan gambar, memberikan image caption pada sebuah gambar juga bagus bila ditinjau dari segi SEO (search engine optimization), karena lebih memudahkan search engine untuk menentukan hasil pencarian yang relevan, terutama pada pencarian gambar/image.

Blog Wordpress.com sudah menyediakan fitur image caption ini, sehingga penggunanya tinggal mengetikkannya saat memasukkan gambar. Sayangnya, Blogger belum menyediakan fitur yang sebenarnya cukup berguna ini. Terus, gimana dong kalau kita mau menampilkan image caption di blogspot seperti yang terdapat pada blog di wordpress? Hmmm.. bisa kok, tenang aja... ;)

Sedikit repot memang, karena tidak sepenuhnya otomatis. Tapi nggak terlalu susah lah, apalagi kalo udah biasa... ;) Malah kalo di Blogger, image caption "jadi-jadian" ini bisa lebih keren dan fleksibel, tergantung kebutuhan dan kreativitas kita.



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 )

Categories:

One Response so far.

  1. artikel bagus, tapi ada yang sama mau tanga gan, gimana caranya agar image dan text bisa menyatu dalam baris yang sama, artinya jika saya insert image, text lanjutan posting tidak berada dibawah image tadi tetapi sejajar atau dikiri atau dikanan image, seperti contoh diartikel di atas. terima kasih gan sebelumnya

Leave a Reply

You Comment i follow .. Silahkan isi komentar ^_^