Cara Membuat Catatan Info Warning Tips dan Update

Blok model ini sebenarnya tidak terlalu penting, namun cukup bisa membuat tampilan blog kita menjadi lebih profesional. Mengapa tidak penting, karena fungsinya yang bisa terbilang sama aja dengan Quote yang telah tersedia pada setiap template.

Hanya saja, dengan Membuat Catatan, Info, Warning, Tips, dan Update Dengan Font Awesome ini akan menjadikan tampilan blog kita lebih menawan. Cara ini saya temukan di blog teman kamar sebelah yang juga menggunakannya

Karena saya belum begitu paham dengan CSS serta HTML, jadi saya hanya  mengedit saja, kemudian saya akan share ulang kepada sobat yang ingin memasangnya.

Baca Juga : Cara Mengenkripsi Atau Menyamarkan Script Menggunakan Obfuscator

Cara Memasang Code Catatan Info, Warning, Tips dan Update

Cara ini menggunakan Font Awesome, maka menyisipkan Font Awesome di dalam template sobat. Masuk ke Edit HTML dan tambahkan Script berikut tepat diatas </head> gunakan ctrl+f untuk memudahkan pencarian.

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

Script tersebut sudah dilengkapi dengan pemanggilan secara async jadi tidak akan memperlambat blog sobat ketika Font Awesome dipanggil, karena akan dipanggil setelah seluruh komponen blog termuat.

Selanjutnya tambahkan CSS berikut ini untuk mengatur class tampilannya. Tambahkan tepat diatas  ]]></b:skin> atau kode </class>, cari kode itu menggunakan ctrl+f agar mudah sobat.

.catatan,.info,.warning,.tips,.update{display:block;font-style:normal;color:#333;padding:15px 18px 15px 48px;border-bottom:1px solid rgba(0,0,0,0.1);position:relative;border-radius:3px;margin:0 0 10px;color:#FFF}
.catatan:before,.info:before,.warning:before,.tips:before,.update:before{font-family:"FontAwesome";display:block;position:absolute;top:15px;left:16px;color:rgba(0,0,0,0.15);font-size:22px;line-height:1}
.catatan:before{content:'\f11d'}
.info:before{content:'\f05a'}
.warning:before{content:'\f071'}
.tips:before{content:'\f028'}
.update:before{content:'\f085'}
.catatan{background-color:#49A5D7}
.info{background-color:#FF9531}
.warning{background-color:#B25A5A}
.tips{background-color:#FAD163;color:#000}
.update{background-color:#69A24A}

Cara Penggunaannya

Cara penggunaannya sangat mudah, jika sobat tengah membuat postingan, sobat bisa masuk ke mode HTML bukan Compose, nah setelah itu gunakan salah satu pemanggil setiap class dari masing-masing info box. 

Untuk memudahkan pemahaman sobat, saya buatkan contoh satu seperti berikut:

<div class="info"> Teks Sobat Disini </div>

Begitu juga dengan fungsi class yang lainnya, disini sobat hanya perlu mengganti Info dengan update atau yang lainnya, jika belum mengerti juga silahkan bertanya di kolom komentar yang sudah disediakan. Semoga bermanfaat.