Cara Memasang Pop Up Ucapan Selamat Berpuasa 2019
Snippet Tips Blogger
iNDZGN - Bulan Ramadhana dalah salah satu momen yang ditunggu-tunggu oleh umat Muslim di seluruh dunia. Karena pada bulan inilah banyak sekali berkah yang bisa kita dapatkan selama bulan suci Ramadhan ini. Maka dari itu, Ramadhan adalah bulan yang sangat istimewa dan selalu disambut dengan suka cita.
Menyambut bulan Ramadhan ini, Indzgn memberikan tips Cara Memasang Pop Up Ucapan Selamat Berpuasa 2019. Sangat sederhana cara kerja dari pop up ini. Pop up akan muncul ketika kita membuka suatu halaman di dalam blog. Pop up ini juga dilengkapi dengan tombol close untuk menutup pesan tersebut. langsung saja kita menuju ke tutorialnya.
Memasang Pop Up Ucapan Selamat Berpuasa
Pertama, buka Blogger > Kemudian buka menu tema dan klik Edit HTML > Tambahkan kode script di bawah ini sebelum </head>
<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%)}}
#indzgnramadhan2019{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}#indzgnramadhan2019 .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)}#indzgnramadhan2019 .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#indzgnramadhan2019 .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#indzgnramadhan2019 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}#indzgnramadhan2019 a.close-popup:hover{background:#fff;color:#3885c7;border-color:#3885c7}#indzgnramadhan2019 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){#indzgnramadhan2019 .puasa19{font-size:1rem}#indzgnramadhan2019 .puasa19 .ramadhan2019{font-size:1.5rem}#indzgnramadhan2019{min-height:260px;left:20px;right:20px}}
</style>
</b:if>kemudian tambahkan kode di bawah ini sebelum </body>
<b:if cond='data:view.isHomepage'>
<div id='indzgnramadhan2019'>
<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(){$("#indzgnramadhan2019").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>
</b:if>Jika sudah, klik tombol simpan dan lihat hasilnya di blog kamu.
One Time Event dengan Menambahkan Cookie
Jika kamu ingin menambahkan kode ini dan memunculkannya hanya sekali di halaman browser, gunakan kode ini:Tambahkan kode di bawah ini sebelum </head>
<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Pop Up Ramadhan */
@keyframes zoomIn{from{opacity:0}50%{opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
#myModal{display:none}#indzgnramadhan2019{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:1001;min-height:325px;padding:20px;border-radius:10px;animation:slideDown 1s}#indzgnramadhan2019 .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)}#indzgnramadhan2019 .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#indzgnramadhan2019 .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#indzgnramadhan2019 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;transition:all 0.3s}#indzgnramadhan2019 a.close-popup:hover{background:#336d9e;color:#fff}#indzgnramadhan2019 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}#hiding{background:#3979b0;position:absolute;bottom:20px;right:78px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:20px;padding:0 10px;line-height:28px;min-width:28px;transition:all 0.3s}#hiding:hover{background:#336d9e;color:#fff}.matilampuku{position:fixed;top:0;background:rgba(0,0,0,0.35);left:0;right:0;bottom:0;margin:0;z-index:1000;animation:zoomIn 1s}
@media screen and (max-width:768px){#indzgnramadhan2019 .puasa19{font-size:1rem}#indzgnramadhan2019 .puasa19 .ramadhan2019{font-size:1.5rem}#indzgnramadhan2019{min-height:260px;left:20px;right:20px}}
</style>
</b:if>kemudian tambahkan kode di bawah ini sebelum </body>
<b:if cond='data:view.isHomepage'>
<div id='myModal'>
<div id='indzgnramadhan2019'>
<div class='ketupat'/>
<a class='close-popup' href='javascript:void(0);' onclick='document.getElementById('myModal').style.display='none';return false;' title='Close this message'>Close</a>
<div class='hidemodal' id='hiding'><span title='Do not show this message again'>×</span></div>
<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>
<div class='matilampuku'/>
</div>
<script type='text/javascript'>
//<![CDATA[
function setCookie(e,i,o){var n=new Date;n.setDate(n.getDate()+o);var a=escape(i)+(null==o?"":"; expires="+n.toUTCString());document.cookie=e+"="+a}function getCookie(e){var i,o,n,a=document.cookie.split(";");for(i=0;i<a.length;i++)if(o=a[i].substr(0,a[i].indexOf("=")),n=a[i].substr(a[i].indexOf("=")+1),(o=o.replace(/^s+|s+$/g,""))==e)return unescape(n)}var Arlina_COOKIE="cookiearlina",hideMe=document.getElementById("myModal"),cookie=getCookie(Arlina_COOKIE),cookiearlina=cookie||hideMe.style.display,hiding=document.getElementById("hiding");hiding.onclick=function(){setCookie(Arlina_COOKIE,cookiearlina,100),hideMe.style.display="block"===cookiearlina?"none":"block",cookiearlina=hideMe.style.display},hiding.onclick();
//]]>
</script>
</b:if>Pesan ini akan muncul lagi jika pengguna membersihkan cookie pada browsernya.
Klik tombol simpan tema dan lihat hasilnya di blog kamu.
itu tadi sedikit tips Cara Memasang Pop Up Ucapan Selamat Berpuasa 2019. Semoga bermanfaat untuk kamu.
Source: arlinacode.com
