Cara Membuat Pesan di dalam postingan
Sunday, July 14, 2019
Cara Membuat Pesan Warning, Tips, dan Baca
Juga di Postingan Blog agar postingan lebih terlihat menarik dan keren.
Membuat Pesan Warning, Tips, dan
Baca Juga di Postingan Blog - Setelah sebelumnya Saya sudah
membagikan tutorial membuat pesan warning dan tips,
kali ini Saya akan coba membuat postingan cara Membuat
Pesan Warning, Tips, dan Baca Jugamenjadi satu, agar CSS lebih simple dan
ringkas.
Untuk kegunaan pesan warning dan tips bisa Anda lihat di postingan
sebelumnya yang sudah Saya bagikan. Dan untuk kegunaan pesan baca juga adalah
untuk menyimpan atau membuat link yang menuju ke postingan yang terkait atau
link postingan lainya yang ingin Anda rekomendasikan kepada pengunjung.
Contohnya seperti dibawah ini.
BACA
JUGA — Membuat Catatan Dengan Efek Kertas Lipat Di Postingan
Blog
Untuk demo pesan warning dan tips seperti dibawah ini.
TIPS
— Disini tips yang ingin Anda bagikan untuk pengunjung
blog Anda
WARNING
— Disini adalah pesan peringatan atau pesan kusus yang
ingin disapaikan untuk pengunjung blog.
Nah, setelah melihat hasilnya mungkin Anda tertarik untuk memasangnya di
blog Anda juga. Jika Anda ingin mencobanya di blog Anda agar artikel lebih
terlihat menarik, silahkan simak caranya berikut ini.
Membuat Pesan Warning, Tips, dan Baca
Juga di Postingan Blog
Masuk 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>.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;}
.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;}
.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;}
Kemudian, untuk menampilkan kotak warning, tips, dan baca juga di dalam
postingan, gunakan kode dibawah ini dalam mode HTML bukan compose.
Pesan Warning
<div class="warning">
<strong>Warning —</strong> Disini adalah pesan peringatan atau pesan kusus yang ingin disapaikan untuk pengunjung blog.
</div>
Tips
<div class="tips">
<strong>tips —</strong> Disini tips yang ingin Anda bagikan untuk pengunjung blog Anda.
</div>
Baca Juga
<div class="read">
<strong>Baca juga —</strong> <a href="https:/lipube.blogspot.com" title="lipube" target="_blank">lipube</a>
</div>
Ganti tulisan atau URL yang sudah Saya tandai dengan tulisan atau URL yang
ingin di tulis untuk pengunjung blog Anda.
Demikian artikel tentang Membuat
Pesan Warning, Tips, dan Baca Juga di Postingan Blog.. Semoga
bermanfaat.