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. 

Share :