√ Cara Memasang PopUp Selamat Tahun Baru di Blog - AdityaTekno

Social Items

AdityaTekno.com - Kali ini saya akan membagikan tutorial Cara Memasang PopUp Selamat Tahun Baru di Blogger. Karena sesuai permintaan kalian, maka saya buatkan cara membuat popup untuk ucapan selamat tahun baru 2020.
Cara Membuat PopUp Selamat Tahun Baru di Blog

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.

Baca Juga : Cara Memasang PopUp Banner Iklan Melayang disamping Kanan Kiri Blog

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.

Baca Juga :

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

Cara Memasang PopUp Selamat Tahun Baru di Blogger


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

Kemudian, letakkan kode CSS berikut tepat diatas kode </head> atau &lt;/head&gt;
<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 &lt;/body&gt;
<div id='popuptahunbaru2020'>
<a class='close-popup' href='#' title='close'><i class='fa fa-times'></i></a>
<div class='baru20'>
<p>Admin AdityaTekno.com Mengucapkan</p>
<p><span class='tahunbaru20'>Selamat Tahun Baru 2020 </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:


Baca Juga : Cara Membuat Efek Salju Berjatuhan di Blog versi Terbaru

Demikian Cara Memasang PopUp Selamat Tahun Baru di Blog. Semoga bisa bermanfaat dan terima kasih sudah berkunjung. Salam AdityaTekno.com.

sumber kode:
https://codepen.io/MajidJM/full/wReWqd

Cara Memasang PopUp Selamat Tahun Baru di Blog

AdityaTekno.com - Kali ini saya akan membagikan tutorial Cara Memasang PopUp Selamat Tahun Baru di Blogger. Karena sesuai permintaan kalian, maka saya buatkan cara membuat popup untuk ucapan selamat tahun baru 2020.
Cara Membuat PopUp Selamat Tahun Baru di Blog

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.

Baca Juga : Cara Memasang PopUp Banner Iklan Melayang disamping Kanan Kiri Blog

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.

Baca Juga :

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

Cara Memasang PopUp Selamat Tahun Baru di Blogger


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

Kemudian, letakkan kode CSS berikut tepat diatas kode </head> atau &lt;/head&gt;
<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 &lt;/body&gt;
<div id='popuptahunbaru2020'>
<a class='close-popup' href='#' title='close'><i class='fa fa-times'></i></a>
<div class='baru20'>
<p>Admin AdityaTekno.com Mengucapkan</p>
<p><span class='tahunbaru20'>Selamat Tahun Baru 2020 </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:


Baca Juga : Cara Membuat Efek Salju Berjatuhan di Blog versi Terbaru

Demikian Cara Memasang PopUp Selamat Tahun Baru di Blog. Semoga bisa bermanfaat dan terima kasih sudah berkunjung. Salam AdityaTekno.com.

sumber kode:
https://codepen.io/MajidJM/full/wReWqd

You Might Also Like :

You Might Also Like :

Memuat...
Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo