Tutorial Membuat Material Push Notification

Tutorial Membuat Material Push Notification - Kembali lagi update dengan tutorial yang tidak biasa hehe, kali ini Code Pelajar membagikan sebuah Push Notification dimana, Push notification adalah pesan pendek yang muncul secara otomatis ketika sobat memuat sebuah halaman. Push Notification ini juga bisa di bilang seperti pesan singkat yang tampil pada awal memuat halaman.

Karna Code Pelajar mempunyai Slogan "Tutorial & Template Anti Mainstream" maka dari itu Push Notifications ini berbeda dari yang lain. Push Notification ini di design ala Material Design yang nyaman dan simpel saat di pandang, tidak hanya itu saja Push Notification inipun Seperti SweetAlert yang bisa di design dengan CSS.


Tutorial Membuat Material Push Notification

    • salin & terapkan kode Css berikut kedalam file atau tag Css Sobat.
    • /*CSS By Codepelajar.com */a.donasi-dong{background:#E91E63;margin-left:5px;margin-top:25px;display:inline-block;padding:8px 15px;border-radius:4px;float:right;color:#FFF;font-weight:500}#infoPelajarjo{width:100%;height:auto;overflow:hidden;background:#fff;position:fixed;padding:25px;top:15%;transition:all .3s ease-in-out;max-width:450px;left:35%;opacity:0;border-radius:5px;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2);z-index:9999}#infoPelajarjo.fadeOutUp{z-index:-9999}#infoPelajarjo a{text-decoration:none}a.pelajar-aktif{color:#e91e63;font-weight:600}#infoPelajarjo span{display:block;padding:15px 15px;pointer-events:none;text-align:left;float:left}#infoPelajarjo span h2{font-size:12px;line-height:21px;color:#222;*/ font-weight:400;letter-spacing:0}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion){.animated{-webkit-animation:unset!important;animation:unset!important;-webkit-transition:none!important;transition:none!important}}@-webkit-keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeOutUp{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}p.pesan-singkat{overflow:hidden;position:relative;top:11px;font-family:roboto}.infoPelajarwrap-pelajar h2{position:absolute;top:9px;margin:auto;padding:2px;font-size:18px;font-family:roboto;background:#fff}@media screen and (max-width:768px){div#infoPelajarjo{left:0}}.gelap{position:fixed;top:0;left:0;bottom:0;right:0;opacity:0;transition:.5s;background:rgba(0,0,0,.5);z-index:-999}.gelap.active{opacity:1;background:rgba(0,0,0,.5);z-index:98}
    • Jika sudah salin & terapkan kode Javascript berikut sebelum tag </body>.
    • <script>/*!
      => CSS - Push Notification Material Design V1.0
      => Copyright: 2018 CodePelajar
      => Licensed under MIT | https://github.com/codepelajar/codepelajar/blob/master/LICENSE
      */
      document.getElementById(&#39;infoPelajarjo&#39;).classList.add(&#39;fadeInDown&#39;)
      document.getElementsByClassName(&#39;gelap&#39;)[0].classList.add(&#39;active&#39;)
      
      setTimeout(function(){
       document.getElementById(&#39;infoPelajarjo&#39;).classList.add(&#39;fadeOutUp&#39;)
       document.getElementById(&#39;infoPelajarjo&#39;).classList.remove(&#39;fadeInDown&#39;)
      document.getElementsByClassName(&#39;gelap&#39;)[0].classList.remove(&#39;active&#39;)
      
      },5000)
      </script>
    • Langkah terkahir adalah salin & terapkan Kode HTML berikut ini persis sesudah tag <body>.
    • <div class='animated' id='infoPelajarjo'>
      <div class='infoPelajarwrap-pelajar'>
       <h2>Notifications</h2>
       </div>
      <p class='pesan-singkat' style='line-height:1.3'>Halo Sobat Pelajar, Jangan lupa untuk klik Follow akun Sosial Media kita yaa dan Jangan Sampai ketinggalan update berita terbaru di <a class='pelajar-aktif' href='https://jalanpelajar.com/'>JalanPelajar.com</a></p>
        <a class='donasi-dong' href='https://www.facebook.com/codepelajar/' title='Donasi Pengembang'>Donasi</a>
      <a class='donasi-dong' href='https://www.instagram.com/code_pelajar/' title='Follow Instagram'><i class='fa fa-instagram'/></a>
        <a class='donasi-dong' href='https://www.facebook.com/codepelajar/' title='Subscribe Youtube'><i class='fa fa-youtube-square'/> </a>
      <a class='donasi-dong' href='https://www.facebook.com/codepelajar/' title='Follow Fanspage'><i class='fa fa-facebook'/></a>
      </div>
       <div class='gelap'/>
    • Jika sudah Save tema.
Syntax Keterangan
5000 5k = 5detik, itu adalah waktu lama tampil push notifikasi tampil.
icon facebook,youtube,instagram & Donate. Setting Link2 aktif disana seperti Fanspage,Youtube,Instagram dll.

Sekian tutorial singkat tapi penuh manfaat, semoga bisa terbantu sob.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel