Senin, 14 Januari 2013

Cara Membuat Spinning Image

Pada kesempatan kali ini saya mau berbagi sedikit tutorial blog, yaitu Cara Membuat Spinning Image. Tutorial ini saya dapat dari blog tetangga. Ok to the point aja ƪ(‾.‾“)┐‎


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


/* MMSharingan Berputar */
.MMSharingan1 { -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:MMspin 1s infinite linear; -webkit-animation:MMspin 1s infinite linear;animation:MMpin 1s infinite linear}
.MMSharingan {margin-top:0px; margin-left:450px;position:absolute;z-index:999;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrpwbCblcho6Xep2sIMqcfSG7-1PvL95x_ixv4DkrfoFYAbla4Ux2NZJ7PqXPwdleMQRc1liNnvs1-pEMg_Y6ODnYWu66_AEAvEbKX0UIJhz3nqQX2idjD5l8E7YxgdPJR4SaHXgcSEfM/s1600/Sharingan+5.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:MMspin 1s infinite linear; -webkit-animation:MMspin 1s infinite linear;animation:MMspin 1s infinite linear}
@-moz-keyframes MMspin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }
@-webkit-keyframes MMspin {0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(-360deg);} }
@keyframes MMspin {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/AVvXsEi35lr88ry-rjSQ5W4XLjR3lRDHQZ0qmdIzq3ojo6WyVrKfE0JKJ7PFg0V38icxdOZkwSBZFlyz88_iZ3WY94gtymIIX2TRi7CU3i33LO_eQyp7V45FJVwdYQQJw63SrhH2ca6GnwMhA2BL/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='MMSharingan1'><div class='MMSharingan'/></div>

Kalau sudah semuanya silahkan di "Save Template" Atau di Pratinjau 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. Mangenkyou Sharingan Itachi












3. Mangenkyou Sharingan Shisui












4. Mangenkyou Sharingan Hatake Kakashi












5. Mangenkyou Sharingan Izuna












6. Mangenkyou Sharingan Sasuke












7. Mangenkyou Sharingan Madara












Source : Berbagai Sumber.

Artikel Terkait

Cara Membuat Spinning Image
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

6 komentar

1/14/2013 7:16 PM delete

Nice Info sob ._.)b
Blog Walking
http://frozzanime.blogspot.com/

Reply
avatar
Anonim
1/15/2013 9:35 AM delete

izin coba buat iseng".. :D

come back yaa..

http://zhalltrozans.blogspot.com/2012/12/arti-dari-kata-lol.html

Reply
avatar

--=Rules=--

[-] Berkomentarlah dengan kata-kata yang sopan
[-] Dilarang SPAM
[-] Jangan OOT alias Out Of Topic