Cursos 24 Horas - Cursos 100% Online com Certificado

Menu em abas no Blogger - Organize seus Gadgets

72 Comentários Autor : Notícia e blog 02 novembro 2009



Uma forma fácil de deixar seus Gadgets organizados é colocar um menu em abas, que além do mais diminui um pouco o espaço da sidebar, e deixa seu blog com uma cara mais profissional.Tem blogs que são cheios de Gadget, é previsão do tempo,músicas,rádios,banners e outros, para organiza-los o menu é muito útil.veja abaixo como fazer no seu blog:


1. Acesse seu painel do Blogger
2. Vá em "Layout"->"Editar HTML"
Faça um backup antes de começar, se não tiver muita experiência tente em um blog de testes.
3. Procure pelo código abaixo "Ctrl e F":
</head>
Antes do código acima, adicione o código seguinte:
<!-- JavaScript Menu em Abas -->
<script src='http://noticiaeblog.googlecode.com/files/abas.js' type='text/javascript'/>

4. Agora vamos adicionar CSS, procure código seguinte:
]]></b:skin>
Antes do código acima adicione o código abaixo:
/*--------Tabber ---------------------------------*/
#tabsidebar-wrapper{width:
400px;float: right;border: 1px none #CCC;margin-bottom: 15px;}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {border-bottom:2px solid #5B0;margin-bottom: .3em;padding: 0;line-height:1.2em;}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 5px;}
ul.tabbernav{margin:0;padding: 8px 0;border-bottom: 1px solid #CCC;}
ul.tabbernav li{list-style: none;margin: 0;display: inline;}
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid #CCC;border-bottom: none;background: #EEE;text-decoration: none;}
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li a:hover{color:#00F; background: #CCC; border-color: #CCC;}
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}
ul.tabbernav li.tabberactive a:hover{color: #369;background: #FFF;border-bottom: 1px solid #FFF;}
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}

O número em vermelho refere-se a largura do menu, ajuste essa largura de acordo com se Layout.
5. Agora vamos adicionar o menu a sidebar, procure pelo código abaixo:
<div id='sidebar-wrapper'>
6. Antes do código acima adicione o seguinte código:
<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab1' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab2' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' maxwidgets='1' showaddelement='yes'/>
</div>
</div></div><!-- Fim da tabsidebar-wrapper-->

7.Salve as alterações e vá para "Layout"->"Elemento da página"

Você deverá ver um menu como esse da imagem


Adicione os Gadgets desejados e veja o resultado :-)


    72 Comentários

    Rato disse...
    6 de novembro de 2009 13:51 #

    N aconteceu nda o.o"

    Notícia e blog disse...
    6 de novembro de 2009 14:11 #

    @Rato pode ser algum script que você utiliza exemplo o jquery ele pode dar conflito.

    Lucas Jordison disse...
    6 de novembro de 2009 23:07 #

    Era realmente o que eu precisava ! Muito obrigado, vou testa-lo e dizer o resultado, parabéns !

    Marilucia disse...
    7 de novembro de 2009 13:31 #

    Não deu certo, fiz exatamente como disse, o que apareceu foram 3 linhas de adicionar elemtos de paginas, era para ter aparecido como tá ai, na coluna lateral e não em todo o blog, eu utilizo jquery, será q é isso? Me ajuda.

    Wagner Lemos disse...
    10 de novembro de 2009 22:37 #

    Fiz passo a passo como foi pedido!
    E não deu certo uma das minhas barras laterias foi paralá em baixo.. rsss
    Nos ajude a por essas abas... To pesquisando a dias e esse tutorial é o mais facil que encontrei!

    Notícia e blog disse...
    11 de novembro de 2009 13:25 #

    @Wagner Lemos , Olá você tem que diminuir a largura. Para fazer isso é só diminuir o código em vermelho. Se achar que três abas são muito remova este trecho:

    <div class='tabbertab'>
    <b:section class='sidebar' id='tabbertab3' maxwidgets='1' showaddelement='yes'/>
    </div>

    Obrigado pelo comentário! :-)

    Marilucia disse...
    13 de novembro de 2009 00:11 #

    Oi, vc não respondeu a meu questionamento, eu fiz exatamente como disse, mas não deu certo!

    Notícia e blog disse...
    13 de novembro de 2009 05:47 #

    @Marilucia , Se fez exatamente como está ali pode ser algum script que está entrando em conflito tem remover e faça o teste.

    Marilucia disse...
    29 de novembro de 2009 23:58 #

    Oi, mas que script, não entendo mto disso, se puder me ajudar ficarei grata

    http:/blogando-noticias.blogspot.com

    Notícia e blog disse...
    1 de dezembro de 2009 17:16 #

    @Marilucia , olá descobri o erro mas se quiser colocar o menu em abas vai ter que retirar o resumo automático

    Marilucia disse...
    5 de dezembro de 2009 23:36 #

    É mesmo? terei q retirar o resuno autimatico, ai vai desconfigurar meu blog buaaaaaaaaaa, não tem como fazer sem tirar o resumo? ajude-me, obrigada

    Loka por Musik disse...
    11 de dezembro de 2009 08:05 #

    não deu certo
    fiz td, mas quando fui para os elementos de pagina não vi esses numeros
    http://noticiassobrerocknroll.blogspot.com/

    ●๋•By Vinicius●๋• disse...
    13 de dezembro de 2009 11:35 #

    aqui também não deu,não tem como colocar outro jeito de adicionar um gagdet desse jeito ?

    Anônimo disse...
    27 de dezembro de 2009 10:52 #

    Podia ser mais completo, minha barra lateral apareceu embaixo da última postangem

    Davi disse...
    24 de janeiro de 2010 15:05 #

    Aqui não aconteceu nada, fiz varias vezes e nada.

    dicaseblog disse...
    26 de fevereiro de 2010 13:18 #

    Depois de alguns ajustes no template e no codigo, finalmente consegui, muito obrigado por esta dica e continui assim.
    Valeu mesmo...

    Karen disse...
    25 de março de 2010 12:50 #

    Eu vi esse tutorial, e achei o mais facil da net, fiz tudo direitinho mais e foi adicionado as barras mais não ficaram lado a lado (em abas), ficou uma embaixo da outra.
    Será o quê, que eu fiz de errado?

    Notícia e blog disse...
    25 de março de 2010 13:06 #

    @Karen, Erros corrigidos refaça o tutorial e veja se vai funcionar ok?

    Marlinho disse...
    31 de março de 2010 14:19 #

    Cara naum consegui....fiz igualzinho vc disse mas os numeros aparecem do lado direito um em cima do outro

    Wagner Lemos disse...
    28 de abril de 2010 10:42 #

    Até que fim consegui!!!!
    Só queria uma ajuda se for possivel!

    Gostaria de coloca-lo embaixo do cabeçalho...
    Como faço?

    Desde já agradeço a atenção dispensada!

    Faxineiro disse...
    2 de maio de 2010 15:32 #

    Eu qero mudar os nomes 1,2 e 3.... Como faço isso?

    Notícia e blog disse...
    2 de maio de 2010 16:21 #

    @Faxineiro, é so você dar um nome para o widget que for adicionar.

    Faxineiro disse...
    2 de maio de 2010 16:28 #

    Eu dei o nome, só que mesmo ela com nome em cima fica 1,2 e 3 ainda

    Secrets of Sagrado disse...
    6 de maio de 2010 16:08 #

    Ameiiiiiiiiii! Deu super Certo! vlw

    LordEderson disse...
    12 de maio de 2010 19:34 #

    Oi Amigo.
    Gostaria de saber como faço pra colocar esse menu no post?

    Abraço

    Notícia e blog disse...
    14 de maio de 2010 12:12 #

    @LordEderson, olha no post não há como pois estes código servem apenas para o HTML.

    kaytros disse...
    29 de maio de 2010 16:14 #

    Nao achei o codigo 5, como faço

    Notícia e blog disse...
    29 de maio de 2010 16:17 #

    @Kaytros, no seu caso você deve inserir abaixo de:
    <div class='sidebar section' id='sidebar-left-1'>

    kaytros disse...
    3 de junho de 2010 16:59 #

    ainda nao encontrei a linha referida

    Colt' disse...
    17 de junho de 2010 23:41 #
    Este comentário foi removido pelo autor.
    Colt' disse...
    17 de junho de 2010 23:42 #

    no meu blog nao tem essa ultima parte div id='sidebar-wrapper', poderia me ajudar por favor, dizendo onde eu posso por o ultimo codigo? obrigado
    www.coltcss.blogspot.com

    Franklin disse...
    7 de julho de 2010 17:56 #

    No meu deu certo, no etanto em meu templante a barra de navegação é do lado esquerdo. E o menu ficou do lado direito. Como posso mudar?

    Notícia e blog disse...
    7 de julho de 2010 21:23 #

    @Franklin
    Qual o endereço do seu blog para que eu possa verificar.

    Marcky disse...
    27 de julho de 2010 14:04 #

    No meu não está dando porque não consigo achar o ultimo código.
    e não sei direito como colar os códigos si alguém puder me ajudar agradeço.

    Notícia e blog disse...
    28 de julho de 2010 10:23 #

    @Marcky
    Qual o seu blog para que possa verificar?

    Colt' disse...
    5 de agosto de 2010 19:32 #

    no meu blog nao tem essa ultima parte div id='sidebar-wrapper', poderia me ajudar por favor, dizendo onde eu posso por o ultimo codigo? obrigado
    www.coltcss.blogspot.com

    Notícia e blog disse...
    6 de agosto de 2010 13:33 #

    @Colt'
    Coloque abaixo de div id='lsidebarw'

    Elis Felicio disse...
    31 de outubro de 2010 12:24 #

    Não consigo achar de jeito algum a linha 5 para inserir o código 6, que acredito ser o mais importante.(div id='sidebar-wrapper)

    Nem nenhum cógido parecido! meu blog é: http://fmodaclube.blogspot.com/

    em qual linha posso inserir o código 6?

    Michelle Almeida disse...
    16 de novembro de 2010 13:17 #

    No meu não aparece div id='sidebar-wrapper' e nem o de div id='lsidebarw'.

    Onde eu acho isso????

    Diego Henrique disse...
    25 de dezembro de 2010 17:41 #

    No meu não deu certo, eu não encontro "div id='sidebar-wrapper'"
    Se der dê uma olhada no meu blog: www.worldsimsdown.blogspot.com

    Saneli Confecções, Arte e Serigrafia disse...
    28 de dezembro de 2010 15:45 #

    Eu também não encontro eles... pode ser por causa do IE?

    Catia Sousa disse...
    4 de janeiro de 2011 16:40 #

    também não encontrei o passo 5

    Abraços e obrigada pelo tutorial.

    Israel disse...
    12 de janeiro de 2011 01:39 #

    Aki
    No meu, eu naum consegui achar isso __ div id='sidebar-wrapper' __
    Oque devo fazer??
    Me ajuda por favor, preciso muito da ajuda!!Valeu!!

    Fernando Richter disse...
    17 de janeiro de 2011 14:06 #

    Caro,

    No meu não deu certo. As linhas aparecem uma embaixo da outra e tudo que eu tinha do lado direito do blog passaram para debaixo da última postagem. o que eu devo fazer? Me ajuda, por favor?

    tentoaprender disse...
    21 de janeiro de 2011 16:33 #

    Caraca ja tentei de todas as formas colocar o menu em abas mas nunca funciona não sei exatamente o que acontece....
    estalei o template do compulsivo ja tinha o menu em abas naum funcionou retirei o menu em abas que ele tinha e tentei estalar o seu e naum funciona
    mostra o menu mas naum mostrar o elementos de pagina como na imagem lá encima 1, 2 ,3 pra poder por os gadgets em nenhuma das minhas tentativas apareceu os numeros para adicionar os gadgets....o menu aparece no blog mas na area de configurar os elementos de pagina não aparece....ja quebrei a cabeça e naum conseguir da uma ideia ai por favor se vc puder visitar la e olhar talvez vc consigar entender....
    brigado desculpa tantas palavras desesperadas....thanks

    Álefe Souza disse...
    11 de março de 2011 10:10 #

    No meu blog tbm não tem esse ultimo código. www.filhodocoracao.blogspot.com. Dá uma olhada por favor??

    Batista disse...
    15 de março de 2011 22:46 #

    Acabei de implementar no meu blog. No elementos da páginas ficou meio estranho mais o código funciona perfeitamente. Valeu!!!!

    Vitinho - TYF disse...
    16 de março de 2011 03:38 #

    powww
    o meu deu certo
    mais no meu elementos de pagina nao ta aparecendo os gadget pra configurar
    pq isso?

    vlw

    Vitinho - TYF disse...
    16 de março de 2011 03:55 #

    onde vou achar os gadget pra colocar? estranho ;/

    Vitinho - TYF disse...
    16 de março de 2011 22:20 #

    jah no template do blog simples tb nao acho o 5º codigo ;/
    aff

    oq eu faço?

    Elisabete de Mello disse...
    24 de abril de 2011 16:18 #

    Olá. No meu blog não tem a linha div id='sidebar-wrapper'

    En que local adiciono o código?
    Grata.

    AbuseUse Artes disse...
    16 de maio de 2011 15:49 #

    galera entra nesse link aqui ele ensina fácil fácil como fazer um menu horizontal ou aba lado a lado, muito bom.

    http://www.dicasparablogs.com.br/2009/05/links-lado-lado-menu-horizontal.html

    Elder disse...
    14 de junho de 2011 20:47 #

    No meu não aparece o último código , por isto não consegui...

    Se alguem puder ajudar...grato

    Madalena Pereira disse...
    25 de junho de 2011 08:58 #

    No meu blog também não aparece o codigo 5 e nem o outro que você disse...será que pode me ajudar???
    meu blog: http://sonhodemulherbsb.blogspot.com/
    meu e-mail: madinhakawaiigirl@hotmail.com

    Obrigada pela ajuda!!!

    Bєℓℓy ツ disse...
    12 de julho de 2011 23:08 #

    não consigo encontrar o código 5.. poderiam me ajudar?

    Isa disse...
    30 de julho de 2011 00:25 #

    Não consigo encontrar o código 5 me ajude!!!!

    Anônimo disse...
    2 de setembro de 2011 16:31 #

    Dica inválida....Deu mais erros do que acertos.

    By Biló disse...
    6 de setembro de 2011 17:58 #

    Oi! Fiz tudo certinho e não aconteceu nada :(
    Vc pode me ajudar?
    www.by-bilo.blogspot.com
    Muito obrigada!!!

    Sr. X disse...
    22 de setembro de 2011 19:54 #

    Não consigo executar o último passo. Na guia "Elementos da página", não aparece o "1, 2, 3", como na imagem. É possível adicionar diretamente pelo html?

    Sr. X disse...
    22 de setembro de 2011 19:55 #

    @Sr. X

    http://srx269.blogspot.com/

    Anônimo disse...
    17 de novembro de 2011 23:44 #

    Ola, boa noite! Estive lendo seu site e ele é bastante elogiado, acabei de ultilizar a dica do botão curtir..ficou ótimo. Mas na verdade estou a procura de uma coisa e não consigo achar a dias!
    Gostaria de saber se você pode me ajudar.
    Sgeuinte: Fiz abas no meu do meu blog. Até aí OK. Mas agora eu queria fazer mais postagens neles. Ele só me dá o direito de fazer uma postagem por ser uma ABA - página? TOda vez que vou postar só me dá o direito de postar na ABA principal, existe algum meio de fazer mais postagens em abas criadas como páginas no menu do blog?
    Obrigada!

    Lótus Informática disse...
    18 de fevereiro de 2012 17:34 #

    Olá bloggueiros ...procuro parcerias através de banners ou link.
    Meu blog é novo, mas está tendo muitas visitas e membros,
    http://informaticalotus.blogspot.com/
    convido a todos..abrços. Ricardo

    Ciência Através Dos Tempos disse...
    22 de março de 2012 14:44 #

    Olá gostei do post. Realmente deu certo. Porém eu gostaria que as páginas do menu ficasse em cima. Também quero colocar vários post em uma mesma aba, mas ele só me dá direito de postar uma vez. Você pode me ajudar?

    Juliane disse...
    19 de abril de 2012 22:29 #

    apareceu em baixo veja http://igrejaivc.blogspot.com.br/

    Juliane Tecna Winx disse...
    3 de junho de 2012 19:41 #

    Apartir da 5 instrução ñ consegui achar mais!! me ajudaaa..

    Lucas Coller disse...
    6 de julho de 2012 18:12 #

    O template que baixei Ja veio Com este menu e quero Tiralo Mas não consigos por favor me ajude ja pesguisei todos esses codigos mais não o acho eles para apagar.

    Link do blog:http://lucascoller-rct3.blogspot.com.br/

    Onde baixei o Template:http://www.custombloggertemplates.com/

    meugadget.net disse...
    2 de novembro de 2012 16:07 #

    Coloquei no meu blog e funcionou direitinho.

    'Steh'and'Bibi' disse...
    18 de novembro de 2012 14:55 #

    Não entendi nada KKKKKKKKKKKKKK

    Isabela Boni disse...
    10 de abril de 2013 20:25 #

    Até o 4° passo ele vai direitinho mais quando chega no 5° passo ele não acha o código que vc pois ai

    Zaraki Scofild disse...
    19 de junho de 2013 12:39 #

    tem como colocar esse sistema dentro da postagem , tipo o menu dentro da postagem e que abre varios conteudos n mesma postagem , tentei adaptar mas nao deu certo poderia me ajudar

    Iza F disse...
    16 de outubro de 2013 16:57 #

    Por favor! preciso de ajuda sobre um blog que preciso acabar e até já postei alguns trabalhos para venta mas como sou um zero a esquerda nisso rsrsrs, uma amiga que montou, nem entendo essas palavras técnicas e preciso organizar e decorar o bendito.
    Obrigada
    Iza

    Kaye Ino カイエ disse...
    11 de dezembro de 2014 13:58 #

    meu blog não tem div id='sidebar-wrapper

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.