Memasang Pop Up Ucapan Selamat Berpuasa | Hallo sobat blogger, di postingan sebelumnya kita sudah membagikan tips yang sama namun tips tersebut seolah-olah dengan situs kompiajaib, nah di pos ini kami akan membagikan cara menciptakan banner ucapan selamat berpuasa yang seolah-olah atau bahkan sama dengan yang ketika ini dipakai disitus arlina design.
Bulan puasa yaitu bulan yang sangat ditunggu-tunggu oleh semua umat muslim diseluruh dunia. alasannya di bulan inilah pahal ibadah akan ditingkatkan beberapa kali lipat. kalau boleh di anda katakan. bulan pahala itu bagaikan trend panen. yang mana semua seluruh umat muslim di dunia berlomba-lomba mencari pahala sebanyak-banyaknya.
Pada ketika bulan ramadhan datang biasanya situs-situs besar akan menawarkan ucapan selamat menjalankan ibadah puasa, nah hal inilah yang akan kita bahas pada postingan ini.
Cara kerja tips ini sangatlah simpel, yang mana setiap kali halaman di resfresh akan muncul pesan popup selamat menjalankan ibadah puasa. dan goresan pena tersebut mempunyai tombol close sehingga tidak mengganggu pengguna yang mengunjungi blog kita.
Dari pada anda penasaran, pribadi saja yuk simak panduanya dibawah ini.
Cara Memasang Pop Up Ucapan Selamat Berpuasa Mirip Situs Arlina Design
Pertama silahkan kalian buka halaman dasboard blogger kau >> Kemudian pilih hidangan Tema >> kemudian pilih lagi tombol Edit HTML.
Dihalaman edit HTML silahkan cari arahan </head> untuk mempermudah menemukan arahan gunakan kombinasi tombol CTRL+F.
Jika arahan diatas sudah anda temukan, tambahkan arahan dibawah ini sempurna dibawah arahan tersebut.
<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Pop Up Ramadhan */
@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
#arlinapuasa2019ku{line-height:1.55;display:block;background:#fff;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}#arlinapuasa2019ku .puasa19{position:absolute;color:#222;font-size:1.5rem;font-weight:400;z-index:99999;text-align:center;margin:auto;padding:10px;left:0;right:0;top:17%;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05)}#arlinapuasa2019ku .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#arlinapuasa2019ku a.close-popup{background:#428bca;position:absolute;bottom:20px;right:20px;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;border:1px solid #3885c7;transition:all 0.3s}#arlinapuasa2019ku a.close-popup:hover{background:#fff;color:#3885c7;border-color:#3885c7}#arlinapuasa2019ku a.close-popup:active{opacity:.9}
.ketupat{position:absolute;left:0;right:0;top:-12px;margin:auto;width:10px;height:10px;background:#B9E937;box-shadow:10px 0 0 #57D131,10px 10px 0 #B9E937,0px 10px 0 #57D131,5px 5px 0 10px #fff;display:inline-block;text-align:center;transform:rotate(45deg);z-index:2}.ketupat.duaa{top:initial;bottom:3px}
@media screen and (max-width:768px){#arlinapuasa2019ku .puasa19{font-size:1rem}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:1.5rem}#arlinapuasa2019ku{min-height:260px;left:20px;right:20px}}
</style>
</b:if>
Dan cari lagi arahan </body> dan tambahkan arahan ini di bawahnya.
<div class='ketupat'/>
<a class='close-popup' href='#' title='Close this message'>Close</a>
<div class='puasa19'>
<p>Selamat Menunaikan Ibadah Puasa</p>
<p><span class='ramadhan2019'>Ramadhan 1440 H</span></p>
<p>Mohon Maaf Lahir Batin</p>
</div>
<div class='ketupat duaa'/>
</div>
<script type='text/j4vascript'>
//<![CDATA[
$(window).bind("load",function(){$("#arlinapuasa2019ku").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>
</b:if>
Jika sudah silahkan klik tombol Simpan Perubahan
Live Demo
CATATAN! Secara default, aku tambahkan tag kondisional khusus halaman utama. Makara kalau ingin pop up ini muncul di semua halaman, silakan hapus tag kondisional tersebut.
Baca Juga:
Demikianlah panduan kali ini. buat teman-teman yang sudah mengunjungi situs lapaklama.com kami ucapkan terimakasih dan selamat mencoba.
Sumber aciknadzirah.blogspot.com