Membuat Catatan, Info, Warning, Tips, & Update

Blok model ini bergotong-royong tidak terlalu penting, namun cukup dapat menciptakan tampilan blog kita menjadi lebih profesional. Mengapa tidak penting, sebab fungsinya yang dapat terbilang sama aja dengan Quote yang telah tersedia pada setiap template.
 Blok model ini bergotong-royong tidak terlalu penting Membuat Catatan, Info, Warning, Tips, & Update

Namun, dengan Membuat Catatan, Info, Warning, Tips, dan Update Dengan Font Awesome ini akan mengakibatkan tampilan yang lebih bewarna sobat. Cara ini aku temukan di blog teman aku +kowe sopan yang beliau juga menggunakan cara ini.
Karena aku belum begitu paham dengan CSS serta HTML, dan aku hanya dapat mengedit saja, jadi aku akan share ulang aja dan terima kasih sobat +kowe sopan yang telah berbagi. Semoga dapat 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 sempurna 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 dikala Font Awesome dipanggil, sebab akan dipanggil sesudah seluruh komponen blog termuat.

Selanjutnya sobat tambahkan CSS berikut ini untuk mengatur style tampilannya. Tambahkan sempurna diatas  ]]></b:skin> atau isyarat </style> , cari isyarat itu menggunakan ctrl+f semoga gampang 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 gampang sobat, bila sobat tengah menciptakan postingan sobat dapat masuk ke mode HTML bukan Compose, nah sesudah itu gunakan salah satu pemanggil setiap class dari masing-masing gosip box. Untuk memudahkan pemahaman sobat, aku buatkan teladan satu menyerupai 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, bila belum mengerti juga silahkan bertanya dikomentar sobat yah. Semoga bermanfaat.. ^_^
Sumber rujukan : http://obesitystrike.blogspot.com/2015/02/css3-info-box-dengan-icon-font-awesome.html


Sumber https://www.iwanberbagi.com