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 » Simple And Stylish J-Query Multi-Tab Widget For Blog & Website

Simple And Stylish J-Query Multi-Tab Widget For Blog & Website

J-Query Multi-Tab Widget For Blog & Website

After our previous post about CSS Multi Tabs Widget, here we have the same but with jquery effect that will make it more awesome and stylish. 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.) You Can Add Multi-Pages Data In One Page.
2.) You Can Also Add Unlimited Tabs With Easy Coding.
3.) Simple And Stylish Design With Speed Loading Time.
4.) You Can Add Text, HTML Codes, Scripts, Videos, Pic And More In It.

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.

Recommended For You:
How To Add External CSS File/Code In Blogger/Website?

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.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
<script>
$(document).ready(function() { $("#tabs").tabs(); });
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css" type="text/css" />
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab-1</a></li>
<li><a href="#tabs-2">Tab-2</a></li>
<li><a href="#tabs-3">Tab-3</a></li>
<li><a href="#tabs-4">Tab-4</a></li>
<li><a href="#tabs-5">Tab-5</a></li>
</ul>
<div id="tabs-1">Your Tab-1 Script or Text Here</div>
<div id="tabs-2">Your Tab-2 Script or Text Here</div>
<div id="tabs-3">Your Tab-3 Script or Text Here</div>
<div id="tabs-4">Your Tab-4 Script or Text Here</div>
<div id="tabs-5">Your Tab-5 Script or Text Here</div>
</div>

Customization:

1.) Change Red Text With Your Desire Tab Names.
2.) Change Blue Text With  Text, HTML Codes, Scripts, Videos, Pic And More As You Want.
3.) Save And Enjoy.

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

14 Responses to “Simple And Stylish J-Query Multi-Tab Widget For Blog & Website”

  1. Anonymous says:

    hi sir

    nice post am searching for this..
    very use ful thanxs..

  2. this is not working …

    • EXEIdeas says:

      It Will Work Alone Only. You Have Some Other JQueries That Is Cancelling Out This.
      So Don’t Worry. Read Our Hot Article About CSS Multi-Tab Widget…

  3. TheTexas Nepali says:

    fuck it nt working

  4. Amir khan says:

    Really Awesome collection, Thank you so much.

    http://www.deepdesigncompany.com

  5. Can I change the color to red instead put a new # 0051a9

    • Muhammad Hassan says:

      For This Purpose, You Have To Download The CSS File And Edit It Again…

  6. Ali says:

    I Want To 8 Tabs

  7. 선영  당 says:

    How to make the video stop automatically by clicking on another tabs?

Leave a Reply

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