Jumat, 17 Mei 2013
Cara Membuat Lingkaran Berputar Di Blog Dengan CSS
Cara membuat lingkaran berputar di blog. Seperti tutorial yang saya share sebelumnya, yaitu Cara Membuat Sharingan Berputar Di Blog, sekarang saya akan mengshare Cara Membuat Lingkaran Berputar Di Blog.
Kalau contohnya sama seperti Sharingan di Header blog saya, perbedaanya
adalah kalau yang ini tidak menggunakan gambar, melainkan obyek
berbentuk lingkaran berborder. Mau tahu cara buatnya? Berikut adalah
caranya.
- Pertama, masuk ke Dasboard blog kalian
- Klik pilihan Template
- Pilih Edit HTML
- Jangan lupa centang "Expand Template Widget
- Kemudian kalian masukan kode berikut di bawah kode ]]></b:skin>
.putarx{margin-top:0px; margin-left:0px; width:98px; height:98px; float:left;} .putarx1{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);} }Keterangan:
- Kode berwarna BIRU adalah untuk mengatur letak Sharingan Berputar, silakan kalian atur sendiri
- Kode berwarna HIJAU adalah untuk mengatur ukuran Sharingan Berputar, silakan kalian atur sendiri, Namun saya hanya akan memberikan gambar Sharingan berukuran 75px x 75px. Untuk ukuran lainnya silakan kalian cari gambar sendiri
- Kode berwarna UNGU adalah untuk mengatur arah putaran Sharingan Berputar, 360deg untuk searah jarum jam, -360deg untuk berlawanan arah jarum jam
- Masukan kode berikut di bawah kode <header id='header-wrapper'> ( Sebenarnya bisa kalian letakkan dimana saja, asalkan tidak Error )
<div class='putarx'>
<div class='putarx1'/>
</div>
- Terakhir, Save Template kalian dan check
