How To Add a Horizontal Links Menu to Blogger
.jpg "horizontal text menu")
In this Blogger tutorial you will learn how to place a horizontal row of menu items above your first post in your Blogger blog (Blogspot blog). 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 blog 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 customized menu of horizontal links to your Blogspot blog as seen here.
Steps to Add a Horizontal Links Menu Above Blog Posts
1. In Blogger navigate to Design > Edit HTML
2. Locate the header style sheet section which will usually be notated as
/* Blog Header */
If you can't find this line then locate the following area of your stylesheet using CTRL + F and place before these lines
]]></b:skin>
</head>
3. Copy and paste the following CSS 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
Note: You will need to change the colors to suit the color scheme of your blog. Change every instance of color and the background color to customize to your own requirements
5. Navigate to Design > 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="dailybloggiingtips.blogspot.com/search/label/Blogger%20Tips">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 Design > Edit HTML
3. No need to check Expand Widget Templates
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 Design > Page Elements
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
Tips and Troubleshooting
To add this horizontal navigation menu to the area below the header do the following:
Login in to Blogger
Navigate to Design > Edit HTML
Find the following lines of code:
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
Change showaddelement to yes
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>
To left align the menu change text-align:center to text-align:left
Paste the code in step 3 of Steps to Add a Horizontal Link Menu Above First Post directly before the following:
]]></b:skin>
</head>
Save Template
Navigate to Design > Page Elements
Click on Add a Gadget in the new area enabled below header
Select HTML/Javascript from the menu
Copy and paste the code in step 8 of Steps to Add a Horizontal Link Menu Above First Post into the content area of the gadget and change links to your own requirements
Save gadget and select View Blog to see your menu in action
.jpg)
.jpg)
.jpg)
Thanks so much for this helpful information come back again for more interesting information…Keep it upmysql services
ReplyDeleteAwesome! Immense information there.
ReplyDeleteseo company
congratulations guys, quality information you have given!!!
ReplyDeleteSEO service provider
The Info in the blog is out of this world, I so want to read more. Kansas City SEO company
ReplyDeleteBusiness CompetitionFastidious blog you’ve got here. I’ve ever been seeing you just about many blogs recently.
ReplyDeletetorontoseoexperts.caAwesome! Immense information there.
ReplyDeleteUnGagged.comAmiable articles and the blogs really helped me a lot, thanks for the valuable information.
ReplyDeleteI am surprised why other specialized don’t perceive your site I’m greatly cheerful I discovered this.
ReplyDeleteChattanooga Marketing Group
This is really a remarkable topic close to my heart thanks. Keep up the good working! Wyatt Jozwowski
ReplyDeleteThanks for sharing such a great and informative post with all of us. Monument capital
ReplyDeleteI was in quest of various topics that are enough well-liked and lastly got your blog, it has outstanding topics with immense popularity. http://www.atechreviews.com/
ReplyDeleteWhat a matter of un-ambiguity and maintenance of helpful awareness on the topic of unforeseen feelings.
ReplyDeleteimprove search results
Thank you so much guys for giving such kind of information. This will assist me a lot. password generator
ReplyDeleteIt’s really very informative that I wanted ever, thanks for this. instagram for business
ReplyDeleteHigh PR web 2.0
ReplyDeleteHi buddy, I got your blog by the use of Google while searching on same issue and then your post looked very motivating for me.
You have actually made the good points here. I did lots of search on the same topic and didn’t find such informative blog like yours. building business credit
ReplyDeleteThis tutorial suitable for Blogger and you can find immense information, Awesome dude! http://www.ocseoexperts.com
ReplyDeleteSufficient knowledge you have given to us buddies, I am really so happy to see such awesome blog. health insurance companies
ReplyDeleteGood guidelines! Thanks a lot. I am in love with your blog really. best credit repair
ReplyDeleteI'm also visiting this site regularly, this web site is really nice and the users are genuinely sharing good thoughts. Bohemian Glass
ReplyDeleteThis source is really helpful for me and others as well. Thanks for sharing this. Backlink Ninja
ReplyDeleteI see the greatest contents on your blog and I extremely love reading them.easy payday loans
ReplyDeleteKeep it up on nice working, and I hope soon you will place some more information here, I’ll wait for that.
ReplyDeletepayday loans
Hey very nice blog!! Man you have done the Amazing efforts to make this blog... I will surely bookmark your blog. car insurance rates
ReplyDeleteGood guidelines! Thanks a lot. I am in love with your blog really. whole life insurance
ReplyDeleteI even have been getting a lot of helpful and informative material in your web site.orogold cosmetics
ReplyDeleteI even have been getting a lot of helpful and informative material in your web site.car insurance rates
ReplyDeleteI was getting bore since morning but as soon as I got this link & reached at this blog, I turned into fresh and also joyful too.pay day loans
ReplyDeleteGood one https://webartrix.blogspot.com/2021/10/high-cpc-keywords-for-google-adsense.html
ReplyDeletethank you for sharing this wonderfull article. Download Instagram videos for free, no signup, no application required, in a just single click you can download the Download Instagram Post, Videos, Reels & IGTV for free Click Here
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteExcellent Post
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteI learned,How to create free business email from this site.Thank you 😊
ReplyDelete