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 2	Contoh 3	Contoh 4

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