Cara Membuat Pop Up Ucapan Selamat Berpuasa di Blog

Marhaban Ya Ramadhan, tidak terasa kini sudah memasuki bulan suci ramadhan 2019, bulan suci penuh berkah bagi kita semua. Bulan suci ramadhan merupakan salah satu momen penting yang ditunggu-tunggu oleh seluruh Umat Islam diseluruh Dunia. Momen dimana kita bisa melipat gandakan pahala ibadah kita kepada-Nya dan juga bulan yang penuh ampunan.

Dan berhubung sudah memasuki bulan suci ramadhan, maka pada kesempatan saya membagikan sebuah tutorial bagaimana Cara Membuat Pop Up Ucapan Selamat Berpuasa di Blog yang dapat sobat pasang di blog sobat.

Konsep dan cara kerja dari pop up ucapan selamat ramadhan ini sangat sederhana, pesan pop up ini akan ditampilkan ktika pengunjung membuka sebuah halaman di blog kita dan sobat menentukan dihalaman mana saja pop up ini akan di munculkan, seperti contoh di tutorial kali ini saya menggunakan tag kondisional khusus agar pop up ini dimunculkan di halaman beranda/home blog saja.

Tutorial Cara Memasang Pop Up Ucapan Selamat Berpuasa di Blog ini saya kutip dari blogger ternama (Arlina) dan saya pribadi sudah menggunakan tutorial ini di blog saya yang lain.

Untuk tutorial bisa langsung cek dibawah ini :

Cara Membuat Pop Up Ucapan Selamat Berpuasa di Blog

Login ke Blogger > Template > Edit HTML > dan simpan kode berikut 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>

Secara default, css diatas di apit dengan tag kondisional khusus halaman utama. Jadi jika ingin pop up ini muncul di semua halaman, silakan hapus tag kondisional tersebut. Atau untuk mengatur di halaman mana sobat akan menampilkannya bisa langsung sobat cek di Tag Kondisional Blogger Terbaru

Kemudian tambahkan kode di bawah ini sebelum </body>

<b:if cond='data:view.isHomepage'>
<div id='arlinapuasa2019ku'>
<div class='ketupat'/>
<a class='close-popup' href='#' title='close'>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>

Jika sudah, klik tombol Simpan tema dan lihat hasilnya di blog sobat.

Itulah Cara Membuat Pop Up Ucapan Selamat Berpuasa di Blog kali ini semoga bermanfaat dan selamat mencoba

Source : https://www.arlinadzgn.com/2019/05/cara-memasang-pop-up-ucapan-selamat-berpuasa.html