Cara Memasang Ucapan Marhaban Yaa Ramadhan Di Blog
Cara Memasang Ucapan Marhaban Yaa Ramadhan di Blog - Pada tutorial kali ini aku akan membagikan sebuah cara menciptakan ucapan selamat menunaikan ibadah puasa di blog atau ucapan marhaban yaa ramadhan dengan dampak animasi dengan tombol close menyerupai yang sudah di gunakan Arlina Design.
Untuk memasang ucapan selamat menunaikan ibadah puasa di blog ini, kalian hanya perlu memasang beberapa instruksi di dalam settingan edit html blog kalian. Dan tentu saja untuk instruksi htmlnya sudah aku sediakan pula. Dan untuk kalian yang ingin melihat menyerupai apa tampilan jelasnya dapat eksklusif kunjungi blog arlina design atau dapat juga klik tombol demo dibawah ini.
Demo
Nah untuk kalian yang tertarik ingin memasang Ucapan Marhaban Yaa Ramadhan ataupun ucapan Selamat Menunaikan ibadah puasa di blog kalian, silahkan ikuti tutorial berikut :
Cara Memasang Ucapan Marhaban Yaa Ramadhan di Blog
Silahkan Login ke Blogger > Template > Edit HTMLSilahkan tambakan css font awesome sebelum instruksi </head>, jikalau sebelumnya kalian sudah memasang css font awesome ini, silahkan lewati langkah ini.
<script type='text/javascript'> //<![CDATA[ function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); //]]> </script>Selanjutnya silahkan letakkan css berikut sempurna sebelum instruksi </style> atau ]]></b:skin
/* Pop Up Animation bulan mulia */ @keyframes flipInX{from{transform:perspective(400px) rotate3d(1,0,0,90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotate3d(1,0,0,-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{transform:perspective(400px) rotate3d(1,0,0,-5deg)}to{transform:perspective(400px)}}@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);opacity:0}50%{transform:translate(100%,0);opacity:1}100%{transform:translate(100%,0);opacity:0}}@keyframes sun_movement{0%{top:50px}100%{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 bulan mulia */ #ucapanramadhan2018{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:99;min-height:350px;padding:20px;overflow:hidden;border-radius:10px;animation:change_color 7s infinite linear,flipInX 1s linear}#ucapanramadhan2018 .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%}#ucapanramadhan2018 .puasa18 p{margin:20px auto;text-shadow:2px 2px 5px rgba(0,0,0,0.2)}#ucapanramadhan2018 .puasa18 .ramadan2018{font-size:3rem;font-weight:700}#ucapanramadhan2018 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}#ucapanramadhan2018 a.close-popup:hover{color:#fff}#ucapanramadhan2018 a.close-popup:active{opacity:0}#ucapanramadhan2018 a.close-popup i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}#ucapanramadhan2018 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;z-index:2}.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 7s 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 7s infinite linear}.malam18{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:run_malam18 7s 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 7s infinite linear} @media (max-width:800px){#ucapanramadhan2018{top:10px!important;left:10px;right:10px;min-height:250px}#ucapanramadhan2018 .puasa18{font-size:1.1rem;top:0}#ucapanramadhan2018 .puasa18 .ramadan2018{font-size:2.2rem}.gunung18,.hari18,.bintang18,.malam18 .moon{display:none}}Kemudian silahkan letakkan javascript berikut sebelum instruksi </body>
<script type='text/javascript'> //<![CDATA[ $(window).bind("load",function(){$("#ucapanramadhan2018").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})}); //]]> </script>Terakhir silahkan salin instruksi dibawah ini dan letakkan antara <body> dan </body>
<div id='ucapanramadhan2018'> <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='ramadan2018'>Ramadan 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>Silahkan simpan setelan template kalian.
Semoga tutorial Cara Memasang Ucapan Marhaban Yaa Ramadhan di Blog kali ini bermanfaat bagi kalian or lebih tepatnya kita semua. Salam luar biasa. Sumber https://www.pehawe.info/