Sunday 6 January 2013

Cara Membuat Animasi CSS Berputar Di Blog

1. Edit HTML di blog kalian masing masing.
2. Cari kode ini ]]><b:skin
3. Masukkan kode di bawah ini di atas kode tadi.


.WBputer{margin-top:-300px; margin-right:240px; width:98px; height:98px; float:right; font-size:14px; text-align:center; text-shadow:0 1px 1px black}
 .WB1{background-color:rgba(0,0,0,0); border:25px solid #fff; opacity:.9; border-left:5px solid rgba(0,0,0,0); border-right:5px solid rgba(0,0,0,0); border-radius:190px; width:200px; height:200px; margin:0 auto; position:relative; top:-70px; -moz-animation:spin2Pulse 1s infinite linear; -webkit-animation:spin2Pulse 1s infinite linear}
 @-moz-keyframes spin2Pulse{0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }
@-webkit-keyframes spin2Pulse{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(-360deg);} }

4. Cari kode menu kalian misal nya nama menu kalian <div id='navijohanes'>
(Jika kamu taruh di atas kode tadi, maka css animasi berputar nya akan muncul di atas menu kalian) jika kamu mau munculkan animasi berputar nya di tempat lain, bisa kamu taruh dimana saja, dan letak nya dimana) asalkan tidak error.

5. Masukkan kode HTML di bawah ini di atas kode tadi (terserah di mana aja, asalkan tidak error)

<div class='WBputer'>
<div class='WB1'/>
</div>
6. Simpan Template dan animasi css berputarnya sudah muncul di blog kalian.

Terima kasih sudah ingin membaca tutorial ini, semoga bermanfaat.