Creating the Menu Code
To start, you'll need to access the Layout for your blog. If you use the old Blogger interface, this is found under the "Design" tab. The "Layout" tab will work for the new Blogger interface. From here, you can add a new Gadget to your template. Most navigation bars can be found near the top of a website, but you can add your navigation bar anywhere that you'd like. The gadget you'll need to add is "HTML/Javascript".
In your gadget box, enter the following code:
<div id="nav">
<a href="">Blog Home</a>
<a href="http://www.lightwayweb.com">Lightway Web Services, Inc.</a>
</div>
<a href="">Blog Home</a>
<a href="http://www.lightwayweb.com">Lightway Web Services, Inc.</a>
</div>
From here, you can add as many buttons you like by adding additional lines within the proper "A" tags.
Creating the Design Style for the Navigation Menu
The next step is to access the "Edit HTML" using the old Blogger format, or "Template" and "Edit HTML" using the new Blogger format. Within the HTML coding, you will want to locate the following code:
]]></b:skin>
Just above this code, paste the following:
/* Navigation Menu
----------------------------------------------- */
#nav {
padding-top:6px;
padding-bottom:16px;
margin-left:2px;
font: bold 12px Arial;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
#nav a {
display: inline;
text-decoration: none;
padding: 11px;
margin-right: -3px;
border-left: 1px solid #BBBBBB;
border-right: 1px solid #333333;
border-bottom: none;
background-color:#006633;
color: #FFFFFF;
}
#nav a:hover {
background-color:#006633;
color: #FFFFFF;
}
----------------------------------------------- */
#nav {
padding-top:6px;
padding-bottom:16px;
margin-left:2px;
font: bold 12px Arial;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
#nav a {
display: inline;
text-decoration: none;
padding: 11px;
margin-right: -3px;
border-left: 1px solid #BBBBBB;
border-right: 1px solid #333333;
border-bottom: none;
background-color:#006633;
color: #FFFFFF;
}
#nav a:hover {
background-color:#006633;
color: #FFFFFF;
}
This CSS code should provide you with the basics for creating your custom navigation menu. All CSS styles within this template code can be adjusted to fit your design style.
2 comments:
Also on my blog www.UniqueDesignsAndFinds.com I don't know hoe to remove the gray box around side bar?? Any advice?
Meg,
As a custom web designer, I typically charge for any work done regarding Blog Design, and I cannot see anything quickly that I could advise you to change to remove the gray box. My suggestion, is to visit this website: http://www.bloggeries.com/forum/
This a great source for help with blog design, among other things related to blogs.
Post a Comment