Tutorial: Navigation Bar


about
link
fllow




Assalamualaikum. Kali ini Fisha nak buat tutorial tentang navigation bar yang FIsha tengah pakai sekarang ni. Sorry ya sebab live preview di dalam post ni tak menjadi sangat sebab Fisha pakai html code dalam post.
Dah lama tak buat tutorial so nak buat sekarang hoho berbelit ayat den.

1) Copy kod-kod di bawah . Letak di atas kod </style>




@font-face{
font-family:tutano;
src:url(http://static.tumblr.com/dep4vzc/82Km8jmz4/tutano_cc_v2.ttf);
}
a.linki {text-shadow:0 0 6px #eee;
border: 1px dashed #fef;box-shadow:1px 1px 3px #eee;
margin-left: 2px;border-radius:1px;
margin-bottom: 4px;
text-align: center;
width: 50px;padding:5px;
background: #fff;
color:pink;display:inline-block;
font:normal 15px 'tutano';
text-transform: uppercase;
letter-spacing: -1px;
filter: alpha(opacity = 90);
opacity:.8;
-moz-transition-duration: 1s;-
webkit-transition-duration: 1s;
}
.linki:hover {
opacity:10;
}
Secondly, copy kod di bawah dan paste di bawah kod </style>

<div style="background:url(http://25.media.tumblr.com/df649b19489b2954788d8856188cdd18/tumblr_movcawwYsM1ru3nbdo1_250.png);border-bottom:5px solid #E7F1F9;padding:5px;width:600px;height:30px;position:absolute;top:30px;left:341px;text-align:center;font-family:amanoregulold;font-size:30px;border-right:1px dashed #f4f4f4;border-left:1px dashed #f4f4f4;">
<a class="linki" href="link"> home</a>
<a class="linki" href="link"> home</a>
<a class="linki" href="link"> home</a>
<a class="linki" href="link"> home</a></div>

Done, kalau tak menjadi bagitahu ya sebab masa Fisha post ni kepala FIsha berserabut memikirkan homework sekolah yang berlambak.


No comments: