Cara Membuat Gambar Header Berputar Saat Disentuh Cursor

      
Cara Membuat Gambar Header Berputar Saat Disentuh Cursor - Bagi sebagian atau keseluruhan blogger, template blog yang cantik tentu menjadi kepusan tersendiri, entah untuk menggaet visitor atau hanya sekedar mempercantik blog. Banyak sekali tutorial blog khusunya blogspot yang berterbangan di internet seperti halnya Memasang Like Box Facebook pada Blog, Tombol Share Melayang, memasang Google Custom Search Engine, dan lain-lain. Namun pada kali ini saya akan membahas tentang cara membuat header berputar saat disentuh mouse.

Cara ini cukup simple, karena tutorial yang saya berikan tidak terlalu susah. Tahapan membuat header berputar saat disentuh cursor (Mouse) juga bisa dilakukan oleh seorang yang baru terjun ke dunia Blogging. Sebagai contohnya silahkan arahkan cursor mouse anda menuju ke header atau seperti gambar dibawah ini:

Sebelumnya, anda harus menyiapkan sebuah gambar / logo untuk dipasang pada header blog anda. Jika header blog anda sudah terpasang logo, tinggalkan saja langkah ini untuk membuat header berputar saat disentuh cursor.

Pertama, buka edit template. Caranya: Login ke blogger.com kemudian pilih Template >> Edit Template, beri tanda centang pada "Expand Template Widget". Demi keamanan template anda jika terjadi galat, silahkan back up template terlebih dahulu. Cari kode ]]></b:skin> dan letakkan kode berikut ini tepat diatas kode tersebut.

#header a img:hover { -moz-transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(-360deg) 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; }

Sebelum disave, sebaiknya pratinjau terlebih dahulu apakah terjadi masalah atau tidak, jika template tidak mengalami masalah, klik simpan. Demikian tutorial membuat gambar header bergerak saat disentuh cursor.