Cara Membuat Pop Up Ucapan Selamat Berpuasa di Blog

-
Cara Membuat Pop Up Ucapan Selamat Berpuasa di Blog

Boba Blog - Halo bobabers, tidak terasa beberapa hari lagi kita yang beragama muslim akan menunaikan ibadah puasa ramadan pada bulan april nanti. Nah, karena puasa tidak lama lagi, min boba berkeinginan untuk memberikan sebuah tutorial blog edisi bulan ramadan.

Tutorial yang min boba berikan adalah tutorial bagaimana cara membuat pop up ucapan selamat berpuasa untuk kamu yang ingin mendekorasi blog dengan tema ramadan. Jika kamu penasaran bagaimana tampilan pop up ucapannya, kamu bisa langsung klik di sini.


Untuk kamu yang ingin memasang pop up ucapan selamat berpuasa ini, perlu diketahui dulu nih kalau pop up ini dapat mempengaruhi kecepatan loading blog kamu, akan tetapi tidak terlalu signifikan pengaruhnya.

Namun, kalau kamu masih ingin tetap memasang pop up tersebut, kamu bisa ikuti langkah-langkah berikut ini ya!

Cara Memasang Pop Up Ucapan Selamat Berpuasa di Blog

Pertama, buka blog dan masuk ke menu tema. Kemudian klik Edit HTML dan masukkan kode di bawah ini sebelum kode </head>.

<style type="text/css">
/* Pop Up Animation Ramadhan */
@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>

Setelah itu, tambahkan kode berikut ini tepat di bawah 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 1443 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>

Terakhir, kamu hanya tinggal tambahkan kode berikut ini tepat di atas kode </body>.

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

Selesai, kini kamu bisa klik Simpan Tema dan lihat hasilnya.


Bagaimana bobabers? mudah sekali bukan cara membuat pop up ucapan selamat berpuasa ini? jika ada yang dibingungkan, langsung saja tanyakan di kolom komentar ya!

Terima kasih kepada kalian semua yang telah membaca artikel Cara Membuat Pop Up Ucapan Selamat Berpuasa di Blog, semoga dengan kamu membaca artikel ini akan membuat mimin lebih bersemangat dalam membuat artikel-artikel berikutnya.

Jangan lupa untuk cek artikel menarik lainnya hanya di bobablog.xyz!

Comments

Post a Comment

Popular posts from this blog

Cara Mengatasi Icon Shortcut Blank Warna Putih

-
Image
Boba Blog  - Halo bobabers, kamu pernah tidak ketika sedang menyalakan komputer tiba-tiba ada icon shortcut game yang ingin kamu mainkan itu malah blank berwarna putih? kalau pernah, apakah itu berarti sebuah tanda kalau file game tersebut ada yang rusak? Misalkan kamu pernah mengalami hal itu atau bahkan sedang mengalaminya, maka kamu tidak perlu khawatir. Kenapa min boba bilang tidak perlu khawatir? karena hal itu bisa saja terjadi dan tidak perlu di install ulang. Baca juga:  Cara Mengatasi Kamera Zoom yang Tidak Mirror Dalam artikel kali ini, min boba mau kasih tutorialnya buat kamu yang bingung cara mengatasi icon shortcut yang berwarna putih atau biasa disebut blank. Cara Mengatasi Icon Shortcut Blank Berwarna Putih Pada sebuah sistem windows terdapat file yang bernama IconCache.db yang di mana file ini berfungsi sebagai pengelola icon shortcut. Namun, kalau tiba-tiba icon shortcut berubah menjadi blank berwarna putih itu bagaimana cara untuk memperbaikinya? Cara untuk m...
Read more

Cara Mempercepat Loading Blog dengan Lazy Load Adsense

-
Image
Boba Blog - Halo bobabers, dalam dunia blogging, tentu saja kita sebagai pemilik blog atau website menginginkan trafik yang banyak, apalagi jika kita sudah memiliki adsense, tentu saja itu akan menghasilkan uang yang banyak. Namun, banyak sekali para blogger yang memasangkan iklan adsense di blog dengan cukup banyak, hal ini dapat menyebabkan loading blog menjadi lambat. Oleh karena itu, pasang iklan secukupnya saja atau kamu bisa memasang lazy load adsense. Apa itu Lazy Load Adsense? Lazy Load merupakan sebuah script yang di mana berfungsi untuk menunda suatu pemuatan, sedangkan adsense sendiri merupakan program kerjasama periklanan yang di mana kita dapat menghasilkan uang hanya dengan memasang iklan adsense di situs kita. Dengan kata lain, lazy load adsense itu berguna untuk menunda pemuatan iklan dan iklan baru muncul saat kita scroll ke bagian iklan tersebut. Baca juga:  Cara Memasang Script Lazy Youtube di Blog Manfaat Memasang Lazy Load Adsense Kenapa perlu memasang lazy lo...
Read more