Cara Agar Logo Berputar Saat Tap di Blogger
Membuat tampilan blog menjadi unik dan berbeda dari blog lain adalah suatu hal yang harus di lakukan. Karena semakin unik tampilan sebuah blog, semakin kuat juga indentitas blog tersebut. Imbasnya blog menjadi terkenal dan banyak dikunjingi orang.
Salah satu cara mempercantik blog adalah dengan menabahkan fitur logo berputar saat kursor atau tap di arahkan ke logo di header menu. Dan kali ini saya akan berbagi cara membuat logo blog berotasi saat terkena kursor atau tap di blogger.
Cara Agar Logo di Blog Berputar
Berikut ini adalah cara membuat animasi logo berputar di blog dengan CSS sederhana dan ringan.
- Buka Dashboard Blogger
- Pilih Menu Tema
- Pilih Edit HTML
Cari dan masukan CSS di bawah ini sebelum kode </b:skin>
#header:hover {
-webkit-transition-duration: 3s;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
Klik simpan.
Apabila kode pertama tidak bekerja, silahkan gunakan CSS alternatif di bawah ini.
#header-wrapper:hover {
-webkit-transition-duration: 3s;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
Klik simpan dan lihat hasilnya.
Baca: Cara Ubah Ukuran Logo di Viomagz
Untuk demo, silahkan anda arahkan kursor atau tap logo di blog ini untuk melihat hasil dari pemasangan kode agar log blog berputar.
Catatan:
- Nilai 3s menentukan kecepatan putaran logo
- Nilai 360deg menentukan seberapa jauh putaran logo.
Silahkan sesuaikan dengan keinginan Anda.
Baca: Cara Membuat Widget Random Post di Blogger
Dari percobaan yang saya lakukan, kode pertama bekerja dengan baik di template viomagz yang digunakan blog ini. Dan kode kedua malah membuat seluruh navigasi menu ikut berputar.
Tapi itu berlaku untuk blog ini sebagai percobaan. Jadi kemungkinan di template lain kedua kode tersebut bekerja dengan baik.
Selain itu kode CSS yang saya bagikan ini hanya membuat logo berputar satu putaran saja. Nah nanti jika saya sudah membuat atau menemukan cara agar logo pada header blog bisa berputar selamanya saat di sentuh kursor atau di tap, maka akan saya bagikan di artikel ini.
Nah itulah tutorial blogger singkat tentang cara mempercantik tampilan blog dengan membuat logo pada header blog berputar.
Semoga bermanfaat.
Posting Komentar