Cara Memasang Pop Up Ucapan Selamat Berpuasa Mirip Situs Arlina Design

  • Whatsapp
Memasang Pop Up Ucapan Selamat Berpuasa

Memasang Pop Up Ucapan Selamat Berpuasa | Hallo sobat blogger, di postingan sebelumnya kita sudah membagikan tips yang sama namun tips tersebut mirip dengan situs kompiajaib, nah di pos ini kami akan membagikan cara membuat banner ucapan selamat berpuasa yang mirip atau bahkan sama dengan yang saat ini digunakan disitus arlina design.

Bulan puasa adalah bulan yang sangat ditunggu-tunggu oleh semua umat muslim diseluruh dunia. karena di bulan inilah pahal ibadah akan ditingkatkan beberapa kali lipat. jika boleh di anda katakan. bulan puasa itu bagaikan musim panen. yang mana semua seluruh umat muslim di dunia berlomba-lomba mencari pahala sebanyak-banyaknya.

Pada saat bulan ramadhan tiba biasanya situs-situs besar akan memberikan 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 tulisan tersebut memiliki tombol close sehingga tidak mengganggu pengguna yang mengunjungi blog kita.

Dari pada anda penasaran, langsung saja yuk simak panduanya dibawah ini.

Cara Memasang Pop Up Ucapan Selamat Berpuasa Mirip Situs Arlina Design

Pertama silahkan kalian buka halaman dasboard blogger kamu >> Kemudian pilih menu Tema >> lalu pilih lagi tombol Edit HTML.

Dihalaman edit HTML silahkan cari kode </head> untuk mempermudah menemukan kode gunakan kombinasi tombol CTRL+F.

Jika kode diatas sudah anda temukan, tambahkan kode dibawah ini tepat dibawah kode 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 kode </body> dan tambahkan kode 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/javascript'>
//<![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, saya tambahkan tag kondisional khusus halaman utama. Jadi jika 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.

Nilai

Pos terkait

Tinggalkan Balasan

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