17 de jul. de 2011

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


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


11 comentários:

  1. Fiquei confuso na parte que diz:

    Agora procure por:

    ]]>

    E substitua por este código abaixo:

    É pra substituir o ]]> pelo código ou colocar o código acima ou abaixo dele?

    abraços

    ResponderExcluir
  2. @JC - InformáticaDicionário:

    v.t. Pôr no lugar de: substituir móveis velhos por novos.
    Suprir uma coisa por outra: o mel substitui o açúcar.
    Ocupar o lugar de outro, suceder-lhe: substituir o prefeito.
    Mudar, trocar (por outro): substituir um empregado.
    Preencher momentaneamente o posto de outro: substituir um funcionário doente.

    ResponderExcluir
  3. Funciona.
    O problema é que todo o espaço da sidebar acima da divisão em duas colunas ficará em abas!

    Creio que melhor seria criar mais um espaço na sidebar para as abas, mantendo o espaço acima das duas colunas de widgets.

    ResponderExcluir
  4. ola, o fundo fica branco msm ou da pra deixar preto alterar a cor?

    grato

    ResponderExcluir
  5. kkk.. Não saber o que é substituir é o fim, ui...

    Mas, Elkeeeee.... estou amando esses novos tutoriais. Você é fera! \o/

    Beijinho e muita paz!

    ResponderExcluir
  6. @ForceTurbo acabei de destacar em cores onde você pode trocar as cores do menu. Vá testando até ficar satisfeita. Abraços

    ResponderExcluir
  7. valeu tava procurando isso a um tempão, nenhum dava certo. mas o seu deu : )

    ResponderExcluir
  8. Ola

    Muito legal esse post, coloquei no meu blog e ficou 10. troquei algumas coisinhas e funcionou perfeito.
    se quiser conferir brasilegito.blogspot.com

    Seus posts sao otimos, sempre to pegando umas dicas com vc aqui. parabens!

    um abc e obrigada pelo empenho, sem vc nao teria tantos blogs bonitos

    ResponderExcluir
  9. alguem pode me dar uma ajuda para otimizar o meu blog o link é rio-pardodeminas.blogspot.com

    ResponderExcluir
  10. Alguem pode min da umas dicas de como otimizar o meu blog o link é rio-pardodeminas.blogspot.com
    desde ja agradeço.

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube