baner
- Home >
- Tutorial Blog >
- Cara Membuat Sharingan berputar dengan CSS . .
Posted by : andika
Selasa, 12 Februari 2013
Ok kali ini Admin mau mengajarkan Cara Membuat Sharingan berputar dengan CSS . .
caranya :
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>
/* COSharingan */
.COsharingan1 { -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:COspin 1s infinite linear; -webkit-animation:COspin 1s infinite linear;animation:COspin 1s infinite linear}
.COsharingan {margin-top:-60px; margin-left:800px;position:absolute;z-index:999;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVy3euzLAQzHZJWPDIzGKhYKfy4HkQFqth6PpK8As9QQ_AtIB2CHzZ_bAW50o2vakGmHPiddMD-rqIisW-kzjvrrrH9LGM9H5RGSCMZNboSwiB9vbHzrwBbrURX4-btApsTRYYdYazkNZc/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:COspin 1s infinite linear; -webkit-animation:COspin 1s infinite linear;animation:COspin 1s infinite linear}
@-moz-keyframes COspin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }
@-webkit-keyframes COspin {0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(-360deg);} }
@keyframes COspin {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='COsharingan1'><div class='COsharingan'/></div>
6.Save / Simpan Template
Catatan :
>>> Teks berwarna BIRU bisa kamu edit sendiri margin nya jika penempatan kurang tepat
>>> Teks berwarna HIJAU bisa kamu ganti dengan URL gambar sharingan . .
Tenang sharingannya udah saya siapkan , Berikut Sharingannya :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb4vFj8hizUg-dEpB-5lFD01i7ys9t5fWcn4TT3IcpuC_e_6bBeenTOq1ow0lxzsJvYjEDk9ygqjHKH7N9Y0HHYAF7cJKahcGEHSZf8LbUSF0d2N4PCSOUW8-ghQhzJVAQ0sDzQ_yHE7Q/s1600/sharingan6.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsN4VcnJvURnOj7D8TN1weA9Ad04URTA7hfQx7kwHz1XQE_90LwX84tOuPAy1tljrrNQZzIRPu9Yh7p6bdTClgLpWmCmLKia76WK4NRph9-o5ZepPMHilRdOrBdjpI_6ltxM7hmklZxqI/s1600/sharingan3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxQaW_G1t5PcyGiSIqxMAVyrYjB08-bYutLIheWzKmjX_sh8N5G9V8WpmcLHi4v3eLAA2FZQCoXGdM_YniDU68k1N1nrwuGsbcCEKToGD-Itdy3oRyAubJpLhY51aN_46cE3b3JJntFkg/s1600/sharingan8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnP2f31fuG7mp0UTQGHjbb6odOpyflbXMAieylT0J4-MQcXPxrwzGA92L0HQHpoOi70Fa89rgvBFwD5cN0R7PKNMOVzlg5ffuTHCRo3bSWo4e1VeJRLCpiGLZvyV9Pn25pnHPUfE6OWac/s1600/sharingan5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyhTVe3cB8X9fShuX3anSitvI0xO9OU1VhiUCD_U2sfdrOI_eXC9rVrdhlmmQNamkNrPgMXb6_A50N961FKKq56VUvU5lddhdKWTQh6GIBaSQpxFkS50bfENxFKPyyjQGFsWVwiFHKBOE/s1600/sharingan2.png