Cara Buat Push Notification di Blogger

Push Notification ini merupakan sebuah pemberitahuan yang muncul di bawah blog, isi notification dapat berupa biasanya promo atau pemberitahuan khusus dari pemilik blog kepada pengunjung. Dengan ini saya akan membuat sebuah tutorial cara membuat Push Notification untuk Blogger yang mungkin ada dari kalian membutuhkan ini.

Fitur ini sangat berguna banget jika blog kalian menjual sesuatu atau hal lain yang mungkin membutuhkan Push Notification. Yuk langsung saja disimak bagaimana cara pembutannya

Cara Membuat Push Notification di Blogger

1. Seperti biasa, kalian harus masuk dulu ke Blogger.

2. Kemudian masuk ke Tema dan Edit HTML atau cadangkan dan edit di notepad lain juga bisa.

3. Selanjutnya cari kode ]]></b:skin> dan pastekan code CSS dibawah ini di atas code ]]></b:skin>.

.notification-popup-jufriblog {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 250px;
  background-color: #fff;
  z-index: 110;
  padding: 15px;
  border-radius: 7px;
  box-shadow: 0 3px 8px 2px rgba(0,0,0,0.1);
  transition: all .5s ease;
}

.notification-popup-jufriblog h3 {
  color: #465760;
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 7px;
}

.notification-popup-jufriblog p {
  font-size: 13px;
  color: #757575;
  line-height: 1.5em;
  margin: 0;
}

.notification-popup-jufriblog a {
  float: left;
  width: 100%;
  height: 28px;
  background-color: #01a9b4;
  font-size: 14px;
  color: #fff;
  text-align: center;
  line-height: 28px;
  margin-top: 10px;
  border-radius: 5px;
  transition: background .17s ease;
}

.notification-popup-jufriblog a:hover {
  background-color: #3c97ef;
}

.notification-popup-jufriblog-close {
  position: absolute;
  top: 10px;
  right: 13px;
  font-size: 15px;
  color: #465760;
  font-weight: 700;
  cursor: pointer;
  transition: color .17s ease;
}

.notification-popup-jufriblog-close:hover {
  color: #f03a17!important;
}

@media screen and (max-width:800px) {
  .notification-popup-jufriblog {
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    border-radius: 0;
  }
}

4. Setelah itu copy code HTML dibawah ini diatas </body>.

<div class='notification-popup-jufriblog'>
<span class='notification-popup-jufriblog-close'>&#215;</span>
<h3>Notification</h3>
<p class='notification-popup-description'>Ada vocer diskon 50% nih, klik dibawah ini untuk ambil vocernya.</p>
<a href='https://www.jufriblog.com' target='blank'>Ambil</a>
</div>

 

Yang warna ganti dengan pesan yang kalian inginkan.

Untuk yang warna ganti dengan link tujuan.

5. Selanjutnya tambahkan script berikut ini  juga di atas </body>.

<script type='text/javascript'>
//<![CDATA[
var _0xa23b=["x66x61x64x65x4Fx75x74","x2Ex6Ex6Fx74x69x66x69x63x61x74x69x6Fx6Ex2Dx70x6Fx70x75x70x2Dx74x75x6Bx61x6Ex67x2Dx72x65x64x65x73x69x67x6Ex2Dx63x6Cx6Fx73x65","x63x6Cx69x63x6B","x73x68x69x66x74","x70x75x73x68","x30x78x30","x30x78x31","x2Ex6Ex6Fx74x69x66x69x63x61x74x69x6Fx6Ex2Dx70x6Fx70x75x70x2Dx74x75x6Bx61x6Ex67x2Dx72x65x64x65x73x69x67x6E","x6Fx6E","x30x78x32"];var _0x40fe=[_0xa23b[0],_0xa23b[1],_0xa23b[2]];(function(_0x9751x2,_0x9751x3){var _0x9751x4=function(_0x9751x5){while(--_0x9751x5){_0x9751x2[_0xa23b[4]](_0x9751x2[_0xa23b[3]]())}};_0x9751x4(++_0x9751x3)}(_0x40fe,0x140));var _0x477a=function(_0x9751x2,_0x9751x3){_0x9751x2= _0x9751x2- 0x0;var _0x9751x4=_0x40fe[_0x9751x2];return _0x9751x4};$(function(){$(_0x477a(_0xa23b[9]))[_0xa23b[8]](_0x477a(_0xa23b[5]),function(){$(_0xa23b[7])[_0x477a(_0xa23b[6])](0xaa)})})
//]]>
</script>

6. Kemudian Simpan Tema dan lihat hasilnya.

Bagikan Artikel ini