Pehawe Official

Home
Blogger

Membuat Blok Catatan, Tips dan Peringatan di Blog

Cara penerapannya cukup mudah, sobat blogger tinggal menambahkan kode CSS di setelan template sobat, serta menyisipkan sedikit kode HTML di bagian post yang akan sobat sisipi catatan, tips maupun peringatan.
Membuat Blok Catatan, Tips dan Peringatan di Blog - Pada kesempatan kali ini saya akan berbagi cara membuat catatan, tips dan peringatan di blog agar terlihat stylish dan tentunya akan sangat cocok di pasang di blog sobat.


Cara penerapannya cukup mudah, sobat blogger tinggal menambahkan kode CSS di setelan template sobat, serta menyisipkan sedikit kode HTML di bagian post yang akan sobat sisipi catatan, tips maupun peringatan. Untuk lebih lanjutnya silahkan sobat simak tutorial berikut.

Pertama login ke akun Blogger > Template > Edit HTML > Copy dan Pastekan kode CSS Berikut tepat diatas kode ]]></b:skin>

/* CSS Catatan, Tips dan Warning */

.info, .tips, .warning {

 line-height: 22px;

 min-height: 38px;

 padding: 10px 12px 12px 68px;

 margin: 5px 0;

}

.info {

 background: #67809F url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj5ezcOOU2Y2hil2eszy7J1833R9R0BjIsb-KpzvlxKjDk-PXYEdv8C6rUFIwJcpdSS87DuX-wm6bCFBEWXMwT50rRsxv0SDhtE2zNyJVpSiamkrhrIRHSmq6XMEkwhdyLJzDLggiX2no/s1600/info.png') no-repeat 12px 8px;
 color: #222

}

.tips {

 background: #049372 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6irKU0asTrug1lKND_pnT1Dgly5cdseBU097ebVtfYXew2t6dh9wpPw60qUjQQ8ECAgiwyue-VPxetFND6o_Ib7gGYGhmdM-McyzrvGWMD6nhyBSx4nzz3eYet1AZnZ4LCc5ZBo0DFnM/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;

}

.warning {

 background: #e74c3c url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQJwCd98oC6NNXtJaM9ZivPkeGJAbQrsv8F9tmS3rSdIXTDrOxAX4U351vTe9aLtaHlE6qterl18-9vSb-BiX7uiXi7grBonLTAWkL9CDy93dSEL6P4u_NjRJn4nb_VtJ1OoX4HPdhv0/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;

}

Untuk menerapkan di postingan, silahkan tambahkan kode HTML berikut di postingan sobat (pilih tab HTML dulu)

Contoh pemasanga kode untuk Catatan/info
<div class="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>
Contoh pemasanga kode untukTips
<div class="tips">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>
Contoh pemasanga kode untukWaning/Peringatan
<div class="warning">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div> 

Sobat juga bisa menggunakan tag p untuk penulisan HTML, contoh :

<p class="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</p>

Source : blog.Kangismet