Cara Membuat Sharingan Berputar/ Bergerak Di Blog Dengan CSS

Posted by : Fitrah pujangga Sabtu, 09 November 2013

Tag :// Tips and Trick, Tag :// Trik blogger

Cara Membuat Sharingan Berputar Di Blog. Sharingan, sebuah mata yang merupakan salah satu dari 3 Doujutsu terkuat di Anime Naruto. Mata ini dimiliki oleh anggota clan Uchiha. Namun ada juga shinobi Non Uchiha yang memilikinya, seperti Kakashi, Danzo, dan Menma. Bagaimana jika Sharingan tersebut menghiasi blog kalian? Wow, pasti keren. Contohnya seperti blog saya ini. Bagaimana cara membuatnya? Berikut ini adalah Cara Membuat Sharingan Berputar Di Blog.

Pertama, masuk ke Dasboard blog kalian
Klik pilihan Template
Pilih Edit HTML
Jangan lupa centang "Expand Template Widget
Kemudian kalian masukan kode berikut di bawah kode ]]>

.SharinganP{margin-top:0px; margin-left:0px; width:98px; height:98px; float:left;} .Sh1{background-color:rgba(0,0,0,0);opacity:.9; border-radius:190px; width:75px; height:75px; margin:0 auto;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy7rMdo8ZrO-fjXSEi6bBM5U5cuHIc66dG4SlmScW6pKbt5-KThfbI6dUIMe6qgml5PsgdXFixS_N_1DBFYsvFyqTLYHLgEBIrWHcLWPAPzDIU3E56sIQz4IVEr_eGchrCFFE3r_HyvAnf/s1600/Untitled-1+copy.png)center; position:relative; top:-70px; -moz-animation:spin2Pulse 2s infinite linear; -webkit-animation:spin2Pulse 2s infinite linear} @-moz-keyframes spin2Pulse{0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} } @-webkit-keyframes spin2Pulse{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(-360deg);} }

Keterangan:

Kode berwarna BIRU adalah untuk mengatur letak Sharingan Berputar, silakan kalian atur sendiri
Kode berwarna HIJAU adalah untuk mengatur ukuran Sharingan Berputar, silakan kalian atur sendiri, Namun saya hanya akan memberikan gambar Sharingan berukuran 75px x 75px. Untuk ukuran lainnya silakan kalian cari gambar sendiri
Kode berwarna ORANGE adalah gambar dari Sharingan yang akan dibuat berputar, silakan kalian ganti dengan gambar Sharingan yang kalian inginkan
Kode berwarna UNGU adalah untuk mengatur arah putaran Sharingan Berputar, 360deg untuk searah jarum jam, -360deg untuk berlawanan arah jarum jam

Masih belum selesai. Masih di Edit HTML

Masukan kode berikut di bawah kode

( Sebenarnya bisa kalian letakkan dimana saja, asalkan tidak Error )

Terakhir, Save Template kalian dan check

Berikut ini adalah link gambar Sharingan ukuran 75px x 75px yang dapat kalian gunakan

1. Sharingan 1 Tomoe

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUnCvH9HvrkFUjfvte2Vo9c8eHvNWEcHea_pH9dmyFSL6GhZKbi5Vf-RIKV8AQrfmBr__Nyu8G8X9fOuja5Vmjke5-AsrV4x7UwhpzoeyAl_wodbY7udtI_W171NvYjbFEpxBadgIrXRHr/s1600/anonymous-bunshin.blogspot.com.1-Yondarkness.png

2. Sharingan 2 Tomoe

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB2zmL3TjPLpmT0gX7-AtTYrWSFWr3knPtF3HqgCpf1vBmmaq6dCDI-lacj8AyH4nTiMEo8UuWr9tuJX-tNUh_8ArFB9SC5Ca-ol__7TXXKQPLKosxSubxO_cGX3LnUDGuCmhPFF4FIpo/s1600/anonymous-bunshin.blogspot.com.2-Yondarkness.png

3. Sharingan 3 Tomoe

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDZuGWdihQ2vgEe2oLQB_zwSblvUog0zcfc8LcC1lNySlfRoRFmiiSRphZjoWw1TWqNv2V6lRvxlZ8-hGlPayOu03EZB5P93VQXFyB9krceJMGf6_TdkVxw9A13zKVNifZx-NoK3DIOQg/s1600/anonymous-bunshin.blogspot.com.3-Yondarkness.png

4. Proto Mangekyou Sharingan

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrpsYIBxM466rHRfj61GwYTDqoMyCPGLgkQxLikXnG_ymqtTBUS9IPOkcJgJVipbXa2i2wG-LwXIhniH3iuCwbG_g9Ur7NYHkNlSLAM-cgMjF6TdnlayBmvFZ3BvnzHgJfZNFeDd5H_qg/s1600/anonymous-bunshin.blogspot.com.proto-Yondarkness.png

5. Kakashi Mangekyou Sharingan

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfjgQxUItvy8CNyPaotx29o6ox-TATmjDinbABLUFopPtS1q3f7KcpG-A4WQ_8AUNdJZy0Bwt_mh3-EMlQFOSksxSRKY8CvcrUx9GEB4M8Msv_0ew7dT4GvBoarJpaH6dHhZxdWsCMFs/s1600/anonymous-bunshin.blogspot.com.kakashi-Yondarkness.png

6. Itachi Mangekyou Sharingan

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGazz3Y3NVLsNG9XWnket62_yo8RIz1cbhRaXZZEWGgSjRbbW834-OSChGrCDCycr44Jf57M6BcTjaXNmiVYGkJJr_1MEx1AQK_hARGVVuj6iI_FEgXYI1Q28cqInFaPLZpsu0vkVZDLk/s1600/anonymous-bunshin.blogspot.com.itachi-Yondarkness.png

7. Izuna Mangekyou Sharingan

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4iJRttkVJFkD8fnLa6J4IhhYAcQ4EDLFyQMCFibNuFoN28w1Lk03dtIH01NQdd-q_6MyS0aoybCgBgHXFsJ3cT-B2IOA5G1DHaDNnMRwdtkQdf2HiPFWQMUOjGyu3i2tvuQ0eBMGxWyM/s1600/anonymous-bunshin.blogspot.com.izuna-Yondarkness.png

8. Shisui Mangekyou Sharingan

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiibyFYV39qU4uxoCVzbNrc9GWj593fD0q2eh6KwQ-nbABguRY5YAFHUgeepb6G4sV8oo1vJPVwVgTrEBp-VbJoBo5a-SU6zff60LoFBdlfMfoFfd4Xe3H0yhpf9Ds78LCVwecsl1fUZ4/s1600/anonymous-bunshin.blogspot.com.shisui-Yondarkness.png

9. Madara Mangekyou Sharingan

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI5axoILZ0Nme3P-OLu4q-UURFoaWDUf78mncYHtCx_k7SenMD-tE8OfbIvSmArwi9qUqz0hHlNjQJjWp3f-GYHkyX75Dt4X_TdzETlvsXKPu3dbQ3EXKAJEHpoZBHAUlzFT9h65PTOmw/s1600/anonymous-bunshin.blogspot.com.madara-Yondarkness.png

10. Sasuke Mangekyou Sharingan

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkb61AChPvpiFCRsdNW0QEfwtYDsWdHUAjAd6Mx4pAkTTy0TqtskQ2PQKnZQSh-_SADeKs2ZEgTcULI2AN-NPQWGFa8sQgtEOpsVg3q6AhaybIy-R8X-3BM6IzxROYgqgg28uCUdtP1cA/s1600/anonymous-bunshin.blogspot.com.Sasuke-Yondarkness.png

11. Sasuke Eternal Mangekyou Sharingan

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie5NaoBJlqDgJxWCx7-1XyDp5D8YCjGafhLMyKTBNSdKi8KCR6a7X8ZDem-Y9tOWXaq-ab5aLgp0eqi70kf3_yG_OBqQW1_6gonvfh7fqUxHsa8uIH9BoD0tsrRa7uw6OzD0txvMpR0bo/s1600/anonymous-bunshin.blogspot.com.Sasuke2-Yondarkness.png

12. Madara Eternal Mangekyou Sharingan

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJMG0NE59u6Kp9-MzEPb3fQB7ydK3hf3AjjlSWPbon4ZQYWbeKqztWzmf4QgjIon1pObx8EnsPxYFL2D49R8yr6LNT7aPEA4gV0QMASIIkvy-aXfWakbUJStWKqyeBQnjRiF5NUEUGZCw/s1600/anonymous-bunshin.blogspot.com.madara2-Yondarkness.png

13. Sharinnegan ( Mata Juubi )

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR3j4dUr0DAUlqbpr7wnht3zBbx-hjL-6ewviBRJXxF73ka6WtQ60be0yoiUCECQOpG3_gZFKNjcHI1Z4ESdTiO2XeHADKoM7d8h0_Saw-B6ZVXseLa4Uw0vjhE7bBOA20lAPq_F7vZ4U/s1600/anonymous-bunshin.blogspot.com.Juubi-Yondarkness.png

Nah, itu gambar Sharinga ukuran 75px x 75px yang bisa kalian pakai. Sekian artikel saya tentang Cara Membuat Sharingan Berputar Di Blog. Semoga bermanfaat dan jika ada yang kurang jelas, silakan tanya lewat komentar.