Wednesday, 1 July 2020

How To Add Horizontal Menu To Blogger Header

It all depends on your blogger template and the new blogger does not support auto horizontal menu when you add page in your blog header section. I had problem adding a menu to my header for easier navigation. I want to believe I was not the only one facing this. Unlike some new templates where you have page menu and main menu automatically added, in some cases where you re only provided with the main menu, you will need this blogging tutorial.

Every blog or website will need to place navigation links in prominent place(s), so that customers or readers can contact them or read to know about them and so on. In the absence of this, many bloggers or website owners have lost the opportunities of connecting with potential buyers or business proposals. Some bloggers do the mistake of placing pages links in blog footer. This is where you are getting it wrong, as visitors are too impatient to scroll down your website or blog page to view your page footer. It is advisable you do not take that risk.
This below horizontal menu code does not affect your page loading speed. It is simple and mobile friendly too.

=> Login to your blogger account

=> Click on Layout and click on ADD A GADGET in your header section.

=> Click on HTML/Javascript link to add one of the the below horizontal menu codes. If you want something like Blogmeloud blog horizontal menu, then use the first menu code:

=> <style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img { border: none; } #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href=""><span>Home</span></a></li> <li><a href=""><span>About us</span></a></li> <li><a href=""><span>Contact us</span></a></li> <li><a href=""><span>Submit Guest Post</span></a></li> <li><a href=""><span>Advertise</span></a></li> <li><a href=""><span>Sitemap</span></a></li> </ul> </div>

 <style> .nav-scroll { background-color: #333; overflow: auto; white-space: nowrap; position: relative; } 
.nav-scroll a { display: inline-block; color: white; text-align: center; padding: 14px; text-decoration: none; } 
.nav-scroll a:hover { background-color: #777; }
<div class="nav-scroll"> 
<a href="">About Us</a> 
<a href="">Contact Us</a> 
<a href="">Submit Guest Post</a> 
<a href="">Advertise</a> 
<a href="">SiteMap</a> </div> 

=> To edit the above code, change "https://www.blogmeloud....." to your page desired page. Enjoy!

=> Join our community of 50,000+ ecstatic readers.
Get latest weekly updates on health tips, seo, personal finance, blogging tips, how to make money online, etc.

Previous Post
Next Post

post written by:

1 comment:

  1. Hey Owenayuk ,

    Great post with effective tips to add horizontal menu on blogger. Thanks for sharing your knowledge and making us aware.

    Your each of the suggested steps are so clear, easy to understand ad follow, whereas following the steps will be helpful and allows several user to include horizontal menu on blogger.

    Truly informative post and thanks for sharing.