In this tutorial, i'm going to show you how to add horizontal navigation bar in blogger blog. Navigation Bar is good for visitor to find links easily.
To add navigation bar in your blog. Follow the steps below.........
1. Log-in to your blogger account first.
2. After login go to Dashboard and Click Blog Title -----> Template -------> Edit HTML
3. Click Proceed Button.
4. Tick Expand Widget Templates check box and search for the following code Using [Ctrl] + [F]
]]></b:skin>
5. Replace The above code with the following code.
#homemenu{background:#fdfdfd;display:block;font:18px Cambria;font-weight:400;height:31px;border-bottom:1px solid #ccc;padding:0}
#hmenu a{color:#333;display:block;font-weight:400;border-right:1px solid #ccc;padding:5px 10px}
#hmenu a:hover{background:#f9f9f9;color:#333;display:block;text-decoration:none;margin-bottom:1px}
#hmenu,#hmenu ul{height:29px;list-style:none;margin:0;padding:0}
#hmenu li{height:29px;float:left;margin:0;padding:0}
]]></b:skin>
6. Now again search for the following code in template using [Ctrl] + [F]
<body>
7. Now paste the code below after above code in your template.
<!--Home Menu Starts-->
<div id='homemenu'>
<div id='hmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Advertise</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Disclaimer</a></li></ul>
</div>
</div>
<!--Home Menu Ends-->
8. If it show navigation bar on left then add above code after first Div Tag.
9. That's it, you are Done.
To add navigation bar in your blog. Follow the steps below.........
1. Log-in to your blogger account first.
2. After login go to Dashboard and Click Blog Title -----> Template -------> Edit HTML
3. Click Proceed Button.
4. Tick Expand Widget Templates check box and search for the following code Using [Ctrl] + [F]
]]></b:skin>
5. Replace The above code with the following code.
#homemenu{background:#fdfdfd;display:block;font:18px Cambria;font-weight:400;height:31px;border-bottom:1px solid #ccc;padding:0}
#hmenu a{color:#333;display:block;font-weight:400;border-right:1px solid #ccc;padding:5px 10px}
#hmenu a:hover{background:#f9f9f9;color:#333;display:block;text-decoration:none;margin-bottom:1px}
#hmenu,#hmenu ul{height:29px;list-style:none;margin:0;padding:0}
#hmenu li{height:29px;float:left;margin:0;padding:0}
]]></b:skin>
6. Now again search for the following code in template using [Ctrl] + [F]
<body>
7. Now paste the code below after above code in your template.
<!--Home Menu Starts-->
<div id='homemenu'>
<div id='hmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Advertise</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Disclaimer</a></li></ul>
</div>
</div>
<!--Home Menu Ends-->
8. If it show navigation bar on left then add above code after first Div Tag.
9. That's it, you are Done.
0 comments:
Post a Comment