Como adicionar menu tabs widgets na sidebar do blog | Quero Dicas | Tutoriais para seu blogs


Como adicionar menu tabs widgets na sidebar do blog

A algumas semanas atrás o visitante Deyvidi Gonçalves, me informou que gostaria de adicionar este menu tabs widgets em seu blog Shiht zu Brasil. O mesmo desistiu, mas acabei ficando com vontade de repassar a vocês este tutorial. Pois é, aqui estou!

Não sabe do que eu estou falando? 
Veja o mesmo menu tabs widgets no final da sidebar do Quero Dicas, é este.

Este menu tabs é excelente e distribuído pelo blog Helplogger para blogs que tem muito conteúdo a serem mostrados em sua sidebar e não querem que ela fique gigantesca (assim, como o meu!). 

Bom, agora que você já sabe o que é, e como ele funciona, vou parar de muito trá lá lá e vamos direto ao tutorial

Tutorial

1- Acesse o painel do seu blog
2- Vá em "Modelo" e "Editar HTML"
3- Dê um clique dentro do código e depois aperte Ctrl + F
4- Dentro da caixa de busca, digite </head>
5- Acima dele cole este script:

 Clique para pegar o script

6- Ainda dentro do Html, procure por este código: 

 
<div class='column-right-inner'>


7- Apos encontrar, logo acima dela, cole:
 
<div class = 'TabView "> 
<b: class section =' tabviewtab 'id =' TAB1 'maxwidgets =" 1 "/> 
<b: class section =' tabviewtab 'id =' tab2 'maxwidgets =" 1 "/> 
<b: class section = 'tabviewtab' id = ' Tab3 ' maxwidgets = "1" /> 
</ div>


8- Agora procure por; ]]></b:skin> 

9- Assim que o encontrar, cole logo acima dele o código CSS:

 Clique para coletar o Css

Faça as suas alterações de cores, tamanho, largura etc. Como preferir e o que melhor se adapta ao seu template.

Tabela de cores:  AQUI

10- Salve.

11- Agora volte ao painel do blogger e atualize.
12- Notará que logo abaixo da sidebar, existe agora mais três novas áreas para adicionar gadgets ( TAB1, TAB2 e TAB3 ).

Para adicionar quaisquer gadgets, basta clicar em "Adicionar um Gadgets", selecionar o que deseja, salvar, arrastar para qualquer uma das TABs e depois clicar em "Salvar Organização". Como fazemos normalmente.

Obs: Caso deseja adicionar mais TABs ao menu, antes do fechamento da </div> cole:

<b: class section = 'tabviewtab' id = 'TAB4' maxwidgets = "1" />

lembrando que você poderá adicionar quantas Tabs desejar, basta trocar o numeral (TAB4 por 5 e assim por diante). Perceba também que para cada linha existe um ID e que o espaçamento dos títulos das guias é estreito, por isso, pense no escrever. Quanto menor o titulo, mais guias você poderá adicionar. 
Por exemplo: Menu, Tags, Mais Vistos, Eu Sigo, + Tops, Eu Leio, Acesse, etc. Tudo depende de quantos itens você queira adicionar em seu menu tabs.

Gostou? Ajudou? Rapidinho, não é? Comente!
Beijinhos

2 comentários

Clique e deixe seu comentários


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.