Aprenda como :"» Colocar sidebar em forma de menu em abas com efeito jquery no novo Blogger"

fonte e créditos deste presente post:

templateseacessorios

 DEMO

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

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

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

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 por este código abaixo:

.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:8px 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 cole o código abaixo:

<script type='text/javascript'>

 var starttab=0;

    var endtab=2;

    var sidebarname=&quot;sidebar-right-1&quot;;

</script>

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/bloggertabv1.0-min.js' type='text/javascript'/>   

Pronto.

Agora vá em Layout 

e arraste os widgets

que você quer no menu

visitas

"Política de Privacidade - Google AdSense"