Cara Membuat Sepinning Image / Gambar Berputar Dengan CSS

by Rob

di Wednesday, January 16, 2013

Halo Sobat DRobani X ini saya akan share Cara Membuat Sepinning Image / Gambar Berputar Dengan CSS Ya ok langsung aja ya sobat DRobani XD

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

/* DRobaniSharingan Berputar */
.DRobaniSharingan1 { -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:DRobanispin 1s infinite linear; -webkit-animation:DRobanispin 1s infinite linear;animation:DRobanispin 1s infinite linear}
.DRobaniSharingan {margin-top:-20px; margin-left:400px;position:absolute;z-index:999;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2xawvvQQAnB8H_soLCnOWG0RXPriM77sEGgkeCuyK66o_dnVw1IVonaQnMOhllgTNl72OIMaVSkDzOfVcAE_03qpVxiNILATjYcRQ-qucsyAoF0SRg8Ap7W76FvtZh0q7QzzIWhzGxcJp/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:DRobanispin 1s infinite linear; -webkit-animation:DRobanispin 1s infinite linear;animation:DRobanispin 1s infinite linear}
@-moz-keyframes DRobanispin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }
@-webkit-keyframes XCspin {0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(-360deg);} }
@keyframes DRobanispin {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/AVvXsEj2xawvvQQAnB8H_soLCnOWG0RXPriM77sEGgkeCuyK66o_dnVw1IVonaQnMOhllgTNl72OIMaVSkDzOfVcAE_03qpVxiNILATjYcRQ-qucsyAoF0SRg8Ap7W76FvtZh0q7QzzIWhzGxcJp/s185/supers.png yaitu code gambar sharingannya..
bisa diganti dengan code gambar sharingan yang lain :)

Kalau code diatas sudah dimasukin, selanjutnya cari code

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

Comments

2 comments:

UnknownDecember 09, 2013 8:03 PM
thanks gan ilmunya dah di share..
ReplyDelete
Replies

Add comment

Selamat Datang Di DRobani Blog,Terima kasih sudah berkunjung.
Sebelum Berkomentar Silahkan Baca Peraturan nya.
1. Dilarang Flood
2. Dilarang SPAM
3. Dilarang Live Link
4. Dilarang Berkomentar Memakai Bahasa Kotor / Binatang
5. Dilarang Mencari Keributan Disini
6. Berkomentarlah Dengan Bahasa Yang Sopan

Terima Kasih

Sedikit Motivasi

Tak selalu orang terpintar yang mendapatkan yang terbaik; orang yang mempunyai kegigihan membaca, orang yang terus bertahan dan tak pernah menyerahlah yang mencapai sukses.

Jika anda gagal dalam melakukan sesuatu, hanya satu yang harus anda lakukan, "TRY AGAIN" - See more at: http://blogjomblongenes.blogspot.com/#sthash.UYtxUzZP.dpuf

Jika anda gagal dalam melakukan sesuatu, hanya satu yang harus anda lakukan, "TRY AGAIN"

Jika anda gagal dalam melakukan sesuatu, hanya satu yang harus anda lakukan, "TRY AGAIN" - See more at: http://blogjomblongenes.blogspot.com/#sthash.UYtxUzZP.dpuf