Menyisipi Caption pada Foto di Journal

Hal ini berawal dari note tentang memasang caption pada foto di postingan/journal. Caption adalah tulisan kecil di bawah foto pada blog/journal yang digunakan sebagai keterangan tambahan atau penegasan dari foto yang dimaksud (lihat pada note ini). Sebelumnya, terimakasih yang telah membantu di note tersebut. Secara sederhana, berikut langkah-langkahnya :
Code HTML yang disisipi ke dalam compose box Anda :

<DIV class="boxfotopost gerakkiri titlefotopost"><DIV><IMG src="image address"></DIV> <DIV class="titlefotopost">Tulisan caption atas<BR>Tulisan caption bawah</DIV></DIV>
*)Silahkan ganti highlight yang berwarna kuning.


Berikutnya Code CSS nya yang ditempatkan di akhir Custom CSS Anda :

/*-------start here-------*/

.gerakkiri { 
float:left;
} 
.titlefotopost { 
margin:5px; 
font-size: 10px; 
color:#131313;
font-style: italic;
font-weight: bold;
font-family: Verdana, Arial, sans-serif;
}
.boxfotopost {
background: white;
border-color: transparent; 
border-bottom: 1px solid black;
margin: 5px;
} 

/*-------end here-------*/

! : Secara normal, image akan berada di sebelah kiri. 
Perhatikan pula tiga selector html dan css buatan yang berwarna sama.

LIHAT HASILNYA: