Add Multi Tabbed Navigation Widget To Blogger Sidebar

How to Install Multi Tabbed Navigation Widget on Blogger?

Follow the steps given below-

A. Adding Script Code

B. Adding CSS Theme Code

C. Adding HTML Code

Adding Script Code



How to add HTML-CSS-Javascript Codes to your Blog ? 

This is very simple and easy you only follow below steps and add this widget in your blog.

Step 1 Log-in to your BLOGGER ACCOUNT

Step 2 Backup your Template.

Step 3 Click on The TEMPLATE>>EDIT HTML>>PROCEED.

Step 4 Now find [by pressing Ctrl + F ] this code in the template:

                    </head>

And immediately Before it, paste this code:

---

<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 Theme and Place Theme code before </head> tag

---

Style 1:-

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

,

---

Style 2:-

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

---

Style 3:-

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

---

Style 4:-

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

---

Style 5:-

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

---

Style 6:-

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

---

Style 7:-

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

---

Style 8:-

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

---

Style 9:-

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

---

Style 10:-

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