Cara Bikin Pop Up Ucapan Selamat hari Raya Idul Fitri Di Blog

Cara Bikin Kode Popup Di Blog Dengan Tema Selamat Hari Raya Idul Fitri
Popup Selamat Hari Raya
Bagaimana Cara Membuat Popup/Popunder Ucapan Selamat Hari Raya Di Blog?
Halo hay hay pengunjung setia Olzz Blogzz kali ini saya akan share Cara Bikin Pop Up Ucapan Selamat hari Raya Idul Fitri Di Blog. Seperti di blog saya ini yang sedang kalian buka.

Popup biasanya digunakan untuk memberikan sebuah informasi seperti promo maupun ajakan kepada pengunjung situs Anda untuk membeli suatu produk tertentu.

Nah kali ini saya akan membuat sebuah Popup atau Popunder ucapan Selamat Hari Raya Idul Fitri  di blog.

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.

Cara Membuat Popup Ucapan Selamat hari Raya Idul Fitri Di Blog

1. Pertama masuk ke Bloger
2. Buka Tema
3. Klik Edit HTML
4. Salin kode CSS di bawah ini dan pastekan tepat di atas kode </head> atau &lt;/head&gt;
<style type="text/css">
/* Pop Up Animation Ramadhan by KangDzgn.blogspot.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_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>

5. Jika sudah memasang kode CSS di atas salin kode di bawah ini dan pastekan tepat di atas kode </body> atau &lt;/body&gt;
<div id='popuppuasa18'>
<a class='close-popup' href='#' title='close'><i class='fa fa-times'></i></a>
<div class='puasa18'>
<h3>Nama Blog Kamu</h3>
<h4>Selamat Hari Raya Idul Fitri 1400 H</h4>
<h4>"Mengucapkan Mohon Maaf Lahir Dan Batin"</h4>
</div>
<div class='gunung18'></div>
<div class='gunung18 behind'></div>
<div class='hari18'>
<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>
<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>

6. Nah jika sudah jangan lupa klik simpan Tempelate

Jika blog anda belum terpasang Font Awesom silahkan 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'/>

Note ! Jika tombol close tidak berfungsi dengan baik anda bisa menambahkan kode di bawah tepat di atas kode </head> atau &lt;/head&gt;
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'></script>

Akhir kata
Ok cukup sekian yang bisa saya share kepada kalian mengenai Cara Bikin Pop Up Ucapan Selamat hari Raya Idul Fitri Di Blog. makasih sudah berkunjung, Semoga bermanfaat.

Sumber : kangdzgn.blogspot.com

0 Response to "Cara Bikin Pop Up Ucapan Selamat hari Raya Idul Fitri Di Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel