Blockquote Style Like Styntax Hightlighter


Blockquote Style Like Styntax Hightlighter will improve your blog designing and your blog will look like a professional blog ever.

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 :

Jika di template blog sobat sudah ada kode .post-body blockquote { maka ganti kode tersebut dengan css diatas.
5 Comments
Related Post

Join the Discussion!

Dont give a spam please!
Untuk menyisipkan video, gunakan
Untuk menyisipkan gambar, gunakan
Untuk menyisipkan kode, gunakan
Untuk menyisipkan beberapa baris kode, gunakan
Untuk menyisipkan catatan, gunakan
Untuk menciptakan efek teks tebal gunakan