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.
Table of Contents
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.
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.
hi sir
nice post am searching for this..
very use ful thanxs..
You Are Welcome…
this is not working …
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…
fuck it nt working
It’s Working Fine, You Can See The Live DEMO And Leave Your Blog URL To Let Us See What’s The Problem You Have…
Really Awesome collection, Thank you so much.
http://www.deepdesigncompany.com
You Are Welcome Here And Thanks For Liking Our Stuff…
Can I change the color to red instead put a new # 0051a9
For This Purpose, You Have To Download The CSS File And Edit It Again…
I Want To 8 Tabs
Yes, you can have it.
How to make the video stop automatically by clicking on another tabs?
You have to capture the pause event of the video and add it on the tab on click function.