Serieswans.com | Cara Membuat Kotak Pesan Tips, Warning dan Baca Juga di Blog. Cara Membuat Pesan Tips dan Warning di Blogger. Halo sobat, pada kesempatan kali ini saya akan membuat tutorial membuat pesan tips dan warning di postingan blogger, supaya blog anda makin kece. kotak Pesan tips ini sangat berguna sekali jika di pasang di blog anda dengan tujuan memberi kondisi atau saran kepada pengunjung blog anda dan sangat cocok jika postinganya membahas mengenai tutorial.
Sama halnya dengan kotak Pesan Warning yang bisa kita buat untuk menyampaikan pesan khusus atau pesan peringatan kepada pengunjung blog. sedangkan baca juga untuk membuat internal link mengenai pembahasa artikel yang di buat.
Kotak Pesan Tips ini sudah menggunakan icon SVG, mengapa demikian? karena icon SVG ini lebih ringan dari pada icon lainnya seperti icon dari font awesome. jadi anda tidak perlu khawatir dengan masalah kecepatan loading blognya. anda bisa melihat contohnya di bawah ini.
 |
| Kotak Pesan Tips, Warning dan Baca Juga |
Nah, jika sudah melihat tampilannya dan anda tertarik untuk memasangnya. silahkan ikuti dan simak langkah-langkah di bawah ini.
Membuat Kotak Pesan Tips, Warning dan Baca Juga di Blog
- Masuk ke akun blogger anda, kemudian pilih Tema => Edit HTML
- Jika sudah, silahkan anda copy CSS di bawah ini dan letakan sebelum kode ]]></b:skin> atau </style>
/* Kotak Pesan Tips, Warning dan Baca Juga */
.tips{background:#f2fff8;} .tips strong{color:#00e676;text-transform:uppercase}
.tips::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:%2300e676' d='M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat center center;}
.read,.tips,.warning{display:block;font-size:16px;padding:20px 20px 20px 80px;position:relative;color:#000;clear:both}
.read::before,.tips::before,.warning::before{float:left;word-wrap:normal;white-space:nowrap;content:'';height:48px;left:16px;position:absolute;top:50%;transform:translateY(-50%);width:48px}
.read{background-color:#fffcef;} .read strong{color:#edc10a;text-transform:uppercase}
.read::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:%23edc10a' d='M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat center center;}
.warning{background:#fff6f6;} .warning strong{color:#ff5252;text-transform:uppercase}
.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;}
- Kemdian untuk menampilkan Kotak Pesan Tips, Warning dan Baca juga di dalam postingan. silahkan kode di bawah ini
Kotak Pesan Tips
<div class="tips">
<strong>tips —</strong> Disini tips yang ingin Anda sampaikan untuk pengunjung blog Anda.
</div>
Kotak Pesan Baca Juga
<div class="read">
<strong>Baca juga —</strong> <a href="#" title="Serieswans" target="_blank">Cara Membuat Kotak Pesan Tips, Warning dan Baca juga di Blog</a>
</div>
Kotak Pesan Warning
<div class="warning">
<strong>Warning —</strong> Disini adalah pesan peringatan atau pesan kusus yang ingin disapaikan untuk pengunjung blog anda.
</div>- Setelah itu pasang di postingan anda, pada mode HTML
tips — Silahkan anda ganti Url dan Isi pesan yang ingin anda sampaikan kepada pengunjung blog anda dan sudah saya tandai juga apa saja yang harus di ganti.
Nah, mungkin itu saja tutorial kali ini mengenai Cara Membuat Kotak Pesan Tips, Warning dan Baca Juga di Blog. jika ada pertanyaan silahkan tanyakan di kolom komentar. semoga bermanfaat.
1 komentar