Cara Membuat Blockquote Blog Keren dan cool

Sebenarnya tool quote sudah disediakan oleh pihak blogger, namun terkadang yang namanya manusia ingin membuat sesuatu yang berbeda dari yang lain. Membuat blockquote keren dapat dilakukan dengan dua cara yaitu memasukkan kode CSS kedalam kode HTML blog atau dilakukan secara manual ketika membuat sebuah tulisan dan mengetikkan kode CSS tersebut kedalam mode HTML.
Cara yang pertama yaitu memasukkan kode CSS kedalam kode HTML blog akan membuat blockquote secara otomatis setiap kita membuat blockquote dengan melakukan klik pada ikon Quote ( " ). Sedangkan cara yang kedua dapat dikatakan sebagai cara manual mungkin lebih fleksibel karena kita dapat membuat bermacam-macam blockquote dalam sebuah artikel. Lebih jelasnya mungkin contoh kode membuat blockquote keren berikut bisa memperjelas penjelasan tersebut diatas.


CARA PERTAMA MEMBUAT BLOCKQUOTE KEREN

1. Masuk kedalam akun blog
2. Pilih menu Template
3. Klik Edit HTML

Masukkan kode CSS berikut dibawah kode <![CDATA[

/*BlockQuote*/.post blockquote {margin-left: 15px;padding: 5px 5px 5px 10px;background: #FBE9A1;border: #FEBD4D solid 1px;font: normal 12px/14px Monaco, Monospace;border-left: #FEBD4D solid 5px;position: relativeoverflow:auto;}.post blockquote[rel] {padding-top: 25px;}.post blockquote[rel]::before {content: attr(rel);font: bold 12px/22px Arial, Sans-Serif;color: white;background-color: #b4a97e;padding: 0 10px;position: absolute;top: 0;right: 0;left: 0;text-transform: uppercase}

Informasi:

• background: #FBE9A1;   bisa diganti dengan background: #warna Anda;
• border: #FEBD4D solid 1px;  bisa diganti dengan border: #warna Anda solid 1px;
• border-left: #FEBD4D solid 5px;  bisa diganti dengan border-left: #warna Anda solid 5px;

CARA KEDUA MEMBUAT BLOCKQUOTE KEREN

1. Masuk kedalam akun blog
2. Lakukan penulisan posting
3. Lakukan modifikasi blockquote pada mode HTML, dan masukkan kode ini ke dalam HTML
   

   <blockquote style="margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #F86401; background-color: #F6EBC1;">Tulisan yang akan ditampilkan </blockquote>

   Anda bisa mengganti warna #F86401 dan #F6EBC1 dengan warna yang diinginkan
4. kemudian simpan/ publikasikan, lihat hasilnya cukup menarik sperti yang telah saya gunakan pada blog ini.

Semoga bermanfaat dan selamat mencoba :)