Cara Lain Menciptakan Notifikasi Untuk Pengguna Adblocker Untuk Blog Amp Html

Sebelumnya saya sudah membagikan cara menciptakan notifikasi untuk pengguna adblocker bagi blog AMP, nah kali ini saya akan membagikan cara lain untuk menciptakan notifikasi untuk pengguna adblocker atau sejenisnya untuk blog AMP HTML.

Kali ini kita akan memanfaatkan fitur amp-user-notification untuk menampilkan notifikasi bagi pengguna adblocker.

Notifikasi ini memakai tombol tutup notifikasi biasa sehingga notifikasi akan muncul setiap kali pengunjung masuk halaman, dan juga memakai tombol tutup dengan memakai cookies sehingga notifikasi tidak akan muncul sebelum pengunjung menghapus cookies pada browser-nya.

Notifikasi akan muncul di bab bawah blog menyerupai pada demo berikut:

DEMO

Bagi yang ingin mencoba menggunakannya silahkan ikuti langkah berikut ini.

Silahkan simpan js-js berikut di atas instruksi </head>

   <script async="" custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>
   <script async="" custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Jika kedua atau salah satu dari js tersebut sudah ada di blog maka Anda tidak perlu memasangnya lagi.

Kemudian simpan CSS berikut di style amp-custom='amp-custom' blog Anda.

 *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
 .notifbox{display:block}
 .notif_box{position:relative;background:#fff;color:#555;font-family:Roboto,sans-serif;padding:0;transition:all .3s ease-in-out;width:100%;margin:0 auto;border-radius:4px;overflow:hidden}
 .notif_box p.note{margin:0;padding:15px 20px;font-size:16px;font-weight:400;line-height:1.1}
 .notif_box p.close_note{margin:0;padding:10px 20px;font-size:12px;font-weight:400;line-height:1.3}
 .notif_box p a{color:red;text-decoration:none}
 .notif_box p a:hover{color:#000}
 .notifbox .close_notifbox{background:0 0;border:none;padding:0;color:#333;font-size:30px;position:absolute;top:7px;right:5px;cursor:pointer;width:20px;height:20px;line-height:20px;text-align:center;z-index:2}
 .notifbox .close_notifbox:focus,.notifbox .done_notifbox:focus{outline:0}
 .notifbox .close_notifbox:hover{color:red}
 hr.note_block{margin:0;height:0;border:0;border-top:1px solid #ddd}

Kemudian simpan HTML berikut di atas instruksi </body>

   <amp-user-notification id="block-notification"
   layout="nodisplay">
     <div class="notifbox" id="notifbox">
       <div class="notif_box">
       <button class='close_notifbox' on='tap:notifbox.hide' role='button' tabindex='0' title='Close'>&amp;times;</button>
       <p class="note">Bantu kami menciptakan situs MyInfo.web.id ini menjadi lebih baik.<br/>
       <br/>
       Dengan menonaktifkan AdBlock atau aplikasi-aplikasi sejenis yang bisa memblokir iklan, Anda sudah membantu kami untuk tetap menciptakan website ini terus menayangkan konten.<br/>
       <br/>
       Cara mendukungan situs MyInfo.web.id:
 <a href="http://www.myinfo.web.id/p/whitelisting-my-info-in-your-ad-blocker.html" target="_blank">Silahkan simak artikel berikut ini.</a></p>
         <hr class="note_block"/>
         <p class="close_note">
         Don't show again <a href="#" on='tap:block-notification.dismiss' role='button' tabindex='0' title='Close'>click here</a>.
         </p>
       </div>
     </div>
   </amp-user-notification>

Silahkan ganti URL yg ditandai dengan URL laman cara derma situs Anda.

Kemudian pastikan Anda juga sudah memasang instruksi amp-analitycs, kalau belum silahkan pasang instruksi berikut ini di atas instruksi </body>

   <amp-analytics id='analytics1' type='googleanalytics'>
 <script type='application/json'>
 {
   "vars": {
     "account": "UA-xxxxxxxxxx"
   },
   "triggers": {
     "trackPageview": {
       "on": "visible",
       "request": "pageview"
     }
   }
 }
 </script>
 </amp-analytics>

Ganti instruksi UA-xxxxxxxxxx dengan instruksi akun analitycs blog Anda.

Sumber https://www.kompiajaib.com/

Share this post