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
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 XC-Blog semoga artikel yang baru dibuat oleh XC-Blog ini bermanfaat untuk anda
dan jangan lupa berikan comment nya hehehe
terimakasih :)

Postingan terkait:

24 Tanggapan untuk "Cara Membuat Spinning Image / Gambar Berputar Dengan CSS3"

  1. Nice artikel gan hehehe
    pake dulu ah :D

    ReplyDelete
  2. info bagus gan.. :D
    blog w gk cocok kl di ksih ginian,, hehee.. :D

    comment back..

    ReplyDelete
  3. @Z-T Blog sip hahaha... makannya ganti template donk :p hehehe
    terimakasih ya sob dah berkunjung

    ReplyDelete
  4. Nice Artikelnya sob !! :)

    Visit+Coment Back = ID-cyb3r.blogspot.com

    ReplyDelete
  5. gak bikin loading berat kan bro?ditunggu silaturrahminya di blog ane ya

    ReplyDelete
  6. Bagus juga ya ternyata ^^ wkwk
    Tapi, blog ane ngga cocok untuk widget ini.. hehhe
    Blog ane jadul gan

    ReplyDelete
  7. nice artikel sob visit back
    http://ridwan-newbi-technology.blogspot.com/

    ReplyDelete
  8. @Vipergoy : oke .. terimakasih sob sudah berkunjung...
    @ridwan : oke sip bro :)

    ReplyDelete
  9. wah imagenya sudah disediakan....
    ehh boleh kann yg ini: @-moz-keyframes XCspin ... XCspin nya kita ganti pake nama kita...?

    ReplyDelete
  10. Good Post
    Visit & Comment Back
    http://didil-cyber.blgospot.com

    ReplyDelete
  11. @ahmad rizal : trsrh...
    @khairil anwar : thx :)

    ReplyDelete
  12. Wow sharingan itukan mata ane gan :P, wah parah ya ..

    ReplyDelete
  13. keren blog nya
    http://www,alvincelebration.blogspot.com

    ReplyDelete
  14. gan..
    nanya nih :v
    itu.. code div id header - wreapper
    maksudnya taroh di di code
    div id header
    div id wreapper
    mohon jawabannya

    ReplyDelete
    Replies
    1. itu codenya kaka :)
      kalo ga ada div id='header-wrapper'>
      cari aja yg div id='header

      Delete
  15. cara mempercepat dan memperlambat putarannya gimana sob.

    ReplyDelete
    Replies
    1. atur ininya sob
      -moz-animation:spin2Pulse 1s infinite linear; -webkit-animation:spin2Pulse 1s infinite linear
      1s nya bisa diganti 2s ato berapa gitu ^_^

      Delete

Catatan :
- Dilarang Menggunakan Link Aktif / Live Link
- Dilarang Promosi Iklan
- Dilarang Nyepam
- Untuk Menyisipkan Kode, Gunakan tag <i rel='code'> Taruh Kode Disini </i>
- Untuk Menyisipkan Kode Panjang, Gunakan tag <i rel='pre'> Taruh kode panjang disini </i>
- Untuk Menyisipkan Catatan, Gunakan <b rel='quote> Taruh Catatan disini </b>
- Untuk Menyisipkan Gambar, Gunakan <i rel="'image> URL Gambar </i>
- Untuk Menyisipkan Youtube, Gunakan <i rel='youtube'> URL Youtube </i>

Sebelum menyisipkan kode silahkan gunakan Tools Konversi Kode.
Caranya tinggal klik tombol "Konversi Kode" yang berada di Form Komentar.