+==xXx(EXPLORATION)+==xXx==

Home » Tips Blogger » Hover

Hover

HOVER PADA JUDUL POSTING

Cari kode berikut :

.post h2 {
------
---------
}

::: Lalu tambahkan kode berikut dibawahnya :::

.post h2:hover {
font-size:25px;
font-family:Tahoma,Arial,Century gothic, sans-serif;
color:#89a8af;
}

HOVER TEKS/TULISAN Pada POSTING

Cari kode berikut :

.post {
------
---------
}

::: Lalu tambahkan kode berikut dibawahnya :::

.post:hover {
font-size:16px;
font-family:Tahoma,Arial,Century gothic, sans-serif;
color:#89a8af;
}

HOVER PADA BODY POSTING

Cari kode berikut :

.post-body {
------
---------
}

::: Lalu tambahkan kode berikut dibawahnya :::

.post-body:hover {
-----
-------
}

HOVER PADA SEMUA IMAGE/GAMBAR

Cari kode berikut :

.post img {
border:1px solid #fff;
---------
}

:::Lalu tambahkan kode berikut dibawahnya :::

.post img:hover {
height:70px;
width:150px;
border:5px solid #cccccc;
}

HOVER PADA IMAGE/GAMBAR PROFIL

Cari kode berikut :

.profile-img {
height:70px;
width:150px;
border:1px solid #fff;
------
---------
}

::: Lalu tambahkan kode berikut dibawahnya :::

.profile-img:hover {
border:5px solid #cccccc;
}

HOVER PADA TITLE JUDUL SIDEBAR

Cari kode berikut :

.sidebar h2 {
------
---------
}

::: Lalu tambahkan kode berikut dibawahnya :::

.sidebar h2:hover {
font-size:25px;
font-family:Tahoma,Arial,Century gothic, sans-serif;
color:#89a8af;
}

HOVER PADA TULISAN 'POSKAN KOMENTAR'

Cari kode berikut :

#comments h4 {
------
---------
}

::: Lalu tambahkan kode berikut dibawahnya :::

#comments h4:hover {
font-size:25px;
font-family:Tahoma,Arial,Century gothic, sans-serif;
color:#89a8af;
}

NB:

Jadi inti dari cara memberikan efek Hover'Pembesaran Font/teks' dan 'Perubahan Warna' disini,.
dengan cukup dengan menambahkan kode tambahan :hover { . pada kode CSS sobat yang ingin diberi efef Hover..

Contohnya, misal kita ingin memberi efek 'Pembesaran Font/teks' dan 'Perubahan Warna' pada Judul Header maka kita cari kode berikut :