Cara Membuat Spinning Image atau Gambar Berputar Dengan CSS3

Kali ini saya akan menjelaskan bagaimana cara membuat spinning image atau gambar berputar dengan css3 di blog. Spinning image adalah efek berputar pada gambar baik yang terkena sorot dari kursor maupun tidak.

Untuk memasang spinning image di blog kalian, silakan ikuti langkah-langkah di bawah ini:
1. Login ke Blogger
2. Pergi ke Dashboard
3. Masuk ke menu Template, lalu pilih Edit HTML
4. Masukkan code di bawah ini tepat di atas code ]]>

/* WBSharingan Berputar */
.WBSharingan1 { -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:XCspin 1s infinite linear; -webkit-animation:XCspin 1s infinite linear;animation:XCspin 1s infinite linear}
.WBSharingan {margin-top:-20px; margin-left:400px;position:absolute;z-index:999;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhltytAUVdlBCF4DUx0bTT2Agruk5HFIEWkw3kZIKziVDefrD7KEnUD2hZMDj4N8xxVzHuMykJrkcmSggGFe2h-yqrkYw-WVRf_5jXGRb7sI1uIENc4fL-qVm5XV4e-6csW5Qjnu8UHwBrj/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:XCspin 1s infinite linear; -webkit-animation:XCspin 1s infinite linear;animation:XCspin 1s infinite linear}
@-moz-keyframes XCspin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }
@-webkit-keyframes XCspin {0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(-360deg);} }
@keyframes XCspin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }

Pengertian code di atas :
Code margin-top:-20px; margin-left:400px; (sesuaikan dengan marginyang diinginkan)
Code height: 200px; yaitu tinggi gambarnya (sesuaikan dengan tinggi yang diinginkan)
Code width: 185px; yaitu lebar gambarnya (sesuaikan dengan lebar yang diinginkan)
Code https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhltytAUVdlBCF4DUx0bTT2Agruk5HFIEWkw3kZIKziVDefrD7KEnUD2hZMDj4N8xxVzHuMykJrkcmSggGFe2h-yqrkYw-WVRf_5jXGRb7sI1uIENc4fL-qVm5XV4e-6csW5Qjnu8UHwBrj/s185/supers.png yaitu code gambar sharingannya.
bisa diganti dengan code gambar sharingan yang lain.

Kalau code diatas sudah dimasukin, selanjutnya cari code

Kalau sudah semuanya silakan Save Template kalian.
Sekian artikel dari saya kali ini, bila ada kesalahan silakan bertanya di komentar. Terima kasih sudah berkunjung, semoga bermanfaat dan sampai jumpa di artikel saya selanjutnya.