06 April 2010
Memasang Navigation Bar
hak milik
Sue
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqfLYN3TY0LxPynSHaGswH9hV-PansL3r0gjLqPCQo_YdzjEE26qwONjnErc8L08vHCGujuIiSHReGjFKNU2-djC0UqrilIvFQsLjdXqXggav9jryEMcykOx-My0YG1s-Asu5iAMdvSGE/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 .
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTAx9xSX4a1NDAhyphenhyphenuNvTLcWhkzDH_9F2Cncz62W9dJCUdjVgDu9buAopFZmMcYraWjRJ8lKst40juVfZvnPYiq0asAhiPXIa48ywLDUC5rT1gzNwNY16xMoZ8vwWxAZtEvtGYrMEybB243/s1600/red1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6mltBoiHr6TuENfqv0LKVVtThjiRgEuy1QJHOT5Fo-o5UkJ-AZgNvQF4nd2J-6K3IK0mTNaVslDIUjRaxi_OxXZSdlBmM1xOGq_jXjogvqdAkmoN9sP2wbP_UExmNFVx5sxff2_fUrKyt/s1600/purple1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipDE0Y27P_IYCrl2xa9OMg2lowcYW59z92A4t7RL6DRYTpF1P2-z_2ZGLLJ7MGkaEhzk3eTw8b7j1O3e57sbnFexdBXvar3eKYT2bjj-zICMfKT5uMB2uQBH3tCu-Cj5-YmX7CFyziyegI/s1600/orange1.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQBNo_R0Bvr7pXxTDXz_WhDrHqJidO09C4nDDb8VwhvvrpStjr7s5qHY3TVJpscb1DPj3JaQKpHjXZawXx5FFqb1JQ4E4Ce_uigd35R8jgDLB4v-EYUC9fr68E4YygTPbqNJ6iFaxVJbDL/s1600/blue1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG6eLtRje9cCZP_0T25fTV4SZw9S1OB693yyeK318Nfr_xEbj0K6Li5toveR-ofYIOWLQBr5NN13QSSdwSElVX1krsdZCZzrY6b-jGYVGOMICawtEokYk8sHAXP91BtfXLyTx5SnasVgso/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 .
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqfLYN3TY0LxPynSHaGswH9hV-PansL3r0gjLqPCQo_YdzjEE26qwONjnErc8L08vHCGujuIiSHReGjFKNU2-djC0UqrilIvFQsLjdXqXggav9jryEMcykOx-My0YG1s-Asu5iAMdvSGE/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 .
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTAx9xSX4a1NDAhyphenhyphenuNvTLcWhkzDH_9F2Cncz62W9dJCUdjVgDu9buAopFZmMcYraWjRJ8lKst40juVfZvnPYiq0asAhiPXIa48ywLDUC5rT1gzNwNY16xMoZ8vwWxAZtEvtGYrMEybB243/s1600/red1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6mltBoiHr6TuENfqv0LKVVtThjiRgEuy1QJHOT5Fo-o5UkJ-AZgNvQF4nd2J-6K3IK0mTNaVslDIUjRaxi_OxXZSdlBmM1xOGq_jXjogvqdAkmoN9sP2wbP_UExmNFVx5sxff2_fUrKyt/s1600/purple1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipDE0Y27P_IYCrl2xa9OMg2lowcYW59z92A4t7RL6DRYTpF1P2-z_2ZGLLJ7MGkaEhzk3eTw8b7j1O3e57sbnFexdBXvar3eKYT2bjj-zICMfKT5uMB2uQBH3tCu-Cj5-YmX7CFyziyegI/s1600/orange1.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQBNo_R0Bvr7pXxTDXz_WhDrHqJidO09C4nDDb8VwhvvrpStjr7s5qHY3TVJpscb1DPj3JaQKpHjXZawXx5FFqb1JQ4E4Ce_uigd35R8jgDLB4v-EYUC9fr68E4YygTPbqNJ6iFaxVJbDL/s1600/blue1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG6eLtRje9cCZP_0T25fTV4SZw9S1OB693yyeK318Nfr_xEbj0K6Li5toveR-ofYIOWLQBr5NN13QSSdwSElVX1krsdZCZzrY6b-jGYVGOMICawtEokYk8sHAXP91BtfXLyTx5SnasVgso/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 .
