Cara Membuat Kotak Catatan (Note Box) Keren di Postingan Blog

Cara Membuat Kotak Catatan Keren (Note Box) Di Postingan Blog Dengan CSS - Kotak catatan ini biasanya digunakan untuk memberitahu dan menunjukkan kepada pembaca artikel, bahwa teks atau paragraf tersebut merupakan perihal yang penting atau yang semisalnya seperti memberikan info tambahan, tips atau peringatan keras.

Kotak catatan (note box) ini tergolong penting menurut saya. Apalagi konten yang kamu buat itu berkaitan dengan berita, informasi, dan tutorial. Walaupun kebanyakan blogger lebih sering menggunakan fitur blockquote bawaan template. Tapi rasanya kurang menarik dan kurang keren aja kalau antara catatan biasa dengan catatan penting itu memiliki tampilan yang sama. 

Baca Juga 10 Trik Jitu Cara Meningkatkan View Video YouTube Secara Manual

Di artikel kali ini saya akan memberikan tutorial sederhana cara membuat kotak catatan (note box) di dalam postingan blog. Tutorial ini mudah dilakukan dan yang pasti aman terhadap loading blog kamu. Karena note box ini menggunakan CSS dan sudah di minifier lagi agar lebih ringan. Jadi gak terlalu ngaruh ke loading blog kamu. Untuk tutorialnya kamu bisa ikuti langkah-langkah dibawah ini.

Cara Membuat Kotak Catatan (Note Box) Keren dan Responsive di Artikel Blog 

1. Buka dashboard blogger kamu
2. Masuk ke menu Theme » Edit HTML
3. Tambahkan CSS note box dibawah ini tepat diatas ]]></b:skin> atau </style>

   /*css note block */
   .notes{position:relative;border-radius:4px;display:block;font-size:14px;margin:16px 0;padding:12px 24px 12px 60px}.notes:before{float:left;font-size:30px;font-family:FontAwesome;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-wrap:normal;margin-left:-46px;margin-top:3px}.notes1:before{color:#21a796;content:'\f087'}.notes1{background:#cfffe6;color:#565656}.notes2:before{color:#f95060;content:'\f088'}.notes2{background:#f9bfc5;color:#565656}.notes3:before{color:#2387c1;content:'\f06a'}.notes3{background:#c8d9e2;color:#565656}.notes4:before{color:#1aa687;content:'\f00c'}.notes4{background:#6dedd0;color:#565656}.notes5:before{color:#f63a50;content:'\f00d'}.notes5{background:#fb818f;color:#fff}.notes6:before{color:#f7871a;content:'\f10d'}.notes6{background:#f5b474;color:#fff}.notes7:before{color:#969696;content:'\f0c1'}.notes7{background:#f5f68e;color:#565656}.notes1:hover:before,.notes2:hover:before,.notes3:hover:before,.notes4:hover:before,.notes5:hover:before,.notes6:hover:before,.notes7:hover:before,.notes8:hover:before,.notes9:hover:before,.notes10:hover:before{-webkit-animation:ripple 0.65s linear;-moz-animation:ripple 0.65s linear;-ms-animation:ripple 0.65s linear;-o-animation:ripple 0.65s linear;animation:ripple 0.65s linear}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}

4. Kemudian save template kamu. 

Baca Juga Cara Mengirim SMS Gratis Ke Semua Operator Indonesia Dengan Mudah

Sampai langkah ini note box sudah bisa kamu terapkan langsung di postingan atau halaman blog kamu. Untuk cara pemasangan note box ini, kamu tambahkan class="notes notes" pada setiap tag yang ingin kamu terapkan note box ini. Kamu bisa gandengkan note box ini dengan tag <div>.....</div> atau tag paragraf <p>....</p>. Lengkapnya seperti ini :

Tampilan note nox pertama. Cara penulisan :

<div class="notes notes1">Masukan teks catatan disini</div>

Tampilan note box ke dua. Cara penulisan :

<div class="notes notes2">Masukan teks catatan disini</div>

Tampilan note box ke tiga. Cara penulisan :

<div class="notes notes3">Masukan teks catatan disini</div>

Tampilan note box ke empat. Cara penulisan :

<div class="notes notes4">Masukan teks catatan disini</div>

Tampilan note box ke lima. Cara penulisan :

<div class="notes notes5">Masukan teks catatan disini</div>

Tampilan note box ke enam. Cara penulisan :

<div class="notes notes6">Masukan teks catatan disini</div>

Tampilan note box ke tiga. Cara penulisan :

<div class="notes notes7">Masukan teks catatan disini</div>

Kalau ikon note box tidak muncul atau nge-bleng, pastikan template kamu sudah terpasang font awesome. Karena ikon note box ini menggunakan font awesome

Nah, itukah tutorial cara membuat kotak catatan keren di dalam postingan blog yang bisa saya sampaikan di artikel kali ini. Kalau ada pertanyaan atau ada masalah saat memasang note box ini ke dalam template atau artikel, bisa tanyakan langsung di kolom komentar.

Referensi : adityatekno.com

Baca Juga