Cara Membuat Ucapan Selamat Bulan Ramadhan di Blog dengan CSS Animation

Dalam kesempatan ini, akan saya infokan sebuah totorial blogger khususnya masalah desain blog. Desain blog di sini lebih pada sebuah penerapan CSS pada sebuah template, yang berupa ucapan menymabut dan melaksanakan bulan Suci Ramadhan bagi umat beragama yang menjalankannya.

Panduan desain blog kali ini saya peroleh dari Kang Ismet yang dengan rapih membuat animasi ini. Tidak berlama-lama, mari kita simak sejenak dalam membuat ucapan bulan Ramadhan di blog dengan CSS animation.

Baca juga: 10 WordPress Theme Terbaik dan Terpopuler Free Download 2016

Cara Membuat Ucapan Bulan Ramadhan di Blog dengan CSS Animation

<style>
/*<![CDATA[*/
.tada{-webkit-animation:tada 1s linear 1s infinite normal;animation:tada 1s linear 1sinfinite normal}
@-webkit-keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9)rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1)rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1)rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
@keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9)rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1)rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1)rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px)rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px)rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px)rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px)rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px)rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px)scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
@keyframes flip{0%{-webkit-transform:perspective(400px)rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px)rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px)rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px)rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px)rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px)scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
.idul_layout{text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(9,150,13,.8);z-index:99999;display:none}
.idul_message{width:50%;background:#fff;font-size:16px;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#333;position:absolute;top:10%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.profile-idul,.profile-idul2{padding:4px}
.idul_message:before{content:””;height:0;width:0;position:absolute;bottom:-40px;left:20px;border:20px solid transparent;border-color:#fff transparent transparent}
.profile-idul{background:#0c9f17;border:1px solid transparent;border-radius:100%;position:fixed;bottom:10px;left:10px;cursor:pointer;width:50px;height:50px;z-index:9999}
.profile-idul2{background:#fff;border:1px solid transparent;border-radius:100%;position:absolute;bottom:-240px;left:-120px;width:200px;height:200px}
.close_idul{font-size:40px;color:#fff;position:absolute;top:-30px;right:-30px;cursor:pointer}
@media (max-width:800px){.idul_message{width:90%!important;margin-left:-45%!important;}
.profile-idul2{left:50%;margin-left:-105px;}
.idul_message:before{left:50%;margin-left:-20px;}
.close_idul{color:#555;top:-16px;right:0;}
}
/*]]>*/
</style>

4. Letakkan pula kode di bawah ini tepat di atas kode </body>

<img class=’profile-idul tada’ onclick=’openIdulfitri()’ expr:alt=’data:post.author’height=’50’ src=’https://lh3.googleusercontent.com/-lRU1z0nWgnI/VotDnpiT3yI/AAAAAAAACoQ/CSyaahopiHQQauzSWC33P6OkZQ4WqxnRwCCo/s128/logo%2Bsl.png‘ width=’50’ title=”Click Me!”/>
<div class=”idul_layout animated flip” id=”id_fitri”>
<div class=”idul_message”>
<h2>”Marhaban Ya Ramadhan”</h2>
<p>Bulan suci kembali tiba, saat tepat menyucikan diri dari segala dosa, mohon dimaafkan dari segala kesalahan.
<br/><br/> Saya, <b>NAMA ANDA</b> selaku admin blog <b>TITLE BLOG</b>mengucapkan:
<br/>
<b>”Selamat menjalankan ibadah puasa bagi umat yang menjalankannya”</b>.</p>
<img class=’profile-idul2′ expr:alt=’data:post.author’ height=’200′ src=‘https://lh3.googleusercontent.com/-lRU1z0nWgnI/VotDnpiT3yI/AAAAAAAACoQ/CSyaahopiHQQauzSWC33P6OkZQ4WqxnRwCCo/s128/logo%2Bsl.png‘ width=’200’ />
<div class=”close_idul” onclick=’closeIdulfitri()’>&amp;times</div>
</div>
</div>
<script>
//<![CDATA[
function openIdulfitri(){vare=document.getElementById(“id_fitri”);”block”!==e.style.display?e.style.display=”block”:e.style.display=”none”};
function closeIdulfitri(){vare=document.getElementById(“id_fitri”);”none”!==e.style.display?e.style.display=”none”:e.style.display=”block”};
//]]>
</script>

5. Silakan ganti url foto di atas dengan alamat url foto Anda. Bisa juga dengan menggunakan url foto profil Google + Anda.
6. Save template

Mudah kan? Demikian sekilas informasi mengenai Cara Membuat Ucapan Selamat Bulan Ramadhan di Blog dengan CSS Animation. Semoga bermanfaat dan menambah kedekatan Anda dengan rekan blogger di manapun berada dengan ucapan tersebut.