Menu em abas com botões diferentes e efeito JQuery

DEMO

Para colocar sua sidebar em forma de tabela com efeito vá até o HTML de seu blog e antes de:


]]></b:skin>

Cole o código abaixo.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI

Código em vermelho representa a largura do menu

/*Tab-Sidebar --------------------------------------------------*/
.widgets{
background: #ccc;
float:left;
margin: 10px 0px 0 10px;
width:318px;
}

ul.tabnav{
margin:0;
padding:0;
width:318px;
}

.tabnav li{
background: #fff;
display:inline;
float:left;
list-style:none;
margin: 1px 0px 1px 1px;
padding: 2px 0px;
}

.tabnav li a{
color:#fff;
display:block;
font-size:88%;
font-family:Arial, Tahoma, Verdana;
font-weight:bold;
margin:2px 2px 0 2px;
outline:none;
padding:4px 3px 1px 3px;
text-transform:uppercase;
}
.tabnav li a:hover,.tabnav li a:active,.tabnav li.ui-tabs-selected a{
background:#ccc;
color:#333;
text-decoration:none;
}
.tabdiv{
border: 2px solid #ccc;
background: #fff;
padding:0 0 0 5px;
margim: 0 0 0 20px;}
.tabdiv h2{display:none;
}
.tabdiv ul{
list-style:none;
padding:5px 0px;
}
.tabdiv li{
border-bottom:1px dashed #808080;
line-height:1.35em;
margin:2px 0 2px 0;
padding:0 0 2px 3px}

.tabdiv li a:link,.tabdiv li a:visited{
overflow: hidden;
font-size: 15px;
color:#808080;
}

.tabdiv li a:hover {
text-decoration:none}

.ui-tabs-hide{
display:none}

Agora depois de:

]]></b:skin>

Cole este próximo código

<!--Tabsidebar-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.1&quot;);
google.load(&quot;jqueryui&quot;, &quot;1.5.3&quot;);
</script>
<script type='text/javascript'>
//<![CDATA[
// <!-- Tab Sidebar -->
$(document).ready(function() {
$('#tab-sidebar> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});
//]]>
</script>

Agora procure por:

<div id='sidebar-wrapper'>

E antes dele cole:

<div class='widgets' id='tab-sidebar'>
<ul class='tabnav'>

<!--  ALTERE AQUI OS TÍTULOS DA SIDEBAR EM ABAS  -->
<li class='tab1'><a href='#tab1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEJYkE_BUxwIfQ1KD8KMlteyMnA7OfWYb35O91qO9ocnv-eUwVRv9DR2QjfaYKXFGujT9mk7wzRgo2Bv8mpe6BZL0MLWKGM27YmOK44ZCxTmKHR4qnFNk_CHKmSxUso5SAc0cagMf4__0/s1600/Copy.png'/> </a></li>
<li class='tab2'><a href='#tab2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCgqT0M7er4YSKOP5k2kh6kUI4H8WuxKkttLcKJdIdiHo6aiQIyZXM8NYSX7xlOpHTTcLQEB9zwcRqyyUW-eLHJr00dmOT2FEuo6ZnyvsSoVmxMmJokRWN0SBLj9EsY2Kg6MSAVhJU1EM/s1600/Favourites.png'/></a></li>
<li class='tab3'><a href='#tab3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNMfMyaARx7UHep9-lKFtkIRInpDFPofG9rU0ejso6Z6U7IrI4XHI2lUlG64ryc2_7z8hjPM2Y8E7dLde10K6I20LIR4Cc5UcQZmLPYKufVFgFuipDAtGvDfE7RGe4dkaoJpkcwjgxPgc/s1600/Yellow+tag.png'/></a></li>
<li class='tab4'><a href='#tab4'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfq98kylKD0S7NdZld3YwHwNVQST2jy0k-YGZO4hyphenhyphenCpSCtfmIURaHbfWC6K8rFTxcRSbFmQMsHCmrtHASAZvSQcYH-RWBCVwaDZWZPUZJnKZIFShoqNaLKh5oHHIOepsX4OoGtNMoUK6k/s1600/Comment.png'/></a></li>
<li class='tab5'><a href='#tab5'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9cET2D5uIwqrqJPB2Aw9DBSeyRkFrwljiObksdMhWTuw4Kzl1tpQJL6LZh646O1hjxb3dhYeiKuSPq0I0xwBolWcfODStnWv1IexJx-bmSl5ceB67c8Ov0OEwA5QHpieyw6LCNhAhQ0k/s1600/Text.png'/></a></li>
<li class='tab6'><a href='#tab6'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh64tqqw0RC7cRhOg2RL_dRbyndtsJWFY1EXEu9nA4e8WtiaSYNG_J1sOZm1DFJfHUXZDWJKLP57ULNw4vYRRYaD4iuciSzp4sQZAXc1PLgHshHfVN6kyv28LPPyNy9p273MFNR0EEvGLI/s1600/E-mail.png'/></a></li>
<li class='tab7'><a href='#tab7'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLoi0bc_BLECHdwH3yLKmTjgPm8pWz6H7agsvf1Ff-2eCody0Dfnpe3tmjwiBLOy-I9r-VIDQU64ykbQqk0BFZIKW6uLnQ9gjIBYe_hLMv8gUsjq3YW1iQK7-vLV1qmszBjnRygf14ETY/s1600/Folder.png'/></a></li>
<li class='tab8'><a href='#tab8'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi89CODpUSBCZCOMX95wflVln9K33F7JedX2elm5nlEqVzyWcqrXPpJyu7zq0oAMaIFDHHk3b16jGU_wSx0uN00_1lCWZfOEd9xu1t5HVPLGsdJOua_Wb9TXi4jfqBvgHny-74_KxlAFwU/s1600/Diagram.png'/></a></li>
<li class='tab9'><a href='#tab9'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4Oy1Lf6TgrMPRnAfGgwZ70qiEiz03AbwXQ7tipLRyfO-xd0WSUufksnDISXwaqVLs3ejQSvSemqQYK5cTCbWQxWLuHo1nXhCM0OnbeecflePttDcBzNLOCJrB415CKIAKu9IieYty-0/s1600/Blog.png'/></a></li>
</ul>

<div class='clear'/>
<div class='tabdiv' id='tab1'>
<b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'>
<b:widget id='PopularPosts2' locked='false' title='Postagens populares' type='PopularPosts'/>
</b:section><!-- /end sidebar-tabs-1 -->
</div>  <!-- /end tab1 -->

<div class='tabdiv' id='tab2'>
<b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'>
<b:widget id='BlogList123' locked='false' title='Minha lista de blogs' type='BlogList'/>
</b:section> <!-- /end sidebar-tabs-2 -->
</div> <!-- /end tab2 -->

<div class='tabdiv' id='tab3'>
<b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'>
<b:widget id='Label2' locked='false' title='Labels' type='Label'/>
</b:section> <!-- /end sidebar-tabs-3 -->
</div> <!-- /end tab3 -->

<div class='tabdiv' id='tab4'>
<b:section class='sidebar-tab' id='sidebar-tabs-4' preferred='yes'>
<b:widget id='HTML122' locked='false' title='Últimos comentários' type='HTML'/>
</b:section> <!-- /end sidebar-tabs-4 -->
</div> <!-- /end tab4 -->

<div class='tabdiv' id='tab5'>
<b:section class='sidebar-tab' id='sidebar-tabs-5' preferred='yes'>
<b:widget id='PageList2' locked='false' title='Páginas' type='PageList'/>
</b:section> <!-- /end sidebar-tabs-5 -->
</div> <!-- /end tab5 -->

<div class='tabdiv' id='tab6'>
<b:section class='sidebar-tab' id='sidebar-tabs-6' preferred='yes'>
<b:widget id='HTML103' locked='false' title='Email' type='HTML'/>
</b:section> <!-- /end sidebar-tabs-6 -->
</div> <!-- /end tab 6-->

<div class='tabdiv' id='tab7'>
<b:section class='sidebar-tab' id='sidebar-tabs-7' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Arquivo do blog' type='BlogArchive'/>
</b:section> <!-- /end sidebar-tabs-7 -->
</div> <!-- /end tab 7-->

<div class='tabdiv' id='tab8'>
<b:section class='sidebar-tab' id='sidebar-tabs-8' preferred='yes'>
<b:widget id='Followers2' locked='false' title='Seguidores' type='Followers'/>
</b:section> <!-- /end sidebar-tabs-8 -->
</div> <!-- /end tab 8-->

<div class='tabdiv' id='tab9'>
<b:section class='sidebar-tab' id='sidebar-tabs-9' preferred='yes'>
<b:widget id='Subscribe1' locked='false' title='Inscrever-se' type='Subscribe'/>
</b:section> <!-- /end sidebar-tabs-9 -->
</div> <!-- /end tab 8-->


<div class='clear'/>
</div> <!-- /end tab-sidebar -->