next
Helplogger
Home
Blog DesignWidgets SEO Menus Po ...
Horizontal menu with sub-tabs in two columns for Blogger
27 comments
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.
The "advantage" so to speak, is that the sub-tabs when arranged in two columns are not very long, so it will be neat and less space along. You can see an example here:Tab 1 Title Here Tab ...
Adding A Horizontal Menu With Sub Tabs in Two Columns To BloggerSTEP 1: In Blogger, go to your "Layout" and on the "Page Elements" section.
Click on the "Add a Gadget" link just under your header image
From the Gadget's List, select "HTML/JavaScript" option.STEP 2: Simply copy and paste this ENTIRE code into your widget.Note:Leave the "Title" section of this widget blank.
Customize your main tabs by changing the Tab Titles to whatever you want. Include a URL for each one if you want it to be 'clickable'. If not, you can just put a#sign where it sayshttp://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 you want:
Tab 7 Title Here
STEP 3: Now let's go a step further and add the CSS style in our Template
Go toTemplate>Edit HTML
Click on the sideways arrow next to...
Then click anywhere inside the code area and search - using CTRL + F keys - for the]]>tag and just above]]>add this code:
/* Horizontal menu with 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 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;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}
Now find (CTRL + F) this line:
/* Tabs
It will also have some little lines beneath:
/* Tabs
----------------------------------------------- */
And just below these little lines, delete the code below until you reach at:
/* Columns
----------------------------------------------- */
Instead of the code that you have removed, add 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 more info:
STEP 4: The final step is to Save the Template and you are done!
Visit your blog to see a beautiful navigation menu just below header.
If you have any questions or need help, leave a comment below.
Like
7
Random Posts
A Beautiful jQuery Drop-Down Menu For Blogger Blogspot26/04/2012 - 24 Comments
Making a gadget visible only to the blog administrator05/09/2013 - 4 Comments
Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect06/04/2012 - 35 Comments
Related Posts:
Create Horizontal Navigation Menu W...
Share blog posts in social medias u...
Add floating social media sharing b...
Add A CSS Animated Share Button on ...
Orbit - jQuery Image Slider Plugin ...
27 comments:
mr.zatan 6/02/2013
Thank..... Reply
Orlando Website Design 6/02/2013
Amazing post! Thanks for sharing the code to make the horizontal menu on blogs. I will definitely apply this code on my blogs.
Reply
jempot2 office 6/03/2013
I will try to apply it to my blog, thanks for sharing. Permission to copy the script, and I was happy to get the horizontal menu with multi submenus. Reply
Cerwenlloyd Gefjun 6/04/2013
wow! another nice trick sir! you really in the tick on blogging Reply
Iftikhar uddin 6/05/2013
Thanks for Posting This Menu i really liked it keep posting such good articles !
ThatsBlogging Reply
ayman djebali 6/07/2013
Hi, Thank u my friend, you can visit me at: Blogger Tutorials Reply
Gautam Bhattacharya 6/09/2013
awsome... thanks yaar Reply
Victor Noah 6/18/2013
Really nice bro. Thanks so much for sharing... Reply
vivek sharma 6/20/2013
how to place ads at last of every post as u have done... Reply
vanesa eze 7/01/2013
the /* Tabs is below the /* Columns, how would i do it? Reply
Cerwenlloyd Gefjun 7/03/2013
Worth reading Bro!!! from your vivid follower. Reply
Mert Balci 7/06/2013
Gerçekten güzel kardeşim. Çok Paylaşım için teşekkürler ...
oyun oyna Reply
Get updates 8/30/2013
It's great tips, really works.. Reply
Feriantano.com 8/31/2013
Amazing ! Reply
ElecDude ED 10/17/2013
i cant find " /* Tabs " in my template edit html.
So what to do???? Reply
Judith Arndt 11/06/2013
I cant find the /* Columns , and now my tab columns are very small and you're not able to see all the subtabs. What can i do? Reply
Ivan Carlos 11/11/2013
adorei esse menu obrigado Reply
Riot 12/07/2013
Best tutorial ever! If I can make it work, anyone can! Reply
robi 12/23/2013
tq for code template menu i like it Reply
ED 12/23/2013
I want to add this in the NAVIGATION bar of blogger. so what should i do? Reply
buddy z 1/05/2014
nice i have added this code to my blogger but submenus not showing plz help me Reply
mounika sweety 1/20/2014
i cant find " /* Tabs " in my template edit html.
So what to do???? Reply
No one 1/27/2014
I don't know you mean by "Include a URL for each one if you want it to be 'clickable'" What URL?? :/ Reply
SEO Expert in Lucknow 1/30/2014
You are incredible dude, thanks for the sharing. Reply
Arnold Obonyo 2/04/2014
how did u create your sidebar menu and make it float
Reply
Medeya 2/14/2014
Cant find the the /* Tabs Reply
Popads Review 3/07/2014
Great contribution by you to the blogger world. Reply
Add comment
Comment as: Sign out
Notify mePublishPreview
Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED
Search
Search
Follow on Facebook
Helplogger
Like
2,786 people like Helplogger .
Facebook social plugin
Follow on Blogger
Subscribe via Email
Receive Quality Tutorials Straight in your
Inbox by submitting your Email below.
Submit
Or subscribe via RSS Feed
Recent Posts
How to Add Numbered Page Navigation Widget for Blogger
5 Easy Ways to Improve the SEO of a blog & Boost Traffic
What is the difference between padding and margins?
Add a Custom jQuery Lightbox To Blogger
How to Use Cookies in Javascript
Recent Comments
irsah imihar
Customizing will always be easy with jquery and javascript. Even...
Missy G
Yay! Thank you for making this so easy! This is just what I...
divakar sivashankar
admin i have a problem even if i add the tag the ad is showing up...
Anonymous
I don't understand the instructions you have given :(
Nanette Benablo
your site is very helpful and easy to follow tutorials. thank you...
Popular Posts
Simple Recent Posts Widget for Blogger/Blogspot
Create A Rollover Image Effect (change image on mouseover)
Recent Comments Widget For Blogger
How to remove Blogger Picture/Image Shadow and Border
Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger next
No comments:
Post a Comment