Cara Memasang Order Notification di Blog

Setelah sekian lama absen dalam membagikan tutorial, di kesempatan kali ini, saya akan membagikan sedikit informasi mengenai cara membuat Order Notification Blog khususnya bagi Anda yang menjual produk dan jasa secara online.

Order notification jelas memiliki peran penting untuk memaksimalkan penjualan di internet. Notif tersebut akan menjadi semacam testimoni singkat untuk mengetahui produk apa saja yang sedang laris terjual.

Kebanyakan marketplace di internet pun menggunakan pemberitahuan ini untuk membangun kepercayaan lebih ke pasar. Salah satu contohnya bisa Anda lihat di penyedia jasa seperti RajaBacklink maupun RajaView.

Rekomendasi: Cara Memasang News Ticker di Blog

Berikut adalah tampilan sekilas dari tutorial kali ini:

Selain itu, penggunaan order notification juga berguna agar blog semakin profesional serta menarik di mata pembaca. Bagaimana tidak, halaman akan menampilkan semua transaksi untuk memberikan kesan bahwa blog terkait memang terpercaya.

Tanpa panjang lebar lagi, berikut adalah tutorial lengkapnya.

Cara Memasang Order Notification di Blog

• Masuk ke BLOGGER
• Pilih menu TATA LETAK
• Pilih TAMBAHKAN GADGET > HTML / JAVASCRIPT
• Tempel ke dalamnya dan SIMPAN:

<div class="orderNotif"></div>

• Pilih menu TEMA
• Pilih EDIT HTML
• Tempel di atas ]]></b:skin>:

.orderNotif .item{position:fixed;display:flex;overflow:hidden;max-width:400px;background-color:#fff;color:#222;font-size:14px;padding:10px 20px;box-shadow:0 0 8px 0 rgba(0,0,0,.08);transition:all .4s ease;border-radius:8px;line-height:25px;opacity:0;visibility:hidden;z-index:200}
.orderNotif .item.active{left:20px;bottom:20px;opacity:1;visibility:visible}
.orderNotif .item .image{display:flex;align-items:center;padding-right:20px}
.orderNotif .item .img{display:block;width:80px;height:80px;background-color:#eeeeee;background-size:cover;border-radius:80%}
.orderNotif .item .content{position:relative}
.orderNotif .item button{display:inline-block;width:25px;line-height:30px;font-size:100%;margin:-15px -20px 10px 20px;border:none;background:transparent;color:#222;cursor:pointer;position:absolute;right:0}
.orderNotif .item button:before{content:"\2716"}
.orderNotif .item .info a{color:#009ee0;text-decoration:none}
.orderNotif .item small{display:block;font-size:75%;opacity:.8;border-top:1px solid #eee;margin-top:8px;padding-top:8px}
.orderNotif .item small:after{content:"";display:block;clear:both}

• Tempel di atas </body>:

<script>
const dataOrder={
  "data":[
    {
      nama:"FB-K",
      image:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhonaUDDpDpIPD_S1vz_guh2Q8_ijmx_tf6y0Nr6r22ODUxYrW-PUYdm8D09xJYichiQAD3mikKHqbcLH3SGWkg4mosunIAqTp2HD4-TKiD41jeL3GcHGEfxSSPag22RtjhQ9u9y4NxOp8/s60/a.png",
      kota:"Makassar",
      produk:"Median UI v1.5",
      url:"#",
      harga:"Rp. 130.000",
      waktu:"16:00 WIB - 22 Juli 2021"
    },
    {
      nama:"Melissa Stephanie",
      image:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhijtCrswY7v2HyfslHgQ9V2VlUnS7dPzPZSpZrU9kwOzJ__w5D3qVR6-T7t9DcL6eSh-21PlUJ_wDh5EKheW-lmYdRWD6L6eSQOzmElTJCKE9kwimjaaxDJwfQTAQwsNv-3_ATXYMQrUk/s60/b.png",
      kota:"Bandung",
      produk:"Pajero Sport",
      url:"#",
      harga:"Rp. 500.000.000",
      waktu:"15:30 WIB - 22 Juli 2021"
    },
    {
      nama:"Andi Winda Tenri",
      image:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH72VslevPdKKivyfOkDVnIcKO4j8QYyVhkwVYLWepIhGrAA1qpGYoW9DwKpnhJlWLn8efW-UPogoWioTOEf3YK_HTKH70pMO13vKRmvAo-SqJULH9M11ixHB_Lkilw_UpNU8h9t9jHEw/s60/c.png",
      kota:"Jakarta",
      produk:"Teh Botol Sosro",
      url:"#",
      harga:"Rp. 5.000",
      waktu:"03:00 WIB - 22 Juli 2021"
    }
  ]
};
dataOrder.data.forEach((el)=>{
  var img="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhic2CRpF5p3IyVi9fC1NLyHOrLDHsdsgNGnsd74tXr6yP8Eafp7_4RqTAjJkWkNJAEpBthNVxjvo5KKQ8CWXHsTZzyTjJLrz_JyUArpyq1TJT40VrsNtBcJ2TzMdUg4YZvRkX9dUffANo/h60/ava.png";
  if(el.image !=""){
    img=el.image
  }
  document.querySelector(".orderNotif").innerHTML+=&#039;<div class="item"><div class="image"><span class="img" style="background-image:url(&#039;+img+&#039;)"></div><div class="content"><button class="close"></button><span class="info"><b>&#039;+el.nama+&#039;</b><br />dari <b>&#039;+el.kota+&#039;</b><br />membeli <a href="&#039;+el.url+&#039;" target="_blank">&#039;+el.produk+&#039;</a><br />harga <b>&#039;+el.harga+&#039;</b><small>&#039;+el.waktu+&#039;</small></span></div></div>&#039;
})
document.querySelector(".orderNotif > .item:not(:first-child)").classList.remove("active")
setInterval(()=>{
  document.querySelector(".orderNotif .item:first-child").classList.add("active");
  setTimeout(()=>{
    document.querySelectorAll(".orderNotif .item:first-child").forEach((el)=>{
      el.classList.remove("active");
    })
    document.querySelector(".orderNotif").append(document.querySelector(".orderNotif").childNodes[0])
  },8000);
},15000);
document.querySelectorAll(".item .close").forEach((el)=>{
  el.addEventListener("click",()=>{
    document.querySelector(".item").classList.remove("active")
  })
})
</script>

Silahkan mengganti bagian yang telah ditandai dengan detail transaksi Anda.

• Pilih SIMPAN
• Selesai.

Demo

Rekomendasi: Cara Memasang Lazy Load Google Analytics di Blog

Catatan

Untuk menggunakan font yang sama dengan yang ada di demo, silahkan menyalin data Noto Sans berikut di atas ]]></b:skin>:

@font-face{font-family:"Noto Sans";font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/notosans/v14/o-0IIpQlx3QUlC5A4PNr5TRA.woff2)format("woff2")}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/notosans/v14/o-0NIpQlx3QUlC5A4PNjXhFVZNyB.woff2)format("woff2")}

Setelah itu, tambahkan kode berikut ke dalam kumpulan CSS:

.orderNotif{font-family:"Noto Sans",sans-serif}

Untuk memberikan kesan yang lebih baik, Anda bisa mengkombinasikan fitur ini pada landing page Anda.

Penutup

Jika ingin mengganti tampilan notifikasi, silahkan mengubah skrip CSS di atas berdasarkan pengetahuan koding Anda. Dengan begitu, tampilan akan semakin menarik berdasarkan keinginan sendiri.

Anda juga bisa menampilkan notifikasi ini di halaman tertentu dengan menyimpan semua skrip di mode HTML. Nah khusus untuk CSS, skrip harus dibungkus dengan tag <style>...</style>.

Untuk lebih jelasnya, silahkan membuka halaman ini.

Rekomendasi: Kelebihan Menggunakan SVG bagi Blog

Cukup sekian artikel tentang Cara Memasang Order Notification di Blog ini, Terima kasih.