Blogger / blogspot to add Multi - tabbed navigation widget to blog

Hi friends, today I will share Blogger How do I add a multi-tabbed widget. There are many tutorials online about this as I have seen. But it is the joy that should appear in your sidebar of your blog sidebar.It complicated.I You can add a widget to write teaching guidesthat I really thought that was very easy and simple. This widget is based on jQuery and jQueryUI actions.


Lets Install The Widget 

•  Adding Script Code  
•  Adding CSS Theme Code
•  Adding HTML Code

Adding Script Code

In older Interface  layout: Go to Dashboard>>>Design >>>> Edit HTML>>>>>Expand Widget Templates.

In new layout: Go to Dashboard>>>>Template>>> Edit Template HTML >>>>Expand Widget Templates.

Now Figure Out  (CTRL+F) this code in the template:   

</head>

 Now Add the code below just before of it

Make Sure You Have Copied All codes

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script> <script> $(document).ready(function() { $("#tabs").tabs(); }); </script>

Adding CSS Theme Code




Select One and past befor <head/> tag

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/black-tie/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/dark-hive/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/dot-luv/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/eggplant/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/excite-bike/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/flick/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/hot-sneaks/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/le-frog/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/mint-choc/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/pepper-grinder/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/south-street/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/start/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/sunny/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/swanky-purse/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/trontastic/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-darkness/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" type="text/css" />

Adding HTML Code

• For Older interface blogger blog

Go to Dashboard>>>Design>>.Page Element >>Add a Gadget of HTML/JavaScript type.

• For Upgraded Blogger blog  

Select layout >Add a Gadget of HTML/JavaScript type.

Now For Both ....Copy the script of below

<a href="http://tipsbee.blogspot.com" target="_blank" title="Blogger Tips"><img src="http://tipsbee.ucoz.com/Pictures/cursor-tipsbee.png" border="0" alt="Blogger Tips" style="position:absolute; top: 0px; right: 0px;" /></a><!-- Tabbed Navigation Widget For Blogger By http://tipsbee.blogspot.com --> <div id="tabs"> <ul><li><a href="#tabs-1">Tab1</a></li><li><a href="#tabs-2">Tab2</a></li><li><a href="#tabs-3">Tab3</a></li></ul> <div id="tabs-1">Tab 1 content goes here</div> <div id="tabs-2">Tab 2 content goes here</div> <div id="tabs-3">Tab 3 content goes here</div> <span style="font-size:10px;float:right;margin:5px;font-style:italic;"><a targer="_blank" href="http://tipsbee.blogspot.com">+ Grab this</a></span> <noscript><span style="font-size:10px;float:right;margin:5px;font-style:italic;"><a targer="_blank" href="http://tipsbee.blogspot.com">+ Grab this</a></span></noscript> </div> <!-- Tabbed Navigation Widget For Blogger By http://tipsbee.blogspot.com -->

Note:
Replace these As you wish


Tabs-1 , Tabs-2  , Tabs-3

Replace these with your widget codes.

Tab 1 content goes here , Tab 2 content goes here ,  Tab 3 content goes here






Optionally Adding HTML Code


you can use this for generating your codes.


You have done ! just Edit and generate  then ADD TO BLOGGER ..
And Click Add widget . Happy Blogging 
Good bye .. I have to