Membuat keterangan gambar (caption) apik dengan CSS pada blog

Keterangan gambar atau biasa disebut "caption" banyak diperlukan untuk menjelaskan gambar yang dipasang, atau paling tidak sebagai sarana penghargaan bagi sumber gambar tersebut sehingga fasilitas untuk menulis nama ataupun sumber gambar tersebut sering menjadi sebuah kebutuhan.

Kebanyakan caption ditempatkan asal saja sehingga di samping kelihatan tidak menyatu dengan gambar juga kurang artistik, untuk itu di sini saya mencoba "share" kepada anda semua tentang cara membuat caption apik ini. Baiklah, kita langsung saja mulai.

Langkah pertama.

Login ke Blogger, klik layout lalu klik .
Anda tidak perlu mencentang .

Ide bagus jika anda membuat back up template anda dengan men-download-nya dengan mengklik . Ini hanya sebagai antisipasi jika sekiranya anda membuat kesalahan pada template maka akan tetap punya cadangan template yang sama yang masih utuh.

Copy seluruh kode CSS di bawah ini kemudian paste sebelum kode ]]></b:skin>.



/* START IMAGE AND CAPTION */


#centerimg {
    text-align:center;
    margin:0 auto;
    padding-top:3px;
    clear:both;
}

#leftimg {
    float:left;
    margin-right:10px;
}

#rightimg {
    float:right;
    margin-left:10px;
}

#centerimg .caption,
#leftimg .caption,
#rightimg .caption {
    text-align:center;
    clear:top;
    display:block;
    line-height:1.2em;
    color: #717171;
    font-size: 95%;
}


/*--END IMAGE AND CAPTION--*/

Kode 1
Kode CSS untuk mengatur image dan caption

Simpan template anda setelah proses di atas selesai.

Langkah kedua.

Bagi anda yang baru melangkah di dunia blogging seperti saya, ada "kabar buruk" bagi anda yaitu anda harus bekerja pada mode HTML sewaktu membuat konten blog. Namun percayalah, ini adalah salah satu kenikmatan blogging, terutama bagi saya.

Baca Juga artikel tentang:
Potensi income tambahan dari e-mail anda
Membuat frame pada blog image

Langkah pertama tadi tidak akan membuat perbedaan. Anda perlu sedikit kode tambahan untuk menampilkan gambar dengan caption yang bisa diatur.

Perhatikan kode berikut!


<div id="leftimg" style="width:250px;">
letakkan kode HTML gambar di sini!
<cite class="caption">Keterangan gambar atau caption di sini!</cite></div>

Kode 2
Kode div untuk menggunakan kode CSS

• Tata letak gambar
  Kalau anda menggunakan kode seperti kode 2 di atas untuk gambar anda, maka hasilnya adalah gambar anda berada di sisi kiri post body dengan lebar 250px sedangkan tingginya akan tersesuaikan secara otomatis.
  
  Perhatikan kode dengan warna hijau di atas. Ya, anda pasti bisa menerka sekarang, untuk membuat gambar berada di tengah tengah post body, cukup ganti kode leftimg dengan centerimg.
  Begitupun jika anda ingin agar gambar anda berada di sisi kanan post body, ganti kode leftimg dengan rightimg.
  


• Lebar gambar
  Untuk mengatur lebar gambar, perhatikan kode angka yang berwarna merah pada kode 2 di atas. Anda cukup mengganti besaran nilai lebar gambar anda sesuai kebutuhan dan keinginan anda. Hal yang harus anda perhatikan adalah lebar post body anda, agar gambar anda tidak sampai melewati post body. Lebar post body biasanya ditentukan dengan kode #main {width: 476px; pada template anda, yang berarti lebar post body anda adalah 476px dikurangi margin. Kabar baiknya, anda tidak usah pusing dengan ini, bereksperimenlah, jika hasil gambarnya terlalu lebar, kurangi saja nilai angkanya, sederhana bukan? ;-)
  
  Baik, anda sekarang sudah tahu cara mengatur tata letak dan menyesuaikan lebar gambar anda. Kini kita akan memulai langkah selanjutnya.

Langkah ketiga, upload gambar/image

1. Upload
   Sekali lagi saya tekankan, cara ini hanya berhasil jika anda bekerja pada mode HTML bukan pada mode Compose.
   
   Upload gambar seperti biasa dengan mengklik icon pada post mode, pilihlah untuk menghindari konflik pada style.
   
   Kode HTML gambar selalu muncul di baris paling atas setelah anda mengklik Done.
   
   Berikut adalah contoh kode dari hasil upload dengan pilihan ,
   
   
   
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://URL gambar untuk diklik.jpg"><img style="cursor:pointer; cursor:hand;width: 600px; height: 400px;" src="https://URL gambar untuk ditampilkan.jpg" border="0" alt="" /></a>

Kode 3
   Contoh kode HTML hasil upload gambar dengan style 'None'
   
   
   
2. Modifikasi kode
   Ganti kode yang berwarna biru dengan angka 100% dan delete kode yang berwarna merah sampai batas tanda " sehingga menjadi:
   
   
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://URL gambar untuk diklik.jpg"><img style="cursor:pointer; cursor:hand;width: 100%;" src="https://URL gambar untuk diklik.jpg" border="0" alt="" /></a>

Kode 4
   Contoh kode HTML hasil upload gambar setelah sedikit di modifikasi
   
   
   
3. Cut and Paste
   Baru kemudian cut kode HTML gambar dan paste sesuai petunjuk pada kode 2 di atas sehingga codenya akan menjadi seperti ini:
   
   
<div id="leftimg" style="width:250px;">
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://URL gambar untuk diklik.jpg"><img style="cursor:pointer; cursor:hand;width: 100%;" src="https://URL gambar untuk diklik.jpg" border="0" alt="" /></a>
<cite class="caption">Keterangan gambar atau caption di sini!</cite></div>

   
   
   Kode 5
   Contoh gabungan kode 2 dan kode HTML gambar

Jika tidak mau repot, ikuti langkah keempat ini!

Anda tentu saja tidak mau repot menghafal kode 2 diatas. Cara gampang agar selalu ingat adalah dengan menaruhnya di post template. Caranya adalah, login ke Blogger, klik Setting , kemudian pilih tab Formatting . Scroll turun sampai menemukan Post template, lalu copy seluruh kode pada kode 2 di atas dan paste pada kotak Post template

,
lalu klik .
Pada saat melakukan new post, anda hanya tinggal mengganti leftimg dengan rightimg atau centerimg, dan merubah nilai lebar gambar sesuai kebutuhan anda. Kalau anda tidak membutuhkannya, tinggal di delete saja.

Beberapa contoh image dengan caption

Contoh 1
Gambar ini berada di bagian kiri post body dengan lebar 160px.

Ini adalah contoh teks yang dipadukan dengan gambar dengan caption di sebelah kiri artikel seperti pada contoh 1.

Ini adalah contoh teks yang dipadukan dengan gambar dengan caption di sebelah kiri artikel seperti pada contoh 1.

Ini adalah contoh teks yang dipadukan dengan gambar dengan caption di sebelah kiri artikel seperti pada contoh 1.

Contoh 2
Gambar ini berada di tengah tengah post body dengan lebar 350px.

Contoh 3
Gambar ini berada di sisi kanan post body dengan lebar 250px dan caption ini tidak tertulis miring.
Lihat penjelasan soal ini di atas pada bagian tag disebelah kiri gambar ini. Dan gambar ini juga ada frame-nya.

Tag <cite>
Kalau anda tidak menginginkan huruf pada caption anda tertulis miring, cukup ganti tag <cite> dan </cite> pada kode 2 di atas dengan tag <span> dan </span>.



Sesungguhnya ada berbagai cara untuk menampilkan image dengan caption-nya berikut beberapa di antarannya:
Bloggerbuster.com- Add stylized caption to images in your blogg
Bloganol.com - Add caption to your blogger posts
Tips & Tricks - Caption for photos or images

SEMOGA BISA DIPAHAMI, SELAMAT MENCOBA, DAN SEMOGA BERHASIL...!

Di tulis oleh Wira