Cara Membuat Blockquote Keren

Kemarin aku udah share info ini tapi info kemarin itu blockquote tanpa hover/shadow jadi lebih baik aku posting ulang versi shadow/hovernya.

Ini contoh blockquote yang akan ku jelasin cara membuatnya

Berikut cara membuatnya:
1.Login ke akun blogger sobat
2.Klik Rancangan-->Edit HTML-->Centang kotak Expand Template Widget
3.Cari kode .post-body blockquote { atau .blockquote {
4.Copy kode di bawah ini tepat setelah/disamping kode {

padding: 2px 10px;
background-image:url(http://t0.gstatic.com/images?q=tbn:ANd9GcT86lCx5kMjxnqROm2nKHMs-Lt1UB1ad4aO3hnNcRX-vNWVS9M5EQAjW2mn);
Border: 2px dashed #FFFF00;
moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
display: block;
margin: 0px 20px 0px 15px;
font-size: 11px;
}
.post-body blockquote p {
font-size: 11px;
color:#591916;
padding: 5px 0px;
margin: 5px 0px;
line-height: 15px;
}
blockquote:hover {
border:2px dashed #6d5d96;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-box-shadow: 0 0 18px #FF0000 ;
-webkit-box-shadow: 0 0 18px #FF0000 ;
background-color: #999999;
-webkit-transition-duration: 3.5s;
background-image:url(http://dl.glitter-graphics.net/pub/437/437591opnrzu0wic.gif);
background-position:bottom right;
background-repeat:no-repeat;
}
.post-body blockquote li {
padding: 2px 0px 2px 15px;
list-style-type: none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM_B_99v7vmMJ9w95MGP7O66s-SF_MHc_1AvM-t0jvxUjNMDlRlA-Q0X8VO_LircFixzuYvmYDO2EJ9B1PpXp2boh3hDRmYf8FUY8lYO8CzD8uAUTtL9cqUTW2RdwgvzRr5yS88bOzlzw7/s1600/bullet-orange.gif) no-repeat left top;
font-size: 11px;
line-height: 15px;
}

Kalau sudah ada kode lain disamping kode { di ganti ajha dengan kode di atas !

5.Simpan dan lihat hasilnya.

Gimana mudah kan sobat blogger...nah sekian postingan kali ini.
Semoga bermanfaat...!!!