Cara Membuat Blockquote Keren

Seperti pada judul artikel ini kali ini shadactivity akan berbagi cara membuat Blockquote Keren seperti yang saat ini shad pakai untuk blog shadactiviy ini.
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 :)