Memasang Navigation Bar #01

Navigation adalah sebahagian dari layout, sila pasang jika tiada.

Ramainya orang rekues navigation bar, jadi aku buat satu tutorial navigation bar yang betul-betul menarik untuk puaskan hati kamu. Aku ilhamkan navigation bar dari layout iNove dari design blog Neoease. Pendek kata ianya memang lain dari yang lain.

Navigation bar ini aku lengkapi dengan search box, jadi selepas ini tak adalah yang merungut lagi nak kan search box. Tapi kalau kamu nak letak banyak link kat navigation bar aku syorkan kamu buang search box. Navigation bar ini hanya sesuai untuk 3-4 link saja bergantung kepada outer wrapper kamu, jadi pandai-pandailah kamu edit blog kamu.

Kamu boleh tengok demo di sini.

Memasang Navigation Bar #01

01. Pilih Template > Edit Html (tick pada Expand Widget Template).

02. Cari kod ini :

]]></b:skin>

03. Tambahkan kod ini di atasnya :

#navigationbar01 {

background:#fff;
color:#555;
font-family:Verdana, "BitStream vera Sans", Helvetica, Sans-serif;
font-size:12px;
margin:1px 0;

}
#menus li {

display:inline;
list-style:none;

}
#menus li a {

background:transparent url(http://tinyurl.com/dhvp4h) no-repeat;
color:#382e1f;
display:block;
font-size:11px;
float:left;
height:31px;
line-height:31px;
padding:0 20px;
margin-left:-10px;
text-decoration:none;
z-index:1;

}
#menus li a:hover {

background-position:0 -31px;

}
#menus li.current_page_item a, #menus li.current-cat a {

background-position:0 -62px;

}
#menus li a.home {

background-position:0 -93px;
margin-left:-40px;
padding:0;
text-indent:-999em;
width:45px;

}
#menus li a.home:hover {

background-position:0 -124px;

}
#menus li.current_page_item a.home {

background-position:0 -155px;

}
#menus li a.lastmenu:hover {

background-position:0 0;

}
#searchbox {

float:right;
padding:4px 10px;
width:280px;

}
#searchbox .textfield {

float:right;
line-height:16px;
width:180px;

}
#searchbox .switcher {

background:url(http://tinyurl.com/ceouvs) no-repeat 0 0;
display:block;
float:right;
height:16px;
line-height:16px;
margin-top:3px;
padding:0 2px;
text-indent:-999em;
width:18px;

}
#menus li ul {

background:#f4f5f7;
border:1px solid #ccc;
border-top-color:#a6a6a6;
display:none;
padding:0 5px;

}
#menus li li {

display:block;
float:none;
list-style:none;
margin:0 !important ;
margin:0;
padding:0;

}
#menus li li a {

background-image:none;
border-style:solid;
border-color:#ddd;
border-width:1px 0 0;
display:block;
float:none;
font-size:12px;
height:20px;
line-height:20px;
margin:0;
padding:5px;
text-decoration:none;
width:150px;

}
#menus li li.first a {

border-top:none;

}
#menus li li a:hover {

font-weight:bolder;

}
.fixed, .clear {

clear:both;

}

04. Cari kod ini :

<div id='content-wrapper'>

05. Tambahkan kod ini di atasnya :

<div id='navigationbar01'>

<ul id='menus'>

<li class='current_page_item'>

<a class='home' expr:href='data:blog.homepageUrl' title='Home'>Home</a>

</li>
<li class='page_item page-item-2'>

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Subscribe to Content via RSS'>Post RSS</a>

</li>
<li class='page_item page-item-3'>

<a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Subscribe to Content via RSS'>Comment RSS</a>

</li>

</ul>

<div id='searchbox'>

<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' id='searchform' method='get'>

<div class='content'>

<input class='textfield' name='s' size='24' type='text' value=''/>
<span class='switcher'>Switcher</span>

</div>

</form>

</div>

<div class='fixed'/>

</div>

06. Pilih Save.