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.


Steps…

-Adding Script Code
-Adding CSS Theme Code
-Adding HTML Code


Adding Script Code


1.Go to Blogger Dashboard > Design > Edit HTML
2.Find </head> tag and place given bellow code before it.

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

Adding CSS Theme Code 


Select One Theme and Place Theme code before </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/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/hot-sneaks/jquery-ui.css" type="text/css" />












Adding HTML Code


Enjoy !