Membuat Pop Up Ucapan Selamat Berpuasa di Blog Blogger / Blogspot

Selaku Admin Ivhaa Network saya mengucapkan selamat menunaikan ibadah puasa, mohon maaf lahir batin ya. Bila ada artikel mungkin yang menyigung atau yang lainnya saya minta maaf ya sobat semua dan terima kasih telah berkunjung.

Assalamualikum, tidak terasa ya sudah memasuki bulan suci ramadhan, pada kesempatan kali ini saya akan share sebuah tutorial lagi bagi kalian semuanya.

Untuk tutorial kali ini adalah Membuat Pop Up Ucapan Selamat Ibadah Puasa di Blog Blogger / Blogspot, artikel ini saya kutip dari Arlina Design. Cara kerjanya dari Pop Up ini sangatlah sederhana dimana akan muncul ketika halaman atau blog di akses pada browser kalian.

Cara Memasang Pop Up Ucapan Berpuasa

Pertama kalian buka Blogger > pilih Tema, setelah itu klik tombol Edit HTML. Namun sebelum itu jangan lupa backup Templatenya, massukan kode di bawah ini tepat berada sebelum kode </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%)}} #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>

Setelah itu tambahkan kode di bawah ini sebelum kode </body>

<b:if cond='data:view.isHomepage'> <div id='arlinapuasa2019ku'> <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>

Simpan Template

Pada Pop Up ini Hanya muncul di Homepage aja, bila ingin muncul di semua halaman harus hapus Tag Kondisional Terbaru

One Time Event Tambah Cookie

Bila kalian hanya ingin memunculkan Pop Up nya ini hanya satu kali di browser silahkan memakai kode berikut ini.

Tempatkan kode di bawah ini tepat sebelum kode
</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}#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:1001;min-height:325px;padding:20px;border-radius:10px;animation:slideDown 1s}#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;transition:all 0.3s}#arlinapuasa2019ku a.close-popup:hover{background:#336d9e;color:#fff}#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}#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){#arlinapuasa2019ku .puasa19{font-size:1rem}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:1.5rem}#arlinapuasa2019ku{min-height:260px;left:20px;right:20px}} </style> </b:if>

Tambahkan lagi kode di bawah ini sebelum kode </body>

<b:if cond='data:view.isHomepage'> <div id='myModal'> <div id='arlinapuasa2019ku'> <div class='ketupat'/> <a class='close-popup' href='javascript:void(0);' onclick='document.getElementById(&apos;myModal&apos;).style.display=&apos;none&apos;;return false;' title='Close this message'>Close</a> <div class='hidemodal' id='hiding'><span title='Do not show this message again'>&#215;</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>

Jangan lupa klik tombol Simpan Template.



Sekian dari saya tutorial kali ini yaitu Membuat Pop Up Ucapan Selamat Beribadah Puasa, selamat berpuasa ya sobat.

Mas Dar Hanya Blogger Amatiran, dan mulai ngeblog pada tahun 2017 dengan blog Ivhaa Netwoek setelah itu fakum dan ngeblog lagi di tahun 2022 dengan nama sudarjurnalblogg.web.id

Berbagi :