Cara Memasang Pop Up Ucapan Selamat Berpuasa di Blogger
Cara Memasang Popup Selamat Menunaikan ibadah puasa Seperti Arlina - Awal ingin membuat ini adalah pada saat mengunjungi situs Mbak arlina Admin melihat sebuah popup selamat menunaikan ibadah puasa, tanpa berpikir lama admin mencoba untuk melihat kodenya dan agar semua muslim dan para blogger juga bisa mencicipinya.
Tindakan ini bukanlah tindakan yang tidak diperbolehkan, hanya saja mengambil dan ingin membagikan, mbak arlina juga tidak keberatan loh sobat.
Nahh jika sobat penasaran, silahkan simak berikut ini dan lihat demonya dulu ya+_=
Cara Memasang Pop Up Ucapan Selamat Berpuasa di Blogger
1. Login ke Blogger
2. Masuk ke Tata Letak > Edit HTML
3. Masukkan Font Awesome dibawah ini, Tepat diatas kode </body>
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
4. Masukkan CSS dibawah ini, Tepat diatas kode </head>
<style type="text/css">
/* Pop Up Animation By Chaya Education */
@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 Chaya Education */
#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 .ramadan18{font-size:2.2rem}.gunung18,.hari18,.bintang18,.malam18 .moon{display:none}}
</style>
5. Kemudian Tambahkan kode HTML ini Dibawah kode <body atau <body> atau
<div id='popuppuasa18'>
<a class='close-popup' href='#' title='close'><i class='fa fa-times'></i></a>
<div class='puasa18'>
<p>Selamat Menunaikan Ibadah Puasa</p>
<p><span class='ramadhan18'>ramadhan 1439 H</span></p>
</div>
<div class='gunung18'></div>
<div class='gunung18 behind'></div>
<div class='hari18'>
<div class='awan18'></div>
<div class='awan18 invert'></div>
<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>
6. Lalu, Masukkan Javascript dibawah ini, Tepat diatas kode </body>
<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>Widget ini juga tidak memberatkan blog karena menggunaka Pure CSS sehingga aman aman saja jika dipasang di blog sobat
Dah Seleasi Sobat, Semoga artikelnya bisa bermanfaat ya sobat, jangan lupa juga untuk beribadah dibulan puasa ini dan tingkatkan amal sobat kepada allah swt.
Komentar
Posting Komentar