Cara Membuat Blockquote Keren

Sebenarnya gk keren-keren banget sih tapi kebetulan blockquote nya cocok bg m blog shad ini jadi menurut shad ini adalah Blockquote Keren xixixi :p
oke langsung saja tanpa basa-basi lagi berikut Demo dan Cara Membuat Blockquote Keren:





Seperti biasa masuk ke blog sobat, pilih template - edit html - jangan lupa Expand Template Widget - terus cari lalu pastekan kode dibawah ini tepat diatas ]]></b:skin>

.post blockquote {
margin-left: 15px;
padding: 5px 5px 5px 10px;
background: #d3dde6;
border: #ada171 solid 1px;
font: normal 12px/14px Monaco, Monospace;
border-left: #8b85a1 solid 5px;
position: relative
}
blockquote[rel] {
padding-top: 25px;
}
blockquote:hover {background:#84929f; color:#000000;}
blockquote[rel]::before {
content: attr(rel);
font: bold 12px/22px Arial, Sans-Serif;
color: white;
background-color: #8b85a1;
padding: 0 10px;
position: absolute;
top: 0;
right: 0;
left: 0;
}

Keterangan:
Warna Merah: Background
Warna Biru: Background saat di hover
Warna Hijau: Tulisan saat di hover
Warna Orange: Background Judul

Untuk Judul tinggal sobat tambahkan rel="Judul Blockquote" pada menu html, ntar jadi nya begini:
<blockquote class="tr_bq" rel="Cara Membuat Blockquote Keren">

Tinggal diotak-atik aja dah sesuai keinginan sobat aau sesuai template yang sobat pakai.
kalo belum jelas silahkan tinggalkan komentar ya, kalo sudah jelas jangan lupa like nya :)

SUMBER : http://shadactivity.blogspot.com/2012/09/cara-membuat-blockquote-keren.html#ixzz2DsHMyzZj