Membuat Kotak Pada Quote Part 1

Apa "QUOTES" atau tanda kutip itu ? 
Definisi tanda kutip itu untuk mengutip atau biasa digunakan untuk artikel pendek yang diberi tanda khusus untuk sebuah ilustrasi. Default tanda kutip memang sudah disediakan oleh blogger tapi memang kita terkadang sudah bosan dan ingin beda dari yang lainnya atau diantara sobat memang belum pernah menggunakannya ! kemudian bagaimana caranya membuat sebuah kutipan di blogger ?

           Langkah – langkah dalam pembuatannya sebagai berikut: 

• Cari kode default quotes ini pada template anda

.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
  kalo tidak ada cari 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
Kemudian ganti kode HTML pada Template sobat atau letakkan saja di bawah kode HTML default sobat.
Adapun kode HTML dari gambar-gambar Quotes di atas sebagai berikut:
Gambar 1:



.post blockquote {
border-top: 1px solid #FF82AB;
border-left: 1px solid #FF82AB;
border-right: 2px solid #FF82AB;
border-bottom: 2px solid #FF82AB;
background: #ffffff;
margin: 6px 20px 6px 20px;
padding: 8px 8px 8px 8px;
font-size: 1em;
font-style:italic;
line-height:1.4em;
}
Gambar 2: 

.post blockquote {
border:1px dashed #DC143C;
background: #EEE0E5;
margin: 6px 10px 6px 10px;
padding: 8px 8px 8px 8px;
font-size: 1em;
font-style:italic;
line-height:1.4em;
}
 Gambar 3:

.post blockquote {
color:#EE9A00;
border:5px dotted #000000;
background: #ffffff;
margin: 6px 6px 6px 6px;
padding: 8px 8px 8px 8px;
font-size: 1em;
line-height:1.4em;
}
Gambar 4:
.post blockquote {
color:#00CED1;
border-top: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #ffffff;
margin: 6px 0px 6px 0px;
padding: 8px 8px 8px 8px;
font-size: 1em;
line-height:1.4em;
}
Kemudian Silahkan posting artikel sobat dengan menggunakan quote, maka akan tampil seperti tamilan yang sobat inginkan.
Selamat mencoba
Happy Blogging