Colocar sidebar em forma de menu em abas com efeito jquery no novo Blogger

 DEMO

Para quem usa o novo modelo do Blogger ou abriu a conta depois de julho de 2010, muitos dos hackes e dicas deste blog não funcionam, mas conforme comentei, devagar vou refazendo as dicas. Trago agora pra vocês a maneira certa de aplicar o menu em abas para o novo Blogger, desde que o seu template seja o Simple, se não for, mude-o para este modelo.

Aconselho que antes salve uma cópia de seu blog. Para isso, em modelo, clique em editar modelo, depois Expandir modelos de widget, copie tudo que estiver lá e guarde, colando no bloco de notas, ok ? Não me responsabilizo por erros.

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. 

A primeira coisa a fazer é entrar no Blogger, clicando AQUI




Feito isso, vá seguindo as imagens.

Clique na setinha para abrir a janela

Ao abrir a janela, clique em Modelo

Clique em personalizar

Clique em Layout----->Selecione como a imagem------>Aplicar blog---------> Voltar para o blog

Agora no pé da página, clique em Editar modelo

Agora procure por:

]]></b:skin>

E substitua (TROQUE!)  por este código abaixo:(para trocar cores e imagens, basta modificar os códigos em azul e rosa)

/*Sidebar table---------------------------------*/
.widget-wrapper2 {
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
    }
    .widget-tab {
     margin:0 0 -1px 0;
    -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://www.blogblog.com/1kt/transparent/white80.png) repeat-x scroll left bottom !important;
    border:1px solid #CFCFCF;
    font-family:Arial,Helvetica,sans-serif;
    padding:10px !important;
    }
    .widget-tab ul {
    margin: 10px;
    padding:0px 5px 0px 5px;
    }
    .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://www.blogblog.com/1kt/transparent/white80.png) 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: 26px;/*chega o widget para baixo*/

    }
    ul.tab-wrapper li {
   bottom: -8px;
    -webkit-border-radius-topleft:5px;
    -webkit-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    background:#191919 url(http://www.blogblog.com/1kt/transparent/white80.png) repeat-x scroll left top;
    color:#fff;
    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:18px 14px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    }
]]></b:skin>

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

Salve !

Agora procure por:

</head>

E abaixo dele colo o código abaixo:

<!-- Sidebar table -->
<script type='text/javascript'>
    var starttab=0;
    var endtab=3;
    var sidebarname=&quot;sidebar-right-1&quot;;
    </script>
  <script type='text/javascript'>
//<![CDATA[
var home_page_tab=location.href;if(home_page_tab.indexOf("blogger.com")!=-1){var starttab=-1;var endtab=-1}var $jtab1=jQuery.noConflict();$jtab1(document).ready(function(){var a="<div class='widget-wrapper'><ul class='tab-wrapper'></ul>";for(i=starttab;i<=endtab;i++){$jtab1("#"+sidebarname+" .widget h2").eq(i).hide();$jtab1("#"+sidebarname+" .widget").eq(i).hide();$jtab1("#"+sidebarname+" .widget .widget-item-control").eq(i).hide()}$jtab1("#"+sidebarname+" .widget").eq(starttab).before(a);i=0;j=0;$jtab1("#"+sidebarname+" .widget > h2").each(function(){if(i>=starttab&&i<=endtab){var b=$jtab1(this).text();$jtab1("#"+sidebarname+" .tab-wrapper").append("<li class='tab' id='tabid"+sidebarname+j+"'>"+b+"</li>");j++}i++});i=0;j=0;$jtab1("#"+sidebarname+"  .widget").each(function(){if(i>=starttab&&i<=endtab){$jtab1(this).attr({id:"widgtabid"+sidebarname+j});$jtab1(this).addClass("widget-tab");j++}i++});$jtab1("#"+sidebarname+" .tab").click(function(){$jtab1("#"+sidebarname+" .widget-tab").slideUp();$jtab1("#widg"+$jtab1(this).attr("id")).slideDown();$jtab1("#"+sidebarname+" .tab").removeClass("active-tab");$jtab1(this).addClass("active-tab")});$jtab1("#"+sidebarname+" .tab:first").click()});

//]]>
</script>
<!-- FIM Sidebar table -->

Pronto.

Agora vá em Layout e arraste os widgets que você quer no menu