Saturday, February 12, 2011

Membuat Kotak Pada Quote Part 2

Trik pembuatan kotak quotes ini merupakan varian dari Membuat Kotak Pada Quote Part 1
. Adapun langkah-langkahnya sebagai berikut :

  1. Cari kode default quotes ini pada template anda
    .post blockquote {
    margin:1em 20px;
    }
    .post blockquote p {
    margin:.75em 0;
    }
            Kalau tidak ada silahkan mencari variannya, seperti kode HTML dibawah ini : 

    blockquote {
    margin: 10px 0px 10px 15px;
    padding: 10px 15px 10px 15px;
    font: $quoteFont;
    line-height: 1.6em;
    color: $blockQuoteColor;
    background: $blockquotebgColor;
    border: 2px solid $blockquoteBorderColor;
    }
    Kemudian pilih gambar yang ada dibawah ini 

    Contoh 1
    Contoh 2Contoh 3Contoh 4
    backgroundbackgroundbackgroundbackground

Langsung saja pilih sesuai tampilan gambar, kemudian pilih kode HTML yang sesuai dengann keinginan lalu letakkan di bawah kode quotes default dari template sobat.

- Gambar 1 
.post blockquote {
color:#666666;
background: #ffffff url(http://i39.tinypic.com/154iuq9.jpg);
background-position:top left;
background-repeat:no-repeat;
margin: 6px 6px 6px 6px;
padding: 8px 0px 8px 74px;
font-size: 14px;
font-style:italic;
line-height:1.4em;
}

- Gambar 2
.post blockquote {
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
background: #000000 url(http://i37.tinypic.com/23tgzfk.jpg);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
font-size: 0.9em;
}

- Gambar 3
.post blockquote {
background: #ffffff url(http://i44.tinypic.com/slh4yu.jpg);
background-repeat:no-repeat;
background-position:top center;
margin: 6px 6px 6px 6px;
padding: 8px 36px 8px 40px;
font-size: 14px;
line-height:1.4em;
}

- Gambar 4
.post blockquote {
color:#000000;
background: #ffffff url(http://i41.tinypic.com/24fh84w.jpg);
margin: 6px 6px 6px 6px;
padding: 8px 6px 8px 6px;
font-size: 14px;
line-height:1.4em;
Happy Blogging

No comments:

Post a Comment