Cara Membuat Spinning Image / Gambar Berputar Dengan CSS3

Hay sobat XC-Blog ... ! selamat malem semuanya, gak nyangka ya libur sekolah itu sebentar, hahaha
tapi kalo ditanggal mah setahun :p , dari 2012 - 2013 :p ahahhaha kidding...
,, sebelumnya XC-Blog Post "Riwayat Klan Senju Di Naruto" gimana, sudah dibaca full ? kalau sudah ya bagus lah, kalau belum baca dulu donk hehehe
oke langsung aja, XC-Blog mau post "Cara Membuat Spinning Image / Gambar Berputar Dengan CSS3"
nah langsung aja ke pembahasannya, males kebanyakan omong :D ngetiknya pegel :p

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/AVvXsEhKwjxQaw7RRBqIedUSwzhIfqyKGeuAXlXoV_GpQ8fQXqdfoqNBF-FQdIO0ZboKJH2chR-STO4xLkPZlamT24xqpu4tc8BU0T1eZvmSWsKA3n5CWe5OO1K231xJsLgwp6keKtPx1FBARaaz/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/AVvXsEhKwjxQaw7RRBqIedUSwzhIfqyKGeuAXlXoV_GpQ8fQXqdfoqNBF-FQdIO0ZboKJH2chR-STO4xLkPZlamT24xqpu4tc8BU0T1eZvmSWsKA3n5CWe5OO1K231xJsLgwp6keKtPx1FBARaaz/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

nah gimana ? gambarnya bagus" ya hehehehe

oke sekian dari XC-Blog semoga artikel yang baru dibuat oleh XC-Blog ini bermanfaat untuk anda

dan jangan lupa berikan comment nya hehehe

terimakasih :)

Tweet

Postingan terkait:

Ditulis Dandi Saseno — Friday, 4 January 2013 — 23 Comments — tutorial blog