Tutorial : Navigation with Hover (Part Four)

Assalamualaikum & Salam Sejahtera

Hari ni cuba merajinkan diri setelah habes kelas tadi . akhirnya siap juga tutorial navigation with hover untuk part ke empat . simple je navigation ni . mau lihat live preview nya ?

LIVE PREVIEW 

Okay , berminat nak letak dekat blog ? meh nak ajar kan macam mana .

For Template Designer ;

Layout > Add a Gadget > HTML / JavaScript .

Copy and paste code bawah ni ;

<style>
.abc {
background:#fff;
color:#666;
font-size:11px;
font-family:ms gothic;
margin:4px;
text-decoration :none;
display:inline-block;
width:80px;
border-radius:0px;
text-transform:uppercase;
text-align:center;
letter-spacing:1px;
border:1px solid transparent;
padding:5px;
text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;
-moz-box-shadow:inset 0px -10px 3px #f6cdf5,inset 0px 10px 3px #DBF9EF;
-webkit-box-shadow:inset 0px -10px 3px #f6cdf5,inset 0px 10px 3px #DBF9EF;
box-shadow:inset 0px -10px 3px #f6cdf5,inset 0px 10px 3px #DBF9EF;
-webkit-transition:1000ms;
}
.abc:hover {
background:#f2f2f2;
display:inline-block;
width:80px;
border-radius:50px;
border:1px solid #E6E6E6;
-moz-box-shadow:inset 0px 0px 0px #fff,inset 0px 0px 0px #fff;
-webkit-box-shadow:inset 0px 0px 0px #fff,inset 0px 0px 0px #fff;
box-shadow:inset 0px 0px 0px #fff,inset 0px 0px 0px #fff;
-webkit-transition:1000ms;
}
</style>
<br />
<center>
<a class="abc" href="LINK">title 1</a>
<a class="abc" href="LINK">title 2</a>
<a class="abc" href="LINK">title 3</a>
<a class="abc" href="LINK">title 4</a>
<a class="abc" href="LINK">title 5</a>
<a class="abc" href="LINK">title 6</a>
<a class="abc" href="LINK">title 7</a></center>

Save and Siap .


For Classic Template user ;

Template > Edit HTML

Paste je code di bawah ni dekat atas </style>

.abc {
background:#fff;
color:#666;
font-size:11px;
font-family:ms gothic;
margin:4px;
text-decoration :none;
display:inline-block;
width:80px;
border-radius:0px;
text-transform:uppercase;
text-align:center;
letter-spacing:1px;
border:1px solid transparent;
padding:5px;
text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;
-moz-box-shadow:inset 0px -10px 3px #f6cdf5,inset 0px 10px 3px #DBF9EF;
-webkit-box-shadow:inset 0px -10px 3px #f6cdf5,inset 0px 10px 3px #DBF9EF;
box-shadow:inset 0px -10px 3px #f6cdf5,inset 0px 10px 3px #DBF9EF;
-webkit-transition:1000ms;
}
.abc:hover {
background:#f2f2f2;
display:inline-block;
width:80px;
border-radius:50px;
border:1px solid #E6E6E6;
-moz-box-shadow:inset 0px 0px 0px #fff,inset 0px 0px 0px #fff;
-webkit-box-shadow:inset 0px 0px 0px #fff,inset 0px 0px 0px #fff;
box-shadow:inset 0px 0px 0px #fff,inset 0px 0px 0px #fff;
-webkit-transition:1000ms;
}

Kemudian paste code dekat bawah ni dekat mana mana bahagian yang korang nak .

<center>
<a class="abc" href="LINK">title 1</a>
<a class="abc" href="LINK">title 2</a>
<a class="abc" href="LINK">title 3</a>
<a class="abc" href="LINK">title 4</a>
<a class="abc" href="LINK">title 5</a>
<a class="abc" href="LINK">title 6</a>
<a class="abc" href="LINK">title 7</a></center>

Save and Siap .

Korang boleh ubah mana mana yang patut macam link , title , code warna and etc . kbai o/