Skip to content Skip to sidebar Skip to footer

Tutorial Membuat Header Bergerak Dan Berputar

Tutorial Membuat Header Bergerak Dan Berputar


Tutorial Membuat Header Bergerak Dan Berputar

Sudah lama saya tidak membuat tutorial desain blog, saat ini aku akan menuliskan tentang Tutorial Membuat Header Bergerak Dan Berputar. Aku membuat tutorial yang ringan-ringan saja agar blog loadingnya tidak terlalu berat.

Ini hanya tutorial CSS, mungkin ada teman-teman blogger yang ingin mempercantik blog dan suka kalau headernya bisa bergerak ke kanan atau ke kiri, dan juga header berputar. So ikuti caranya seperti di bawah ini.

Tutorial Membuat Header Bergerak:

1. Kodenya harus diletakkan di dalam template, jadi pertama harus masuk Tata Letak > Template > edit        HTML.
2. Cari kode:

/* Header
----------------------------------------------- */

3. Letakkan kode berikut tepat dibawah kode no 2 di atas:
#header:hover {
padding-right: 50px;
-webkit-transition-duration: 0.5s;
4. right bisa diubah menjadi left sesuai keinginan, setelah itu tekan simpan template.

Tutorial Membuat Header Berputar:

Sama dengan cara di atas, cuma kode di no 3 diganti dengan kode seperti berikut:
#header:hover {
-webkit-transition-duration: 3s;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
Selanjudnya tekan simpan, bekerja atau tidak? Itulah Tutorial Membuat Header Bergerak Dan Berputar, silahkan untuk mencoba. Kalau ada pertanyaan silahkan untuk menuliskan di komen. 

3 comments for "Tutorial Membuat Header Bergerak Dan Berputar"

  1. Hmmm menarik juga nih. Boleh juga saya coba biar HEader blog saya bisa berpendar atau bergerak. Tidak statis seperti sekarang ini. Loadingnya nambah berat nda ya. Izin sedot dulu ya HIhihihihihih

    ReplyDelete
  2. Ini code agak ringan, kadang ada yg mencari juga neh tutorial yang gampang banget hahaha

    ReplyDelete
  3. Keren juga. Saya akan coba di blog. Sepertinya menarik ada efek kek gitu.

    Makasih udah berbagi tutorial.

    ReplyDelete