Cara Membuat Ucapan Selamat Puasa di Blog

Bulan Ramadhan adalah salah satu momen yang paling ditunggu-tunggu oleh umat Islam di seluruh dunia. Karena di saat inilah banyak manfaat dan hal spesial yang selalu dirasakan oleh umat Islam. Maka ketika Ramadhan tiba, bulan yang istimewa tersebut akan selalu disambut dengan penuh suka cita.

Untuk menyambut bulan suci yang penuh berkah ini Mas Awan akan memberikan tutorial Cara Membuat Ucapan Selamat Puasa di Blog. Cara kerjanya cukup sederhana, pesan pop up akan muncul ketika kita membuka suatu halaman di dalam blog yang dilengkapi dengan tombol close untuk menutup pesan tersebut. Bagi yang penasaran, yuk ikuti caranya di bawah ini!

Cara Memasang Ucapan Selamat Puasa di Blog

1. Buka Blogger > Kemudian buka menu Tema dan klik tombol Edit HTML > Tambahkan kode 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%)}}
#masawanpuasa2020ku{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}#masawanpuasa2020ku .puasa20{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)}#masawanpuasa2020ku .puasa20 p{margin:10px auto;font-style:italic;font-family:Georgia}#masawanpuasa2020ku .puasa20 .ramadhan2019{font-size:2.5rem;font-style:normal}#masawanpuasa2020ku 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}#masawanpuasa2020ku a.close-popup:hover{background:#fff;color:#3885c7;border-color:#3885c7}#masawanpuasa2020ku 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){#masawanpuasa2020ku .puasa20{font-size:1rem}#masawanpuasa2020ku .puasa20 .ramadhan2019{font-size:1.5rem}#masawanpuasa2020ku{min-height:260px;left:20px;right:20px}}
</style>
</b:if>

2. Kemudian tambahkan kode di bawah ini sebelum </body>

<b:if cond='data:view.isHomepage'>
<div id='masawanpuasa2020ku'>
<div class='ketupat'/>
<a class='close-popup' href='#' title='Close this message'>Close</a>
<div class='puasa20'>
   <p>Selamat Menunaikan Ibadah Puasa</p>
   <p><span class='ramadhan2019'>Ramadhan 1441 H</span></p>
   <p>Mohon Maaf Lahir Batin</p>
</div>
<div class='ketupat duaa'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#masawanpuasa2020ku").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>
</b:if>

Jika sudah, klik tombol Simpan tema dan lihat hasilnya.

One Time Event dengan Menambahkan Cookie

Jika Anda ingin menambahkan kode ini dan ingin memunculkan pesan ini hanya sekali di browsernya, 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}#masawanpuasa2020ku{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}#masawanpuasa2020ku .puasa20{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)}#masawanpuasa2020ku .puasa20 p{margin:10px auto;font-style:italic;font-family:Georgia}#masawanpuasa2020ku .puasa20 .ramadhan2019{font-size:2.5rem;font-style:normal}#masawanpuasa2020ku 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}#masawanpuasa2020ku a.close-popup:hover{background:#336d9e;color:#fff}#masawanpuasa2020ku 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){#masawanpuasa2020ku .puasa20{font-size:1rem}#masawanpuasa2020ku .puasa20 .ramadhan2019{font-size:1.5rem}#masawanpuasa2020ku{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='masawanpuasa2020ku'>
<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='puasa20'>
   <p>Selamat Menunaikan Ibadah Puasa</p>
   <p><span class='ramadhan2019'>Ramadhan 1441 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 kembali jika pengguna membersihkan Cookies di browsernya

klik tombol Simpan tema dan lihat hasilnya.

Demikian artikel tentang Cara Membuat Ucapan Selamat Puasa di Blog, semoga bermanfaat. Sampai jumpa pada artikel selanjutnya.