Halo sob, pada artikel kali ini, saya akan membagikan tutorial cara membuat Popup order notifikasi untuk blogger dengan css dan javascript. Popup notifikasi ini sangat responsive, karena hanya di buat dengan css dan javascript, tanpa perlu memakai jQuery.
Oh ya sob, jika kalian ingin mengshare ulang script ini, admin harap kalian memberikan kode sumber pembuatnya di akhir postingan kalian, tujuannya untuk menghargai pembuatnya.
Popup order notifikasi ini akan muncul secara bergantian, sangat cocok di gunakan untuk blog jual beli. Meskipun popup ini dibuat secara manual, setidaknya bisa menarik pelanggan yang sedang berkunjung ke blog kamu. Oke buat kalian yang sudah tidak sabar untuk memasang script ini, langsung saja ikuti cara pemasangannya di bawah ini.
Cara Membuat Popup Order Notifikasi Responsive Tanpa jQuery
1). Pertama Masuk ke Blogger > Tema > Edit Html
2). Cari kode ]]></b:skin> kemudian letekan kode css dibawah ini, tepat di atasnya
.livesales{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;font-weight:400;line-height:1.6}
.livesales .item{position:fixed;bottom:0;left:0;display:flex;overflow:hidden;z-index:200;max-width:300px;font-size:16px;background:rgba(255,255,255,.95);padding:15px 20px;box-shadow:0 10px 15px rgba(0 0 0 /8%);color:#222;transition:all .4s ease;border-radius:4px;line-height:1.4;opacity:0;visibility:hidden}
.livesales .item.active{left:20px;bottom:40px;opacity:1;visibility:visible}
.livesales .item .image{display:flex;padding-right:20px}
.livesales .item .img{background:#eeeeee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSO8JOiGENoYHko0-ibh25F6ypAYZJcUVx7GmTvEL46ZL2nUXXVy1o27UBh2mEjOZQxqYiA3EA-fsRXTrUIDER_CIebYI5fylG3rpm0X7qA3ojyq4Rfr6ogcT6el70l7B5a0hr0iw93MI/h60/ava.png);background-size:cover;display:block;width:80px;height:80px;border-radius:80%;box-shadow:0 0 0 4px rgba(0 0 0 0 2%)}
.livesales .item .content{position:relative}
.livesales .item button{display:inline-block;width:30px;height:30px;line-height:30px;font-size:100%;margin:-15px -20px 10px 20px;border:none;background:transparent;color:#222;cursor:pointer;font-weight:500;position:absolute;right:0}
.livesales .item button:before{content:'x'}
.livesales .item .info b{color:#222}
.livesales .item .info a{color:#2fad4a;text-decoration:none}
.livesales .item .info a:hover{text-decoration:underline}
.livesales .item small{font-size:75%;opacity:.8;display:block;border-top:1px solid rgba(0,0,0,.06);margin-top:8px;padding-top:8px}
.livesales .item small:after{content:'';display:block;clear:both}
3). Langkah selanjutnya anda letakan kode javascript dibawah ini tepat diatas kode </body> atau <!--</body>--></body>
<script>/*<![CDATA[*/
const dataOrder = {
"data":[
{
nama:"Hanzo",
image:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42tgjkk3sh5GZHDwu2dcuAVr9_qO5XzQTbojZT2Fzofk00LyrmgTtvRfQqNhyphenhyphenW4HVrtm_iAJwNxYvr3o5oS13n3VnE8LqqclGjrTOQijHQEVpDg63pWMfXRF9Hb6OOX44E7_TRl_vvJb3/s113/IMG_20211020_000152.jpg",
kota:"Land of dawn",
tanggal:"1 menit yang lalu",
produk:"Skin Venom Gusion",
url:"www.google.com"
},
{
nama:"Gusion", // Nama Pembeli
image:"", // Gambar profile pembeli
kota:"Land of dawn", // kota asal pembeli
tanggal:"25 menit yang lalu", // tanggal pembelian
produk:"item jungle", // pembelian produk apa
url:"" // url pembelian apa
},
{
nama:"Zilong", // Nama Pembeli
image:"", // Gambar profile pembeli
kota:"Land of dawn", // kota asal pembeli
tanggal:"20 menit yang lalu", // tanggal pembelian
produk:"item roam", // pembelian produk apa
url:"" // url pembelian apa
}
// Paste disini untuk menambah data pembeli
]
};
dataOrder.data.forEach((el) =>{
var img = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSO8JOiGENoYHko0-ibh25F6ypAYZJcUVx7GmTvEL46ZL2nUXXVy1o27UBh2mEjOZQxqYiA3EA-fsRXTrUIDER_CIebYI5fylG3rpm0X7qA3ojyq4Rfr6ogcT6el70l7B5a0hr0iw93MI/h60/ava.png";
if(el.image != ""){
img = el.image
}
document.querySelector('.livesales').innerHTML += '<div class="item"><div class="image"><span class="img" style="background-image:url('+img+')"></div><div class="content"><button class="close"></button><span class="info"><b>'+el.nama+'</b> dari <b>'+el.kota+'</b> telah membeli <a href="'+el.url+'" target="_blank">'+el.produk+'</a><small>'+el.tanggal+'</small></span></div></div>'
})
document.querySelector('.livesales > .item:not(:first-child)').classList.remove('active')
setInterval(() => {
document.querySelector('.livesales .item:first-child').classList.add('active');
setTimeout(() => {
document.querySelectorAll('.livesales .item:first-child').forEach((el) =>{
el.classList.remove('active');
})
document.querySelector('.livesales').append(document.querySelector('.livesales').childNodes[0])
}, 5000);
}, 8000);
document.querySelectorAll('.item .close').forEach((el) =>{
el.addEventListener('click', ()=>{
document.querySelector('.item').classList.remove('active')
})
})
/*]]>*/</script>
,
{
nama:"Alucard", // Nama Pembeli
image:"", // Gambar profile pembeli
kota:"Land of dawn", // kota asal pembeli
tanggal:"20 menit yang lalu", // tanggal pembelian
produk:"item roam", // pembelian produk apa
url:"" // url pembelian apa
}
4). Kemudian, anda letekan kode html di bawah ini, di bawah kode <body>.
<div class="livesales"></div>
5). Jika sudah, silahkan simpan.
Nah itulah sob cara membuat Popup order notifikasi. Mungkin itu aja yang dapat admin share kali ini untuk kalian, semoga artikel ini bermanfaat. Jika ada yang ingin kalian tanyakan, silahkan komentar dibawah ya. Terimakasih^^