Add Multi Tabbed Navigation Widget To Blogger / Blogspot Sidebar

Multi Tabbed Navigation Widget to Blogger. Tabbed navigation is a great tool, now every blogger was using this in their blogs. it consumes less space and can show up three or more widget in same place. It looks very nice in your sidebar. This widget works based on jQuery and jQueryUI.

Watch Live Demo…

HOW TO INSTALL MULTI TABBED NAVIGATION WIDGET ON BLOGGER?

Steps…

Adding Script Code
Adding CSS Theme Code
Adding HTML Code

ADDING SCRIPT CODE

Go to Blogger Dashboard > Design > Edit HTML

Find </head> tag and place given bellow code before it.

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

ADDING CSS THEME CODE

Select One Theme and Place Theme code before </head> tag

	Name: Base `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" type="text/css" />`
	Name: Black Tie `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/black-tie/jquery-ui.css" type="text/css" />`
	Name: Blitzer `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/blitzer/jquery-ui.css" type="text/css" />`
	Name: Cupertino `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css" type="text/css" />`
	Name: Dark Hive `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/dark-hive/jquery-ui.css" type="text/css" />`
	Name: Dot Luv `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/dot-luv/jquery-ui.css" type="text/css" />`
	Name: Eggplant `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/eggplant/jquery-ui.css" type="text/css" />`
	Name: Excite Bike `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/excite-bike/jquery-ui.css" type="text/css" />`
	Name: Flick `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/flick/jquery-ui.css" type="text/css" />`
	Name: Hot Sneaks `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/hot-sneaks/jquery-ui.css" type="text/css" />`
	Name: Humanity `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/humanity/jquery-ui.css" type="text/css" />`
	Name: Le Frog `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/le-frog/jquery-ui.css" type="text/css" />`
	Name: Mint Chocolate `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/mint-choc/jquery-ui.css" type="text/css" />`
	Name: Overcast `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/overcast/jquery-ui.css" type="text/css" />`
	Name: Peper Grinder `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/pepper-grinder/jquery-ui.css" type="text/css" />`
	Name: Redmond `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/redmond/jquery-ui.css" type="text/css" />`
	Name: Smoothness `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css" type="text/css" />`
	Name: South Street `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/south-street/jquery-ui.css" type="text/css" />`
	Name: Start `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/start/jquery-ui.css" type="text/css" />`
	Name: Sunny `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/sunny/jquery-ui.css" type="text/css" />`
	Name: Swanky Purse `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/swanky-purse/jquery-ui.css" type="text/css" />`
	Name: Trontastic `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/trontastic/jquery-ui.css" type="text/css" />`
	Name: UI Darkness `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/ui-darkness/jquery-ui.css" type="text/css" />`
	Name: UI Lightness `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/ui-lightness/jquery-ui.css" type="text/css" />`
	Name: Vader `<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/vader/jquery-ui.css" type="text/css" />`