Sudah banyak sobat-sobat blogger yang mem-posting tentang Blockquote pada blogger, tetapi sekilas saya melihat tips n trik nya tersebut kebanyakan memodif Blockquote nya masih menggunakan gambar yang ternyata dapat membuat blog sobat menjadi berat.
Nah untuk mencari jalan keluarnya saya mencoba membuat Blockquote yang sedikit lebih cantik dengan menambahkan CSS agar lebih elegant. Sekilas tampilan Blockquote ini memang menyerupai Syntax-Highlighter pada umumnya, sengaja saya buat seperti itu agar lebih cantik dan gampang pemakainnya.

Mari kita lihat cara pembuatannya.
Cari kode ]]></b:skin> di template anda (untuk mempermudah gunakan keyboard dan tekan Ctrl+F) kemudian letakkan kode ini tepat diatas kode tersebut

CSS

.post-body blockquote {
border-left: 8px solid #66ff00;
word-wrap: break-word;
display:block;
font:normal 12px/22px Monaco,Monospace !important;
color:#CFDBEC;
background-color:#2f2f2f;
background-image:-webkit-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image:-moz-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image:-ms-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image:-o-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image:repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
padding:0em 1em;
overflow:auto;
border-left:8px solid #33ff00;
border-radius: 2px 2px 2px 2px;
-moz-transition: all 0.3s ease-out;
}

.post-body blockquote:hover {
border-left: 8px solid #66ff00;
border-radius: 2px 2px 2px 2px;
-moz-transition: all 0.3s ease-out;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.post-body blockquote  p{padding:8px;margin:2px;}

Note :