How to make Tabview Sidebar on Blogger

Tab view sidebar  is an effective way to make the sidebar content of his blog that much but a little space for content. There are several tutorials on creating the tab view of the sidebar for Blogger. But generally, these tutorials hard to put into practice and may confuse some bloggers.

Here, you'll find the easiest way to make the tab view to the Blogger sidebar. Some things that could be considered to be excess of the sidebar tabs here are How to make Tabview Sidebar on Blogger :

• Easy to install
• No need to edit the html in the sidebar.
• Automatically displays the widgets that you put in the tabs.
• Free widget determine what is going to put in the tabs.
• After the tutorial done, the widget directly editable from the Page Elements.

First, go into your Blogger account, then click Edit Layout and continued with HTML. Copy the CSS code below before the code ]]></b:skin> :

/* Tabbed Sidebar Widgets--------------------------------- */.widget-wrapper2{border:1px solid #494e52;background-color:#636d76;padding:8px;}.widget-tab {-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-topright:5px;-webkit-border-radius-bottomleft:5px;-webkit-border-radius-bottomright:5px;-webkit-border-radius-topright:5px;background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important;border:1px solid #CFCFCF;font-family:Arial,Helvetica,sans-serif;padding:15px !important;}.widget-tab ul {margin:0px;padding:0px 20px 0px 20px;}.widget-tab ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:10px;padding-bottom:10px;font-size:13px;}.widget-tab ul li:last-child {border-bottom:none;}.widget-tab ul li a {text-decoration:none;color:#3e4346;}.widget-tab ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;}.tab-content ul li a:hover {color:#a59c83;}.tab-content ul li a:hover small {color:#baae8e;}.active-tab{background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important;border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;border-style:solid !important;border-width:1px 1px 2px !important;color:#282E32 !important;}ul.tab-wrapper {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}ul.tab-wrapper li {-webkit-border-radius-topleft:5px;-webkit-border-radius-topright:5px;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;border:1px solid #464C54;color:#FFFFFF;cursor:pointer;display:inline;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9px;font-weight:bold;line-height:2em;list-style-image:none !important;list-style-position:outside !important;list-style-type:none !important;margin-right:1px;padding:8p 14px;text-align:center;text-decoration:none;text-transform:uppercase;

Next copy and paste the code below the above code  </head> :

<!-- jQuery Call -->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

<!-- End of jQuery Call -->

<script type="text/javascript">

var starttab=0;

var endtab=2;

var sidebarname="sidebar1";

</script>

<script type="text/javascript" src="http://tab-for-blogger.googlecode.com/files/bloggertabv1.0-min.js"></script>

In the code there are parts that can be changed in accordance with needs:

var starttab=0;

var endtab=2;

var sidebarname="sidebar1";

Finally save template.

In short, startab is the first number you select the widget, ranging from 0. endtab is the last number of widgets that you select. sidebarname sidebar id you are, generally called "sidebar", but it could be you wear a different id.

Finally, live determines where the widget would enter to sidebar tab. The trick is to sort the widgets on the part of Page Element. Examples like the image below:

If you want to see how the end result of this blogging tips can be checked here That's it, tips How to make Tabview Sidebar on Blogger.