Cara Membuat Notifikasi Pop-up Ramadhan Keren Di Blog Versi Amtread

Diposting pada
cara membuat notifikasi pop-up ramadhan di blog versi amtread
notifikasi pop-up ramadhan di blog versi amtread



Membuat notifikasi Pop-Up bertemakan Ramadan di blog versi Amtread – 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.

Dalam berbuat kebaikan untuk menyambut bulan suci ramadhan kita bisa membuat ucapan tertentu di akun sosmed atau sesuatu yang kita miliki. Contohnya bila kamu seorang blogger maka 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.

Baca juga: Cara Menambahkan Alamat Kamu Di Google Maps

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

Disini saya akan memberi tahukan kamu cara membuat pop-up ramadhan keren versi redesign amtread menggunakan html dan css serta dibekali sedikit javascript supaya pop-upnya bisa diclose oleh viewer blog kamu dan pastinya tidak terlalu menambah berat loading blog kamu karena disini kamu hanya mengandalkan html dan juga css. Oke tidak usah banyak bicara lagi, mari kita buat pop-up ramadhannya dengan mengikuti tutorial di bawah ini.

Baca juga: Penyebab Artikel Blog Terkena Deindex Google

Cara Membuat Notifikasi Pop-up Ramadhan Keren Di Blog

1. Copy code css di bawah ini terlebih dahulu lalu letakkan di atas kode </style>.

<!– amtread 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. Lalu copy code html beserta javascript di bawah ini, lalu letakkan di atas kode </body>.

<div id=’amtreadramadhan’>
<a class=’closepopup’ href=” title=’Close this message’>Close</a>
<div class=’puasa19′>
  <p><span class=’amtread-title-ramadhan’>Amtread.com</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.

Amtread.com bisa kamu ubah menjadi judul blog kamu ya, selebihnya bebas.

4. Langkah terakhir tinggal kamu save.

Baca juga: Cara Mudah Cek DA PA Blog Dijamin Akurat

Bila kamu ingin tahu sama demonya seperti apa, silahkan cek melalui tombol di bawah ini.

Sekian artikel dari amtread.com mengenai Cara Membuat Notifikasi Pop-up Ramadhan Keren Di Blog Versi Amtread. Kalau ada kesulitan atau kebingungan apa-apa, bisa kamu ajukan di kolom komentar atau bisa contact saya melalui form contact di amtread.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *