A navigation or menu bar is a bar made up of tabs. Behind each of those tabs is a link-to a post page, a static page, a label page, to another website etc. Making navigation tabs is not that difficult. They are basically links with some styling added for visual appeal.links are arranged vertically, navigation tabs are usually arranged horizontally.In this tutorial we will install the bar just below the header, a typical place for navigation bar. The bar will be added as a gadget via Page Elements page. The advantage of using a gadget is that if you want to remove it later on, it can be done easily without editing the HTML.
Table of Contents
Features:
1.) Simple And Stylish Multi-Tab Data Container.
2.) You Can Add Text, Pic, Video Or HTML Code Easily.
3.) You Can Add Un-Limited Tab.
4.) Speed Loading Time.
5.) You Can Make Multi-Pages In On Blog Post, Blog Gadget Or Website.
6.) JQuery 1.6.1 Added.
7.) Easy To Install And Fully Customizable.
8.) Scroll Up Effect On Tab Changing.
9.) Free To Use With Any Data.
10.) All Tabs Data Will Be Loaded On Page Load.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT“
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.
<style>
#tabbed_box_1 {margin: 0px auto 0px auto;width:500px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(https://lh5.googleusercontent.com/-4oB3c0hJXFo/TwgIZu7CB3I/AAAAAAAAUfM/0yDsmg_GI54/s1600/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(https://lh4.googleusercontent.com/-w4udt2FfX80/TwgIZHBXHcI/AAAAAAAAUfI/p4LDF-CsN7E/s1600/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(https://lh6.googleusercontent.com/-35jZQ4g9ijI/TwgIabuIPhI/AAAAAAAAUfU/4pH5w6Ptzwo/s1600/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
#Part_2, #Part_3, #Part_4, #Part_5 { display:none; }
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}
.content ul li:last-child { border-bottom:none;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;}
.content ul li a:hover {color:#a59c83;}
.content ul li a:hover small {color:#baae8e;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a.tab").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<br />
<div class="tabbed_box" id="tabbed_box_1">
<div class="tabbed_area">
<ul class="tabs">
<li><a class="tab active" href="javascript:void(0);" title="Part_1">Part 1</a></li>
<li><a class="tab" href="javascript:void(0);" title="Part_2">Part 2</a></li>
<li><a class="tab" href="javascript:void(0);" title="Part_3">Part 3</a></li>
<li><a class="tab" href="javascript:void(0);" title="Part_4">Part 4</a></li>
<li><a class="tab" href="javascript:void(0);" title="Part_5">Part 5</a></li>
</ul>
<div class="content" id="Part_1">
Your 1st DIV Data In Text, Image, DIV, Span, HTML, JQuery, JavaScript, Frame etc...
</div>
<div class="content" id="Part_2">
Your 2nd DIV Data In Text, Image, DIV, Span, HTML, JQuery, JavaScript, Frame etc...
</div>
<div class="content" id="Part_3">
Your 3rd DIV Data In Text, Image, DIV, Span, HTML, JQuery, JavaScript, Frame etc...
</div>
<div class="content" id="Part_4">
Your 4th DIV Data In Text, Image, DIV, Span, HTML, JQuery, JavaScript, Frame etc...
</div>
<div class="content" id="Part_5">
Your 5th DIV Data In Text, Image, DIV, Span, HTML, JQuery, JavaScript, Frame etc...
</div>
<span style="color: #dddddd; font-family: arial; font-size: 11px; font-weight: bold;">Widget by: <a href="https://www.exeideas.com/" style="color: #f7f7f7; font-weight: bold;">EXE Ideas</a></span>
</div>
</div>
Customization:
1.) Just Change The Red Text To Your Desire Tab Heading.
3.) Just Change The Blue Text With Your Desires Data.
3.) Save And Done.
is not working
Code Up-Dated, Sorry For Inconvenience.
it nt working
It’s Working Fine As You Can See The Live DEMO Easily, Leave Your Blog URL To Allow Us To See What The Problem You Have…
great work bro thats just too good, i will try it for movie blog. thanks buddy
Thanks For Liking Our Widget, Nice To Hear About It’s Use For Perfect Place…
How to increase the height and width of it ?
It’s Automatically Increased It’s Height According To Data…
Thnx,
1 more question, how can we create sub menu tab.
for example we make 2 tabs as YouTube and daily-motion. when we click in anyone of those then sub menu tabs appear as part 1 part 2 etc
For Your Desire, First Use CSS Version Then Add The Above Code In CSS Version. Get The CSS Version Here…
Multi-Tab Widget Container With CSS Only For Blog And Website.
Thnx,
can i use the multi tab data container and then add again the multi tab data container in it ?
is it possible? or i should use the css version?
You Can Try Both Ways Yourself Easily, If It’s Working Then Ok Otherwise Use CSS…
A real impressive work from you Hasan bro.Thumbs up to your unique coding talent.Day-by-day you’re becoming my ideal online entrepreneur
Welcome Here And Thanks For Liking My Work. Its All Just Of Your Type Friends. 🙂