|
Perkenalan
Halo Semuanya, di postingan kali ini saya akan membagikan Tutorial Bagaimana Cara Menambahkan Notifikasi Alert di Blogger.
Notifikasi ini bisa kalian gunakan untuk memberikan informasi kepada pengujung website anda, seperti biasa kalian bisa mengembangkan kode ini sesuai keinginan kalian. Langsung saja kita prakteknya, untuk cara pemasangan kalian bisa liat disini.
Untuk Demo Kalian Bisa Cek Link DIbawah
Penting!
Sebelum Memulai Nya Ada Baiknya Kalian Memback-up Template Kalian Terlebih dahulu.
Source Code
<div class="notif info"><b>Info!</b>
Notifikasi Info- Lorem ipsum dolor sit amet.
</div>
<div class="notif warning"><b>Warning!</b>
Notifikasi Warning - Lorem ipsum dolor sit amet.
</div>
<div class="notif success"><b>Success!</b>
Notifikasi Sukses - Lorem ipsum dolor sit amet.
</div>
<div class="notif error"><b>Error!</b>
Notiikasi error - Lorem ipsum dolor sit amet.
</div>
<style>
/* notif Box by Seonxnn */ .notif { --clr: var(--linkC); --szsp: 20px; position: relative; border-radius: 8px; margin: var(--szsp) 0; padding: calc(var(--szsp) * .6) var(--szsp); font-size: calc(var(--szsp) * .75); line-height: calc(var(--szsp) * 1.3); overflow: hidden; z-index: 1 } .notif:not(.outline) { color: var(--clr) } .notif:not(.outline)::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--clr); z-index: -1; opacity: .1 } .notif.outline { border: 1px solid var(--clr) } .notif.info::after, .notif.warning::after, .notif.success::after, .notif.error::after { content: ""; position: absolute; height: calc(100% - var(--sptp)); left: calc(var(--szsp) * 1.125); border-left: 1px solid var(--clr); top: calc(var(--szsp) * 2.4); --sptp: calc(var(--szsp) * 3.2) } .notif.info, .notif.warning, .notif.success, .notif.error { background-repeat: no-repeat; background-size: var(--szsp); background-position: calc(var(--szsp) * .7) calc(var(--szsp) * .7); /* notif Box by Seonxnn */ padding-left: calc(var(--szsp) * 2.5) } .notif.info { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32z' fill='%2300a7e6'/%3E%3C/svg%3E") } .notif.warning { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm32 224c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z' fill='%23ecb621'/%3E%3C/svg%3E") } .notif.success { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z' fill='%2341ba79'/%3E%3C/svg%3E") } .notif.error { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0c53 0 96 43 96 96v3.6c0 15.7-12.7 28.4-28.4 28.4H188.4c-15.7 0-28.4-12.7-28.4-28.4V96c0-53 43-96 96-96zM41.4 105.4c12.5-12.5 32.8-12.5 45.3 0l64 64c.7 .7 1.3 1.4 1.9 2.1c14.2-7.3 30.4-11.4 47.5-11.4H312c17.1 0 33.2 4.1 47.5 11.4c.6-.7 1.2-1.4 1.9-2.1l64-64c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-64 64c-.7 .7-1.4 1.3-2.1 1.9c6.2 12 10.1 25.3 11.1 39.5H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H416c0 24.6-5.5 47.8-15.4 68.6c2.2 1.3 4.2 2.9 6 4.8l64 64c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-63.1-63.1c-24.5 21.8-55.8 36.2-90.3 39.6V240c0-8.8-7.2-16-16-16s-16 7.2-16 16V479.2c-34.5-3.4-65.8-17.8-90.3-39.6L86.6 502.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l64-64c1.9-1.9 3.9-3.4 6-4.8C101.5 367.8 96 344.6 96 320H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96.3c1.1-14.1 5-27.5 11.1-39.5c-.7-.6-1.4-1.2-2.1-1.9l-64-64c-12.5-12.5-12.5-32.8 0-45.3z' fill='%23ff6372'/%3E%3C/svg%3E") } .notif.info { --clr: #3e69a8 } .notif.warning { --clr: #8f6919 } /* notif Box by Seonxnn */ .notif.success { --clr: #127a5b } .notif.error { --clr: #be2e3c } .notif>strong:first-child, .notif>i:first-child, .notif>b:first-child { display: block; margin-bottom: 8px; font-family: var(--fontC); font-weight: 700; color: var(--clr) } .drK .notif.info { --clr: #00a7e6 } .drK .notif.warning { --clr: #ecb621 } .drK .notif.success { --clr: #41ba79 } .drK .notif.error { --clr: #ff6372 } .notif > ol, .notif > ul { padding-inline-start: 20px; }
</style>
Kosongg
Kesimpulan
Diatas adalah Cara Menambahkan Notifikasi Alert di Blogger., Jika Ingin Request Silahkan Berikan Komentar atau menuju Halaman Request:v. Sampai Jumpa di potingan Berikutnya :p
