Cara Memasang Banner Pop Up » di Group facebook sangat ramai membahas hal ini, Bisa saya simpulkan kalau Pop Up Ucapan Selamat Berpuasa di Blog ini pertama kali di pasang di blog Arlina Design (Menurut Saya).
Sebagai pemilik blog yang mempunyai pembaca setia kita harus rispek dengan apa yang ketika ini sedang dijalani oleh umat muslim, Karena bulan ini bulan ampunan kita harus mengucapkan selamat berpuasa bagi umat muslim di blog dengan perantaran banner pop up menyerupai gambar dibawah ini. 
Buat teman-teman blogger yang ingin tahu bagaimana Cara Memasang Banner Pop Up Ucapan Selamat Berpuasa di Blog menyerupai yang ada di blog Arlina Design silahkan ikuti panduan dibawah ini.
Cara Memasang Banner Pop Up Ucapan Selamat Berpuasa di Blog
Oia disini saya hanya ingin membuatkan saja tanpa mengambil alih pembuat script ini. Karena saya mengakui jikalau script ini di buat oleh arlina design.
- Login ke akun blogger kamu.
- Masuk ke sajian Template pilih Edit HTML
- Cari arahan </body> Gunakan kombinasi tombol CTRL+F semoga gampang mencarinya.
- Letakan arahan Font Awesome dibawah ini sempurna diatas kode </body> Script<link href=‘//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css’ rel=‘stylesheet’ type=‘text/css’/>
- Kemudian letakan arahan dibawah ini sempurna diatas arahan </head> Script<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;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>
- Tambahkan lagi arahan dibawah ini sempurna di bawah arahan <body> Script<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>
- Terahir tambahkan arahan ini pas di atas arahan </body> Script<script type=“text/j4vascript”> $(window).bind(“load”,function(){$(“#popuppuasa18”).animate({top:“25%”},1e3),$(“a.close-popup”).click(function(){return $(this).parent().fadeOut(1e3),!1})}); </script>
- Selesai. Jangan Lupa Klik Save Template
Perlu kau ketahui, Kalau tutorial Cara Memasang Banner Pop Up Ucapan Selamat Berpuasa di Blog ini tidak akan menciptakan blog kau usang loadingnya, Karena disini memakai script Pure CSS sehingga kondusif untuk dipasang di blog.
Nah itulah panduan Cara Memasang Banner Pop Up Ucapan Selamat Berpuasa di Blog menyerupai dengan yang ada di blog arlina design.
Sumber aciknadzirah.blogspot.com