Label Cloud

Search This Blog

06 April 2010

online counter Memasang Navigation Bar

Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaimana nak Memasang Navigation Bar .




1. Login ke Blogspot .

2. Klik Layout - Edit HTML(Tandakan pada Expand Widget)

3. Cari kod seumpama di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .



#header-wrapper {
--------;
--------;
}

#header-inner {
--------;
--------;
}

#header {
-------;
-------;
--------;
}

#header h1 {
-------;
-------;
}

#header a {
------;
------;
}

#header a:hover {
------;
}

#header .description {
--------;
--------;
--------;
}

#header img {
------;
----- ;
}



4. Copy kod di bawah ini dan pastekan di bawahnya .


#navigation{
height:50px;
width: 874px;
line-height:27px;
background: #000000 url('http://3.bp.blogspot.com/_SIvo-ph5OM4/SRzlTszuP1I/AAAAAAAACFk/1jdhxs8ddLM/S1600-R/menu.JPG') repeat-x;
margin-top: -10px;
margin-left: 0px;
}
#navigation li{
float:left;
list-style-type:none;
white-space:nowrap;
}
#navigation li a{
margin-top: 5px;
display:block;
padding:0 10px;
font-weight:bold;
text-transform: uppercase;
text-decoration: bold;
background-color:inherit;
color: #FFFFFF;
font-size: 11px;
font-family: verdana;
border-right: 1px solid #FFFFFF;
}
#navigation a:hover {
color: #3BB9FF;
text-decoration: underline;
}


Note: Pada highlight biru korang leh tukarkan ngan url background yang ada di bawah .




http://3.bp.blogspot.com/_NGLN8-IACTs/SijR-xmNY3I/AAAAAAAAPSw/EOaH4vs7h1c/s1600/red1.gif





http://4.bp.blogspot.com/_NGLN8-IACTs/SijR_XbM7KI/AAAAAAAAPTA/sHsW7PNTFHg/s1600/purple1.gif





http://4.bp.blogspot.com/_NGLN8-IACTs/SijSQ9weNjI/AAAAAAAAPTQ/KdNBPJffom8/s1600/orange1.jpg





http://2.bp.blogspot.com/_NGLN8-IACTs/SijSRbw-RKI/AAAAAAAAPTg/p_dhS5RrDLk/s1600/blue1.gif





http://4.bp.blogspot.com/_NGLN8-IACTs/SijS9QAotPI/AAAAAAAAPTw/CvsHHJK0TMc/s1600/black1.gif


5. Cari kod di bawah .


<div id='content-wrapper'>


6. Copy kod di bawah dan pastekan di atasnya .


<div id='navigation'>
<ul>
<li><a href='http://msueroomz.blogspot.com/'>HoMe</a></li>
<li><a href='http://msueroomz.blogspot.com/2009/11/about-us.html'>Ab0uT MSue</a></li>
<li><a href='http://msueroomz.blogspot.com/2009/11/ceera-muncet-blog-gila-gila-alam.html'>LINK EXCHANGE</a></li>
<li><a href='http://nrl-sue89.blogspot.com/'>LifeIsHard</a></li>
<li><a href='http://msuefrenz.blogspot.com/'>MyFrenz</a></li>
<li><a href='http://imzcupcakes.blogspot.com/'>CuPcaKeS</a></li>
<li><a href='http://msueroomz.blogspot.com/search/label/Tutorial/'>Tut0riAl</a></li>
<li><a href='http://www.facebook.com/people/Nurul-Suhadah/100000486939730'>Facebook</a></li>
<li><a href='http://twitter.com/msueroomz'>Twitter</a></li>
</ul>
</div>


Note: Pada highlight Merah korang tukarkan ngan url yang korang nak linkkan kat tab menu/navigation bar tu.Highlight ungu korang tukarkan ngan yang bersesuaian .

7. Preview dan Save template .



Tinggalkan Komen Anda Disini