Pehawe Official

Home
Blogger

Cara Memasang Ucapan Marhaban Yaa Ramadhan di Blog

Pada tutorial kali ini saya akan membagikan sebuah cara membuat ucapan selamat menunaikan ibadah puasa di blog atau ucapan marhaban yaa ramadhan dengan efek animasi dengan tombol close seperti yang sudah di gunakan Arlina Design.
Cara Memasang Ucapan Marhaban Yaa Ramadhan di Blog - Pada tutorial kali ini saya akan membagikan sebuah cara membuat ucapan selamat menunaikan ibadah puasa di blog atau ucapan marhaban yaa ramadhan dengan efek animasi dengan tombol close seperti yang sudah di gunakan Arlina Design.

Untuk memasang ucapan selamat menunaikan ibadah puasa di blog ini, kalian hanya perlu memasang beberapa kode di dalam settingan edit html blog kalian. Dan tentu saja untuk kode htmlnya sudah saya sediakan pula.  Dan untuk kalian yang ingin melihat seperti apa tampilan jelasnya bisa langsung kunjungi blog arlina design atau bisa 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 HTML

Silahkan tambakan css font awesome sebelum kode </head>, jika 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 tepat sebelum kode </style> atau ]]></b:skin

/* Pop Up Animation Ramadan */
@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 Ramadan */
#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 kode </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 kode 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.