Cara Simple Membuat Blockquote seperti punya Arlina Design

Blockquote adalah sebuah tag yang biasa digunakan untuk mengkutip kalimat maupun kata penting di blog. Selain itu banyak blogger yang menggunakanya untuk menampilkan suatu kode tertentu.

Di artikel kali ini saya akan membagikan cara membuat blockquote yang style nya mirip blog mbak arlina design. Tentu saja desain blockquote ini terlihat bagus dan keren 😎. Dengan warna flat dan kombinasi font awesome, blockquote ini menjadi enak dipandang.

Cara membuat blockquote seperti punya arlina design
Karena cara ini menggunakan font awesome, untuk yang belum memasang font awesome silahkan pasang kode berikut sebelum </head>


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

Copy dan pastekan 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 masing-masing 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 atau blockquote saja)

Jika sudah ketemu hapus kode .post-body blockquote{.......} atau .post blockquote{....} lalu ganti dengan kode diatas tadi.
maka akan eperti ini :

Demikianlah artikel Mengenai Cara Membuat Blockquote seperti punya Arlina Design, mudah-mudahan bermanfaat bagi kawan semua.

Iqbal Fp

Cara Simple Membuat Blockquote seperti punya Arlina Design