Como adicionar menu tabs widgets na sidebar do blog | Quero Dicas


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 ao 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, a que aparece 3 itens (Mais Vistos, Tags e Eu leio e Recomendo). Pois é, é este!

Este menu tabs é excelente e está sendo distribuído pelo blog Helplogger. Ele é ideal para quem tem muito conteúdo a serem mostrados na 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 vou 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, colocar um titulo, 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 é estreita, 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 e assim por diante. Tudo depende de quantos itens você queira adicionar em seu menu tabs.

Gostou? Ajudou? Comente!
Beijinhos

COMPARTILHE :  

Comentários
2 Comentários

2 comentários


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

Apenas peço que leia:

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 palavras de baixo calão, não serão publicados ou respondidos.

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

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

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