Memasang Caption Pada Gambar

Aku nak berkongsi sedikit ilmu tentang Blogspot, sesiapa yang teringin nak belajar sebaik-baiknya haruslah tahu apa itu Css dan Html serba sedikit. Kalau tak, susah sikit nak belajar atau mengalami sedikit kesulitan ketika belajar.

Caption sebenarnya banyak digunakan pada platfom Wordpress, bagi pengguna Blogspot ianya mungkin ganjil. Untuk menggunakannya pun kenalah lakukan secara manual yakni menambah sedikit kod semasa mengupload gambar. Caption bukan sahaja mencantikkan sesuatu blog malah memudahkan pembaca faham apa gambar yang ditunjukkan kepada mereka.

Setakat ini tak ramai yang menggunakan caption, jadilah orang kedua yang menggunakannya hari ini.

Sebelum :



Selepas :

Pantai Teluk Lipat

01. Template > Edit Html (tick pada Expand Widget Template).

02. Cari kod ini :

]]></b:skin>

03. Tambahkan kod ini diatasnya :

.imgcontainer {

position:relative;
float:left;

}
.caption {

font: normal 1em/1.3em arial;
background:#fff;
color:#000;
position:absolute;
bottom:0;
left:0;
margin-bottom:20px;
text-align:center;
width:100%;
opacity:.75;
filter:alpha(opacity=85);

}

04. Pilih Save.

05. Pilih Posting > Create > Edit Html.

06. Upload apa-apa gambar.

07. Jadikan seperti kod ini :

<div class="imgcontainer">

<img src="http://tinyurl.com/98hwpd"/>
<div class="caption">Pantai Teluk Lipat</div>

</div>

08. Pilih Publish.

Untuk tambahan, elakkan memilih float left atau right, sebaiknya pilihlah float none. Apa-apa pun selamat mencuba.