QUOTE
Yang umum diyakini, membuat blog itu susah.
Apalagi menjadikannya untuk mencari uang di internet.
Tapi ketahuilah, itu hanya mitos!
Temukan inspirasi dan semangat baru di sini
terbaru

Cara Membuat Header Blog Bergerak Disentuh Kursor

: Rabu, Februari 01, 2017

Cara Membuat Header Blog Bergerak 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. Conthnya seperti ini:


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







BILA INI DISENTUH
AKAN BERGERAK



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:


Cara Membuat Header Blog Bergerak Disentuh Kursor


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


Cara Membuat Header Blog Bergerak Disentuh Kursor


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



Cara Membuat Header Blog Bergerak Disentuh Kursor


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.


Cara Membuat Header Blog Bergerak Disentuh Kursor


Lalu tunggu sampai prosesnya selesai. Setelah itu baru lihat perubahannya, apakah saat kursor menyentuh header blog anda, dia sudah bergerak atau belum.

Komentar yang tidak relevan, jorok, spamming dan promosi link akan dihapus

Copyrights @ blogernas ■ Desember 2015 - Erianto Anas