merubah tampilan blockquote pada blog tentu sudah banyak sekali ditemukan dan banyak sekali mode ataupun gaya yang disuguhkan, namun bagaimana jika tampilan dari blockquote kita rubah seperti tampilan memo seperti gambar, tutorial ini saya buat bukan dari saya sendiri tapi hanya copas dari kode css dari sebuah blog yang menurut saya cukup tenama, nah untuk membuat tampilan blockquote blog seperti gambar berikut kode css yang sobat tambahkan dalam css template sobat, atau mengganti kode yang ada dengan kode dibawah ini.
.post-body blockquote{background:#6591c2;position:relative;padding:55px 20px 20px 20px;color:#fff;margin:10px 0;border-radius:3px}
.post-body blockquote:before{position:absolute;content:'Catatan';background:rgba(255,255,255,1);right:3px;left:3px;top:3px;padding:5px 20px;display:block;font-weight:700;border-radius:3px 3px 0 0;color:#6591c2}
.post-body blockquote:after{position:absolute;content:'\f027';right:10px;bottom:5px;font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:160%;color:rgba(255,255,255,.6)}
.post-body blockquote a,.post-body blockquote a:hover {color:#fff;}
.post-body blockquote a,.post-body blockquote a:visited,.post-body blockquote a:link,.post-body blockquote a:link:hover{color:#fff}
*:focus {outline:0!important;}
*,*:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}ins{background:#fff;}
letakkan kode diatas
didalam template sobat untuk menggunakan cukup memblok tulisan yang akan di blockquote dan lihat hasilnya
Contoh seperti ini, CSS ini saya dapat dari template arlinadzgn.comSekian semoga dapat bermanfaat
Thanks for reading: merubah tampilan blockquote , Sorry, my English is bad:)