Minggu, 30 Agustus 2009

Cara Membuat Caption Foto Menarik

. Minggu, 30 Agustus 2009

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 . . . .

7 komentar:

Qucluk mengatakan...

Good post. . . I like it . . . :))

prafangga permana mengatakan...

Permisi mo kasih hadiah award
Tunjukan jiwa patriotismu Kang jikalau berkenan diambil yah disini Thx B4

digital life mengatakan...

mantap bos ilmunya..

MbahDoyok mengatakan...

sip banget sobattt

Deny mengatakan...

KEREN nich.... :d

Kumpulan Cerita Motivasi mengatakan...

manthb boz tutorialnya....good job
SALAM

YOYOK

Unknown mengatakan...

tifak berhasil

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

 

Recent Comment

Sahabat Setia

Recent Post

Related Websites

This Blog is proudly powered by Blogger.com | Template by miscah.blogspot.com