Cara Membuat Kotak Catatan Keren di Postingan Blog

Cara Membuat Kotak Catatan Keren di Postingan Blog - Banyak sekali modifikasi yang bisa kita lakukan untuk mempercantik tampilan postingan blog kita, salah satunya yaitu dengan membuat kotak catatan dipostingan blog.

Kotak catatan ini pada dasarnya sama seperti fitur blockquote yang ada dipostingan blog, yaitu untuk mengutip teks penting yang ada dipostingan blog kita. Hanya saja, kotak catatan yang akan saya bagikan kali ini, jauh lebih menarik karena menggunakan font awesome dan sedikit animasi hover.

Jika blog kamu berisi tentang tutorial yang banyak memposting kode-kode, seperti javascript, css dan sebagainya, maka kamu wajib memasang kotak catatan keren ini untuk mempercantik tampilan postingan blog kamu.

Bagi kamu yang penasaran bagaimana tampilan kotak catatan ini, kamu bisa langsung melihat demo-nya disini.

Bagaimana, menarik kan? langsung saja, bagi kamu yang ingin memasang kotak catatan keren ini diblog, kamu bisa mengikuti langkah-langkahnya dibawah ini.

Membuat Kotak Catatan Keren di Postingan Blog

Karena kotak catatan ini menggunakan icon dari font awesome, maka hal pertama yang harus kamu lakukan adalah memastikan didalam tema blog kamu sudah terdapat script font awesome.

Jika belum, kamu bisa menambahkan script font awesome dibawah ini sebelum kode </head> didalam tema blog kamu.

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Setelah kamu memasang script font awesome diatas, maka langkah selanjutnya adalah menambahkan kode css dibawah ini tepat sebelum kode </head> didalam tema blog kamu.

<style type='text/css'>
/* Kotak Catatan with Animasi Icon */
.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}
/* Anamasi Icon*/
.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)}}
</style>

Selesai, lalu simpan tema blog kamu.

Shortcode Pemanggil Kotak Catatan

Untuk menerapkan kotak catatan ini dipostingan blog kamu, kamu harus menggunakan kode dibawah ini pada mode HTML ketika membuat postingan blog.

<div class="notes notes1">Tulis catatan kamu disini.</div>

Keterangan:

1. notes1 : kamu bisa ganti dengan notes1 - notes7, sesuai dengan versi catatan yang kamu mau.
2. Tulis catatan kamu disini : isi dengan tulisan yang kamu mau.

Bagaimana, sangat mudahkan?

Baiklah, saya rasa itu saja yang bisa saya bagikan pada kesempatan kali ini. Semoga artikel tentang "Cara Membuat Kotak Catatan Keren di Postingan Blog" ini bisa bermanfaat untuk kalian semua.

Jika kamu masih bingung, atau memiliki pertanyaan seputar artikel diatas, jangan sungkan untuk bertanya dikolom komentar dibawah ini ya. Sampai jumpa.