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.

17 comments:

kre_thek said...

Thank vo share sob., hihihi., ini yang aq cari2 ., hehe

UPrinting said...

The tab view navigation allows for a simpler, cleaner, and less cluttered look. What's great with this is it allows for easier site navigation. Thanks for sharing this cool widget, very useful indeed! :)

Bryan said...

Hi, my name is Bryan, can i ask, how am i going to do for me to have two seperate tabview in my side bar. I already have one done according to the above step. I would like to have the second tabview for other category. What is the code i need to paste in?

Thanks a lot

Angga said...

Hi Bryan,
U just need to copy and paste the HTML code in step 3 into your new widget

Princely samuel said...

http://us.i1.yimg.com/us.yimg.http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gifcom/i/mesg/emoticons7/20.gifhttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif


nice content

i am adding to mu blog

comptechtips.blogspot.com

Princely samuel said...

works perfectly

Check it on my blog

comptechtips.blogspot.com

;;)

Mr. O said...

Absolutely immense I literally just used it on my site and it looks good

http://buyingairyeezys.blogspot.com/

I'm defo gonna put a link to your site on http://www.bloggertipsandtricks.com/

Can I just ask how did you get your navbar to look like your did, mine came out looking like a box which is fine for now but if I want to improve it to look like yours in a horizontal view and with the black background how do I do that.

angga said...

Hi Mr. O,
pls take a look to these posts
http://angga-weblog.blogspot.com/2009/04/how-to-put-adsense-link-unit-in-header.html

and

http://angga-weblog.blogspot.com/2009/08/adding-add-gadget-to-blogger-header.html

kenyorazzi said...

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

please help me on how to add widgets or links

SALMAN said...

Thanx buddy....

Doug Cloud said...

Nice tutorial and information, but this Nav bar stinks. Sorry, but it leaves a big white box below the "tabs" and doesn't incorporate very well into the Blog template.

Pat Dickens said...
This comment has been removed by the author.
Pat Dickens said...

Its great but I need seven tabs on horizontal not just three. Any ideas? So far your is the only one to work

angga said...

@ Pat Dickens
You can put it on header html gadget (if ur template can't add a new gadget on header section, u have to customize it, go here : http://angga-weblog.blogspot.com/2009/08/adding-add-gadget-to-blogger-header.html)

About 7 tabs, just add the tab tag, for example:
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
<a>Tab 4</a>
<a>Tab 5</a>
<a>Tab 6</a>
<a>Tab 7</a>

and add this section up to 7x

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
...
...
...to...
<div class="Page">
<div class="Pad">
Tab 7.1 <br />
Tab 7.2 <br />
Tab 7.3 <br />
</div>
</div>

of course u have to change width and height to be fit on ur header gadget :)

NovemberSunflower said...

What if you have a mac? I can't install the javascript code thing you have on there.

Angga said...

hi November
I don't have mac computer so I'm sorry i can't help you :(

Roxx said...

Thanx it's WORKing :)

Post a Comment

Rules:
Comment must be in English, otherwise will be not listed.
Spam comment will be deleted, so don't waste your time for it.
Respect yourself, respect others.