Cara Menambahkan Caption Pada Gambar Blog dengan CSS

Cara Menambahkan Caption Pada Gambar Blog dengan CSS - Setelah sebelumnya saya telah posting Cara Membuat Widget Share keren di Blog, dan Sekarang yang saya akan bahas yaitu Cara Menambahkan Caption Pada Gambar Blog dengan CSS. Disini saya akan berbagi bagi kalian yang belum tau bagaimana cara menambahkan Caption (deskripsi/keterangan) pada gambar blog dengan CSS. dengan memberikan Caption pada suatu gambar, maka gambar tersebut akan mempunyai keterangan dibagian bawah gambar. Untuk lebih jelas, lihat gambar dibawah ini : 

 

Berikut langkah - langkahnya :

1. Login ke Blogger

2. Pilih Rancangan, Edit HTML lalu Centang Expand Template Widget, cari kode ]]></b:skin>

3. Copy kode dibawah ini tepat diatas 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%;
}

4. Simpan Template

5. Lalu Klik Entri baru/New post, pilih Compose 

6. lalu copy kode dibawah ini didalamnya

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

Ket: Ganti yang warna merah dengan url gambar sobat, dan yang bercetak tebal dengan deskripsi gambarnya

7. Terakhir sobat klik Terbitkan entri

Share this post