Desain template-Jenis Hover HTML di blog untuk teks postingan dan link menu

Salah satu elemen perintah di HTML adalah Hover. Hover berfungsi untuk memberikan efek pada teks dalam postingan, link/tautan berbentuk teks menu maupun gambar pada saat teks dan gambar itu disorot menggunakan pointer komputer. Jenis-jenis Hover yang bisa kamu berikan sebenarnya sangat banyak. Namun pembahasan hover kali ini hanya sebagian kecil saja namun sudah cukuplah buat mendesign ulang template blog kamu.

Jenis Hover HTML di blog untuk teks postingan

Jenis-jenis hover HTML pada teks seperti efek garis bawah, huruf miring, huruf tebal, perubahan warna teks, perubahan background teks dan perubahan ukuran huruf teks.




Desain template-Jenis Hover HTML di Blog untuk teks


Macam jenis hover HTML di blog sebagai berikut.

1. Hover untuk memberi warna pada teks

Kamu cukup tambahkan kode css berikut.

:hover{ color: #626262; }

Contoh penerapan hover di HTML untuk memberi warna pada teks:
  • a:hover{ color: #626262; }
  • .sidebar a:hover{text-decoration:none;color: #005E57;}
  • #menu ul li:hover a{color:#fff}
  • a:hover{color:$(color.theme);} --> Hover ini memberi warna otomatis sesuai warna tema/template yang digunakan. Contoh lagi: #social-top ul li a:hover{color:$(color.theme)}.

Kode text-decoration:none; maksudnya adalah teks tanpa efek dekorasi seperti underline, italic dan bold.


2. Hover untuk memberi dekorasi pada teks

Dekorasi teks (text-decoration) itu seperti garis bawah (underline), garis miring (italic), dan huruf tebal (bold). Untuk menambahkan hover jenis ini dengan menambahkan kode berikut.

:hover{text-decoration:underline; }

Efek hover ini akan membuat garis bawah dengan warna default/standar (biasanya warna hitam). Sedangkan untuk underline dengan warna variasi/custom bisa diberikan seperti contoh berikut.

:hover{text-decoration:underline #23b5ab; }

Untuk memberikan text-decoration yang lain kamu tinggal ganti saja underline dengan italic dan bold.

Contoh penerapan  Hover untuk memberi dekorasi pada teks:
  • .status-msg-wrap a:hover{text-decoration:underline}
  • #error-wrap .homepage:hover{text-decoration:underline}
  • a:hover{ color: #626262;text-decoration:underline; }
  • #footer-widgets .label a:hover{text-decoration:underline;}



3. Hover untuk mengubah warna background teks
Kamu cukup tambahkan kode css berikut.

 :hover {background:#23b5ab;}

Background:#23b5ab; berfungsi untuk member warna hijau pada latarbelakang/dasar.

Contoh penerapan Hover untuk mengubah warna background teks:
  • #menu ul li:hover{background-color:#262626}
  • .postags a:hover{background:#aaa}

4. Hover untuk memberikan bingkai warna di bawah teks

Kamu cukup tambahkan kode css berikut.

:hover{ border-bottom: 2px solid #23b5ab;}

Contoh penerapan Hover untuk memberikan bingkai warna di bawah teks:
  •  .menu-secondary li a:hover a{border-bottom:2px solid #23b5ab;}

Begitulah materi desain template tentang jenis Hover HTML di blog untuk teks postingan dan link di Blog ini. Semoga bermanfaat sahabat.
Saria Bakti

Seorang Blogger sejak 2015. Senang berbagi informasi yang dapat meningkatkan Imunitas Tubuh.

إرسال تعليق

أحدث أقدم