Memasang Notifikasi Changelog pada Blog

Memasang Notifikasi Changelog pada Blog - Apabila anda sering jalan-jalan ke Blog luar, mungkin anda pernah melihat tanda notifikasi changelog pada header blog, yang apabila anda klik akan muncul notifikasi box atau pemberitahuan bagi pengunjung blog.

Nah tentunya kita juga bisa menggunakan notifikasi changelog tersebut pada blog kita, seperti tampak di bagian header blog ini. Kelebihan changelog ini salahsatunya tampilan yang elegan dan friendly user, tidak sampai memberatkan koneksi internet.

Nah disini saya akan berbagi tentang cara memasang notifikasi changelog pada blog. Langsung saja ikuti langkah-langkah berikut.

Memasang Notifikasi Changelog pada Blog

Langkah Pertama, Silahkan anda buat akun Headway changelog di https://headwayapp.co/. Setelah berhasil membuat akun, silahkan masuk ke menu Settings untuk mendapatkan script widgetnya. Kemudian klik menu Widget disana anda akan melihat scriptnya, silahkan copy kode widgetnya, biasanya tampak seperti di bawah ini.

<script>
  var HW_config = {
    selector: ".CHANGE_THIS", // CSS selector where to inject the badge
    account: "xxxxxx" // your account ID
  };
</script>
<script async src="//cdn.headwayapp.co/widget.js"></script>

Kemudian, silahkan rubah menjadi seperti ini setelah selesai simapan tepat di atas </body>

<script>

//<![CDATA[

var HW_config = {

    selector: ".changelog-badge", // CSS selector where to inject the badge

    account: "xxxxxx", // your account ID

  };

(function() { var ch = document.createElement('script'); ch.type = 'text/javascript'; ch.async = true; ch.src = '//cdn.headwayapp.co/widget.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ch, sc); })();

//]]>

</script>

Sebenarnya anda tinggal copy script di atas dan ubah "xxxxxxx" dengan ID Changlog anda, karena hasil akhirnya akan sama seperti kode di atas.

Langkah Kedua, simpan kode CSS ini sebelum tag  </style> atau  ]]></b:skin>

<style>
.changelog-badge {
  position: relative;
  display: inline-block
}
#HW_badge_cont {
  position: absolute!important;
  top: -10px;
  right: -10px
}
</style>

Langkah Ketiga,  untuk langkah ini sobat tinggal menyimpan kode di bawah di tempat yang anda inginkan, contohnya saya menyimpannya di dekat icon bell sehingga di blog tampil dekat bell icon. Jika Anda kreatif, maka notifikasi ini bisa di simpan di mana saja.

<div class='changelog-badge'>
    <span class='HW_visible' id='HW_badge_cont'>
    <span class='HW_softHidden' id='HW_badge'/>
  </span>
</div>

Langkah Keempat, Sekarang anda tinggal mulai membuat isi notifikasinya, silahkan anda masuk akun changelog kemudian klik +New Changelog jangan lupa klik Publish lalu Save. Anda juga bisa membuat jenis notifikasi sesuai keperluan, biasanya jenis notifikasi yang pertama adalah New.

Apabila mengikuti langkah dengan benar maka secara otomatis notifikasi ini akan muncul di blog anda dengan menampilkan angka jumlah notifikasi yang dipublish, apabila iconnya sudah diklik pada satu browser maka iconnya tidak akan menampilkan jumlah notifikasi, biasanya hanya bulatan kesil berwarna abu, angka akan muncul setelah chache browser dibersihkan atau ada notifikasi yang baru.

Semoga tutorial di atas bisa bermanfaat bagi anda pembaca setia blog masrizwan, bila ada pertanyaan atau kritik silahkan berkomentar di bawah.

Terima Kasih