Membuat Catatan, Info, Warning, Tips, & 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.

Namun, dengan Membuat Catatan, Info, Warning, Tips, dan Update Dengan Font Awesome ini akan menjadikan tampilan yang lebih bewarna sobat. Cara ini saya temukan di blog teman saya +kowe sopan yang dia juga memakai cara ini.

Karena saya belum begitu paham dengan CSS serta HTML, dan saya hanya bisa mengedit saja, jadi saya akan share ulang aja dan terima kasih sobat +kowe sopan yang telah berbagi. Semoga bisa mempercantik blog sobat.

Memasangnya Pada Template
Karena cara ini menggunakan Font Awesome, maka kita perlu 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 = "stylesheet"; 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 sobat tambahkan CSS berikut ini untuk mengatur style tampilannya. Tambahkan tepat diatas  ]]></b:skin> atau kode </style> , 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 Penggunaan

Untuk cara penggunaannya sangat mudah sobat, 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 lain sobat, disini sobat hanya perlu mengganti Info dengan update atau yang lain sobat, jika belum mengerti juga silahkan bertanya dikomentar sobat yah. Semoga bermanfaat.. ^_^

Sumber referensi : http://obesitystrike.blogspot.com/2015/02/css3-info-box-dengan-icon-font-awesome.html