How To Create Tab View Navigation Widget for Blogger

Valid until 31 January 2015 (unless noted)

Tab View navigation Widget for Blogger. Tab view is a feature / widget that can be installed on your blogger / blogspot blog. Tab View is very effective, simple look, saving some space on your blog, and providing a navigation tools for your blog visitors. By using the tab view, you can display anything on your blog, for example, featured posts, recent posts, recent comments, featured category, shoutbox, popular posts, product promotions, and others. You can see the tab view demo in this blogger blog. In this tutorial we will learn, how to make the tab view widget blogspot.

This tab view version was developed by Ilya S. Lyubinskiy. You can see / download the original script on JavaScript Kit website (tab view css, javascript and HTML files). If you don't want to download them, here I provide you the code, just copy paste the code below in to your template. In this tutorial, I'll show you how to install the tab view script in to your blogger blog, very easy... just copy paste the code... needs 3-5 minutes to install Tab View Widget for blogger / blogspot.

1. Install the CSS code
Log in to blogger.com account
Go to Layout - edit HTML - Click Expand Widget Templates (don't forget to backup your template)
Copy the CSS code below, and paste it before ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}

div.TabView div.Tabs a
{
float: left;
display: block;

width: 90px;
text-align: center;

height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000;
border-bottom-width: 0;

text-decoration: none;
font-family: "Arial", Times New Roman, Serif;
font-weight: 900;
color: #000080;
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #BDBDBD;
}

div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 1px solid #000000;
overflow: hidden;
}

div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

2. Install JavaScript Code
I have saved the javascript code and host it into google sites, it works well... Just copy this javascript code and paste it before </head>

<script src='http://sites.google.com/site/angga123site/tabview.txt' type='text/javascript'/>

Save your template !!!

3. Create Tab View Widget
Go to Layout - Page Element - Add a Gadget - Choose HTML/JavaScript
Copy and paste the code below

<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">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

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

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

Code marked with red color is the contents of the tab view page. You can change / fill it with links, images, banners, script, etc.

Click "Save" to finish. View your blog to see the result for Tab View Widget.