» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

TEMPLATE TABS 01

PARA QUEM GOSTA DE ECONOMIZAR ESPAÇO E NÃO DEIXAR O BLOG POLUÍDO, FIZ O TEMPLATE TABS COM O RECURSO DE ABAS (Tabs em Inglês, daí seu nome)

ESTE TEMPLATE TEM:

►NA LATERAL DIREITA 2 MENUS COM ABAS SOBREPOSTAS CUJOS CONTEÚDOS PODEM SER EDITADOS ATRAVÉS DO PAINEL "ELEMENTOS DA PÁGINA" OU PELO CÓDIGO HTML ACRESCENTANDO + ABAS OU NÃO;

►MENU DE NAVEGAÇÃO SUPERIOR QUE TAMBÉM PODE SER EDITADO ATRAVÉS DO PAINEL "ELEMENTOS DA PÁGINA";

►RECURSO PARA COLOCAR ANÚNCIOS ADSENSE ENTRE OS POSTS.

(VEJA AS EXPLICAÇÕES SOBRE OS DOIS MENUS EM CONTINUE LENDO)

ÚLTIMA ATUALIZAÇÃO EM 22/08/2008 ÀS 23:00h

Clique na imagem para ampliar.

VISUALIZE O TEMPLATE TABS 01 AQUI .

Image and video hosting by TinyPic
»DOWNLOAD AQUI«


Para Configurar a Barra de Navegação Superior e as Abas Sobrepostas.
Clique em Layout
►Em Elementos de Página altere o que preferir;
►Em Editar HTML, na caixinha com o código do seu blog faça as alterações necessárias.
Mas não se esqueça:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em Baixar modelo completo.
♥ Leia o post até o fim e tenha certeza de ter entendido.
▼Clique em Continue Lendo▼

1º►CONFIGURANDO OS LINKS DA BARRA DE NAVEGAÇÃO SUPERIOR e COMO ACRESCENTAR AS WIDGETS NAS ABAS
Image and video hosting by TinyPic
»Clique na imagem para ampliar

► Você pode inserir os links no menu superior usando uma Lista de Links. → ATENÇÃO: NÃO COLOQUE O TÍTULO NESTA LISTA DE LINKS, SENÃO FICA DESALINHADO!
►Os TITULOS das abas serão sempre o título da widget que você escolher para colocar.
ATENÇÃO
»O menu em abas funciona com um JavaScript que deve ser hospedado por você;
»BAIXE E SALVE o arquivo java que está em azul: <script src='http://tpvoce.googlepages.com/tabber.js ' type='text/javascript'>;
»Hospede no local de sua preferência substituindo o LINK: http://tpvoce.googlepages.com/tabber.js no código do seu template pelo LINK fornecido por sua hospedagem;

»Desta forma não haverá o risco de suas abas não funcionarem, a não ser que você hospede muitos arquivos e sua taxa de transmissão de banda ultrapassar o limite do site de hospedagem.

2º►CONFIGURANDO AS WIDGETS DE POSTS E COMENTÁRIOS RECENTES

Em Layout→Elementos de página:
» A widget de Posts Recentes já estará aparecendo, ou não, por ser a tab ativa em "1", então clique em editar e acrescente o código como está explicado neste link: Widget de Posts Recentes .
»Se a widget de posts recentes não estiver aparecendo clique em Adicionar um elemento de página e coloque a widget que quiser.

» A widget de Comentários Recentes está na tab "2", então clique em 2 e em editar e acrescente o código como está explicado neste link: Widget de Comentários Recentes.

3º►COLOCANDO MAIS ABAS OU MAIS MENUS EM ABAS:
Em Editar HTML, na caixinha com o código do seu blog encontre:
<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='Posts Recentes' type='HTML'/>
</b:section>
</div>

<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg2' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='Comentários Recentes' type='HTML'/>
</b:section>
</div>

<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg3' maxwidgets='1' showaddelement='yes'>
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>

<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg4' maxwidgets='1' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arquivo' type='BlogArchive'/>
</b:section>
</div>

</div><!-- End tab1-->

<div class='tabber' id='tab2'>

<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg5' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='false' title='Sobre o Blogger' type='LinkList'/>
</b:section>
</div>

<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg6' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML3' locked='false' title='Como Instalar o Template' type='HTML'/>
</b:section>
</div>

<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg7' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='Política de Privacidade' type='HTML'/>
</b:section>
<</div>

</div><!-- End tab2-->

</div><!-- End Tabsidebar-->
Obs: tab1 e tab2 representam os menus com abas.

►PARA ACRESCENTAR ABAS:
É simples:
Veja que cada código class='tabbertab' representa uma aba.
☺→Então para acrescentar ABAS você deverá copiar este código base:
<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg1' maxwidgets='1' showaddelement='yes'/>
</div>
e colocar no menu que desejar, lembrando sempre de alterar uma coisa:
Está vendo o código em vermelho: tabberwidg1 ► SEMPRE QUE VOCÊ CRIAR UMA NOVA ABA DEVERÁ ALTERAR O NÚMERO 1 PARA OUTRO Nº → FAZENDO COM QUE NUNCA SE REPITAM.
→No código original eu uso de 1 a 7, então para você acrescentar outra aba deverá começar com o nº8.

Feito isso SALVE o seu código e vá em Elementos de página, lá estará o nº da aba que você criou, Adicione o elemento de página que preferir e pronto, sua aba nova já foi acrescentada.

►PARA ACRESCENTAR OUTRO MENU:
Você deve acrescentar entre os códigos:
</div><!-- End tab2-->
ACRESCENTE AQUI
</div><!-- End Tabsidebar-->
Este código base:
<div class='tabber' id='tab3'>
<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg#' maxwidgets='1' showaddelement='yes'/>
</div>
</div><!-- End tab3-->
→O terceiro menu será representado por tab3.

→Irá funcionar da mesma forma para acrescentar mais abas tendo que alterar o nº(#) da tabberwidg# por um diferente. (O simbolo # representa o nº)

→ Você também terá que acrescentar um código CSS para o menu novo:

Abaixo deste código:
.tabberlive#tab2 { float:right;
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}
Acrescente este:
.tabberlive#tab3 { float:right;
}
.tabberlive#tab3 .tabbertab {
height:200px;
overflow:auto;
}

Pronto!
Se quiser, faça estas alterações e APROVEITEM O TEMPLATE!
TEMPLATE TABS 01 TEMPLATE TABS 01 Reviewed by Áurea on 3/28/2008 Rating: 5

21 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. Olá, tudo bem?

    Gostei tanto de template que estou utilizando, mexi um pouco no codigo, mas não mudei a aparencia.

    Obrigado.

    EDNALDO.

    ResponderExcluir
  3. Olá, estou fazendo testes com o Template e gostando muito. Só tenho uma dúvida. Tem como retirar a margem que fica na NavBar do Google? Pq a NavBar fica flutuando e eu queria usá-la mas que ela ficasse "normal". Valeu!

    ResponderExcluir
  4. Olá! queria saber, que programa vc usa para criar e configurar os templates?

    Como eu altero o tamanho da fonte do Blogarchive?

    Obrigado, sou iniciante nesse lance de template!!

    ResponderExcluir
  5. Fábio,

    Uso o próprio blogger para editar os templates em blogs de testes.
    Se você alterar o tamanho da fonte das sidebars irá alterar do arquivo se ele estiver na sidebar. Acho que assim dá certo!
    Áurea

    ResponderExcluir
  6. blz eu sempre uso esse template mais me da uma dica ai aonde eu posso hospedar esse arquivo para que as abas naum suma mais?

    ResponderExcluir
  7. Saudações Áurea!
    Estou passando aqui para agradecer pelo desenvolvimento deste template, ficou muito bom os recursos, estou utilizando ele. Porém, com algumas modificações.

    Por tanto, gostaria da sua opinião sobre como ficou, pois você é autora dele.

    Abraços!

    ResponderExcluir
  8. Aparecida,
    Estou produzindo um post para explicar como fazer para hospedar o arquivo js.

    ResponderExcluir
  9. Muito obrigado Áurea, eu não tinha testado o layout em outras resoluções.

    Mas estou com problemas com o Logo e o menu, na resolução que estou usando (1280x800), ele está fixado para o lado direito, como posso centralizá-lo também?

    desde já agradeço suas dicas.

    Abraços!

    ResponderExcluir
  10. Jeferson,

    Use o comando:
    float: center;
    Acredito que pode dar certo!

    ResponderExcluir
  11. Olá Áurea!

    Não deu certo não, é que eu fiz uma bagunça danada na Folha de Estilo do Blog, mas eu acho que foi resolvido, Obrigado.

    Ah, eu estive passando pelo seu (Creative Commons)e lá me indica que é Vedada a Criação de Obras Derivadas. Você não pode alterar, transformar ou criar outra obra com base nesta.

    Será que tem algum problema eu estar alterando o tamplate tabs 01?

    Você pode me ceder este direito

    ResponderExcluir
  12. Jefferson,
    Tem um parágrafo que diz assim:"Qualquer uma destas condições podem ser renunciadas, desde que Você obtenha permissão do autor."
    Você tem minha autorização!
    Obrigada por perguntar.
    Um Abraço,
    Áurea

    ResponderExcluir
  13. Muito obrigado Áurea, eu fico muito agradecido pela permissão.

    Abraços!

    ResponderExcluir
  14. Olá de novo Áurea.

    Estou passando aqui rapidinho para avisar que estarei te Recomendando no BlogDay (Como tantos outros blogs), não pelo fato que adimiro seu trabalho e tals, mas, por seu Blog ser de assuntos diferente do meu.

    Antecipadamente, feliz dia do Blogger!

    Abraços.

    ResponderExcluir
  15. Leandro,
    Também não sei escrever em sua língua, mas entendi o que você disse.
    Veja aqui no post que ensino como hospedar o arquivo java que comanda os menus em abas do template Tabs. Veja em "ATENÇÃO" como fazer!
    Gostei muito do seu blog! Até mais! Áurea

    ResponderExcluir
  16. Obrigado (¿se escribe así?) Áurea. Pondré más atención de aquí en adelante y trataré de hacerlo mejor. Gracias por tus amables palabras sobre mi blog. Saludos

    ResponderExcluir
  17. Hola Áurea. Ya está corregido el error. He visto que mi blog tiraba de tu "googlepages" para activar la navegación por pestañas ("abas", creo que las llámais en portugués); ya he subido el tabber.js al lugar donde alojo mis cosas, y parece que todo funciona correctamente. Muchas gracias por todo

    ResponderExcluir
  18. someone please translate it in english

    ResponderExcluir
  19. Boa noite.. Estou perdida!!! Eu tinha instalado um Template no meu blog do seu site, era lindo! com até um banner teu, aí eu cansei dele e resolvi instalar outro. Gostei do Butterfly Yellow, ok. Fiz tudo como manda o figurinho, ficou show. Aí fui mexer nem sei onde nem para o q, e baguncei tudo. Sumiu tudo, deu um monte de erro e agora o menu de abas: Blogroll, Posts Recentes, Indice, etc sumiu. Eles aparecem todos na tela, sem a barra de menu...Não aparecem mais os numeros no layout e se diminuo o numero de postagens o perfil tb muda de lugar...ficou feio... Nao está como o template original...Me socorra, please!!!!

    ResponderExcluir
  20. Hola Aurea. Hace unos meses estuve por aquí para resolver alguna duda relacionada con esta plantilla, y me la resolviste muy amablemente. La pregunta que tengo ahora es, ahora que desaparece googlepages, ¿hay algún sitio donde alojar el script tabber.js? ¿Cuál me recomiendas? Obrigado

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.