Cara Membuat Spinning Image / Gambar Berputar Dengan CSS3

Nah Agan Agan Ingin Mempunyai Widget Keren dis Simpan Dengan Mata Akatsuki Berputar Di Header/Di Judul BLog Nah Agan Agan Yang mau Coba Bisa Coba Tapi Baca Dulu Ini Baru Coba Oke Nah Lang langkah Nya Ada Di Bawah Ini

Langkah" Nya
1. Login ke Blogger
2. Pergi ke Dashbor,
3. Pergi ke Template -> Edit HTML
4. Masukan Code Dibawah ini tepat diatas code ]]></b:skin>

/* XCSharingan Berputar */
.XCSharingan1 { -moz-animation:spin2Pulse 1s infinite linear; -webkit-animation:spin2Pulse 1s infinite linear;margin-top:-20px; margin-left:400px;position:absolute;z-index:999;height: 200px; line-height: 46px;border-radius:500px;border-left:10px solid black;border-right:10px solid black;width: 200px;; -moz-animation:XCspin 1s infinite linear; -webkit-animation:XCspin 1s infinite linear;animation:XCspin 1s infinite linear}
.XCSharingan {margin-top:-20px; margin-left:400px;position:absolute;z-index:999;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiuhj5ULnCVthjpK6yIydyo7EvN78RkGtAx1UX5lGSfsE50u9RByJGAE3YN3FfixyhH8P23H7MNR3xJz-HX6wW-YnsFslps6W2HA-zIZFAA8s1yLj4rYK2vFYWRCFvzbaHtGzTjEs20POj/s185/supers.png) no-repeat;height: 185px; line-height: 46px;border-left:20px solid black;border-radius:500px;border-right:20px solid black;width: 185px; -moz-animation:XCspin 1s infinite linear; -webkit-animation:XCspin 1s infinite linear;animation:XCspin 1s infinite linear}
@-moz-keyframes XCspin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }
@-webkit-keyframes XCspin {0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(-360deg);} }
@keyframes XCspin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }

Pengertian Code Diatas :
Code margin-top:-20px; margin-left:400px; itu sesuaikan dengan yang kamu mau Marginnya...
Code height: 200px; yaitu Tinggi gambarnya (sesuaikan dengan keinginan tingginya )
Code width: 185px; yaitu Lebar gambarnya (sesuaikan dengan keinginan lebarnya )
Code  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiuhj5ULnCVthjpK6yIydyo7EvN78RkGtAx1UX5lGSfsE50u9RByJGAE3YN3FfixyhH8P23H7MNR3xJz-HX6wW-YnsFslps6W2HA-zIZFAA8s1yLj4rYK2vFYWRCFvzbaHtGzTjEs20POj/s185/supers.png yaitu code gambar sharingannya..
bisa diganti dengan code gambar sharingan yang lain :)

Kalau code diatas sudah dimasukin, selanjutnya cari code  <div id='header-wrapper'> (untuk ditaro di header ) kalau sudah ketemu, masukan code dibawah ini, dibawah code <div id='header-wrapper'>

<div id='XCSharingan1'><div class='XCSharingan'/></div>

Kalau sudah semuanya silahkan di "Save Template" Atau di Partinjau terlebih dahulu, :D
kalau tidak bisa, coba ulang lagi cara"nya diatas ,sampai bisa :D...
nah ada tambahan nih, untuk code gambar sharingan nya...

1. Sharingan Biasa :

2. Mangekyou Sharingan Itachi

3. Mangekyou Sharingan Uchiha Shisui

4. Mangekyou Sharingan Hatake Kakashi

5. Mangekyou Sharingan Uchiha Izuna

6. Mangekyou Sharingan Uchiha Sasuke

7. Eternal Mangekyou Sharingan Madara

Cara Membuat Spinning Image / Gambar Berputar Dengan CSS3

Backlink Please

URL

Code For Forum

HTML Code <a href='https://rifalcommunity.blogspot.com/2013/01/cara-membuat-spinning-image-gambar.html' target='_blank'>Cara Membuat Spinning Image / Gambar Berputar Dengan CSS3</a>

Ditulis Oleh : UnknownXpress-Community

Any Text Here Xpress Community

Laporkan Link Rusak Kepada Saya

Artikel Terkait: