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 :

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

Lalu klik " SIMPAN "

Demo

Download eBook Notif Order

Ini hanya sebagai tambahan, Jika ingin menggunakan panduan lewat eBook. Silahkan klik download eBook dibawah ini secara gratis.

Download

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.

Berbagi :