How to add horizontal menu bar into blogger ? - The WonderSpot - Know all in one spot
Breaking News:

How to add horizontal menu bar into blogger ?

 How to add horizontal menu bar into blogger ?

Are you looking for how to add horizontal menu bar in blogger.

When we are blogging we want to use attractive menu feature to make a better navigation for our readers about our blog site. Already you know that like the WordPress or other blog platforms blogger blog hasn’t any easy widgets or easy method like others to add a menu bar for blogger. But by using page widget we can create a menu bar for some far. But that is not enough. To create an advanced menu bar, we want to use HTML code as well as the CSS today let see how to add attractive horizontal menu bar for blogger easily.
How to add horizontal menu bar into blogger ?

This is a very nice horizontal menu in which its sub tabs are displayed in two columns and is also made with CSS, without any scripts.

Step 1: First sign up into your blogger site & go to Blogger Layout and click Add a Gadget Link.

Step 2: Click the HTML/JavaScript link.

Step 3: Paste the Code in Content area and Click Save button. First of all, you need to customized that menu bars & menu links.
             So open HTML/JavaScript widget and paste below codes & do customized as below the table.

<div id='nav'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='http://YOUR URL'>Tab 1 Title Here</a></li>
<li><a href='http://YOUR URL'>Tab 2 Title Here</a></li>
<li><a class='submenucol' href='#'>Tab 3 Title Here</a>
<li><a href='http://YOUR URL'>Sub Tab 3.1</a></li>
<li><a href='http://YOUR URL'>Sub Tab 3.2</a></li>
<li><a href='http://YOUR URL'>Sub Tab 3.3</a></li>
<li><a href='http://YOUR URL'>Sub Tab 3.4</a></li>
<li><a href='http://YOUR URL'>Sub Tab 3.5</a></li>
<li><a href='http://YOUR URL'>Sub Tab 3.6</a></li>
<li><a class='submenucol' href='#'>Tab 4 Title Here</a>
<li><a href='http://YOUR URL'>Sub Tab 4.1</a></li>
<li><a href='http://YOUR URL'>Sub Tab 4.2</a></li>
<li><a href='http://YOUR URL'>Sub Tab 4.3</a></li>
<li><a href='http://YOUR URL'>Sub Tab 4.4</a></li>
<li><a href='http://YOUR URL'>Sub Tab 4.5</a></li>
<li><a href='http://YOUR URL'>Sub Tab 4.6</a></li>
<li><a class='submenucol' href='#'>Tab 5 Title Here</a>
<li><a href='http://YOUR URL'>Sub Tab 5.1</a></li>
<li><a href='http://YOUR URL'>Sub Tab 5.2</a></li>
<li><a href='http://YOUR URL'>Sub Tab 5.3</a></li>
<li><a href='http://YOUR URL'>Sub Tab 5.4</a></li>
<li><a href='http://YOUR URL'>Sub Tab 5.5</a></li>
<li><a href='http://YOUR URL'>Sub Tab 5.6</a></li>
<li><a href='http://YOUR URL'>Sub Tab 5.7</a></li>
<li><a href='http://YOUR URL'>Sub Tab 5.8</a></li>
<li><a href='http://YOUR URL'>Tab 6 Title Here</a></li>

<br class='clearit'/>
Note: You can have customized above codes as you prefer.

Customize your main tabs by changing the tab title to whatever you want. Then include a URL for each one if you want it to be 'Clickable'. If not, then you can just put a # sign where it says http://YOUR URL

You can add or delete as many of the main tabs as you need, just make sure to copy the entire code for the main tab for each additional tab that you want:

<li><a href='http://YOUR URL'>Tab 7 Title Here</a>
<li><a href='http://YOUR URL'>Sub Tab 7.1</a></li>
<li><a href='http://YOUR URL'>Sub Tab 7.2</a></li>
<li><a href='http://YOUR URL'>Sub Tab 7.3</a></li>

STEP 4: Now let's go a step further & add the CSS style in blog template
               Go to Template > Edit HTML
                Click on the sideways arrow next to <b:skin>...</b:skin>


Then just click anywhere inside the code area and search using CTRL + F keys - for the]] ></b:skin> tag and just above
              ]]></b:skin>  add this code:
/* Horizontal menu with 2 columns
----------------------------------------------- */
#nav {
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,

border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
#topwrapper {
margin:0 auto;
padding:0 auto;
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
#top {
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
#top a {
border-right:1px solid #333333;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
#top a:hover {
#top a.submenucol {
background-image: url(;
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
#top li {
float: left;
position: relative;
#top li {
position: static !important;
width: auto;
#top li ul, #top ul li {
#top ul li a {
padding: 6px 15px;
font-family:Arial, sans-serif;
#top li ul {
position: absolute;
display: none;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
#top li ul li {
#top li:hover ul, #top li.hvr ul {
display: block;
#top li:hover ul a, #top li.hvr ul a {

If you want to change color of the background of the tabs then,

  1. Go to Blogger Dashboard
  2. Then click on Template -->> Customize  
  3. Then click on Advanced
  4. Now click on Tabs Background from there change it to your desired color. 

But if you are using custom template you have to do it by manually by edit HTML codes.

STEP 5: The final step is to Save the Template and view your blog site.

Finally, you have a very nice horizontal menu in which its sub tabs are displayed in two columns. That is made with only using CSS style sheet, without using any scripts.

Ok. I think you have a better idea about how to add horizontal menu bar in blogger.

Post a Comment