Skip to main content

follow us

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('http://2.bp.blogspot.com/-3rcGQ-VAKb8/UlA4L72c6wI/AAAAAAAAFtY/f__fkV_xBsQ/s1600/info.png') no-repeat 12px 8px; color: #222
}
.tips {
background: #049372 url('http://2.bp.blogspot.com/-_Y9kuQODeBs/UlA4LwDUkhI/AAAAAAAAFtk/Rm0QwoddGLw/s1600/tips.png') no-repeat 12px 8px; color: #fff;
}
.warning {
background: #e74c3c url('http://2.bp.blogspot.com/-rgsBmdJYFkM/UlA4LyWCrqI/AAAAAAAAFtc/suIf3IwnpgE/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
Disclaimer : Semua Konten yang kami bagikan semuanya adalah Gratis, dan kalian di ijinkan untuk mereshare ulang dg menyertakan link sumber dari Pehawe Dan kami tidak pernah meminta donasi atas apa yg kami bagikan. Trims

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar