In this tutorial you will learn how to place a horizontal row of menu items above your first post in your Blogger (Blogspot) website. This process requires adding both a small amount of code to your Blogger template and a HTML/Javascript widget to your layout. This tutorial is suitable for Blogger (Blogspot) webmasters of all abilities.
Navigating a website using a horizontal menu is a traditional way to get around. On this site for example you can see that I have tweaked Blogger to create a row of horizontal text links for easier navigation of popular pages and labels. Follow the step by step instructions below and you will be able to add a customised menu of horizontal links to your Blogspot blog as seen here.
Steps to Add a Horizontal Link Menu Above First Post
1. In Blogger navigate to Layout > Edit HTML
2. Locate the header style sheet section which will be notated as
/* Blog Header */
3. Copy and paste the following code into your template under the header section taking care not to overwrite any existing code and to include the end bracket. It is probably best to paste into the bottom of the header style sheet section so that it is easier to change the code if necessary.
/* Blog Header */
#newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}
#newnavbar li a{
color:#335577;
}
#newnavbar li a:visited {
color: #990066;
}
#newnavbar li a:hover {
color: #99FFFF;
background: #CCFFFF;
}
4. Click on Save Template
5. Navigate to Layout > Page Elements
6. Click on Add a Gadget in the Blog Posts area. If you don't have this option already set on your template you can enable it by locating the following code and setting showaddelement to yes.
<div id='main-wrapper'>
<b:section class="'main'" id="'main'" showaddelement="'yes'>7. Select HTML/Javascript from the menu
8. Copy and Paste the following code into the Content box. There is no need to add a title. You can alter the code to suit your own needs depending on the links required.
<div id='newnavbar'>
<ul>
<a href="Home Page URL"><Home></a></li>
<li><a href="URL of Your Blogger Profile Page">About Me</a></li>
<li><a href="URL of Any Label You Choose">Label of Your Choice</a></li>
<li><a href="URL of Any Label You Choose">Label of Your Choice</a></li>
<li><a href="URL of Any Label You Choose">Label of Your Choice</a></li>
</ul></div>
To add a link to a label, as I did on this site, in this case Blogger Tutorials, you would enter the following:
<a href="http://blogknowhow.blogspot.com/search/label/Blogger%20Tutorials">Blogger Tutorials</a>9. Your script should be above your posts and any advertising or banners. If it is not drag it to the top position
10. Click on Save
11. Click on View Blog to see your new menu in action
Steps to Add a Horizontal Link Menu to Header
If you prefer you can add your horizontal link menu to your header instead of directly above your first post. In this case follow the steps below:
1. Follow steps 1 to 4 as for menu above first post
2. Navigate to Layout > Edit HTML
3. Check Expand Widgets Template
4. Locate the beginning of the body section which will be tagged as
<body>5. Find the line:
<b:section class='header' id='header' maxwidgets='1'>6. Change maxwidgets from 1 to 3.
7. Click on Save Template
8. Navigate to Layout > Edit HTML
9. Click on Add a Gadget in the Header area.
10.Select HTML/Javascript from the menu
11.Copy and Paste the following code into the Content box. There is no need to add a title. You can alter the code to suit your own needs depending on the links required.
<div id='newnavbar'>
<ul>
<a href="Home Page URL"><Home></a></li>
<li><a href="URL of Your Blogger Profile Page">About Me</a></li>
<li><a href="URL of Any Label You Choose">Label of Your Choice</a></li>
<li><a href="URL of Any Label You Choose">Label of Your Choice</a></li>
<li><a href="URL of Any Label You Choose">Label of Your Choice</a></li>
</ul></div>
To add a link to a label, as I did on this site, in this case Blogger Tutorials, you would enter the following:
<a href="http://blogknowhow.blogspot.com/search/label/Blogger%20Tutorials">Blogger Tutorials</a>12. Click on Save Template
13. Click on View Blog to view the new horizontal menu in your header
This tutorial has shown how to add a horizontal links menu to a Blogger blog either in the header itself or directly above the very first post to improve navigation of your site.
7 comments:
Thanks for the post on how to add a horizontal link menu to the blogger. The steps make it easy for the the new comer to adopt this and implementing in to their blog.
Thanks web design quote for taking the time to comment. I appreciate it. I certainly try to write my tutorials from the perspective of someone who may not be particularly technically minded but they do want to improve the look and functionality of their blog. I hope you will stop by again
would this work for the footer as well? That's where I would like to but some links
Yes jc this does work in the footer as well provided your template has a footer section eg Minima or Rounders template. Thanks for your query
Thank you!!! I tried following so many different instructions - finally one that works!!! Simple... even I could do it!
thanx soo... much
at last i can manage my blog posts.
cheerio
Sofi. Great that you have set up your navigation links menu. If you need a hand with anything else I hope you will call back here.
Post a Comment