Cara Memasang Popup Selamat Tahun Gres Di Blogger
Cara Memasang PopUp Selamat Tahun gres di Blogger - PopUp yang bisanya teman pasang menyerupai popup fp facebook atau biasanya juga berlangganan blog ttapi kali ini aku akan sharepopup menguncapkan selamat tahun gres ke pada pengunjung teman pastinya.
Popup ini hanya menggunakan isyarat CSS, HTML dan JavaScript tentunya tidak akan memberatkan loading pada blog teman dan juga Popup ini responsive juga kalau dibuka dihape teman dan juga terdapat tombol close dalam pop up tersebut, kalau teman minat eksklusif saja ke caranya ya sob.
Cara Memasang PopUp Selamat Tahun gres di Blogger
Pertama teman masuk terlebih dahulu ke Blogger > Tema > Edit HTML kemudian copy isyarat CSS dibawah ini dan pastekan sempurna diatas isyarat </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 isyarat CSS diatas saatnya memasang isyarat html, copy isyarat dibawah ini dan pastekan sempurna diatas isyarat </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 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 yaitu menambahkan isyarat JavaScript, copy isyarat dibawah ini dan pastekan sempurna diatas isyarat </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! kalau blog teman belum terpasang script Fontawesome silahkan teman 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! kalau tombol close tidak berfungsi tambahkan isyarat dibawah ini sempurna diatas isyarat </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 sanggup aku sampaikan tentang Cara Memasang PopUp Selamat Tahun gres di Blogger Terima Kasih yang sudah berkunjung biar bermanfaat bagi kalian semua.
Sumber https://www.triksimple.com/