Memberi Keterangan Di Bawah Foto

Nah, kalau beberapa judul terakhir adalh modif soal lnik, sekarang giliran image. Saya sempat posting mengani pengamanan gambar dengan cara menambah teks di atas gambar hanya lewat kode HTML, nah kali ini agak berbeda, yakni memberik keterangan atau label gambar, dan letaknya berada di bawah gambar. Sama dengan tehnik modifikasi gambar sebelumnya kita tak membutuhkan program editing gambar, yang kita lakukan hanyalah mengubah sedikit kode HTMLnya. Contohnya seperti di bawah ini:

Jayalah Indonesia.... (Contoh Keterangan)

Langsung saja bagi Anda yang ingin mencoba effect ini
1. Login ke blogger
2. Menuju Tata letak dan langsung ke tab Edit HTML
3. Centang Expand Template Widget
4. Cari kode </head>
5. Letakkan kode berwarna biru di bawah ini di atas kode </head>

<style type="text/css">
.caption {
border: 1px solid #DDDDDD;
text-align: center;
background-color: #EEEEEE;
padding: 4px 0px 5px 0px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.caption img {
margin: 0px 0px 5px 0px;
padding: 0px;
border: 0px;
}

.caption p.caption-text {
margin: 0px;
padding: 0px 0px 0px 0px;
font-size: 11px;
font-weight: normal;
line-height: 12px;
}
</style>

6. Simpan Template

Sedangkan untuk peambahan label di atas Anda tinggal menggunakan kode berikut ini untuk postingan Anda (Gunakan Tab Edit HTML bukan Compose)

<div class="caption" style="width: 410px;"><img src="URL Foto Anda"/><p class="caption-text">Keterangan Foto/Label</p></div>

Semoga bermanfaat