Monday, 7 October 2013

Tutorial Navigation Bar macam Ina

Assalamualaikum ,


Semalam , ada yang request dekat Ina , macam mana nak buat navigation kat blog ni . 

Sebelum tu , Ina nak cakap , ni bukan tutorial Ina . Ina lupa betul Ina pakai tutorial siapa... So , this tutorial credit to their owner . 

Home ABOUT EXCHANGE TUTORIALS FREEBIES
1) Dashboard -> Layout .
2) Add a gadget
3) Copy dan paste kod ni di HTML Javasript
<style>
@font-face { font-family:yow !important; src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important; }

a.navi {
border:1px solid #ebebeb; 
text-transform:uppercase; 
background:#FFE1EE; 
text-decoration:none; 
color: #666;
 padding: 6px; 
font: 8px yow; 
margin-left: 5px; 
margin-right: 5px; 
-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; text-decoration:none; 
box-shadow:inset 0px 0px 0px #FBF8E0,
inset 0px 0px 0px #FBF8E0; 
display: inline-block; 
width: 65px;
}
a.navi:hover {
-webkit-transition-duration: 0.5s; 
box-shadow:inset 0px 14px 0px #a2d7f3,inset 0px -14px 0px #a2d7f3; color: #fff;
}
</style>
<center>
<a class="navi" href="http://sebabakusabrina.blogspot.com/">Home</a>
<a class="navi" href="http://sebabakusabrina.blogspot.com/p/about.html">ABOUT</a>
<a class="navi" href="http://sebabakusabrina.blogspot.com/p/exchange-banner.html">EXCHANGE</a>
<a class="navi" href="http://sebabakusabrina.blogspot.com/p/blog-page.html">TUTORIALS</a>
<a class="navi" href="http://sebabakusabrina.blogspot.com/p/freebies-for-you.html">FREEBIES</a>
</center>
4) Tukar apa yang perlu .
5) Preview & Save .

2 comments:

Terima kasih sebab sudi komen dekat entri Ina :)