Tuesday, August 6, 2013

Cara Membuat Spin Sharingan With CSS



Rockstar Emergency - 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/AVvXsEjLwXkmY9xwVXykOVUV_M7aa30mAVm0dCGE9Aj5-QqddgmOHlcZIu0jj_TEjEaJpTFaPDoDxH-vCo95KgT306ypMXdCriAoCT3UPj5eC2x3iFRn5RI-awCW0mRGUvkLqNk5LBHUPH7Czh-j/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/AVvXsEjqwilyVzusgxicMRwoyCmiRcF1Hkv857lP8_lwlIpBOwExbHh12UJIwaI34imdSSpeLgdr86a55NArNxl5a2wtCDGKTbSX4iFjXgUugW3x0GaUc2BiAlC3igTwOHzAx3yLTZfjRP0lkfY/s1600/sharingan6.png


2.Pain Rinnegan

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnw6EtGrI0wXNH_D-QKFcElJerxm9_J8KVTfD4t00o1xzH7hRMsklhJsNZFQri4DbtkrpvxcgS-9DTFOzuqyL6tOBq_5-8hJgwxHE7jK8jEkpntlvSVhZf3IlLRxvnDkDxcAdC-65xgtc/s1600/rinnegan1.png


2.Mangekyou Sharingan Kakashi

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE0ItAifjxsOII5u82W8WiWpV3JoMxiIHosa4hhoW0qZf4xFYzShOQ_61k3mUn8F2NPxF8jp0ZbuDruCADHMQl7nVmVYS5e4EvIzHAYJDCDJFByPsA-lyGFqPz6SommLargiYOAZfQfMY/s1600/sharingan3.png



3.Mangekyou Sharingan Itachi


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyuN3bdibye3rZf8BuPcExqn09bafLpDAKw4UTG6kVyV7qcJI0y5Hm4w2T0R1oqjVIxzq1QTogc8R8Fg-x15U8K2yDUQDj5Zhp-qwnLa_ob4aHf8E6PIBdHpLw7Twd7_wbIpz2TJsGWXE/s1600/sharingan8.png


4.Mangekyou Sharingan Sasuke


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLP9Hsypy1QYN0KfjaPNorK-a_cM05uSLjq9OLs5WRaMxpmsnQaLXjQudg1ENRFTZgRCtwiwc6wj2o-M-Ss8MQijjKinJ4iNj-ndkJuCElK27a9bqHJULRrKfTpzViVwIPlbqqiLNOhME/s1600/sharingan2.png


5.Sharingan Triple Stange ( Sasuke )


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikTzUSZu5iTyJP4-JShA_AjyTqkjGuomMsyzH5ohxqCeo9Gw7LoRe2ybFLHvm8gWNy9WpnLoIRLnBJeynOh9CZCjeSBfDTue7Mjf1bLDuajd7_A7w9Zy1eoOyacPnPShUoYfxkcL5ap7c/s1600/sharingan7.png


6.Mangekyou Sharingan Uchiha Shusui


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoahLeby3HLTSEO5jtts2GPPtMC3kzlA6Jp4yq8n7dYy6CnqLCfZi9kt8ofcFYztlfV7yuq3rZlF-Yzbx56jib_LIXpjeRhVHzuh7AYPCLlrpRID9YEc-kk24lXE7MM6rRi5SSr2NiH80/s1600/sharingan4.png


7.Mangekyousharingan Uchiha Izuna


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDU7r2-N8kHheWosyhf5zg9Id8eURf0plepXX9XSEuJgR10WibtwEbEt6N7jqtKc5E0k2D49nQwfW_0B46s7_q8VA03IvODtUfxdKCmkX5kVrKu8rkAh0KJW2B3X7DhXpZ8S0eKtljYos/s1600/sharingan5.png


8.Byakugan Eyes


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijBgVxv1morcT3_v1IPIu9Ti1Yy6_uqvNvluDqxaEKp2IzuCh4GXxRhUF7I1_ePGrFB6ovM1CrscpzB2Dd0H0MvRnaYMTWwIfn3-O8J7Xi9crPfsdQdCrf7EXGvzxfPuk8Ih4aSa1-Mlo/s1600/byakugan.png


9.Kyuubi Eyes


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8DVqeSIJGFGaEEFccxIWE0tPxjcC5eN74LdC2fTTLbk0njgKl70exNpRalR5vN2xf5er6ls1iUVPAwtv0x0Lbys_HfWVwVdCXSHBSMI-xUQG44buAj-weazlNCFyR7tdUMzqI9NXhmWU/s1600/kyuubi.png


10.Senjutsu Eyes


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidDZiOwEFskUGlCUG0m-m9cU-jYVT4ZU2JKXhBB_gBK5moVNweZNb6pnA7BpEOvsSK2Y97RLwLN6cRyHdIdUBRgOUmh9ecjiFDZ_en-vcLvXflwDcGqYwUCTWmVgQf0Iev2cTmE1NdEeg/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 .

0 comments:

Post a Comment