Menggunakan Notifikasi Changelog Untuk Kabar Pengguna

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

Nah kita juga dapat memakai notifikasi changelog menyerupai itu untuk mengabarkan beberapa hal kepada pengunjung blog menyerupai tampak pada animasi GIF di atas.

Nah kali ini saya akan membagikan cara memakai notifikasi changelog dari Headway yang dipakai 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 menciptakan akun, silahkan masuk ke sajian Settings (klik drop down pada akun kita di sebelah kanan atas).

Kemudian klik sajian Widget dan silahkan copy aba-aba widgetnya, biasanya tampak menyerupai 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 menyerupai di bawah ini dan simpan di atas aba-aba </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 aba-aba menyerupai di bawah ini untuk header blog.

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

Kemudian gulir ke bawah dan temukan aba-aba menyerupai di bawah ini.

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

Untuk template default Blogger ada 2 buah aba-aba <h1> jadi cari juga aba-aba <h1> di bawah aba-aba di atas, dan untuk blog yang sudah memakai tag <h1> dinamis silahkan cari aba-aba <h1> menyerupai 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 menyerupai 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 menyerupai 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 aba-aba menyerupai 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 aba-aba 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 aba-aba </head>

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

Nah hingga langkah ketiga ini kita sudah menyimpan notifikasi changelog ini di blog pada judul blog kita. Jika Anda kreatif, maka notifikasi ini dapat di simpan di mana saja, yang penting gunakan changelog-badge untuk class pada div untuk menampilkan notifikasinya menyerupai 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 obrolan boxnya muncul.

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

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



Sumber https://www.kompiajaib.com/

Share this post