How To Add Horizontal Menu To Blogger Header

Must Read

For those who want to have their Adsense account approved quickly, Google loves blogs and websites with good and easy navigation. It makes accessibility of your blog very easy to readers and tells your readers what your blog is all about. That is what Google wants for all sites. One good way to to give your blog or website good accessibility is to add a horizontal menu.

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 are 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 seo friendly horizontal menu code does not affect your page loading speed. It is simple and mobile friendly too.

How To Add Horizontal Menu To Blogger

=> 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="https://www.hotbizplanet.blogspot.com"><span>Home</span></a></li> <li><a href="https://www.hotbizplanet.blogspot.com/p/blog-page_8198.html"><span>About us</span></a></li> <li><a href="https://www.hotbizplanet.blogspot.com/p/contact-us_11.html"><span>Contact us</span></a></li> <li><a href="https://www.hotbizplanet.blogspot.com/p/how-to-post.html"><span>Submit Guest Post</span></a></li> <li><a href="https://www.hotbizplanet.blogspot.com/p/blog-page_11.html"><span>Advertise</span></a></li> <li><a href="https://www.hotbizplanet.blogspot.com/p/sitemap.html"><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; }
</style> 
<div class="nav-scroll"> 
<a href="https://www.hotbizplanet.blogspot.com/p/blog-page_8198.html">About Us</a> 

<a href="https://www.hotbizplanet.blogspot.com/p/contact-us_11.html">Contact Us</a> 

<a href="https://www.hotbizplanet.blogspot.com/p/how-to-post.html">Submit Guest Post</a> 

<a href="https://www.hotbizplanet.blogspot.com/p/blog-page_11.html">Advertise</a> 

<a href="https://www.hotbizplanet.blogspot.com/p/sitemap.html">SiteMap</a> </div> 

=> To edit the above code, change "https://www.hotbizplanet.blogspot.com....." to your blog desired page URL. Enjoy!