Cara Membuat Caption pada Gambar

Cara Membuat Caption pada Gambar
Di Posting Oleh : Admin
Kategori : Template Tips-Trik Blog Tutorial, Teknologi dan Kesehatan: Mangaip Blog
Blogger kabarnya melakukan blunder besar-besaran! Ketika kemarin (atau kapan lupa tetapi di akhir minggu kemarin kayaknya) saya login ke Blogger link yang dulunya bertuliskan Tata Letak berubah menjadi Rancangan. Lihat gambar dibawah!

Apabila anda sabar sih, anda boleh saja mengedit semua postingan anda, tetapi itu rasanya "nggak mungkin! nggak mungkin ku akan kembali denganmu karena salahmu buat hancurnya hatiku..." Daripada nyanyi, lebih baik kirimkan komplain ke alamat ini agar pada selanjutnya Blogger bisa lebih baik lagi. (Sumber: http://www.masdoyok.co.cc/2010/06/tata-letak-hilang-ada-dimana-layout-tab.html).

Udah, lebih baik kita membahas soal caption pada gambar. Caption pada gambar adalah penjelasan dari isi sebuah gambar. Nih, lihat contoh-contohnya:

Untuk yang disebelah kiri:

Untuk yang ditengah:

Untuk yang disebelah kanan:

Bagaimana? Menarik tidak? Ini bisa digunakan untuk menjelaskan isi gambar. Misalnya, jika ada foto anda bersama 2 orang teman anda, maka anda bisa menyebutkan nama teman-teman anda di bagian caption ini.

Kalau ingin membuatnya, begini caranya.

1. Login ke Blogger, lalu klik Rancangan > Edit HTML.

2. Backup template anda terlebih dahulu. Caranya masih sama seperti yang dulu.

3. Cari kode ]]></b:skin> lalu ketikkan kode berikut diatasnya.

/* caption */
.caption-left{
clear:left;
float:left;
margin:10px 10px 10px 0;
}
.caption-center{
clear:both;
text-align:center;
margin:10px 0;
}
.caption-right{
clear:right;
float:right;
margin:10px 0 10px 10px;
}
.caption-left, .caption-center, .caption-right{
background-color:#0B3861;
padding:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-bottomleft:10px;
-webkit-border-radius-bottomright:10px;
width:auto;
height:auto;
}
.caption-left img, .caption-center img, .caption-right img{
margin-bottom:10px;
}
.caption-left span, .caption-center span, .caption-right span{
font-size:smaller;
display:block;
color:#fff;
text-align:center;
}

4. Klik Simpan Template.

Untuk menggunakannya, klik tab Posting, lalu akan muncul editor teks. Lalu beralih ke modus Edit HTML (dengan mengklik tab Edit HTML). Lalu ketikkan kode berikut.

<div class="caption-left">
<a href="http://muhammadrizkifadillah.blogspot.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwk3c-wMS_q-3b_KWqwRAAonnvP7WvpkoXxRcuJz8z6WMrLMMWO_U061w4wUvZVlU0o1FHieS_epFckLS1iMqfrKk3BUs6yvCRj6xqa5-EmJI3g-Vzxz5bd17lPb2alotdiMNmfuIS6cC5/s320/pacman+google.JPG" /></a>
<span>Asyiknya main Pacman di Google!!!</span>
</div>

Ket: yang berwarna biru adalah jenis dari perataan gambar. Apabila ingin dikiri ketikkan caption-left, untuk ditengah caption-center, sedangkan untuk disebelah kanan kodenya adalah caption-right. Kode yang berwarna kuning adalah link pada gambar, sehingga jika diklik maka akan terbuka website yang telah ditentukan. Ynag berwarna merah adalah URL dari gambar. Dan yang berwarna hijau adalah keterangan dari gambar tersebut. Kode diatas hasilnya seperti ini nih...

Sedikit info hari ini, semoga bermanfaat.