Tutorial : List With Special Hover.

by - 9:47 PG



Tumblr_lip7mhoibc1qg9epqo1_500_large

Assalamualaikum :)

Entry kedua untuk hari inie.. List with special hover.


Template Designer.
1. Copy code dibawah nie.

<style>
a.myung{
background:url(URLICON);
background-repeat:no-repeat;
background-size:15px;
padding-left:20px;
color:#000;
margin-bottom:2px;
font:11px verdana;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
color:#000;
display:block;
}
a.myung:hover{
background:url(URLICON);
background-repeat:no-repeat;
background-size:14px;
}
</style>
<a class="myung" href="LINK" >AYAT</a><br>
<a class="myung" href="LINK" >AYAT</a><br>
<a class="myung" href="LINK" >AYAT</a><br>
<a class="myung" href="LINK" >AYAT</a><br>

2. Pastekan di mana-mana yang korang nak letak.
3. Save.

Note:
Merah : Url Icon sebelum hover.
Oren : Url icon selepas hover.
Pink : Link .
Biru : Ayat korang.

Template Classic / Blogskin
1. Dashboard > Template.
2. Ctrl+F dan cari code </style>
3. Copy code bawah nie.


.myung{
background:url(URL ICON) !important;color:#555 !important;
background-repeat:no-repeat !important;background-size:10px !important;padding-left:15px !important;line-height:18px !important;} 
.myung:hover{
background:url(URL ICON) !important;
background-repeat:no-repeat !important;background-size:10px !important;padding-left:15px !important;line-height:18px !important;color:#666 !important}
a.navi1:hover {
color:#000 !important;
}

4. Pastekan di atas code yang korang cari tadi.
5. Kemudian copy code nie pulak.

<a class="myung" href="LINK">AYAT </a><br>
<a class="myung" href="LINK">AYAT </a><br>
<a class="myung" href="LINK">AYAT </a><br>
<a class="myung" href="LINK">AYAT </a><br>

6. Pastekan di mana-mana tempat yang korang nak letak.
7. Preview and save!!


Note:

Merah : Url Icon sebelum hover.
Oren : Url icon selepas hover.
Pink : Link .
Biru : Ayat korang.

You May Also Like

2 Comments