Cara Membuat Spin Sharingan With CSS
Minggu, 30 Desember 2012
0
komentar
Hay Vanseerss. .
Apa kabarnya nihh . . ? Baik" aja ya :)
Ok kali ini Admin mau mengajarkan Cara Membuat Spin Sharingan With CSS . .
waktu kemaren" kan udah pernah Cara Membuat CSS Lingkaran Berputar
sebenernya sama , namun yang 1 ini dengan sedikit variasi nya :)
Dengan variasi sharingan , ada macam" sharingan juga lhoo . .
Tertarik ? langsung aja berikut tutorialnya :
1.Buka Blogger
2.Klik Template > Edit HTML > centang Expand Template Widget
( Saya sarankan backup dulu template kamu )
3.Cari code ]]></b:skin> , ( Pake CTRL+F biar lebih cepet )
4.Copy code dibawah ini , dan pastekan tepat di atas code ]]></b:skin>
/* EXSharingan */
.EXsharingan1 { -moz-animation:spin2Pulse 1s infinite linear; -webkit-animation:spin2Pulse 1s infinite linear;margin-top:-60px; margin-left:800px;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:EXspin 1s infinite linear; -webkit-animation:EXspin 1s infinite linear;animation:EXspin 1s infinite linear}
.EXsharingan {margin-top:-60px; margin-left:800px;position:absolute;z-index:999;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju3dLcWPEnwQFKXztvZkIKMm71wmuhsYkDelrEM4dTeAtZwzfShmva0xgy7DcTKB9vLfPzUho1kaq8QFpjaHo0J3euePeyLKEq2kiN4hm6wFXoZwozhH7_1VemUlny4pjGzlXhEnR3CQ-W/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:EXspin 1s infinite linear; -webkit-animation:EXspin 1s infinite linear;animation:EXspin 1s infinite linear}
@-moz-keyframes EXspin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }
@-webkit-keyframes EXspin {0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(-360deg);} }
@keyframes EXspin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }
5.Cari code <div id='header-wrapper'> , lalu copy code di bawah ini dan pastekan tepat di atas
code <div id='header-wrapper'> :
( sebener nya bebas sih taro dimana . .asalkan tidak error aja , disini saya taro nya di atas kode <div id='header-wrapper'>)
<div id='EXsharingan1'><div class='EXsharingan'/></div>
6.Save / Simpan Template
Catatan :
-Teks berwarna kuning bisa kamu edit sendiri margin nya jika penempatan kurang tepat
-Teks berwarna biru bisa kamu ganti dengan URL gambar sharingan . .
Tenang sharingannya udah saya siapkan , Berikut Sharingannya :
1.Madara Eternal
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDxwPv_jGlrVsLinaSUbcWGNQRP2jP4LIN6-I6EICafMdsTHxnU4_HOIAXdmw2nQ1NJqYlYS4r0JNUPM2s_DnweheDiRL6oQPcch-fr6InA2CVMc3kpiWeyuEMrYoHVz66W1lDkAxB6lY/s1600/sharingan6.png
2.Pain Rinnegan
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXESdsJ7svspUGXB2S6rNcaXoSh2o0zwjZbvCLL5bNQCoXMnbkN8vRDH97DTw4xx46mnQJxAQ40KBRsViC8G8AqFIU8VRi0-gpAFM_Wxbud6XEBtbOab9LsEdS2z-VL7RX0O9f_EJyqFE/s1600/rinnegan1.png
2.Mangekyou Sharingan Kakashi
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIP5kyxjbAOmE7eq75tPpuL26bdPyF7t7gBOxvD4KrqRp-T1cYUPcvMyanCkjGtOE0attteoHbeXSSMiY6gh2vK3WbHBUQQ7MfkwJGJGnxbb4Q4qpQ7vaSEth6wpzWWHMYBXDORjQYBNU/s1600/sharingan3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkNFvScsMXAXeq1zJPhbtkf6-Yh7OjzBlMWZYeTEDKw3TVt-N8CwScoKuLaxP4nm_jxNPjp41mt5QH8BwUeOMkYDbJii4pSNIorEJVfvjWbNdstb-cMY9DGtA7skZbGOluC21zYMbyeJA/s1600/sharingan8.png
4.Mangekyou Sharingan Sasuke
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJsMD3Vhv6Ql5IrIi7fDlVlmBtwFOV160xM5lpQFIsggubqt2XVfQDmDvBLiDijEuevdJ971h4BuaqitHwVaxRoNAQCAJkhyphenhyphenwRtnX2-MnPvD2fn5PdXDgkKIdTekQD3oKo7u8CvNh2Jb8/s1600/sharingan2.png
5.Sharingan Triple Stange ( Sasuke )
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY1D2eIpjRFhoN-AL5r2eu2KegiahzyVvNiUehtHRC8NuAgLUE80wY1SH7O3SP2G6Mi91vh6XI_Kryqqb36a-l6Dm-PEoJK8r_zyKU1nW97yHpbY2pCdSCxwfvpcf1mn-hjOvPutzTwj0/s1600/sharingan7.png
6.Mangekyou Sharingan Uchiha Shusui
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5K-Lg6biTYGz9b7PmgC3TmbTvAIQZvrk1HucjCggV9-aPUsmjcMvvzoM1Jf8xI5RMvS92vvuCNxtO0KUQwvJBL8-pzJtwm4Ix6XSt8GVP_TPNsq8Auh_BKzvHSZCSWypvAecZVGXqsaY/s1600/sharingan4.png
7.Mangekyousharingan Uchiha Izuna
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTpMnmnZWxSXUedvY4EYMuXZny0hALZen7xQ3in5zbEoWXNzaKxSBnRx3Su9E688iqJLg7yLFspJPc0bQYi2EvHsYDJKjgdrngQVKGQa4e6doYe6TfSTVAwsHNmmLf2DAUciEFOwJQCCY/s1600/sharingan5.png
8.Byakugan Eyes
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc1Lf-NqL2DY6kY8O-kOVI7Uz6tWsVY1249t-9nFMzsaWPwv_149emhlzDQUCoxMs-seYnqyH4Lg-7Y2aQZTW-DIF80zDg0_WmQD8naXGaC9fF8i6TNbvcymMs1mCr-M425beWY5wskHo/s1600/byakugan.png
9.Kyuubi Eyes
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiAP4gaUPECTjaEcyz2IJSx5tlkRm0JNt4VUAvFU407EBqJ-jO40LzzYlDp3nALLX3KJ0u-Cp2fizbzYu5_QzVSnvOODs8k0biRBzmcjKQeg0W7Ttgb7jwoAsAOjZ-M_iatAsLvpn4EOE/s1600/kyuubi.png
10.Senjutsu Eyes
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHpNENWUJdbLhKbGtUKHK1wKLv0m6sOSKLEPl7hF8IyR9HEv_njPGW3BtbxK-o5gjeEwAIGn5Edyv5OnicuY2qVEfyky8uSFvu4Hrzs0wuRqWkxcJ-9Q-y52NdMh4CTpEO_DU1M47A-8U/s1600/senjutsu.png
Gimana ? keren kann xDD , Kalo mau sharingan yang lain , bisa cari sendiri yaa :P
Size nya 185 , Background transparent < harus , kalo ngga jelek nanti wkwk
sekian dulu yaa , semoga bermanfaat .
Sumber : http://Blog-amossiahaan.blogspot.com
Baca Selengkapnya ....