Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Notifikasi Order Pesan di Blogspot [Update]

Cara Membuat Notif Order Pesan di Blogspot

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.

Cara Membuat Notif Order Pesan di Blogspot
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.

10 komentar untuk "Cara Membuat Notifikasi Order Pesan di Blogspot [Update]"

  1. Keren.. Mantap.. Jaman online shop, orang-orang pada nyari template shop.. Ijin sedot copas html buat jaga-jaga.

    BalasHapus
  2. Makasih gan.... sangat bermanfaat

    BalasHapus
  3. sangat bermanfaat,, terimakasih #boshjn #olivia

    BalasHapus
  4. Ubah waktu muncul notif nya gimana mas? supaya lebih cepat?

    BalasHapus
    Balasan
    1. Atur waktu timeout nya di script yang tulisan 4000

      Hapus
  5. untuk script keterangan waktu nya belum ada ya mba?

    BalasHapus

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