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

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

Post a Comment

2 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  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.

    ReplyDelete
  2. Clients of the best SEO Toronto have the ability to appear on the first pages of the search results when it comes to some of the best target phrases. SEO companies cannot have any issue with offering some of the best examples of their previous work in order to illustrate their results.

    ReplyDelete

Top Post Ad

Below Post Ad