Cara Membuat Notifikasi Order Pesan di Blogspot [Update]
Cara Membuat Notifikasi Order Pesan di Blogspot - Notif order ini berguna untuk sebuah blog yang melakukan penjualan produk. Jika Anda adalah salah 1 pembisnis online dan ingin memaksimalkan penjualan lebih banyak. Maka dengan memasang fiktur notif order ini sangat cocok untuk memancing emosi calon pembeli.
Salah satu contoh yang sering menggunakan tampilan notif order ini kebanyakan dari halaman landing page yang menjual 1 produk saja. Untuk tampilannya sobat bisa lihat contoh gambar dibawah ini.
![]() |
Image by boshjn.id |
Sudah paham maksud dari saya? Fungsinya adalah untuk memberitahukan kepada orang lain saat berkunjung ke webiste toko online Anda / halaman produk landing page Anda.
Bahwa ada orang lain yang sudah melakukan pembelian dari salah 1 produk kita, dan itu befungsi untuk memberikan kepercayaan orang yang pertama kali berkunjung ke toko kita untuk ikut membeli produk yang kita jual / tawarkan.
Yang menjadi pertanyaan, bagaimana caranya kita membuat tampilannya seperti itu?
Tampilan notif order diatas tadi, saya terapkan di template Toko online demo. Untuk memasangnya di jenis template lainnya, Anda bisa ikuti panduan dibawah ini.
Memasang Notif Order di Template Blogger
Langkah 1: Silahkan Anda salin dulu semua kode dibawah ini, dengan cara klik CTRL+A lalu CTRL+C
<!--==== css notif order ====--> <style> .orderNotif{font-family:Roboto,sans-serif;font-weight:400;line-height:1.6} .orderNotif .item{position:fixed;bottom:0;left:0;z-index:300;max-width:300px;font-size:14px;background:rgba(255,255,255,.95);padding:15px 25px;box-shadow:0 10px 20px rgba(0,0,0,.1);color:#888;transition:.4s;opacity:0;visibility:hidden} .orderNotif .item:hover{background:#fff} .orderNotif .item span.avaURL{background:#fafafa url(//lh3.googleusercontent.com/-QlJpOYV6yF4/XNEPty8zjJI/AAAAAAAAF6k/7RaA8suy7AsVhOYwcP6WLMf2qc54GUXWwCEwYBhgL/h60/ava.png) no-repeat center center;background-size:cover;display:block;margin-right:10px;width:40px;height:40px;border-radius:40px;line-height:1;float:left;margin-bottom:10px} .orderNotif .item.active{left:20px;bottom:20px;opacity:1;visibility:visible} .orderNotif .item.hidden{left:-40px!important;opacity:0!important;visibility:hidden!important} .orderNotif .item i{display:inline-block;vertical-align:middle;font-size:150%;line-height:1;margin-right:5px;color:#2FAD4A} .orderNotif .item h5{display:inline-block;float:right;margin-top:-15px;margin-right:-25px;border-top:0;border-right:0;overflow:hidden;margin-left:10px;margin-bottom:10px} .orderNotif .item h5 a{display:inline-block;vertical-align:middle;padding:5px 10px;border:.5px solid #eee;border-radius:0 0 0 6px;border-top:0;border-right:0} .orderNotif .item h5 a:active{background:#fafafa} .orderNotif .item h5 a i{display:inline-block;vertical-align:middle;font-size:150%;line-height:1;margin:0 5px;color:#2FAD4A} .orderNotif .item h5 a:hover i{color:#000000} .orderNotif .item .infoOrder b{font-weight:600;color:#2FAD4A} .orderNotif .item .infoOrder a{color:#000000} .orderNotif .item .infoOrder small{display:block;margin-top:10px} .orderNotif .item .infoOrder small a{display:inline-block;font-size:smaller;vertical-align:middle;padding-left:15px;border-left:.5px solid #eee;float:right;color:#888} </style> <!--==== html order ====--> <div class='orderNotif'></div> <!--==== testimoni order ====--> <script type='text/javascript'> //<![CDATA[ var dataOrder = { "+62 857-7797-74...": { "avaURL": "",// URL Foto Pembeli "terjual": "Template TokoKita Minimalist",// Nama Produk yang Terjual "terjualURL": "#",// Alamat URL Produk yang Terjual }, "Nama Pembeli": { "avaURL": "https://lh3.googleusercontent.com/-l2WwlW-2rcE/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rcf-pEMt9C5cJfNLbQ2u_2uEs68qA/photo.jpg?sz=46", "terjual": "Template TokoKita Minimalist",// Nama Produk yang Terjual "terjualURL": "#",// Alamat URL Produk yang Terjual }, "Nama Pembeli": { "avaURL": "",// URL Foto Pembeli "terjual": "Template TokoKita Minimalist",// Nama Produk yang Terjual "terjualURL": "#",// Alamat URL Produk yang Terjual }, "+62 858-8662-45...": { "avaURL": "",// URL Foto Pembeli "terjual": "Template TokoKita Minimalist",// Nama Produk yang Terjual "terjualURL": "#",// Alamat URL Produk yang Terjual }, }; $(window).bind("load",function(){$.each(dataOrder,function(a,b){var c="//lh3.googleusercontent.com/-QlJpOYV6yF4/XNEPty8zjJI/AAAAAAAAF6k/7RaA8suy7AsVhOYwcP6WLMf2qc54GUXWwCEwYBhgL/h60/ava.png";if(b.avaURL!=""){c=b.avaURL}$('<div class="item"><span class="avaURL" style="background-image:url('+c+');"></span><h5><a class="closeOrderNotif" href="javascript:void(0);"><i class="icon ion-ios-close"></i></a></h5><span class="infoOrder"><b>'+a+'</b> telah membeli <a href="'+b.terjualURL+'" target="_blank">'+b.terjual+"</a> </span> </div>").appendTo(".orderNotif")});$(".orderNotif > .item:gt(0)").removeClass("active");setInterval(function(){$(".orderNotif > .item:first").removeClass("active");setTimeout(function(){$(".orderNotif > .item:first").next().addClass("active").end().appendTo(".orderNotif")},4000)},10000)});$(document).on("click",".orderNotif .closeOrderNotif",function(){$(this).parents(".item").addClass("hidden")}); //]]> </script> <!--==== testimoni order end ====-->
Langkah 2: Lalu buka Blogger > Theme / Template > Edit HTML
Langkah 3: Cari kode
</footer>
dengan cara klik CTRL+F Masukan kode </footer>
dan enter.Langkah 4: Letakan kode yang sudah disalin tadi, dilangkah pertama dan letakan kodenya dibagian bawah
</footer>
.Penjelasan :Lalu klik " SIMPAN "
- edit kode yang saya beri tanda merah dan kuning sesuai dengan data yang Anda inginkan
Download eBook Notif Order
Ini hanya sebagai tambahan, Jika ingin menggunakan panduan lewat eBook. Silahkan klik download eBook dibawah ini secara gratis.
Penutup
Sampai langkah ini, saya rasa Anda sudah berhasil memasang tampilan notifikasi order ini diblogspot, Jika masih mengalami masalah / kendala dalam pemasangan, jangan ragu untuk menulis pertanyaanya dikolom komentar.
Akhir kata, saya ucapkan terima kasih atas semua yang sudah meluangkan waktunya untuk membaca panduan singkat diartikel ini, selamat beraktifitas dan salam sukses. Anda juga bisa dapatkan tutorial lainnya di Panduan.id.
10 komentar untuk "Cara Membuat Notifikasi Order Pesan di Blogspot [Update]"
Kami memiliki kebijakan dalam berkomentar di Blog ini :
— Dilarang promosi suatu barang
— Dilarang jika memasang link aktif di komentar
— Dilarang keras melakukan promosi iklan
— Dilarang menulis komentar yang berisi sara, bully atau cemuhan
NB :Komentar yang melanggar tidak akan ditampilkan
Kebijakan komentar yang bisa Anda temukan selengkapnya disini
Dukungan :
Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini
Keren.. Mantap.. Jaman online shop, orang-orang pada nyari template shop.. Ijin sedot copas html buat jaga-jaga.
BalasHapusSiap, semoga bermanfaat
HapusMakasih gan.... sangat bermanfaat
BalasHapusTerima kasih kembali
Hapussangat bermanfaat,, terimakasih #boshjn #olivia
BalasHapusSama-sama kakak
HapusUbah waktu muncul notif nya gimana mas? supaya lebih cepat?
BalasHapusAtur waktu timeout nya di script yang tulisan 4000
Hapusuntuk script keterangan waktu nya belum ada ya mba?
BalasHapusBelum ada
Hapus