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.
2. Kemudian panggil css diatas dengan copy kode dibawah ini dan paste diatas kode </body>.
3. Kamu bisa mengubah kata-kata yang sudah saya tandai warna merah sesuka hati kamu.
4. Kemudian terakhir adalah save
Demikianlah ulasan kami mengenai Cara Membuat Notifikasi Pop-up Ramadhan Keren Di Blog, semoga bermanfaat
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}}
@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>
<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
