Cara Memasang PopUp Selamat Tahun baru di Blogger
PopUp yang bisanya sobat pasang seperti popup fp facebook atau biasanya juga berlangganan blog ttapi kali ini saya akan sharepopup menguncapkan selamat tahun baru ke pada pengunjung sobat pastinya.
Popup ini hanya memakai kode CSS, HTML dan JavaScript tentunya tidak akan memberatkan loading pada blog sobat dan juga Popup ini responsive juga kalau dibuka dihape sobat dan juga terdapat tombol close dalam pop up tersebut, jika sobat minat langsung saja ke caranya ya sob.
Cara Memasang PopUp Selamat Tahun baru di Blogger - PopUp yang bisanya sobat pasang seperti popup fp facebook atau biasanya juga berlangganan blog ttapi kali ini saya akan sharepopup menguncapkan selamat tahun baru ke pada pengunjung sobat pastinya.
Popup ini hanya memakai kode CSS, HTML dan JavaScript tentunya tidak akan memberatkan loading pada blog sobat dan juga Popup ini responsive juga kalau dibuka dihape sobat dan juga terdapat tombol close dalam pop up tersebut, jika sobat minat langsung saja ke caranya ya sob.
Cara Memasang PopUp Selamat Tahun baru di Blogger
Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML lalu copy kode CSS dibawah ini dan pastekan tepat diatas kode </head> atau </head>
<style type="text/css">
/* Pop Up Tahun Baru 2019 triksimple.com */
@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_hari19{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_malam19{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 Tahun Baru 2019 */
#popuptahunbaru2019{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}
#popuptahunbaru2019 .baru19{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%}
#popuptahunbaru2019 .baru19 p{margin:20px auto;text-shadow:2px 2px 5px rgba(0,0,0,0.2)}
#popuptahunbaru2019 .baru19 .tahunbaru19{font-size:3rem;font-weight:700}
#popuptahunbaru2019 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}
#popuptahunbaru2019 a.close-popup:hover{color:#fff}
#popuptahunbaru2019 a.close-popup:active{opacity:0}
#popuptahunbaru2019 a.close-popup i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}
#popuptahunbaru2019 a.close-popup:hover i{transform:rotate(360deg)}
.gunung19{width:400px;height:300px;display:block;background:#4aad52;position:absolute;bottom:-150px;transform:rotate(45deg);border-radius:50px}
.gunung19.behind{background:#42a54a;right:-120px;bottom:-180px;z-index:-1}
.hari19{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:run_hari19 5s infinite linear}
.hari19 .awan19{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}
.hari19 .awan19: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}
.hari19 .awan19.invert{top:60px;left:250px}
.hari19 .awan19.invert:before{left:50px}
.hari19 .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}
.malam19{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:run_malam19 5s infinite linear}
.malam19 .bintang19 .star{width:5px;height:5px;display:block;background:#f7f7f7;border-radius:50%;position:absolute}
.malam19 .bintang19 .star:nth-child(1){top:50px;left:50px}
.malam19 .bintang19 .star:nth-child(2){top:200px;left:70px}
.malam19 .bintang19 .star:nth-child(3){top:100px;left:300px}
.malam19 .bintang19 .star:nth-child(4){top:50px;left:220px}
.malam19 .bintang19 .star:nth-child(5){top:160px;left:320px}
.malam19 .bintang19 .star:nth-child(6){top:150px;left:230px}
.malam19 .bintang19 .star:nth-child(7){top:180px;left:400px}
.malam19 .bintang19 .star:nth-child(8){top:50px;left:360px}
.malam19 .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){#popuptahunbaru2019{top:10px!important;left:10px;right:10px;min-height:250px}#popuptahunbaru2019 .baru19{font-size:1.1rem;top:0}#popuptahunbaru2019 .baru19 .tahunbaru19{font-size:2.5rem}.gunung19{display:none}.hari19,.bintang19,.malam19 .moon{display:inline}#popuptahunbaru2019 a.close-popup {z-index:999999}}
</style>Jika sudah memasang kode CSS diatas saatnya memasang kode html, copy kode dibawah ini dan pastekan tepat diatas kode </body> atau </body>
<div id='popuptahunbaru2019'>
<a class='close-popup' href='#' title='close'><i class='fa fa-times'></i></a>
<div class='baru19'>
<p>Admin TRIK SIMPLE Mengucapkan</p>
<p><span class='tahunbaru19'>Selamat Tahun Baru 2019 </span></p>
</div>
<div class='gunung19'></div>
<div class='gunung19 behind'></div>
<div class='hari19'>
<div class='awan19'></div>
<div class='awan19 invert'></div>
<div class='sun'></div>
</div>
<div class='malam19'>
<div class='bintang19'>
<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>Dan yang terakhir adalah menambahkan kode JavaScript, copy kode dibawah ini dan pastekan tepat diatas kode </body> atau </body>
<script type="text/javascript">
$(window).bind("load",function(){$("#popuptahunbaru2019").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
</script>Jika sudah klik simpan pada template sobat.
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'/>Catatan! jika tombol close tidak berfungsi tambahkan kode dibawah ini tepat diatas kode </head> atau </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'></script>Oke sekian yang bisa saya sampaikan tentang Cara Memasang PopUp Selamat Tahun baru di Blogger Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.