LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Multi Tabs / Website / Website Multi Tabs » Multi Tabs Data Container In For Website And Blogger

Multi Tabs Data Container In For Website And Blogger

Multi Tabs Data Container In For Website And Blogger

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.

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.

Recommended For You:
Awesome And Stylish Website And Blog Loading Page

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.

Recommended For You:
How To Remove Or Hide “Newer Post-Older Post” Links in Blog?

You Like It, Please Share This Recipe With Your Friends Using...

14 Responses to “Multi Tabs Data Container In For Website And Blogger”

  1. Anonymous says:

    is not working

  2. TheTexas Nepali says:

    it nt working

    • EXEIdeas says:

      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…

  3. Mohammad Yaseen M.Y.B says:

    great work bro thats just too good, i will try it for movie blog. thanks buddy

  4. Rizwana says:

    How to increase the height and width of it ?

  5. Rizwana says:

    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

    • EXEIdeas says:

      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.

  6. Rizwana says:

    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?

  7. 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

Leave a Reply

Your email address will not be published. Required fields are marked *