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 adalah Gratis, dan untuk mereshare ulang Artikel ini silahkan sertakan link sumber dari Pehawe.

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. Jika ingin berkomentar dg format css, js dan html silahkan Parse terlebih dahulu.
Show Parser
Buka Komentar
Citchat