Blogger Ramazan Ayı İçin Açılır Pop-up

Ramazan ayında sitenizi ziyaret eden kullanıcıları Ramazanı selamlayan bir açılır pencere ile karşılayabilirsiniz. Açılır pencere sadece ana sayfada gözükür. Açılır pencerede kapat düğmesi de mevcuttur.

Blogger Ramazan Ayı İçin Açılır Pop-up

Öncelikle, Blogger Panelinize girin >  Sonra Temalar menüsüne tıklayın ve HTML'yi Düzenle butonuna tıklayın. 

</head> veya </header> kodunu aratın ve aşağıdaki kodu hemen üstüne ekleyin.

<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>

Bu kodu ekledikten sonra,  </body> kodunu aratın ve hemen üstüne aşağıda vermiş olduğum kodu ekleyin.

<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'>Kapat</a>
<div class='hidemodal' id='hiding'><span title='Do not show this message again'>&#215;</span></div>
<div class='puasa19'>
  <p> Selâmun Aleyküm, Aziz Müminler</p> >
   <p><span class='ramadhan2019'>YA ŞEHRİ RAMAZAN</span></p> 
   <p> Hoşgeldin, 11 Ayın Sultanı</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>

Mavi renkle yazılmış kısımları isteğinize göre düzenleyebilirsiniz.
Sonra Kaydet butonuna tıklayın. ve blogunuzu ziyaret edin.

Yukarı paylaştığım pop-up yanlızca 1 kez gözükür. 

SONUÇ