Cara Membuat Header Blog Bergerak Ketika Disentuh Kursor

Cara Membuat Header Blog Bergerak Ketika Disentuh Kursor - Maksud header bergerak disini adalah, ketika kursor menyentuh apapun pada bagian header, baik teks judul dan deskripsi blog, maupun gambar yang terdapat pada header, maka mereka akan bergerak dengan pola tertentu.

Contohnya seperti yang di Blog Mr Ivanchan

Sekarang coba dekatkan kursor mouse anda beberapa waktu pada Logo Header nya Mr Ivanchan. Setelah itu lihat apa yang terjadi:

Nah sekarang bagaimana cara membuatnya?

• Seperti biasa silahkan login dulu ke halaman dasbor Blogger anda. Setelah dasbor blog anda terbuka, lihat pada menu-menu yang terdapat di sebelah kiri. Tampilannya seperti ini:

• Sekarang kliklah pada menu Tema, sehingga terbuka tampilan seperti gambar di bawah ini:

• Nah seperti gambar diatas kliklah pada tombol Edit HTML, sehingga terbuka form edit HTML template anda seperti ini:

• Nah disinilah semua script atau kode yang membentuk template anda tersimpan, termasuk kode untuk mengatur tampilan header blog anda. Sekarang carilah kode </style>
• Setelah anda temukan, tepat diatasnya sisipkan kode ini:

#header:hover {
-webkit-transition-duration: 3s;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
  }

KETERANGAN:

Angka 3s adalah berapa kecepatan gerakannya
Angka (360deg), adalah berapa jauh sudut perputaran gerakannya
Karena itu anda bisa gonta ganti kedua jenis angka tersebut sesuai keinginan anda
Tapi agar gerakannya tidak norak, rekomendasi saya gunakan 3s dan (20deg)

• Setelah selesai melakukannya, jangan lupa Simpan Tema anda seperti gambar di bawah ini.
• Lalu tunggu sampai prosesnya selesai. Setelah itu baru lihat perubahannya, apakah saat kursor menyentuh header blog anda, dia sudah bergerak atau belum....

Ok untuk Postingan Kali ini cukup sampai disini dulu....
Bila ada yang kurang dari kata-kata saya mohon maaf,
Terima Kasih atas kunjungannya.....
Regards,
Mr Ivanchan

BloggingTips & Triks

Share This :