Sunday, 23 October 2016

Cara Membuat Lonceng Pemberitahuan di Blog dengan Changelog


Cara Membuat Lonceng Pemberitahuan di Blog dengan Changelog
Bangbil sempet berfikir seperti ini "gimana ya caranya pengunjung blog tau kalo aku lagi sibuk, ada artikel yang sedang bermasalah, dll..". Nah tutorial Cara Membuat Lonceng Pemberitahuan di Blog dengan Changelog ini cocok untuk kalian yang berfikiran sama seperti bangbil.

Notifikasi di Blog dengan Changelog ini juga cocok loh digunakan untuk menjual template hasil karya sendiri. Kalo kalian pernah berkunjung ke Arlina Design pasti kalian akan menemukan lonceng dengan pemberitahuan disana (tepatnya pojok kanan blog) yang menunjukkan artikel tertentu, yang jika di klik langsung mengarah ke halaman tersebut.

Arlina Design Notifikasi

Nah berbeda dengan notifikasi dari changelog. Jika kita klik akan muncul pemberitahuan yang kita buat. Semisal seperti changelog bangbil dibawah ini.

Demo Changelog atau Pemberitahuan (Notifikasi) bangbil.com

Cara ini juga diterapkan oleh blog Kompi Ajaib loh, tapi dia meletakkan Changelognya di bagian gambar header dan kompiajaib gunakan untuk jualan template hasil karyanya.

Yuk langsung aja praktek! Oh iya buat kamu yang masih awam tentang Blogger cara ini hanya bisa diterapkan di template yang ada Menunya aja.

Menu Navigasi
Menu

Cara Membuat Lonceng Pemberitahuan di Blog Dengan Changelog 


1. Silahkan buat akun Headway changelog, di https://headwayapp.co/ dengan meng-klik tombol Create your changelog.

2. Setelah berhasil membuat akun, Kalian liat ada tulisan Install your widget silahkan di klik dan nantinya akan muncul kode dari changelog silahkan copy idnya saja.
Changelog ID

3. Sekarang masuk ke Template > Edit HTML > Copy kode dibawah ini > letakkan diatas 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>

Ubah xxxxxx dengan ID Changelog kamu.

4. Letakkan kode dibawah ini diatas kode </b:skin>

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

5. Nah sekarang waktunya untuk meletakkan tombol notifikasinya. Cari kode sesuai menu navigasi kalian dan letakkan kodenya. Jika kalian kreatif kalian pasti tau. Kalo kalian kesulitan di bagian ini silahkan tanya di kolom komentar bawah. Karena tidak setiap template mempunya kode yang sama.

<li class='menu-item changelog-badge'>
<a><i class='fa fa-bell'/></a>
</li> 




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

Membuat Catatan di Changelog  

Sekarang kita buat catatan untuk pemberitahuan nantinya, silahkan menuju akun changelog kamu 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.

New Changelog

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

Referensi : http://www.kompiajaib.com/2016/07/menggunakan-notifikasi-changelog-untuk_55.html

bangbil.com adalah sebuah personal blog. Seorang blogger yang masih merangkap sebagai pelajar. Temui aku di Sosial Media :

Berlangganan via Email

Berlangganan artikel terbaru dari blog ini langsung via email.