Cara Membuat Caption Foto Menarik

Akan lebih menarik jika di Blog kesayangan kita terdapat foto yang di kasih sedikit sentuhan  yang berbeda.   Solusinya adalah dengan modifikasi Caption. Pengen Coba?? Tapi sebelum ke tutorialnya, akan saya tunjukkan contoh foto dengan caption menggunakan teknik modifikasi HTML, klik Preview :

Cara 1 :

1. Login ke blogger
   
   
2. Masuk 'Layout' ---> 'Edit HTML' ---> centang 'Expand widget template' (jangan lupa backup buat jaga-jaga)
   
   
3. Cari kode </head>
   
   
4. Letakkan script berikut 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>

5.  Klik Simpan Template

Cara 2 : 


Untuk memunculkan foto dengan teks pada postingan, sisipkan kode dibawah ini pada postingan anda :

<div class="caption" style="width: 410px;"><img src="URL foto yang sudah diupload"/><p class="caption-text">Tulis teks disini</p></div>

 Contoh kode gambar saya:

<div class="caption" style="width: 410px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUxlbDnEEL5E507Y9pcIXXlsKc77Gtal2JV5PNTAvKwaOAp01cjvGGtu4ixj0OkctB2hL1pVcNPqnCLRSGX2-3Xoppvt81ECBrxsgf0anP2muWDwWiyo-PVlDZHKzAXAuYwbZZkn53GDg/s400/wonogiri.gif" /><div class="caption-text"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUxlbDnEEL5E507Y9pcIXXlsKc77Gtal2JV5PNTAvKwaOAp01cjvGGtu4ixj0OkctB2hL1pVcNPqnCLRSGX2-3Xoppvt81ECBrxsgf0anP2muWDwWiyo-PVlDZHKzAXAuYwbZZkn53GDg/s400/wonogiri.gif">Liburan bersama keluarga di Wonogiri</a></div></div>

Slamat mencoba . . . . Good Luck . . . .