simple cute navigation hover

Annyeonghaseyo..

Tutor hari ini ialah navigation yang simple tapi ada hover,macam blogskin sikit.Oklah,korang fahamkan apa yang Julia nak sampaikan ,jadi jom ikut tutorial ini.


1.dashboard--->layout--->add gadget--->HTML Javasrcipt


2.copy code nih dan pastekan kat ruangan HTML Javascript tadi.

<style type="text/css">
a.linkies {
font-size: 11px;
font-family: damai pelajar;
display:inline-block;
text-align:center;
border:2px solid #FAE3EC;
border-radius:5px;
width: 45px;
color: #BFBFBF;
background:#fff;
padding:1px;
margin:2px;
text-decoration: none;
-webkit-transition-duration:1200ms;
}
a.linkies:hover          {
display:inline-block;
text-align:center;
border-radius:1px;
width: 50px;
color: #fff;
background: #FFE4E4;
-webkit-transition-duration:1200ms;
}
a.linke {
font-size: 11px;
font-family: damai pelajar;
display:inline-block;
text-align:center;
border:2px solid #FAE3EC;
border-radius:5px;
width: 45px;
color: #fff;
background: #FFE4E4;
padding:1px;
margin:2px;
text-decoration: none;
-webkit-transition-duration:1200ms;
}
a.linkie:hover {
display:inline-block;
text-align:center;
border-radius:1px;
width: 50px;
color: #BFBFBF;
background:#fff;
-webkit-transition-duration:1200ms;
}
</style>

3.Then tampalkan code di bawah nih kat bawah kod tadi.

<a class="linkie"  href="http://blogspot.com/">Title</a>
<a class="linkies"  href="http://blogspot.com/">Title</a>
<a class="linkie"  href="http://blogspot.com/">Title</a>
<a class="linkies"  href="http://blogspot.com/">Title</a>

4.Kalu korang nak guna satu jer effect pada navigation korang,just simply pilih dari kod diatas sama ada a.linkies atau a.linkie.


5.Kalau nak tambah link lagi,just tambah kod nih jer.

<a class="linkie"  href="http://blogspot.com/">Title</a>
<a class="linkies"  href="http://blogspot.com/">Title</a>

6.Save