Monday, November 16, 2009

Tes Image Caption di Blogger



Keterangan (image by Kompas):
Ini sekedar contoh teks image caption (keterangan gambar). O iya, Kalau mau gambarnya tidak menjadi sebuah link, hapus aja tag a (), tapi tag img () jangan sampai dihapus.
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.

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.

Tadinya saya pengen cari kode/script dari blog lain yang udah ada aja, terus tinggal dipasang deh, nggak perlu repot terlalu banyak ngutak-atik HTML. Tapi ternyata saya belum dapat yang hasilnya cukup memuaskan, dimana dari kode yang saya temukan, kode tersebut masih untuk Post Editor yang lama. Padahal saya sudah terbiasa bikin posting blog pake Updated Post Editor. selain itu juga, maunya image caption yang juga bisa untuk di tengah, pokoknya persis seperti yang ada di Wordpress.

Ya sudah, apa boleh bulat, ai ambing buat buat... :P terpaksa deh ngutak-atik HTML. Dan akhirnya bisa dirumuskan juga. Begini ceritanya...


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:
    <div class="cap" style="width:300px;">
SILAHKAN KETIK TEKS KETERANGAN GAMBAR (IMAGE CAPTION) DI SINI
</div>
  • 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.. ;)
  • Setelah jadi, kode lengkap image caption untuk sebuah contoh gambar argentina-vs-brasil.jpg yang berukuran 298 x 225 pixel dengan penempatan di kiri akan menjadi seperti ini:
    <div class="cap" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; width: 298px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh21T_wTsULVNVLJtwX9qep6oNjNxi8oipsdmm2BkDqORRndrgdqcxCqLNrHwQAvsCJuKni-9uc0jPwoL-OIq_00VqqoRSergWX74ATjhA_Oc6WU0OcvgfCn4oBMBdJzgW6-yZCQnV983-8/s1600/argentina-vs-brasil.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh21T_wTsULVNVLJtwX9qep6oNjNxi8oipsdmm2BkDqORRndrgdqcxCqLNrHwQAvsCJuKni-9uc0jPwoL-OIq_00VqqoRSergWX74ATjhA_Oc6WU0OcvgfCn4oBMBdJzgW6-yZCQnV983-8/s320/argentina-vs-brasil.jpg" /></a>
</div>
Keterangan:
Ini sekedar contoh teks image caption (keterangan gambar). O iya, Kalau mau gambarnya tidak menjadi sebuah link, hapus aja tag a (<a href=""></a>), tapi tag img (<img />) jangan sampai dihapus.
</div>

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 tersebut di atas sebagai template postingan. Silahkan masuk ke Dashboard -- Settings -- Formatting -- Post Template.

*

*

*

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:
<div class="cap" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; width: 298px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh21T_wTsULVNVLJtwX9qep6oNjNxi8oipsdmm2BkDqORRndrgdqcxCqLNrHwQAvsCJuKni-9uc0jPwoL-OIq_00VqqoRSergWX74ATjhA_Oc6WU0OcvgfCn4oBMBdJzgW6-yZCQnV983-8/s1600/argentina-vs-brasil.jpg" imageanchor="1" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh21T_wTsULVNVLJtwX9qep6oNjNxi8oipsdmm2BkDqORRndrgdqcxCqLNrHwQAvsCJuKni-9uc0jPwoL-OIq_00VqqoRSergWX74ATjhA_Oc6WU0OcvgfCn4oBMBdJzgW6-yZCQnV983-8/s320/argentina-vs-brasil.jpg" /></a>
</div>
Berebut bola (image by <a href="http://bola.kompas.com/read/xml/2009/09/06/09442638/gulung.argentina.brasil.lolos.ke.afsel" target="_blank">Kompas</a>):
Duel antara dua pemain (itu siapa sih pemain yang pake nomer punggung 18 sama yang sebelahnya?) dalam pertandingan antara Argentina melawan Brazil.
</div>

*

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:
<div class="cap" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; width: 200px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bola.kompas.com/read/xml/2009/09/06/09442638/gulung.argentina.brasil.lolos.ke.afsel" target="_blank"><img style="position: relative; left: -50px;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh21T_wTsULVNVLJtwX9qep6oNjNxi8oipsdmm2BkDqORRndrgdqcxCqLNrHwQAvsCJuKni-9uc0jPwoL-OIq_00VqqoRSergWX74ATjhA_Oc6WU0OcvgfCn4oBMBdJzgW6-yZCQnV983-8/s320/argentina-vs-brasil.jpg" /></a>
</div>
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 <code>position:relative; left:-50px;</code>) supaya gambar orangnya fokus di tengah.
Image credit: Kompas
</div>

*

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.
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:
<div class="cap" style="margin-left: auto; margin-right: auto; width: 400px;">
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh21T_wTsULVNVLJtwX9qep6oNjNxi8oipsdmm2BkDqORRndrgdqcxCqLNrHwQAvsCJuKni-9uc0jPwoL-OIq_00VqqoRSergWX74ATjhA_Oc6WU0OcvgfCn4oBMBdJzgW6-yZCQnV983-8/s320/argentina-vs-brasil.jpg" />
</div>
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.
</div>

LIVE DEMO

*


Blogger gitu loh... ;)

.
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)