Make Tabview Widget On Sidebar

Blogging for some people is considered fun but what if in your blog's sidebar that we lacked a place to put various accessories blog that the number spelled out many hundreds and even until relatively narrow place on the sidebar for a variety of accessories.
Possible for the webmaster is not a problem but what about us that are still common in the world of blogs/websites? The answer is very clear confusion, dizziness etc.
To overcome the problem of shortage of places on the sidebar of many, many ways but in this edition I will show one way of making a sidebar widget that is similar to menus in neat rows on the blog that called with tabview widget you can http://mpthreelyrics.blogspot.com.
Whether we start it and please you follow these steps:

First Step
Please you must login to Blogger.
In Dasbor select menu Edit Html and uncheck the little box next to Expand Template Widget because it would appear the codes you a real headache and then search

]]></b:skin>

on your own template code. Press Ctrl + F and enter the code above, if you have found a copy and paste the CSS code below in the code earlier:

/*--- Menu Tab View --- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/*--- Main Menu ---*/
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px;/*--- menu width--*/
text-align: center;
height: 24px;/*--- height of the menu ---*/
padding-top: 3px;
margin-right: 4px;/*--- the distance between menus ---*/
vertical-align: middle;
border: 1px solid #CCC;/*--- menu border color ---*/
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif;/*--- menu fonts ---*/
font-size: 12px;/* large font menu */
letter-spacing: -1px;
background-color: #A4A4A4;/*--- menu background color ---*/
color: #FFFFFF;/*--- menu font color ---*/
-moz-border-radius-topleft:10px;
-moz-border-radius- topright:10px;
-webkit-border-top-left- radius:10px;
-webkit-border-top-right- radius:10px;
}
div.TabView div.Tabs a.Active {
background-color: # 888888;/*--- background color active menu ---*/
color: #FFFFFF;
}
div.TabView div.Tabs a:hover {
background-color: # 999999;/*--- menu background color hover ---*/
color: #FFFFCC;
font-weight: bold;
}

/* Main Grid */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC;/*--- main box border color ---*/
overflow: hidden;
background:url(" http://i563.photobucket.com/albums/ss76/peace_enes/bgtabview.gif");/*--- background main box ---*/
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 3 px 5px;
font-size: 12px;/*--- main box big letters ---*/
}

who is writing a description can sign in fox according to your wishes

Next place the code below under the code

]]></b:skin>

<script src="http://sites.google.com/site/myscriptku/script/viewtab.js" type="text/javascript"/>

Click the button marked Save Template

Step Two
Click on the menu Page Element then click on Add Gadget and select Html/JavaScript wait a moment, then copy and paste the following code into the box:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Info Menu 1"> Menu 1 </a>
<a title="Info Menu 2">Menu 2</a>
<a title="Info Menu 3">Menu 3</a>
</div>
<div style="width:99%;height:200px;" class="Pages">

<!-- Start Menu 1 -->
<div class="Page">
<div class="Pad">
Contents Menu 1.1<br/>
Contents Menu 1.2<br/>
Contents Menu 1.3. etc<br/>
</div></div>
<!-- End Menu 1 -->

<!-- Start Menu 2 -->
<div class="Page">
<div class="Pad">
Contents Menu 2.1<br/>
Contents Menu 2.2<br/>
Contents Menu 2.3. etc<br/>
</div></div>
<!-- End Menu 2 -->

<!-- Start Menu 3 -->
<div class="Page">
<div class="Pad">
Content Menu 3.1<br/>
Content Menu 3.2<br/>
Content Menu 3.3. etc<br/>
</div></div>
<!-- End Menu 3 -->
</div></div>
</form>

<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;">
<a href="http://ruangsc.blogspot.com/2009/07/cara-membuat-tab-view-widget-pada.html" target="_blank" title="Tabview Widget">Widget by SC Community</a></div>

Posts Info Menu 1, Menu, Contents Menu, etc. Can the fox according to your wishes, in addition you can also add another menu for your blog's sidebar is adequate, if not enough you can change the width menus at the CSS code that you put on top of ]]></b:skin> on your blog and HTML code that you put on sidebar your blog.

Save the results of your changes and see results.

Done, and good luck!

Posted in: