Memasang Navigation Bar #02

Cuba check blog kamu ada Navigation Bar tak? Kalau tak ada Navigation Bar ternyata blog kamu memang menyedihkan.

Navigation bukan saja untuk buat lawa, tapi ianya turut digunakan untuk memaparkan link-link berguna. Kebiasaanya aku letak link web Twitter, Facebook, Myspace dan Redtube. Selain tu kamu boleh letak link page Site Map, About Me ataupun Contact Me jika ada.

Sebelum ni aku ada pos mengenai Navigation Bar dari layout iNove dari design blog Neoease, tapi kali ini kita pasang Navigation Bar dari layout Grid Focus dari design Derek Punsalan.

Apa yang berbeza, Navigation Bar ini ada dua bahagian dan kamu boleh pilih nak letakkan navigasi pada bahagian header atau pun bahagian footer. Letak dua-dua bahagian pun oke.

Untuk demo klik di sini.



Memasang Navigation Bar #02

01. Pilih Template > Edit Html.

02. Cari kod ini :

]]></b:skin>

03. Tambahkan kod ini di atasnya :

ul.nav{

border-top:1px solid #ccc;
border-bottom:3px double #ccc;
background:none;
list-style:none;
margin-left: 0;
padding: 0;

}
.nav li{

border-right:1px solid #ddd;
display:block;
float:left;
width:100px;

}
.nav li a{

color:#999;
display:block;
font-size:11px;
outline:none;
padding:5px 0 8px 5px;
text-decoration:none;
text-transform:uppercase;
width:99px;

}
.nav li a span{

font-size:11px;color:#999;
text-transform:lowercase;

}
.nav li a:hover{

background:#efefef;
color:#ccc!important;
width:95px;

}
* html .nav li a:hover{

background:#fff;
width:99px;

}
.nav li.skip{

border-left:1px solid #ddd;
border-right:none;
display:block width:100px;
float:right;
padding-right:5px;

}
.nav li.skip a{

width:100px;

}
li.top{

border-left:1px solid #ddd;
border-right:none;
display:block width:100px;
float:right;
padding-right:5px;

}
li.top a{

width:100px;

}
.nav li.skip a:hover, li.top a:hover{

background: transparent;
color: #fff !important;

}
.fix:after{

clear:both;
content:".";
display:block;
height:0;
visibility:hidden;

}
.fix{

display:inline-block;

}
* html .fix{

height:1%;

}
.fix{

display:block;

}

04. Cari kod ini untuk Navigation Bar bahagian header.

<div id='outer-wrapper'>

05. Tambahkan kod ini di atasnya.

<div class='nav'>

<ul class='nav fix'>

<li>

<a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home<br/><span>Frontpage</span></a>

</li>
<li>

<a href='#' title='Link title'>Link1<br/><span>Short Desc</span></a>

</li>
<li>

<a href='#' title='Link title'>Link2<br/><span>Short Desc</span></a>

</li>
<li>

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Subscribe to the main feed via RSS'>RSS<br/>
<span>Syndicate</span></a>

</li>
<li class='skip'>

<a href='#main' title='Skip to content'>Main<br/>
<span>Skip to content</span></a>

</li>

</ul>

</div>

06. Cari kod ini untuk Navigation Bar bahagian footer.

<div id='footer-wrapper'>

07. Tambahkan kod ini di atasnya.

<div class='nav' style='clear: both;'>

<ul class='nav fix'>

<li>

<a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home<br/><span>Frontpage</span></a>

</li>
<li>

<a href='#' title='Link title'>Link<br/><span>Short Desc</span></a>

</li>
<li>

<a href='#' title='Link title'>Link<br/><span>Short Desc</span></a>

</li>
<li>

<a href='#' title='Link title'>Link<br/><span>Short Desc</span></a>

</li>
<li>

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Subscribe to the main feed via RSS'>RSS<br/><span>Syndicate</span></a>

</li>
<li class='top'>

<a href='#outer-wrapper' title='Return to the top'>Top<br/><span>Return to top</span></a>

</li>

</ul>

</div>

08. Pilih Save Template.