
Widget pop-up biasanya dipakai untuk memperlihatkan sebuah info menyerupai promo maupun undangan kepada pengunjung situs Anda untuk melaksanakan subscribe atau berlangganan melalui email.
Kali ini aku akan menciptakan sebuah Popup atau Pop-up ucapan selamat berpuasa ramadhan di blogger, widget ini tentu sangat menarik sekali dengan desain dan animasi yang cukup keren.
Widget popup ini dapat mewakili kita untuk mengucapkan selamat menunaikan ibadah puasa ramadhan kepada seluruh pengunjung website atau blog Anda.
Pop-up ucapan ini dibentuk dengan memakai isyarat css dan html sehingga tidak akan mensugesti loading blog Anda.
Selain itu dengan sedikit pemberian isyarat javascript untuk memperlihatkan fungsi pada tombol close, supaya popup ini dapat di tutup jikalau pengunjung ingin menghilangkannya.
Bagi Anda yang tertarik untuk mencoba memasangnya di blog silahkan ikuti langkah-langkahnya di bawah ini.
Cara Membuat Widget Popup Ucapan Ramadhan di Blogger
1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Tambahkan isyarat css ini di atas isyarat
</head>
<style type="text/css"> /* Pop Up Animation Ramadhan */ @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>
4. Kemudian tambahkan isyarat html ini di bawah isyarat
<body>
<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>
5. Lalu tambahkan isyarat javascript ini di atas isyarat
</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>
6. Kemudian klik Simpan tema dan lihat hasilnya.
Catatan:
Jika template blog Anda belum memakai Font Awesome silahkan pasang isyarat ini di atas isyarat
</body>
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Jika tombol close tidak berfungsi silahkan tambahkan isyarat jQuery ini di atas isyarat
</head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'></script>
Itulah a
<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>
5. Lalu tambahkan isyarat javascript ini di atas isyarat
</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>
6. Kemudian klik Simpan tema dan lihat hasilnya.
Catatan:
Jika template blog Anda belum memakai Font Awesome silahkan pasang isyarat ini di atas isyarat
</body>
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Jika tombol close tidak berfungsi silahkan tambahkan isyarat jQuery ini di atas isyarat
</head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'></script>
Itulah artikel mengenai cara memasang pop-up ucapan selamat berpuasa ramadhan di blogger, agar bermanfaat.
Sumber https://www.caramanual.com/
Related Posts
- Cara Mengatasi Error 0X000006d9 Ketika Sharing Printer Di Windows 7 Sharing printer dalam sebuah jaringan LAN sangat memudahkan semua orang untuk menccetak (print) dokumen tanpa harus copy paste ke flashd ...
- Cara Penulisan Abjad Besar Atau Kecil Pada Judul Artikel Yang Benar Dalam penulisan sebuah judul kita harus memperhatikan penulisan aksara besar (kapital) dan aksara kecil, jangan hingga Anda salah menentukan apala ...
- Cara Menciptakan Widget Testimonial Di Blog Kali ini aku akan menciptakan sebuah widget testimonial sederhana dengan instruksi html dan css untuk dipasang pada blog atau website Anda. Widge ...
- Cara Mengatasi Error Code 0Xc0000005 Ketika Install Windows 7 Tips dan Trik Komputer - Terdapat beberapa Error code yang sering muncul ketika instalasi Windows 7. Error Code lebih banyak terjadi alasannya ...
- Membuat Syntax Highlighter Di Postingan Blogger - Sintaks Highlighter ialah fitur khusus dari proses mentransfer arahan bahasa pemrograman tertentu dengan tulisan, warna teks, posisi persis ibarat ...
- Cara Menciptakan Tombol Dengan Dampak Animasi Border Button atau yang paling kita kenal sebagai Tombol merupakan bab penting yang ada dalam sebuah website. Di internet terdapat aneka macam website k ...