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

Cara Membuat Ucapan Selamat Bulan Ramadhan di Blog dengan CSS Animation

Caranya cukup mudah kok, hanya perlu beberapa langkah selesai:

1. Masuk akun blogger
2. Pilih template > mode html
3. Silakan letakkan kode di bawah ini tepat di atas kode </head>
<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.

5 Responses to "Cara Membuat Ucapan Selamat Bulan Ramadhan di Blog dengan CSS Animation"

  1. kok agak pusing gan,,, da yg langsung jd g...hehehehe

    ReplyDelete
    Replies
    1. ada mas...tapi satu paket dengan template SL Style Magz

      Delete
  2. Jika hati seputih awan jangan biarkan ia mendung,jika hati seindah bulan hiasi dengan senyuman……..
    marhaban ya ramadhan…………….
    selamat menunaikan ibadah puasa mohon maaf lahir dan bathin

    ReplyDelete
  3. Jika hati seputih awan jangan biarkan ia mendung,jika hati seindah bulan hiasi dengan senyuman……..
    marhaban ya ramadhan…………….
    selamat menunaikan ibadah puasa mohon maaf lahir dan bathin

    ReplyDelete
    Replies
    1. sama-sama mas..mohon maaf lahir batin juga

      Delete

Silakan masukkan komentar Sobat di sini!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Hosting Unlimited Indonesia