Cara Membuat Logo atau gambar pada Header Blog bergerak disentuh Kursor

Tanky Street

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. Conthnya seperti ini:

Sekarang coba dekatkan sekaligus tahan kursor mouse anda beberapa waktu pada kedua contoh dibawah ini. Setelah itu lihat apa yang terjadi :

LETAKKAN KURSOR DISINI
Lihat Hasilnya

# Cara Membuatnya Pada Blog

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 seperti ini </style>

Jika anda kesulitan mencari kode tersebut diantara ribuan kode yang ada pada template blog anda, gunakan trik ini: Cara Cepat Mencari Kode pada Form Edit HTML Template.

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.

Read Also

Share this post

Get Link Facebook Messenger Whatsapp Whatsapp Twitter Telegram Linkedin Tumblr Pinterest

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://tankystreet.blogspot.com/. Terima kasih.