Guide To Create Tab View/Multiple Tab Widget For Blogspot

Multi-tab widget is a very space efficient widget for blogspot. It not only saves the space but also makes you blog looks beautiful.

A multi tab view has the following looks:

The widget in the video has two tabs. You can have as many tabs as you want.

Steps:

1. Log onto Blogger. Go to Layout and click Edit HTML

2. On the Edit HTML page look for the code: ]]></b:skin>

3. Just before ]]></b:skin> paste the code given below:

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

div.TabView div.Tabs a {
 float:left;
 display:block;
 width:137px; /* Width top main menu - Tab Buttons*/
 text-align:center;
 height:24px; /* Height top main menu - Tab Buttons*/
 padding-top:3px;
 vertical-align:middle;
 border:1px solid #000; /*  border color of top main menu */
 border-bottom-width:0;
 text-decoration:none;
 font-family:"Times New Roman",  Serif; /*  font of top main menu */
 font-weight:900;
 color:#000; /*  font color of top main menu */
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {
 background-color:#F4F4F4; /* background color of the top main menu */
}

div.TabView div.Pages {
 clear:both;
 border:1px solid #6E6E6E; /*  Border color of the Content */
 overflow:hidden;
 background-color:#FFF; /* Background color of the Content */
}

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

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

Make sure you customize the css code above to match the widget color, height, width to your blogspot or site. Or if you wish you may keep it default.

4. Now find </head> at the same page where you were pasting the css code

5. Before the </head> code paste the code given:

<script src="http://www.yourjavascript.com/1550971914/tabview.js" type="text/javascript">

Save the template

6. Now comes the final part. Go to "Page Elements" tab and click "Add a Gadget" at any position you like. Click HTML/JavaScript on the page that popped up and paste the following code on to the text field:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 350px;" class="Tabs">
<a>LATEST POSTS</a>
<a>RECENT COMMENTS</a>
</div>
<div style="width: 276px; height: 250px;" class="Pages">

<div class="Page">
<div class="Pad">
<script src="http://bloggerhosting.appspot.com/serve/files.lifewg.googlepages.com/blogger-

widget.js"></script><script>var numposts = 10;  var showpostdate = false;  var 

showpostsummary = false;  var numchars = 100;   </script>   <script 

src="http://bdtechie.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-

script&callback=rp"></script>
</div>
</div>

<div class="Page">
<div class="Pad">
<script style="text/javascript" 

src="http://home.kpn.nl/oosti468/downloads/showrecentcomments.js"></script><script 

style="text/javascript">var numcomments = 5;var showcommentdate = false;var showposttitle = 

true;var numchars = 60;</script><script 

src="http://bdtechie.blogspot.com/feeds/comments/default?alt=json-in-

script&callback=showrecentcomments"></script>
</div>
</div>


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

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

Save and now you have the multiple tab widget...

Below is the basic code of a widget... From there you can customize it the way you like

<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.1 <br />
Content 1.2 <br />
Content 1.3 <br />
</div>
</div>

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

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

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

<script type="text/javascript">
tabview_initialize('TabView');
</script><span>widget by<a href="http://bloggerstop.net"> BloggerStop</a></span>

Enjoy the widget and happy blogging !