Lightweight Multi Tab For Blogger

Website is growing, the presence of multiple tabs is very important on a blog. In this tutorial, we will discuss how to create a multi-tab, lightweight and easy to apply. However, you do not just put the code we provide, but also learn the concept of a multi-tab. Multi-tab is an extension of HTML link with css. The difference, javascript involved, so as to create a multi-tab. Therefore, we strongly recommend that users also learn html and css topics.

The concept of multi-tab is basically a link on the same page. In order to have a multi-tab view, then use display: inline (css). Meanwhile, to generate interactive tab, use javascript. Meanwhile, one way to create a link on the same page is as follows

<div class="tabs"> <ul class="tabNavigation"> <li><a href="#first">First</a></li> <li><a href="#second">Second</a></li> <li><a href="#third">Third</a></li> </ul> <div id="first"> <h2>First</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="second"> <h2>Second</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="third"> <h2>Third</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div>

whereas the multi tab key is to create links displayed inline. Consider the following code excerpt

ul.tabNavigation li { display: inline; }  

While the javascript code that led to the creation of interactive tab is

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> <script type="text/javascript" charset="utf-8"> $(function () { var tabContainers = $('div.tabs > div'); tabContainers.hide().filter(':first').show(); $('div.tabs ul.tabNavigation a').click(function () { tabContainers.hide(); tabContainers.filter(this.hash).show(); $('div.tabs ul.tabNavigation a').removeClass('selected'); $(this).addClass('selected'); return false; }).filter(':first').click(); }); </script>  

Here is the complete code multi-tab that can be applied to your blog.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> <script charset="utf-8" type="text/javascript"> $(function () { var tabContainers = $('div.tabs > div'); tabContainers.hide().filter(':first').show(); $('div.tabs ul.tabNavigation a').click(function () { tabContainers.hide(); tabContainers.filter(this.hash).show(); $('div.tabs ul.tabNavigation a').removeClass('selected'); $(this).addClass('selected'); return false; }).filter(':first').click(); }); </script> <style> ul.tabNavigation { list-style: none; margin: 0; padding: 0; } ul.tabNavigation li { display: inline; } ul.tabNavigation li a { padding: 3px 5px; background-color: #00FFFF; color:black; text-decoration: none; } ul.tabNavigation li a.selected, ul.tabNavigation li a:hover { background-color: #0000FF ; color: #fff; padding-top: 7px; } ul.tabNavigation li a:focus { outline: 0; } div.tabs > div { padding: 5px; margin-top: 2px; border: 1px solid #C0C0C0; } div.tabs > div h2 { margin-top: 0; } #first { background-color: white; } #second { background-color: white; } #third { background-color:white; } </style> <br /> <div class="tabs"> <ul class="tabNavigation"> <li><a href="#first">First</a></li> <li><a href="#second">Second</a></li> <li><a href="#third">Third</a></li> </ul> <div id="first"> <h2> First</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div id="second"> <h2> Second</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div id="third"> <h2> Third</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div>

you can put all that code below . And we want to say thank you for http://jqueryfordesigners.com because you give us idea lightweight multi tab.