Horizontal Bill Of Fare Amongst Sub-Tabs Inwards Ii Columns For Blogger

This is a real dainty horizontal bill of fare inwards which its sub-tabs are displayed inwards 2 columns together with is besides made amongst CSS, without whatever scripts.

The "advantage" together with thence to speak, is that the sub-tabs when arranged inwards 2 columns are non real long, together with thence it volition hold upwards great together with less infinite along. You tin run across an event here:

• Tab 1 Title Here
• Tab 2 Title Here
• Tab iii Title Here
  • Sub Tab 3.1
  • Sub Tab 3.2
  • Sub Tab 3.3
  • Sub Tab 3.4
  • Sub Tab 3.5
  • Sub Tab 3.6
• Tab four Title Here
  • Sub Tab 4.1
  • Sub Tab 4.2
  • Sub Tab 4.3
  • Sub Tab 4.4
  • Sub Tab 4.5
  • Sub Tab 4.6
• Tab five Title Here
  • Sub Tab 5.1
  • Sub Tab 5.2
  • Sub Tab 5.3
  • Sub Tab 5.4
  • Sub Tab 5.5
  • Sub Tab 5.6
  • Sub Tab 5.7
  • Sub Tab 5.8
• Tab half dozen Title Here

Adding H5N1 Horizontal Menu With Sub Tabs inwards Two Columns To Blogger

STEP 1: In Blogger, instruct to your "Layout" together with on the "Page Elements" section.

• Click on the "Add a Gadget" link simply nether your header image
• From the Gadget's List, choose "HTML/JavaScript" option.

STEP 2: Simply re-create together with glue this ENTIRE code into your widget. Note: Leave the "Title" department of this widget blank.

• Tab 1 Title Here


• Tab 2 Title Here


• Tab iii Title Here
  
  
  
  • Sub Tab 3.1
  
  
  • Sub Tab 3.2
  
  
  • Sub Tab 3.3
  
  
  • Sub Tab 3.4
  
  
  • Sub Tab 3.5
  
  
  • Sub Tab 3.6
  
  
  
  


• Tab four Title Here
  
  
  
  • Sub Tab 4.1
  
  
  • Sub Tab 4.2
  
  
  • Sub Tab 4.3
  
  
  • Sub Tab 4.4
  
  
  • Sub Tab 4.5
  
  
  • Sub Tab 4.6
  
  
  
  


• Tab five Title Here
  
  
  
  • Sub Tab 5.1
  
  
  • Sub Tab 5.2
  
  
  • Sub Tab 5.3
  
  
  • Sub Tab 5.4
  
  
  • Sub Tab 5.5
  
  
  • Sub Tab 5.6
  
  
  • Sub Tab 5.7
  
  
  • Sub Tab 5.8
  
  
  
  


• Tab half dozen Title Here

Customize your principal tabs yesteryear changing the Tab Titles to whatever y'all want. Include a URL for each 1 if y'all desire it to hold upwards 'clickable'. If not, y'all tin simply set a # sign where it says http://YOUR URL HERE.com

You tin add together or delete equally many of the principal tabs equally y'all need, simply brand certain to re-create the entire code for the principal tab for each additional tab y'all want:

Tab seven Title Here

• Sub Tab 7.1


• Sub Tab 7.2


• Sub Tab 7.3

STEP 3: Now let's instruct a measuring farther together with add together the CSS fashion inwards our Template

• Go to Template > Edit HTML

• Click on the sideways arrow adjacent to ... 

• Then click anywhere within the code expanse together with search - using CTRL + F keys - for the ]]> tag together with simply inwards a higher house ]]> add together this code:

/* Horizontal bill of fare amongst 2 columns
----------------------------------------------- */
#menucol {
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 enterprise #666666;
border-top:1px enterprise #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 enterprise #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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSFH5ehhf741LR5UGZVLRSRKsxwz1XOJ_sQc-gfuU5TjUfTLK0_L-XEZyQiPQWHhAMVPViayjioyiKoaUOPaAVXyWpWGSrCLCeJ0AtJL2N-B_ssN5RRtYrvaIKqt6LHFzUQhRLIphqYcE/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: correct 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;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}

• Now honour (CTRL + F) this line:

/* Tabs

• It volition besides bring unopen to picayune lines beneath:

/* Tabs
----------------------------------------------- */

• And simply below these picayune lines, delete the code below until y'all achieve at:

/* Columns
----------------------------------------------- */

• Instead of the code that y'all bring removed, add together this one:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs-inner {padding: 0 0px;}

See this screenshot for to a greater extent than info:

STEP 4: The terminal measuring is to Save the Template together with y'all are done!

Visit your spider web log to run across a beautiful navigation bill of fare simply below header.
If y'all bring whatever questions or bespeak help, piece of job out a comment below.