Cara Memasang Notifikasi Pop Up Ucapan Selamat Berpuasa Di Blog [Blogger]

Cara Memasang Notifikasi Pop Up Ucapan Selamat Berpuasa Di Blog [Blogger] - Berkaitan dengan bulan Ramadhan (puasa), maka kita sebagai seorang blogger bisa memberikan nuansa baru bagi para pembaca/pengunjung blog kita.

Caranya yaitu dengan memasang Pop-Up ucapan selamat berpuasa, dimana Pop-Up ini akan muncul secara otomatis ketika pengunjung membuka situs blog kita.

Nah, dengan anda memasang Pop-Up ucapan selamat berpuasa ini, pastinya para pengunjung blog lebih merasa dihargai ibadah puasanya, khususnya untuk umat islam itu sendiri.

Baiklah, tanpa berlama-lama lagi, berikut adalah cara memasang notifikasi Pop-Up ucapan selamat berpuasa di situs blog:

1. Buka blogger.com
2. Masuk ke menu Tema>>Edit HTML
3. Letakkan kode berikut, 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%)}}
#toppuasa2019ku{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}#toppuasa2019ku .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)}#toppuasa2019ku .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#toppuasa2019ku .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#toppuasa2019ku 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}#toppuasa2019ku a.close-popup:hover{background:#fff;color:#3885c7;border-color:#3885c7}#toppuasa2019ku 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){#toppuasa2019ku .puasa19{font-size:1rem}#toppuasa2019ku .puasa19 .ramadhan2019{font-size:1.5rem}#toppuasa2019ku{min-height:260px;left:20px;right:20px}}
</style>
</b:if>

4. Dilanjutkan dengan meletakkan kode berikut, sebelum </body>

<b:if cond='data:view.isHomepage'>
<div id='toppuasa2019ku'>
<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(){$("#toppuasa2019ku").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>
</b:if>

5. Selesai

Penutup

Demikianlah tutorial singkat untuk memasang Pop-Up ucapan selamat berpuasa. Semoga saja setelah anda memasang Pop-Up ini, pengunjung blog anda akan semakin banyak nantinya.

Nah, mungkin itu saja yang dapat saya sampaikan pada kesempatan kali ini, kurang lebihnya mohon maaf. Terimakasih dan sampai jumpa di lain kesempatan.

Share :