--> Skip to main content

Cara Membuat Notifikasi Pop-up Ramadhan Keren Di Blog

  Membuat notifikasi Pop-Up bertemakan Ramadhan di blog  - Halo guys, dibulan ramadhan ini pastinya kamu diharuskan berbuat baik di dunia nyata maupun di dunia maya supaya kamu mendapatkan pahala yang begitu melimpah.    Kita bahas terlebih dahulu apa itu pop-up dan apa fungsinya. Pop-up merupakan pesan pemberitahuan yang berada di suatu website ataupun blog ketika kita mengunjunginya dan biasanya pop-up berisikan iklan ataupun pemberitahuan yang tiba-tiba tampil menutupi isi konten dari blog ataupun website yang dikunjungi dan akan hilang apabila kamu mengclosenya.

Membuat notifikasi Pop-Up bertemakan Ramadhan di blog - pada bulan ramadhan ini pastinya anda haru berbuat baik yang lebihbdi dunia nyata maupun di dunia maya agar anda mendapatkan pahala dari Allah SWT.

Sesui judul diatas Cara Membuat Notifikasi Pop-up Ramadhan Kami akan membahas terlebih dahulu apa itu pop-up dan apa fungsinya. Pop-up merupakan sebuah pesan pemberitahuan yang berada di suatu website ataupun blog yang muncul saat kita membuka halaman awal saat mengunjunginya dan biasanya, pop-up berisikan iklan ataupun pemberitahuan.

Nah, demi kenyamanan visitor dan agar blog kamu terlihat lebih profesional pada artikel ini kaki ingin membagikan tips Cara Membuat Notifikasi Pop-up Ramadhan Keren Di Blog. Kamu bisa memasang atau membuat pop-up ramadhan di blog kamu yang dimana saat orang lain mengunjungi blog kamu maka orang tersebut akan membaca isi pesan ramadhan dari notifikasi pop-up yang sudah kamu buat.

Biasanya isi pesan pop-up ramadhan seperti selamat berpuasa, selamat bulan ramadhan, mohon maaf lahir batin, dan masih banyak lagi contoh pesan pop-up ramadhan lainnya yang bisa kamu tulis di pop-up blog kamu.

Pada artikel ini, saya akan memberikan cara membuat pop-up ramadhan keren versi redesign yang tentunya keren dipasang diblog kamu  menggunakan html dan css serta dibekali sedikit javascript supaya pop-upnya bisa diclose oleh viewer blog kamu dan kabar baiknya pop-up ini  tidak akan menambah berat loading blog kamu, karena disini kamu hanya mengandalkan html dan css. Baiklah tidak usah banyak bicara lagi, mari kita buat pop-up ramadhannya dengan mengikuti cara di bawah ini.

Cara Membuat Notifikasi Pop-up Ramadhan Keren Di Blog

1. Copy kode css di bawah lalu paste diatas kode </style>.

<!-- mbokyah popup ramadhan -->
@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
#amtreadramadhan{line-height:1.55;display:block;background:#2d3436;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:600px;box-shadow:0 0 2.5rem -1.5rem rgba(0,0,0,0.5);z-index:99;min-height:325px;padding:20px;border-radius:10px;animation:slideDown 2s;overflow:hidden;}.amtread-title-ramadhan{font-style:normal;font-size:35px}#amtreadramadhan .puasa19{position:absolute;color:white;font-size:1.5rem;font-weight:400;z-index:99999;text-align:center;margin:auto;padding:10px;left:0;right:0;top:10%;}#amtreadramadhan .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#amtreadramadhan .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#amtreadramadhan a.closepopup{background:#d63031;position:relative;top:265px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:13px;padding:4px 14px;min-width:60px;transition:all 0.3s}#amtreadramadhan a.closepopup:hover{background:#2d3436;color:#d63031;border: 1px solid #d63031}#amtreadramadhan a.closepopup:active{opacity:.9}
@media screen and (max-width:768px){#amtreadramadhan .puasa19{font-size:1rem; margin-top:-30px}#amtreadramadhan .puasa19 .ramadhan2019{font-size:1.5rem}#amtreadramadhan{min-height:260px;left:20px;right:20px}#amtreadramadhan a.closepopup{position:relative;top:200px}}


2. Kemudian panggil css diatas dengan copy kode dibawah ini dan paste diatas kode </body>.

<div id='mbokyahramadhan'>
<a class='closepopup' href='' title='Close this message'>Close</a>
<div class='puasa2020'>
  <p><span class='mbokyah-title-ramadhan'>judulblog</span> Mengucapkan</p>
   <p>Selamat Menunaikan Ibadah Puasa</p>
   <p><span class='ramadhan2019'>Ramadhan 1440 H</span></p>
   <p>Mohon Maaf Lahir Batin</p>
</div>
  </div>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#amtreadramadhan").animate({top:"25%"},1e3),$("a.closepopup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>


3. Kamu bisa mengubah kata-kata yang sudah saya tandai warna merah sesuka hati kamu.

Judulblog gantilah sesuai dengan judul blog kamu

4. Kemudian terakhir adalah save

Demikianlah ulasan kami mengenai Cara Membuat Notifikasi Pop-up Ramadhan Keren Di Blog, semoga bermanfaat
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar