Skip to main content
Website Mini

follow us

Website Mini - Cara membuat pesan warning atau kotak warning di postingan blog, membuat pesan warning di blog dengan icon SVG.

Membuat Pesan Warning di Postingan Blog Dengan Icon SVG - Sebelumnya Saya sudah membagikan tutorial Membuat catatan dengan efek kertas lipat di postingan blog. Dan pada kesempatan kali ini Saya akan mencoba posting Membuat Pesan Warning di Postingan Blog dengan icon SVG

Pesan warning atau kotak warning ini bisa kita buat untuk menyampaikan pesan peringatan atau pesan kusus kepada pengunjung blog Anda. Pesan warning ini Saya buat dengan icon, untuk icon-nya menggunakan icon SVG agar tidak membuat loading blog Anda menjadi berat.

Untuk Live Demonya seperti contoh warning dibawah ini.

Warning — Disini adalah pesan peringatan atau pesan kusus yang ingin disapaikan untuk pengunjung blog

Bagaimana, menurut Anda? Nah, setelah Anda melihat demonya mungkin Anda tertarik untuk membuat pesan warning di postingan blog Anda. Jika ingin membuat pesan seperti diatas, silahkan ikuti caranya dibawah ini.

Membuat Pesan Warning Di Postingan Blog Dengan icon SVG

Yang pertama, masuk ke akun blogger Anda, pilih menu Tema kemudian klik Edit HTML.

Jika sudah, copy CSS dibawah ini dan simpan di atas kode ]]></b:skin> atau </style>


.warning{background:#fff6f6;display:block;font-size:16px;padding:20px 20px 20px 80px;position:relative;color:#000;clear:both}
.warning strong{color:#ff5252;text-transform:uppercase}
.warning::before{float:left;word-wrap:normal;white-space:nowrap;content:'';height:48px;left:16px;position:absolute;top:50%;transform:translateY(-50%);width:48px}
.warning::before{background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ff5252' d='M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat center center;}

Jika kurang pas dengan warna backgroundnya, Anda bisa mengganti kode #fff6f6 untuk warna background. Dan kode warna ff5252 Untuk warna icon dan tulisan Warning.

Kemudian, untuk menampilkan pesan peringatan atau kotak peringatan di dalam postingan, gunakan kode dibawah ini dalam mode HTML bukan compose.


<div class="warning">
<strong>Warning —</strong> Disini adalah pesan peringatan atau pesan kusus yang ingin disapaikan untuk pengunjung blog.
</div>

Jangan lupa ganti tulisan yang Saya tandai dengan tulisan yang ingin di sampaikan untuk pengunjung blog.

Baca juga — Membuat Pesan Tips di Postingan Blog

Demikian artikel tentang Membuat Pesan Peringatan Di Postingan Blog Dengan Icon SVG. Semoga bermanfaat.

You Might Also Like:

Buka Komentar