Cara Membuat Pop up Selamat Tahun Baru di Blogger

Cara Membuat PopUp Selamat Tahun Baru di Blog

Karena sesuai permintaan kalian, maka saya buatkan cara membuat popup untuk ucapan selamat tahun baru 2020.

Bisanya popup seperti ini digunakan untuk memunculkan FansPage Blog atau untuk memunculkan kotak subscribe (berlangganan).

Namun, popup ini juga bisa digunakan untuk menampilkan ucapan selamat tahun baru seperti yang akan saya bagikan tutorialnya.

Dan perlu anda ketahui, bahwa popup ini hanya menggunakan kode CSS, HTML dan JavaScript (kode js nya pun sedikit) jadi tidak akan memberatkan loading pada blog anda dan popup ini juga sudah responsive.

Nah, bagi anda tertarik mencobanya, langsung saja simak tutorialnya dibawah ini.

Cara Membuat Pop up Selamat Tahun Baru di Blogger

Pertama, buka Blogger >> Tema >> Edit HTML.

Kemudian, letakkan kode CSS berikut tepat diatas kode </head> atau </head>.

<style type="text/css">
/* PopUp Tahun Baru */
@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_hari20{0%{transform:translate(0%,0)}50%{transform:translate(100%,0)}50.01%{transform:translate(-100%,0)}}
@keyframes sun_movement{0%{top:50px}60%{top:-30px}25%{top:-30px}40%{top:50px}}
@keyframes run_malam20{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}}
/* PopUp Tahun Baru 2020 */
#popuptahunbaru2020{display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:660px;box-shadow:0 20px 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}
#popuptahunbaru2020 .baru20{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%}
#popuptahunbaru2020 .baru20 p{margin:20px auto;text-shadow:2px 2px 5px rgba(0,0,0,0.2)}
#popuptahunbaru2020 .baru20 .tahunbaru20{font-size:3rem;font-weight:700}
#popuptahunbaru2020 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}
#popuptahunbaru2020 a.close-popup:hover{color:#fff}
#popuptahunbaru2020 a.close-popup:active{opacity:0}
#popuptahunbaru2020 a.close-popup i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}
#popuptahunbaru2020 a.close-popup:hover i{transform:rotate(360deg)}
.gunung20{width:400px;height:300px;display:block;background:#4aad52;position:absolute;bottom:-150px;transform:rotate(45deg);border-radius:50px}
.gunung20.behind{background:#42a54a;right:-120px;bottom:-180px;z-index:-1}
.hari20{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:run_hari20 5s infinite linear}
.hari20 .awan20{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}
.hari20 .awan20: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}
.hari20 .awan20.invert{top:60px;left:250px}
.hari20 .awan20.invert:before{left:50px}
.hari20 .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}
.malam20{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:run_malam20 5s infinite linear}
.malam20 .bintang20 .star{width:5px;height:5px;display:block;background:#f7f7f7;border-radius:50%;position:absolute}
.malam20 .bintang20 .star:nth-child(1){top:50px;left:50px}
.malam20 .bintang20 .star:nth-child(2){top:200px;left:70px}
.malam20 .bintang20 .star:nth-child(3){top:100px;left:300px}
.malam20 .bintang20 .star:nth-child(4){top:50px;left:220px}
.malam20 .bintang20 .star:nth-child(5){top:160px;left:320px}
.malam20 .bintang20 .star:nth-child(6){top:150px;left:230px}
.malam20 .bintang20 .star:nth-child(7){top:180px;left:400px}
.malam20 .bintang20 .star:nth-child(8){top:50px;left:360px}
.malam20 .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){#popuptahunbaru2020{top:10px!important;left:10px;right:10px;min-height:250px}#popuptahunbaru2020 .baru20{font-size:1.1rem;top:0}#popuptahunbaru2020 .baru20 .tahunbaru20{font-size:2.5rem}.gunung20{display:none}.hari20,.bintang20,.malam20 .moon{display:inline}#popuptahunbaru2020 a.close-popup {z-index:999999}}
</style>

Setelah itu letakkan kode berikut tepat diatas kode </body> atau </body>.

<div id='popuptahunbaru2020'>
<a class='close-popup' href='#' title='close'><i class='fa fa-times'></i></a>
<div class='baru20'>
<p>Admin Pinter Desain Mengucapkan</p>
<p><span class='tahunbaru20'>Selamat Tahun Baru 2022 </span></p>
</div>
<div class='gunung20'></div>
<div class='gunung20 behind'></div>
<div class='hari20'>
<div class='awan20'></div>
<div class='awan20 invert'></div>
<div class='sun'></div>
</div>
<div class='malam20'>
<div class='bintang20'>
<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(){$("#popuptahunbaru2020").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
</script>

Klik Simpan Tema dan lihat hasilnya di blog anda.

Untuk melihat hasilnya seperti apa, bisa di cek dibawah :

Source Code :
https://codepen.io/MajidJM/full/wReWqd

Graphic Designer