Blogger Tips and Design Portfolio from Lightway Web Services, Inc.
HomeBlogger TipsDesign TipsWeb HostingDomain Name RegistrationDesign PortfolioAbout This BlogContact

Tuesday, March 13, 2012

Custom Navigation Tabs for Blogger Menu

Want to create a navigation menu for Blogger? A navigation menu can be used to organize your blog labels, or to add a menu button for a new Blogger page, or to link to another page on the web. This can be done using some basic HTML and CSS.

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>

Here is how the code works. The DIV tag is the container for the navigation bar. The ID command with the label "nav" associates our menu bar with the design styles that we will add in the next step. The next tags are the "A" tags. Each of these "A" tags is an individual button in our navigation bar. In this example, we have two menu buttons created. Each button will take us to the blog home. The first is labeled, "Blog Home", and the second is labeled, "Lightway Web Services, Inc.". The second button also contains addition criteria. The HREF command tells us the web address for which the navigation button will direct the user to when clicked. In this case, it will take us to the Lightway Web website. This can be changed to any address such as a blog post, blog page, or group of posts. You can copy and paste this link from your blog address. The TARGET command is an option. The "_blank" variable used here tells the blog that when this button is clicked, the user will be directed to a new browser window.
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;
}

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.
Posted by Brian Kraft at 11:02 AM
Labels: BlogTips

2 comments:

Unknown said...

Also on my blog www.UniqueDesignsAndFinds.com I don't know hoe to remove the gray box around side bar?? Any advice?

September 20, 2012 at 8:27 PM
Brian Kraft said...

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.

September 24, 2012 at 8:58 AM

Post a Comment

Newer Post Older Post Home
Subscribe to: Post Comments (Atom)

Popular Posts

  • Custom Navigation Tabs for Blogger Menu
  • Using the "Float" Command in CSS
  • Adding the Facebook Social Plugin
  • Adjusting Blog Widths
  • Using a Custom Domain or Subdomain for Blogger address
  • Creating the Blog Header
  • Ever Care Pool and Spa
  • Creating a Favicon
  • Oxnard Lemon Company
  • Coastal California Blueberry Farms, LLC.

Facebook

Followers

Subscribe To Blog

Posts
Atom
Posts
Comments
Atom
Comments