Membuat Blockquote Seperli Arlina Design

Di artikel kali ini saya akan membagikan cara membuat blockquote yang style nya mirip blog punya mbak arlina design.Tentu saja desain blockquote  ini terlihat bagus dan keren. Dengan warna flat dan kombinasi font awesome, blockquote ini menjadi enak dipandang.Sebenarnya dari beberapa template arlina design sudah disediakan blockquote yang mirip dengan blognya, tetapi belum terdapat icon font awesome.

BERIKUT INI CARA MEMBUAT BLOCKQUOTE SEPERTI ARLINA DESGIN !!!

Jika Di template kamu belum terpasang Font Awesome,Silahkan Pasangkan Kode Font Awesome ini Sebelum Kode </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Setelah itu Tempelkan kode dibawah ini sebelum </style> atau ]]></b:skin>

.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;}
blockquote::before, blockquote::after, q::before, q::after {background: transparent;}
.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);}

Pada beberapa template,mungkin blockquote sudah diberi style oleh pembuatnya.Jika blockquote pada blog sudah distyle silahkan pada edit template cari stylenya.Caranya,pada edit template tekan ctrl+f lalu pada kolom pencarian silahkan isikan .post-body blockquote lalu enter.(jika tidak ada silahkan cari .post blockquote) Jika sudah ketemu hapus kode .post-body blockquote atau .post blockquote lalu ganti dengan kode diatas tadi.

CARA PEMANGGILAN

Mode Compose:
Silahkan buatlah Postigan Dan Pilih Kata Yang Akan Di Blockquote
Lalu Klik Icon Seperti Gambar Dibawah Ini:




Mode HTML:

<blockquote class="tr_bq">
Isi text </blockquote>

• Demo Link