How To Create A Multi-Tab Widget In Blogger

How To Create A Multi-Tab Widget In Blogger :-

One of the space efficient widget for blogs, is of course a multi-tabbed widget, which is almost a must for any blog. You can use it for Popular posts, Top commenters, Recent Posts, Recent Posts or any widget as you like.
Although you can find some other methods on Internet, but they are all quite confusing, so you can use this method, which is quite easy, but of course needs to tweak the template.

The complete process has mainly two steps:-

Preview





#Log in to Blogger.

#Now go to Layout and then click on "Edit HTML" tab.

#Then download the present template as a backup.

#Now find [CTRL+F] this code:

<b:skin><![CDATA[

#Insert the Code below <b:skin><![CDATA[


--------------------------------------------------------------------------------------


div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Width top main menu */
text-align: center;
height: 24px; /* Height top main menu */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Top Main menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Top main menu font */
font-weight: 900;
color: #000; /* Top main menu font color */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Top main menu background color */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Content Border color */
overflow: hidden;
background-color: #E6E6E6; /* Content background color */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}


--------------------------------------------------------------------------------------



#The text in red color are comments, for your help, as you can edit those numbers or color codes yourself, so that they can match your blog's layout

Download The JavaScript File (Tabview.js)



#And upload it to HotLinkFiles.com to get a DIRECT LINK to the file.


#Now find(CTRL+F)the Below Code in the template :-

</Head>


#Now Immediately BEFORE That Paste This Code:-

<script src='http://hotlinkfiles.com/......./tabview.js' type='text/javascript'/>

Replace the link in RED, with the DIRECT LINK of the Tabview.js file

-------------------If U Wish U can Use My Link--------------------

<script src='http://www.hotlinkfiles.com/files/2360961_nhqae/tabview_4.js' type='text/javascript'/>

--------------------------------------------------------------------------------------

# The second part is for positioning the widget (whether in sidebar, above/below the post body etc.)
For this, click on "Page Elements" tab, and then "Add a Gadget" wherever you like.

#Select the widget of the type "HTML/JavaScript"

# Now paste the following code in to the widget:-




--------------------------------------------------------------------------------------


<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;

<div class="Page">
<div class="Pad">
Content 1<br />
Content 2<br />
Content 3<br />
</div>
</div>

<div class="Page">
<div class="Pad">
Content 1<br />
Content 2<br />
Content 3<br />
</div>
</div>

<div class="Page">
<div class="Pad">
Content 1<br />
Content 2<br />
Content 3<br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>



--------------------------------------------------------------------------------------

Note
You can change the colored content as per your wish, and to remove or add any further tabs,


#Save the widget, drag and change it's position if you want.

Instruction

Please upload above Java script to your own server and change the url above mine may not work due to exceed bandwidth problem on my server.

Best Of Luck