Popular Post

Posted by : NoNameUser 12 Thursday, April 18, 2013

Hay sobat  ... ! selamat malem semuanya, gak nyangka ya libur sekolah itu sebentar, hahaha
tapi kalo ditanggal mah setahun :p , dari 2012 - 2013 :p ahahhaha kidding...
oke langsung aja, saya mau post "Cara Membuat Spinning Image / Gambar Berputar Dengan CSS3"
nah langsung aja ke pembahasannya, males kebanyakan omong :D ngetiknya pegel :p
gambar animasi sharingan xc blog











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(http://lh4.googleusercontent.com/-1H0QD0Pto-M/UN6cEsf3xAI/AAAAAAAAAOo/CrvHCdmMmrM/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  http://lh4.googleusercontent.com/-1H0QD0Pto-M/UN6cEsf3xAI/AAAAAAAAAOo/CrvHCdmMmrM/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 :

sharingan biasa

2. Mangekyou Sharingan Itachi
sharingan itachi

3. Mangekyou Sharingan Uchiha Shisui
sharingan shisui

4. Mangekyou Sharingan Hatake Kakashi
sharingan kakashi

5. Mangekyou Sharingan Uchiha Izuna
sharingan izuna

6. Mangekyou Sharingan Uchiha Sasuke
sharingan sasuke

7. Eternal Mangekyou Sharingan Madara
sharingan madara

nah gimana ? gambarnya bagus" ya hehehehe
oke sekian dari SAYA semoga artikel yang baru dibuat oleh SAYA ini bermanfaat untuk anda
dan jangan lupa berikan comment nya hehehe
terimakasih :)

{ 1 Comments... read them below or add one }

  1. wah, mantap sob infonya..
    maju terus admin!

    Follow back blog saya ya sob..
    lavixtastar.blogspot.com

    ReplyDelete

Berkomentar Dengan Baik Dan Sopan Ya !! ^_^

- Copyright © Web Of The King - Date A Live - Powered by Blogger - Designed by Johanes Djogan -