Cara Menciptakan Widget Kalimat Ucapan Selamat Berpuasa Pada Blogger

Cara menciptakan widget kalimat ucapan Selamat Berpuasa - Membuat widget atau lebih tepatnya yakni sebuah pop-up suplemen yang bisa kau buat dan terapkan untuk blogger. Pop-up atau widget ucapan selamat berpuasa ramadhan ini bisa kau lihat pada website Arlina Design, dimana beliau telah berhasil menciptakan dan juga telah menerapkan widget ini sehingga terlihat anggun dan juga menghargai akan yang berpuasa dan pada bulan puasa. Ini merupakan sebuah wujud toleransi antara umat beragama melalui sebuah karya yang cukup indah juga apik banget.

Widget kalimat ucapan Selamat Berpuasa -

Nah pada kali ini aku akan berusaha untuk membantu kau untuk menciptakan dan menerapkan pop-up atau widget kalimat ucapan selamat berpuasa khusus untuk blogger saja, lantaran jikalau kau meerapkan pada platform lain tentu cara dan penerapannya juga akan berbeda.

Namun kau juga bisa membaca artikel aku perihal Cara memasang dan menempatkan Iklan google adsense dipojok Artikel, nah pada artikel itu aku menceritakan dan menunjukkan cara penerapan supaya iklan sanggup muncul pada bab tengah artikel secara auto atau muncul otomatis.

Kembali lagi pada bagaimana cara pembuatan widget kalimat ucapan selamat berpuasa ramadahan,

Cara menciptakan widget kalimat ucapan Selamat Berpuasa

Dalam menerapkan ini kau memang tidak memerlukan kemampuan untuk bisa membaca script, namun jikalau kau mau memodifikasinya maka kau wajib untuk bisa membaca setiap script yang ada :

1. Silahkan masuk halaman Blogger > Tema
2. Setelah itu pilih edit HTML
3. Copy script diatas </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. Lalu tambahkan juga script dibawah <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>

Note :
Silahkan ganti goresan pena yang telah aku berikan block berwarna diatas dengan kata-kata yang kau inginkan.

5. Dan tambahkan javascript diatas </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. Silahkan simpan tema dan lihat hasilnya.

-->DEMO<-- div="">

Note :
Jika tombol X atau Close tidak berfungsi silahakan tambahkan JQuery diatas

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'></script>

Bagaimana apakah sudah berhasil, gampang sekali bukan cara untuk menciptakan widget ala-ala bulan ampunan kreasi dari Arlina Design yang cukup menciptakan aku terhera-herab dan merasa kagum akan creator template satu ini.

Baca juga : Cara menciptakan dan memasang Tombol Share pada Blog

Cukup demikian hal artikel yang cukup dari kami semoga hal ini sanggup bermanfaat untuk kau semua.