» Cara Menambahkan Caption Pada Gambar Blog Dengan CSS

Cara Menambahkan Caption Pada Gambar Blog Dengan CSS - Kali ini saya akan mebahas mengenai Tips Blog yaitu Cara Menambahkan Caption Pada Gambar Blog Dengan CSS, disini saya akan menjelaskan bagaimana cara menambahkan Caption (deskripsi atau keterangan) pada gambar blog dengan CSS.

Dengan memberi Caption pada suatu gambar, maka gambar tersebut akan memiliki keterangan atau deskripsi di bawah bagian gambar (kaya gambar disamping).
Jika kamu berminat mau menggunakan Caption pada suatu gambar silahkan ikuti langkah-langkah di bawah ini :

1. Login ke Blog kamu.
2. Pilih Rancangan pilih Edit HTML Cari kode ]]></b:skin>
3. Setelah ketemu copy kode dibawah ini dan letakan tepat di atas kode ]]></b:skin>

.imgcaption {
padding-bottom:10px;
padding-top:30px;
position:relative;
}
.imgcaption cap {
position:absolute;
left:0%;
right:0%;
padding:10px;
background:#dddddd;
color:ffffff;
opacity:0.8 !important;
bottom:6%;
}

Simpan tempalte nya, dan sekarang bagaimana cara memberi Caption pada gambarnya ?
Berikut cara-cara nya.

<div class="imgcaption"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAT9sr2JtYIu6EmOgM9WTEOOlHb3he4wrzn_YCMYWj99WxIx0yQKjZRi08airUKq9o78FhPzY5nZ6eG5JD3gtKyHMeOCGerQ1MO47AXwJX-ty7Y9kX3v_l6rJoxKT4EGeNrdehXdZDoPnh/s1600/Desert.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAT9sr2JtYIu6EmOgM9WTEOOlHb3he4wrzn_YCMYWj99WxIx0yQKjZRi08airUKq9o78FhPzY5nZ6eG5JD3gtKyHMeOCGerQ1MO47AXwJX-ty7Y9kX3v_l6rJoxKT4EGeNrdehXdZDoPnh/s320/Desert.jpg"/></a><cap>DISINI DESKRIPSI GAMBAR NYA</cap></div>

Ganti yang berwarna merah dengan URL Gambar lainnya, dan ganti kata DISINI DESKRIPSI GAMBAR NYA dengan deskripsi gambar tersebut.

Selsai,itulah cara menambahkan caption pada gambar blog.