Menggunakan Notifikasi Changelog Untuk Kabar Pengguna

Ditulis oleh: Adhy Suryadi

Ditulis pada: 7/15/2016

Jika Anda sering menggunakan JSFiddle, maka Anda akan melihat sebuah tanda notifikasi di kiri atas dekat logo JSFiddle. Jika kita klik maka akan muncul dialog box yang menampilkan changelog atau pengumuman untuk pengunjung.

Nah kita juga bisa menggunakan notifikasi changelog seperti itu untuk mengabarkan beberapa hal kepada pengunjung blog seperti tampak pada animasi GIF di atas.

Nah kali ini saya akan membagikan cara menggunakan notifikasi changelog dari Headway yang digunakan JSFiddle pada Blogger, silahkan ikuti langkah-langkahnya di bawah ini.

Langkah Pertama
Silahkan buat akun Headway changelog di https://headwayapp.co/ dengan klik tombol Create your changelog. Setelah berhasil membuat akun, silahkan masuk ke menu Settings (klik drop down pada akun kita di sebelah kanan atas).

Kemudian klik menu Widget dan 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 di bawah ini dan simpan di atas kode </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>

Kode xxxxxx ganti dengan ID akun Anda.

Langkah Kedua
Silahkan cari kode seperti di bawah ini untuk header blog.

<b:widget id='Header1' locked='true'

Kemudian gulir ke bawah dan temukan kode seperti di bawah ini.

            <h1 class='title' style='background: transparent; border-width: 0px'>

              <b:include name='title'/>

            </h1>

Untuk template default Blogger ada 2 buah kode <h1> jadi cari juga kode <h1> di bawah kode di atas, dan untuk blog yang sudah menggunakan tag <h1> dinamis silahkan cari kode <h1> seperti di bawah ini.

        <b:if cond='data:blog.pageType != &quot;item&quot;'>

        <h1 class='title'>

<b:include name='title'/>

        </h1>

<b:else/>

        <p class='title'>

          <b:include name='title'/>

        </p>

</b:if>

Kemudian tambahkan class pada <h1> untuk changelog-badge sehingga menjadi seperti ini.

            <h1 class='title changelog-badge' style='background: transparent; border-width: 0px'>

              <b:include name='title'/>

            </h1>

Lakukan juga untuk tag <h1> yang satunya, Atau untuk tag <h1> dinamis seperti di bawah ini.

        <b:if cond='data:blog.pageType != &quot;item&quot;'>

        <h1 class='title changelog-badge'>

<b:include name='title'/>

        </h1>

<b:else/>

        <p class='title changelog-badge'>

          <b:include name='title'/>

        </p>

</b:if>

Setelah itu silahkan gulir ke bawah dan temukan kode seperti di bawah ini.

          <b:includable id='title'>

  <b:if cond='data:blog.url == data:blog.homepageUrl'>

    <data:title/>

  <b:else/>

    <a expr:href='data:blog.homepageUrl'><data:title/></a>

  </b:if>

</b:includable>

Dan silahkan ganti dengan kode di bawah ini.

          <b:includable id='title'>

  <b:if cond='data:blog.url == data:blog.homepageUrl'>

    <data:title/>

    <span class='HW_visible' id='HW_badge_cont'>

    <span class='HW_softHidden' id='HW_badge'/>

  </span>

  <b:else/>

    <a expr:href='data:blog.homepageUrl'><data:title/></a>

    <span class='HW_visible' id='HW_badge_cont'>

    <span class='HW_softHidden' id='HW_badge'/>

  </span>

  </b:if>

</b:includable>

Langkah Ketiga
Silahkan simpan css di bawah ini di atas kode </head>

<style>

.changelog-badge {

  position: relative;

  display: inline-block

}

#HW_badge_cont {

  position: absolute!important;

  top: -10px;

  right: -10px

}

</style>

Nah sampai langkah ketiga ini kita sudah menyimpan notifikasi changelog ini di blog pada judul blog kita. Jika Anda kreatif, maka notifikasi ini bisa di simpan di mana saja, yang penting gunakan changelog-badge untuk class pada div untuk menampilkan notifikasinya seperti di bawah ini.

<div class='changelog-badge'>

    <span class='HW_visible' id='HW_badge_cont'>

    <span class='HW_softHidden' id='HW_badge'/>

  </span>

</div>

Silahkan refresh blog Anda dan silahkan coba klik titik abu-abu di atas kanan judul blog Anda untuk memastikan dialog boxnya muncul.

Langkah Keempat
Pada langkah ini kita mulai membuat catatan untuk changelog, silahkan menuju akun changelog Anda dan klik tombol + New changelog. Silahkan isi judul dan isi changelog, setelah selesai silahkan klik tombol Publish lalu Save. Jika ingin membuat beberapa catatan, silahkan lakukan hal yang sama untuk catatan berikutnya.

Catatan ini akan otomatis muncul di blog dan akan muncul angka yang menunjukan beberapa changelog, jika pengunjung meng-klik notifikasinya dan membaca changelog-nya maka angkanya akan menghilang selama cache browsernya belum dihapus.