Cara Membuat Gambar Header Menjadi Berputar

Cara Membuat Gambar Header Menjadi Berputar  | Pada kesempatan kali ini saya akan mencoba berbagi tips coding lagi pada agan-agan semuanya yang sering mengunjungi Coding Ngeblog ini, mungkin saat agan-agan lagi iseng-iseng surfing pernah menemukan blog ataupun website yang menggunakan efek Gambar Header menjadi Berputar.

Nah pada kesempatan kali ini akan saya berikan tutorialnya bagi agan-agan semuanya, namun satu hal yang harus agan-agan ingat, Code CSS yang akan saya berikan ini akan bekerja dengan maksimal jika header agan-agan menggunakan gambar, jika tidak maka Code CSS ini tidak akan bisa berjalan.

Nah berikut in adalah cara ataupun tutorialnya :
1. Login Blogger
2. Klik Template
3. Edit HTML
4. Ceklist/Centang Expand Template Widget
5. Cari Kode :  ]]></b:skin> (Gunakan Tombol Ctrl + F pada keyboard agar memudahkan agan-agan dalam mencari kode tersebut)
Coppy Code dibawah ini lalu kemudian  Paste Diatas Code ]]></b:skin>

#header a img:hover {
 -moz-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 -webkit-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 -o-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 -ms-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 -webkit-transition: all 600ms ease-in-out;
 -moz-transition: all 600ms ease-in-out;
 -ms-transition: all 600ms ease-in-out;-o-transition: all 600ms ease-in-out;
 transition: all 600ms ease-in-out;
}

6. Nah yang terakhir adalah langkkah yang paling mendebar-debarkan yaitu Klik Save Template agan-agan.hehehehe

Keterangan :

• Code Yang Berwarna Merah Adalah Besar Rotasi, agan-agan Bisa Mengeditnya  Sendiri 
• Code - (Minus) Menunjukkan Rotasi Berlawanan Terhadap Arah Jarum Jam, agan-agan Bisa Menghilangkan Code Itu (Minus) Kalau agan-agan Mau Gambarnya Berputar Searah Jarum Jam, Contoh (180deg)

Share 'Cara Membuat Gambar Header Menjadi Berputar' On ...

Anda baru saja membaca artikel yang berkategori CSS / Modifikasi Blog dengan judul Cara Membuat Gambar Header Menjadi Berputar. Anda bisa bookmark halaman ini dengan URL http://codingngeblog.blogspot.com/2013/03/cara-membuat-gambar-header-menjadi.html. Terima kasih!

Ditulis oleh: Unknown - Sunday, March 24, 2013