Cara Membuat Notifikasi Order di Blog - KodeRian

Halo sobat KodeRian pada kesempatan kali ini saya akan membagikan sebuah Tutorial untuk Blogger yaitu "Notification Order Messages" adalah pemberitauan yang menandakan adanya sebuah pembelian suatu produk pada website untuk memaksimalkan penjualan dan kepercayaan pelanggan bahwa website atau situs yang dikunjungi sudah banyak pembelian produk disana. Salah satu contoh yang sering menggunakan tampilan notif order kebanyakan halaman landing page yang menjual suatu produk. Untuk tampilannya sobat bisa lihat contoh gambar dibawah ini.

Dengan adanya notif order ini dapat memberitahukan kepada orang lain saat berkunjung ke website toko online Anda. Bahwa ada orang lain yang sudah melakukan pembelian dari salah 1 produk kita dan itu berfungsi untuk memberikan rasa kepercayaan pada orang yang pertama kali berkunjung ke toko Anda untuk ikut membeli produk yang dijual / ditawarkan.

Pembuatan tampilan notif order tersebut kita dapat menggunakan JavaScript sebagai perantarannya. Disini data yang dimasukkan belum masuk ke database secara real-time, mungkin nanti saya update lagi biar lebih enak jadi ambil dari databse kita.

Tampilan notif order diatas tadi, saya belum coba terapkan pada tema toko online sebab belum buat. Tapi untuk tampilannya kalian bisa lihat di template demo. Untuk memasangnya di jenis template apapun. Anda bisa ikuti langkah panduan dibawah ini.

Memasang Notification Order di Blog

Pertama silahkan untuk buka Blogger terlebih dahulu. Setelah terbuka, klik Tema > klik Edit HTML (saya anggap kalian sudah tau caranya). Kemudian cari kode bernama <b:skin> atau <style> dan tambahkan kode css dibawah ini. Kalian bebas untuk menambahkan sebelum atau sesudah kode <b:skin> atau <style>.

.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:20px;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/AVvXsEjhiFWUMvOQKZPicY7jaEoIySbBeScvTv5NU0jwZT8n7SHdOdhn-YhKUnv5vYQRe3InohBi9ag-pTXYNXGeuxisKGcWvYaPIr310t6sgY0MdeVBauCygaPWJPb_8JMVdRI-PUZRhZBASB4/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}

Berikutnya cari kode bernama </body> atau </head> dan tambahkan kode javascript dibawah ini. Kalian bebas untuk menambahkan sebelum atau sesudah kode </body> atau </head>.

 <script>/*<![CDATA[*/
       const dataOrder = {
            "data":[
                {
                    nama:"Nama Pembeli", // Nama Pembeli
                    image:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhiFWUMvOQKZPicY7jaEoIySbBeScvTv5NU0jwZT8n7SHdOdhn-YhKUnv5vYQRe3InohBi9ag-pTXYNXGeuxisKGcWvYaPIr310t6sgY0MdeVBauCygaPWJPb_8JMVdRI-PUZRhZBASB4/h60/ava.png", // Gambar profile pembeli
                    kota:"Bandung", // kota asal pembeli
                    tanggal:"1 hari lalu", // tanggal pembelian
                    produk:"Template Flet Banget", // pembelian produk apa
                    url:"https://www.malestea.com/2021/02/flet-banget-responsive-blogger-theme.html" // url pembelian apa
                },
                {
                    nama:"", // Nama Pembeli
                    image:"", // Gambar profile pembeli
                    kota:"", // kota asal pembeli
                    tanggal:"", // tanggal pembelian
                    produk:"", // pembelian produk apa
                    url:"" // url pembelian apa
                },
                {
                    nama:"", // Nama Pembeli
                    image:"", // Gambar profile pembeli
                    kota:"", // kota asal pembeli
                    tanggal:"", // tanggal pembelian
                    produk:"", // 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/AVvXsEjhiFWUMvOQKZPicY7jaEoIySbBeScvTv5NU0jwZT8n7SHdOdhn-YhKUnv5vYQRe3InohBi9ag-pTXYNXGeuxisKGcWvYaPIr310t6sgY0MdeVBauCygaPWJPb_8JMVdRI-PUZRhZBASB4/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])
            }, 4000);
        }, 10000);
        document.querySelectorAll('.item .close').forEach((el) =>{
            el.addEventListener('click', ()=>{
                document.querySelector('.item').classList.remove('active')
            })
        })
/*]]>*/</script>

Terakhir untuk menampilkan hasil dari notif order, tambahkan kode dibawah ini. Kalian bisa taruh kodenya setelah </head>.

<div class="livesales"></div>

Lalu klik "SIMPAN".

Penjelasan :

• edit kode yang saya beri tanda merah sesuai dengan data yang Anda inginkan.

Bila ingin menambah data dari notif order, tambahkan kode dibawah ini pada bagian kode yang sudah saya tandai diatas.

,{
                    nama:"", // Nama Pembeli
                    image:"", // Gambar profile pembeli
                    kota:"", // kota asal pembeli
                    tanggal:"", // tanggal pembelian
                    produk:"", // pembelian produk apa
                    url:"" // url pembelian apa
                }

Penutup

Sampai langkah ini, saya rasa kalian sudah berhasil memasang tampilan notification order ini di blog, Jika masih mengalami masalah / kendala dalam pemasangannya. Jangan ragu untuk menulis pertanyaan dikolom komentar.

Sampai disini saja dulu dan artikel pada blog ini akan terus saya update Setiap 2 Hari meskipun cuman Satu atau Dua saja tapi itu lebih baik daripada Tidak :#