Menu em abas efeito Jquery

Vá até o HTML de seu blog e antes de ]]></b:skin> cole o código abaixo.

DEMO

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

/*Tab-Sidebar --------------------------------------------------*/
.widgets{
background:#fff;
float:left;
margin: 1px 0 10px 20px;
width:320px;}

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

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

.tabnav li a{
background:#590100;
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:#fff;
color:#333;
text-decoration:none}

.tabdiv{
border: 1px solid #590100;
background:#ffffff;
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 #590100;
line-height:1.35em;
margin:2px 0 2px 0;
padding:0 0 2px 3px}

.tabdiv li a:link,
.tabdiv li a:visited{
overflow: hidden}

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

.ui-tabs-hide{
display:none}

Agora acima <div id='sidebar-wrapper'>  de cole o próximo código:

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

<!--  ALTERE AQUI OS TÍTULOS DA SIDEBAR EM ABAS  -->
<li class='tab1'><a href='#tab1'>Destaques</a></li>
<li class='tab2'><a href='#tab2'>Comentários</a></li>
<li class='tab3'><a href='#tab3'>Arquivo</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='PopularPosts11' 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='Gadget11' locked='false' title='Recent Comments' type='Gadget'/>
</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='BlogArchive2' locked='false' title='Arquivo do blog' type='BlogArchive'/>
</b:section> <!-- /end sidebar-tabs-3 -->
</div> <!-- /end tab3 -->
<div class='clear'/>
</div> <!-- /end tab-sidebar -->

Agora abaixo de: ]]></b:skin> cole o próximo código.

<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>