Cara membuat kotak catatan ( blockquote ) keren di blog

Cara membuat blockquote di blog - Dalam dalam artikel kali ini kami akan memberikan cara membuat kotak catatan / blockquote keren di blog dengan tambahan icon yang menarik dan fitur tombol close.

Cara membuat blockquote di blog

Sebenarnya sudah banyak yang membuat tutorial membuat box pesan / kotak keterangan yang di bagikan dengan berbagai macam tampilan menggunakan css style blockquote. Tetapi yang kami bagikan ini mempunyai tampilan yang keren dan fitur menarik.

Blockquote sendiri berfungsi sebagai menandai kata atau kalimat yang memiliki poin penting di sebuah artikel. Dengan adanya kotak catatan ini juga bisa untuk mempercantik tampilan dan menambah nilai profesional pada postingan blog anda.

Lebih jelasnya blockquote itu untuk memperjelas kalimat seperti memberikan warna background pada sebuah kata atau kalimat, bisa juga memberi tanda maupun memberikan border / garis batas pada kalimat yang mengandung nilai penting.


Lihat demonya diatas, jika sudah maka langsung saja kita mulai cara memasang blockquote / kotak catatan keren di dalam postingan blog.

Cara membuat blockquote keren di artikel blog

Sebelum memasangnya tentu kalian harus menginstal FontAwesome terlebih dahulu di blog kalian. Jika blog anda sudah terpasang Font Awesome maka lewati saja langkah pertama ini.

Memasang font awesome di blog

  • Langkah pertama masuk ke menu "template"
  • Kemudian "Edit HTML"
  • Cari kode </head>
  • Copy kode dibawah ini kemudian tempel tepat diatas kode </head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Cara memasang css style blockquote

  • Copy kode css berikut ini
  • Kemudian cari kode </style> atau ]]></b:skin>
  • Tempel kode css di bawah ini tepat di atasnya
/* MTBOX */
.mtbox{position:relative;border-radius:4px;display:block;font-size:14px;margin:16px 0;padding:12px 24px 12px 60px}
.mtbox:before{float:left;font-size:32px; font-family:FontAwesome;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-wrap:normal;margin-left:-46px;margin-top:12px}
/* MTBOX 1 */
.mtbox1:before{color:#039be5;content:'\f005';}
.mtbox1{background:#e1f5fe;color:#0288d1}
/* MTBOX 2 */
.mtbox2:before{color:#536dfe;content:'\f0eb';}
.mtbox2{background:#e8eaf6;color:#3f51b5}
/* MTBOX 3 */
.mtbox3:before{color:#78909c;content:'\f1b0'}
.mtbox3{background:#eceff1;color:#546e7a}
/* MTBOX 4 */
.mtbox4:before{color:#0f9d58;content:'\f087'}
/* MTBOX 5 */
.mtbox5:before{color:#0f9d58;content:'\f00c'}
/* MTBOX 6 */
.mtbox6:before{color:#00bfa5;content:'\f19d'}
.mtbox6{background:#e0f2f1;color:#00897b}
/* MTBOX 7 */
.mtbox7{background:#f3e5f5;color:#9c27b0}
.mtbox7:before{color:#d500f9;content:'\f031'}
/* MTBOX 8 */
.mtbox8:before{color:#ff6e40;content:'\f06a'}
.mtbox8{background:#fff3e0;color:#dd2c00}
/* MTBOX 9 */
.mtbox9:before{color:#dd2c00;content:'\f088'}
/* MTBOX 10 */
.mtbox10:before{color:#dd2c00;content:'\f05e'}
/* Close Button */
.tutup{position:absolute;top:5px;right:5px;width:17px;height:17px;line-height:20px;text-align:center;font-size:24px;font-weight:500;opacity:.3;cursor:pointer}
.tutup b,.tutup a{font-weight:500;}
.tutup:hover{opacity:1}
.tutup:focus,.tutup:active{outline:0}
/* Note Icon Animation on Hover */
.mtbox1:hover:before,.mtbox2:hover:before,.mtbox3:hover:before,.mtbox4:hover:before,.mtbox5:hover:before,.mtbox6:hover:before,.mtbox7:hover:before,.mtbox8:hover:before,.mtbox9:hover:before,.mtbox10:hover:before{-webkit-animation:flash 1s linear 1s infinite normal;animation:flash 1s linear 1s infinite normal}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}

Cara memasang kotak catatan di dalam artikel blog

  • Masuk ke menu postingan
  • Kemudian pilih "Entri baru"
  • Pilih mode "HTML" bukan "Compose"
  • Lebih jelasnya lihat gambar berikut ini
Cara membuat kotak catatan di blog
  • Berikut ini merupakan kode blockquote yang akan di pasang
<div class="mtbox mtbox#">
 ...Masukan teks anda disini... 
</div>
  • Bila perlu tambahkan kode berikut ini untuk menambahkan "tombol close"
<div aria-label='Close Note' class='tutup' onclick='this.parentElement.style.display=&quot;none&quot;' role='button' tabindex='0'>&times;</div>
  • Jika menggunakan "tombol close" maka cara penggunaannya seperti berikut ini
<div class="mtbox mtbox#">
 ...Masukan teks anda disini... 
<div aria-label='Close Note' class='tutup' onclick='this.parentElement.style.display=&quot;none&quot;' role='button' tabindex='0'>&times;</div>
</div>
  • Ganti # dengan angka 1 sampai 10 untuk merubah tampilan box yang ingin di gunakan
  • Lihat hasilnya
Jika kalian melakukannya dengan benar maka kemungkinan akan berhasil, buat yang masih kurang faham kalian bisa tanyakan melalui komentar dibawah ini.

Dengan menggunakan kotak catatan ini, tentu akan lebih memudahkan pengguna blog untuk memahami kalimat penting atau intisari dari sebuah artikel yang kalian buat.

Bukan hanya itu saja, melainkan atikel yang kalian tulis akan terlihat lebih rapi dan lebih nyaman enak di pandang. Untuk itu kalian harus memasangnya agar pengunjung blog anda nyaman membacanya.

Jangan lupa berikan tanggapan kalian mengenai cara membuat blockquote di blog. Cukup sekian dan semoga bermanfaat.

Posting Komentar