1997: Tutorial : Navigation Bar Like Me

Tutorial : Navigation Bar Like Me

09 December 2012


Sebenarnya code ni cuma perlu tambah Code Margin je. Sini Izzat ajarkan.

I. Copy code ni atas </Style>

.top{
width:900px;
text-align:center;
margin-top:-50px;
padding:5px;
}

Width tu tukar ikut besar body blog korang. Margin tu sila ubah ikut suka.

II. Then copy code ni bawah code  header korang.

<center><div class="top">
CODE NAVI KORANG DEKAT SINI
</center></div>

III. Code navi tu korang paste code korang. Ni Izzat ada bagi contoh. Code navi ni dari skin Izzat yang lepas.

Paste code ni atas </style>

a.navi{
width:60px;
background:#fff;
font-family: trebuchet ms;
font-size: 8px;
letter-spacing: 0.3em;
Text-Transform: uppercase;
color:#252525;
padding:5px;
text-decoration:none;
-moz-opacity: 0.55;
opacity: 0.7;
display:inline-block;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
box-shadow:inset 0px 0px 0px #888,inset 0px 0px 0px #888;
}
a.navi:hover{
box-shadow:inset 0px 14px 0px #252525,inset 0px -14px 0px #252525;
color:#fff;
}
Code ni Paste dekat code Step nombor II tadi.
<a class="navi" onClick="document.getElementById('entry').innerHTML= document.getElementById('entries').innerHTML" title="Post">Post</a>
<a class="navi" onClick="document.getElementById('entry').innerHTML= document.getElementById('About').innerHTML" title="Krehzi Man">About</a>

Preview. Ada sesetengah blog kalau Preview dia tak beberapa nak jadi. Jadi korang try save dulu. Then view blog. Kalau tak menjadi boleh undo code tu guna "Ctrl+Z". Then report dekat comment.

Goodluck!

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...