Monday, February 26, 2018

February 26, 2018
Hello friends….
Today let see,

How to Adding A Horizontal Menu With Sub Tabs in Two Columns To 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 codes.so today let see how to add attractive horizontal menu bar for blogger easily.

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.

How to Adding A Horizontal Menu With Sub Tabs in Two Columns To Blogger?

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 HERE.com'>Tab 1 Title Here</a></li>
<li><a href='http://YOUR URL HERE.com'>Tab 2 Title Here</a></li>
<li><a class='submenucol' href='#'>Tab 3 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 4 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 5 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.6</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.7</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href='http://YOUR URL HERE.com'>Tab 6 Title Here</a></li>

</ul>
<br class='clearit'/>
</div>
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 HERE.com.

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 HERE.com'>Tab 7 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.3</a></li>
</ul>
</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 {
width:940px;
height:37px;
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,
endColorStr=#000000);

border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(http://3.bp.blogspot.com/-TkveEnZCoIw/Uat7PEv8kBI/AAAAAAAADsY/iqVPPTJzvUs/s1600/arrow_white.gif);
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 {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;



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.



For more reading THEWONDERSPOT

........................................................................................................................................................................................................................
EMoneySpot  -  Earn with us..........................................................................................>>>
........................................................................................................................................................................................................................

 How to earn money online.......................................................................................>>>

Improve organic SEO rankings while EARN MONEY (0.05/0.10$) per view.......>>>

How to take screenshots in windows 10 : Different Methods?................................>>>

Free Bandwidth Monitoring Tools For windows PC?.............................................>>>

Abnormally high internet bandwidth usage, c-0001.c-msedge.net of window 10....................>>> 

How to Speed up Internet connection on Windows 10..............................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?.................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?..................................................>>>

How to Block Windows 10 "Spying"? ........................................................................................>>>

How to start a Blog?.....................................................................................................................>>>

How to Choose the Best Blogging Platform, advantages & disadvantage.................................>>>

How to make your blog SEO friendly?........................................................................................>>>


All in one SEO pack for Blogger blog.........................................................................................>>>

Thank you for reading.
Good Luck.

Don’t forgot to Subscribe us to get latest news letters and give your feedback in below comment section ;-) ;-)

0 comments:

Post a Comment

Thank you for visit us.
Give your feedback. Don't worry. Your email is safe with us.
Subscribe us to get latest news letters.

amazon

 
Copyright © The WonderSpot All Right Reserved
Powered by Blogger