Cara Membuat Kotak Pesan Tips, Warning dan Baca Juga di Blog

Daftar isi [Tampil]
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.
Cara Membuat Kotak Pesan Tips, Warning dan Baca Juga di Blog
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.
Show comments
Hide comments

Belum ada Komentar untuk "Cara Membuat Kotak Pesan Tips, Warning dan Baca Juga di Blog"

Posting Komentar

Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Copyright © 2019 - 2020 Serieswans - All Rights Reserved Created With