Cara Membuat Pop Up ucapan Selamat Menunaikan Ibadah Puasa di Bulan Ramadhan

Halo sobat blogger sukses kali ini mimin mau bagikan Tutorial Cara Membuat Pop p Ucapan Selamat Menunaikan ibadah Puada di bulan Ramadhan.

Untuk Umat Muslim bulan Ramadhan untuk meningkatkan iman dan takwanya kepada Allah Subhanahu Wa Ta’ala. Olah karena itu  bulan Ramadhan bulan yang penuh berkah banyak di nanti – nantikan.
Cara Membuat Pop Up ucapan Selamat Menunaikan Ibadah Puasa di Bulan Ramadhan

Baca Juga
“Niat Mandi Wajib Seblum Puasa latin dan artinya”
“Niat Makan Sahur latin dan artinya”
“Niat Berbuka Puasa Ramadhan Latin dan artinya”

Untuk kita sebagai blogger Indonesia mau kah untuk menyambut bulan Ramadhan ini dengan pop up selamat bulan puasa di blognya masing -  masing agar lebih keren, untuk yang non muslim juga boleh untuk membuat pop up selamat menunaikan ibadah puasa Ramadhan untuk sekedar mengucapkan selamat untuk bentuk menghargai ubat muslim

Widget Pop Up biasanya para blogger  dibuat bertujuan untyuk beriklan saat pertama kali masuk website tampil jendela kecil (Pop Up) kita bisa membuatnya untuk ucapan selamat bulan puasa, selamat tahun baru dan lain lain.

Tanpa ribet agan bisa membuat Pop Up Ucapan Selamat Ibadah Puasa Ramadhan di blog hanya dengan HTML dan CSS saja loh, oke kita langsung saja ke cara membuat pop up selamat menunaikan bulan Ramadhan.

Cara Membuat Pop Up ucapan Selamat Menunaikan Ibadah Puasa di Bulan Ramadhan

1. Masuk ke Blogger.com
2. Klik Tema
3. Edit HTML
4. Cari kode </head> dengan CTRL + F biar cepat
5. Jika Sudah ketemu letakan kode dibawah tepat diatas kode </head>


<style type="text/css">
@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
@keyframes change_color{0%{background:#5ac7da}33.33%{background:#3173bd}66.66%{background:#0d4a8d}100%{background:#5ac7da}}
@keyframes run_hari18{0%{transform:translate(0%,0)}50%{transform:translate(100%,0)}50.01%{transform:translate(-100%,0)}}
@keyframes sun_movement{0%{top:50px}20%{top:-30px}25%{top:-30px}40%{top:50px}}
@keyframes run_malam18{0%{transform:translate(-20%,0);opacity:0}49.99%{transform:translate(0%,0);opacity:1}99.99%{transform:translate(20%,0);opacity:0}100%{transform:translate(-20%,0);opacity:1}}
@keyframes moon_movement{0%{transform:translate(-200%,0);opacity:0}49.99%{transform:translate(0%,0);opacity:1}99.99%{transform:translate(200%,0);opacity:0}100%{transform:translate(-200%,0);opacity:1}}
/* Pop Up Ramadhan */
#popuppuasa18{display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:660px;box-shadow:0 19px 38px rgba(0,0,0,0.1),0 15px 12px rgba(0,0,0,0.12);z-index:999;min-height:350px;padding:20px;overflow:hidden;border-radius:10px;animation:change_color 5s infinite linear,slideDown 2s}
#popuppuasa18 .puasa18{position:absolute;color:#fff;font-size:2rem;font-weight:400;padding:30px;z-index:99999;text-align:center;margin:auto;left:0;right:0;top:20%}
#popuppuasa18 .puasa18 p{margin:20px auto;text-shadow:2px 2px 5px rgba(0,0,0,0.2)}
#popuppuasa18 .puasa18 .ramadhan18{font-size:3rem;font-weight:700}
#popuppuasa18 a.close-popup{position:absolute;bottom:15px;right:20px;color:#fff;text-align:center;border-radius:100%;cursor:pointer;z-index:99;transition:all .3s}
#popuppuasa18 a.close-popup:hover{color:#fff}
#popuppuasa18 a.close-popup:active{opacity:0}
#popuppuasa18 a.close-popup i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}
#popuppuasa18 a.close-popup:hover i{transform:rotate(360deg)}
.gunung18{width:400px;height:300px;display:block;background:#4aad52;position:absolute;bottom:-150px;transform:rotate(45deg);border-radius:50px}
.gunung18.behind{background:#42a54a;right:-120px;bottom:-180px;z-index:-1}
.hari18{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:run_hari18 5s infinite linear}
.hari18 .awan18{margin:30px auto;width:150px;height:70px;display:block;background:#e7e7e7;border-radius:35px;border:10px solid #ffffff;box-shadow:inset 0 -7px 0 0 #d7d7d7;position:absolute;top:90px;left:50px}
.hari18 .awan18:before{content:'';width:65px;height:35px;display:block;background:#e7e7e7;border-radius:35px 35px 0 0;border:10px solid #ffffff;border-bottom:0;position:absolute;top:-35px;left:20px}
.hari18 .awan18.invert{top:60px;left:250px}
.hari18 .awan18.invert:before{left:50px}
.hari18 .sun{width:75px;height:75px;display:block;background:#fff297;border-radius:50%;box-shadow:inset -5px -5px 0 0 #ddc991;position:absolute;top:50px;left:0;animation:sun_movement 5s infinite linear}
.malam18{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:run_malam18 5s infinite linear}
.malam18 .bintang18 .star{width:5px;height:5px;display:block;background:#f7f7f7;border-radius:50%;position:absolute}
.malam18 .bintang18 .star:nth-child(1){top:50px;left:50px}
.malam18 .bintang18 .star:nth-child(2){top:200px;left:70px}
.malam18 .bintang18 .star:nth-child(3){top:100px;left:300px}
.malam18 .bintang18 .star:nth-child(4){top:50px;left:220px}
.malam18 .bintang18 .star:nth-child(5){top:160px;left:320px}
.malam18 .bintang18 .star:nth-child(6){top:150px;left:230px}
.malam18 .bintang18 .star:nth-child(7){top:180px;left:400px}
.malam18 .bintang18 .star:nth-child(8){top:50px;left:360px}
.malam18 .moon{width:75px;height:75px;display:block;background:#d7d7d7;border-radius:50%;box-shadow:inset -5px -5px 0 0 #c7c7c7;position:absolute;top:50px;left:100px;animation:moon_movement 5s infinite linear}
@media (max-width:800px){#popuppuasa18{top:10px!important;left:10px;right:10px;min-height:250px}#popuppuasa18 .puasa18{font-size:1.1rem;top:0}#popuppuasa18 .puasa18 .ramadhan18{font-size:2.5rem}.gunung18{display:none}.hari18,.bintang18,.malam18 .moon{display:inline}#popuppuasa18 a.close-popup {z-index:999999}}
</style>

6. Jika sudah, kemudian cari lagi kode </body> atau </body> dan letakan kode HTML dibawah ini tepat atas kode </body>

<div id='popuppuasa18'>
<a class='close-popup' href='#' title='close'><i class='fa fa-times'></i></a>
<div class='puasa18'>
<p>Selamat Menunaikan Ibadah Puasa</p>
<p><span class='ramadhan18'>Ramadhan 1440 H</span></p>
</div>
<div class='gunung18'></div>
<div class='gunung18 behind'></div>
<div class='hari18'>
<div class='awan18'></div>
<div class='awan18 invert'></div>
<div class='sun'></div>
</div>
<div class='malam18'>
<div class='bintang18'>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
</div>
<div class='moon'></div>
</div>
</div>

<script type="text/javascript">
$(window).bind("load",function(){$("#popuppuasa18").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
</script>

7. Jika sudah Klik Simpan dan lihat sendiri hasilnya.
Dan wow keren kan!!!!!
Catatan!

jika blog sobat belum terpasang script Fontawesome silahkan sobat pasang terlebih dahulu

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Dan jika tombol close tidak berfungsi, silahkan tambahkan kode dibawah ini tepat diatas kode </head> atau &lt;/head&gt;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>

Penutup
Oke Terimakasih atas perhatianya tentang Cara Membuat Pop Up ucapan Selamat Menunaikan Ibadah Puasa Ramadhan di Blogger

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel