Informações sobre o Template Tabs01

domingo, 6 de abril de 2008


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.
▼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.

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 DESDE 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!

1 comentários:

Ramesh disse...

great template but, you haven't given tutorial in English..

I've already downloaded, but finding very hard to customize yours.

please provide translation widget in your blog

Posts Recentes

Comentários Recentes

Como Instalar o Template

1º- Você clica em FAÇA O DOWNLOAD AQUI que vai direcionar você para o site 4shared onde você vai fazer o download do arquivo ZIPADO do template após alguns segundos.

2º- Salve o arquivo em uma pasta de seu computador e descompacte. Certifique-se que ele contém um arquivo no formato XML e as imagens do template.

3º- Você vai instalar o arquivo no formato XML que já contém as imagens hospedadas no site TINYPIC, se houver algum problema com as imagens do seu template você deve hospedá-las em um site de hospedagem que já conheça e substituir os endereços das imagens antigas pelos seus.

4º- Como Instalar o template no blogger.

a. Vá até seu painel do blogger Clique em: MODELO » Editar HTML;

b. Antes salve uma cópia do template atual para o caso de dar algo errado. Salve também os conteúdos das widgets.TUTORIAL de como salvar o conteúdo das widgets.

c. Marque a caixa Expandir modelos de Widgets;

d. Clique em Arquivo » Ache e selecione o arquivo que você salvou no seu computador.

e. Clique em Fazer Upload.

Pronto, seu template está instalado. Clique em VISUALIZAR antes de SALVAR MODELO.

Se estiver tudo OK salve o seu template novo!
NÃO RETIRE OS CRÉDITOS! NÃO É PERMITIDO REDISTRIBUIR OS TEMPLATES OU OS TUTORIAIS DESTE BLOG SEM A PRÉVIA AUTORIZAÇÃO DE SUA DONA.

IMPORTANTE: Na mudança de template, se você tiver widgets (elementos de página das sidebars) no seu blog, poderá PERDER todos eles. Para que isto NÃO ACONTEÇA siga este TUTORIAL.

Política de Privacidade

“Este site pode utilizar cookies e/ou web beacons quando um usuário tem acesso às páginas. Os cookies que podem ser utilizados associam-se (se for o caso) unicamente com o navegador de um determinado computador. Os cookies que são utilizados neste site podem ser instalados pelo mesmo, os quais são originados dos distintos servidores operados por este, ou a partir dos servidores de terceiros que prestam serviços e instalam cookies e/ou web beacons (por exemplo, os cookies que são empregados para prover serviços de publicidade ou certos conteúdos através dos quais o usuário visualiza a publicidade ou conteúdos em tempo pré determinados). O usuário poderá pesquisar o disco rígido de seu computador conforme instruções do próprio navegador. Usuário tem a possibilidade de configurar seu navegador para ser avisado, na tela do computador, sobre a recepção dos cookies e para impedir a sua instalação no disco rígido. As informações pertinentes a esta configuração estão disponíveis em instruções e manuais do próprio navegador”.