Template Eddie

» Baseado no template Mínima Left do blogger.
» Um template clean com vários hacks instalados.

DEMO | DOWNLOAD-4SHARED

Hacks instalados:

1. Postagens Resumidas com imagem (thumbnail)
2. Abas nos Comentários
3. Lista de Posts Relacionados no Fim do Post
4. Paginação no Blogger

A Pasta de Download Contém

• Código XML;
• Imagens usadas no template;
• Todos os códigos dos javascript usados.

Sugestões de hacks para você usar em seu template:

• Colocando Widget de Posts Recentes
• Colocando Widget de Comentários Recentes

Aproveitem :)

► Leia mais...

Template Red-Rounded Classic

Este template tem imagens com bordas arredondadas e a fonte utilizada é a Lucida Calligraphy para dar uma aparência bem clássica. Porém, se você não tiver esta fonte instalada em seu computador ele irá aparecer com a fonte padrão que é a Arial.

Sugiro que você NÃO altere a imagem no cabeçalho do template para que ele não perca o estilo arredondado. De qualquer forma... Veja este post Como Alterar a Imagem no Topo do Template e o Tamanho do Cabeçalho.

ATENÇÃO NÃO BAIXE O TEMPLATE SEM ANTES LER SOBRE OS RECURSOS QUE ELE CONTÉM!

Os recursos instalados no template são:

1. Mais Importante!
   PÁGINAS DIFERENCIADAS: Página inicial diferente da página do post » Quando você clica para ler o post a coluna da Esquerda some dando mais ênfase ao post a ser lido. Então preste atenção a este recurso para usar este template em seu blog. Vá até o Template Demo clique no post e CERTIFIQUE-SE SE É ISTO QUE REALMENTE QUER.
2. Data do post personalizada e que se repete em posts do mesmo dia. Veja: Personalizando a Data do seu Post .
3. Resumo dos posts na página inicial do blog com redimensionamento das imagens dos resumos já incluído. Veja: Thumbs das Imagens na Página Inicial do Blogger
4. Hack "Leia Mais" já instalado. Veja: Hack Leia Mais
5. Post Blockquote com imagens de aspas. Veja: Blockquote e Caixinha de Códigos
6. Posts Relacionados. Veja: Posts Relacionados no Fim do Post
   
7. ☺Área dos Comentários em Abas como aparece aqui no Templates para Você.

Se você quiser usar estes recursos em seu blog e gostou deste template faça o download e use em seu blog!

DEMO | DOWNLOAD-4SHARED

► Leia mais...

Template Black and Red Basic

Um dos meus primeiros templates foi o Black and Red A2 e também foi o mais baixado até hoje.

Levando em consideração o grande número de downloads deste template decidi criar outro usando o Black and Red A2 como base, fazendo várias modificações e melhorias nele. Dei o nome de Black and Red Basic, Basic porque estou providenciando o Classic, o Modern, o Black and Blue, o White etc...

Não coloquei imagem no cabeçalho do template para que você fique livre para colocar a sua. Veja este post Como Alterar a Imagem no Topo do Template e o Tamanho do Cabeçalho.

ATENÇÃO NÃO BAIXE O TEMPLATE SEM ANTES LER SOBRE OS RECURSOS QUE ELE CONTÉM!

Os recursos instalados no template são:

1. Mais Importante!
   PÁGINAS DIFERENCIADAS: Página inicial diferente da página do post » Quando você clica para ler o post a coluna da Esquerda some dando mais ênfase ao post a ser lido. Então preste atenção a este recurso para usar este template em seu blog. Vá até o Template Demo clique no post e CERTIFIQUE-SE SE É ISTO QUE REALMENTE QUER.
2. Data do post personalizada e que se repete em posts do mesmo dia. Veja: Personalizando a Data do seu Post .
3. Resumo dos posts na página inicial do blog com redimensionamento das imagens dos resumos já incluído. Veja: Thumbs das Imagens na Página Inicial do Blogger
4. Hack "Leia Mais" já instalado. Veja: Hack Leia Mais
5. Posts Relacionados. Veja: Posts Relacionados no Fim do Post
   

Se você quiser usar estes recursos em seu blog e gostou deste template o link para download está aqui:

DEMO | DOWNLOAD-4SHARED | DOWNLOAD-ESNIPS

► Leia mais...

Templates Listen Azul e Preto

ESTES TEMPLATES SÃO SEMELHANTES AO LISTEN ROSA EM OUTRAS CORES,

POR ISSO NÃO POSSUEM VERSÃO DEMO

►3 COLUNAS NA PARTE SUPERIOR AO POST, SENDO 2 COM ALTURA PRÉ -DEFINIDA DE 300px;

►POSSUI 3 COLUNAS NO RODAPÉ;

►MENU EM ABAS JÁ INSTALADO, ALÉM DE OUTROS HACKS QUE ESTÃO LISTADOS NA VERSÃO DEMO;

►MENU SUPERIOR NA FORMA DE LISTA DE LINKS;

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

Clique na imagem para ampliar.	Clique na imagem para ampliar.
DOWNLOAD	DOWNLOAD

Para Configurar alguns ítens do template.

►PARA CONFIGURAR O MENU SUPERIOR
Clique em Layout → Em Elementos de Página altere a Lista de Links logo Abaixo do Cabeçalho;

►COMO ACRESCENTAR AS GADGETS NAS ABAS
1º- Clique sobre o número da Aba que você deseja colocar a gadget;
2º- Clique em: Editar para alterar o conteúdo da gadget que já está naquele número (pode ser apagando a gadget e colocando outra ou editando a já existente), ou em Adicionar elemento de página caso este apareça;
►Os TÍTULOS das abas serão sempre o título da gadget que você escolher para colocar mesmo que apareça números na página de Elementos de Página.

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://www.barelyfitz.com/projects/tabber/tabber-minimized.js' type='text/javascript'">;
»Hospede no local de sua preferência substituindo o LINK: http://www.barelyfitz.com/projects/tabber/tabber-minimized.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.

►COMO CONFIGURAR:

• A DATA
• POST - LEIA MAIS
• MENU EM ABAS
• POSTS RECENTES
• COMENTÁRIOS RECENTES

Update em 21/11/2008 - Novos Links para Download com XML Corrigidos.

► Leia mais...

TEMPLATE LISTEN ROSA

ESTE TEMPLATE TEM:

►3 COLUNAS NA PARTE SUPERIOR AO POST, SENDO 2 COM ALTURA PRÉ -DEFINIDA DE 300px;

►POSSUI 3 COLUNAS NO RODAPÉ;

►MENU EM ABAS JÁ INSTALADO, ALÉM DE OUTROS HACKS QUE ESTÃO LISTADOS NA VERSÃO DEMO;

►MENU SUPERIOR NA FORMA DE LISTA DE LINKS;

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

Clique na imagem para ampliar.

DEMO | DOWNLOAD

Para Configurar alguns ítens do template.

►PARA CONFIGURAR O MENU SUPERIOR
Clique em Layout → Em Elementos de Página altere a Lista de Links logo Abaixo do Cabeçalho;

►COMO ACRESCENTAR AS GADGETS NAS ABAS
1º- Clique sobre o número da Aba que você deseja colocar a gadget;
2º- Clique em: Editar para alterar o conteúdo da gadget que já está naquele número (pode ser apagando a gadget e colocando outra ou editando a já existente), ou em Adicionar elemento de página caso este apareça;
►Os TÍTULOS das abas serão sempre o título da gadget que você escolher para colocar mesmo que apareça números na página de Elementos de Página.

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://www.barelyfitz.com/projects/tabber/tabber-minimized.js' type='text/javascript'">;
»Hospede no local de sua preferência substituindo o LINK: http://www.barelyfitz.com/projects/tabber/tabber-minimized.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.

►COMO CONFIGURAR:

• A DATA
• POST - LEIA MAIS
  
• MENU EM ABAS
• POSTS RECENTES
• COMENTÁRIOS RECENTES
  

☺Se você quiser mudar o menu em abas de lado:
Recorte o código que começa com:

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

e termina com:

<div class='tabbertab'>

E cole abaixo de algum sidebar:

<div id='newsidebar-wrapper'>

<div id='rightsidebar-wrapper'>

Para que você não perca o sidebar que contém o menu em abas você deve criar um b:section nele então embaixo de:

<div id='sidebar-wrapper'>

Você deve colar o código:

<b:section class='sidebar' id='sidebar' preferred='yes'/>

Post Atualizado em 04/08/09

► Leia mais...

TEMPLATE SimpleAdSense

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;

►É UM TEMPLATE TOTALMENTE CUSTOMIZÁVEL → VOCÊ PODE MUDAR TODAS AS CORES;

►POSSUI 1 SIDEBAR E 1 WIDGET DEDICADOS A ANÚNCIOS DO ADSENSE ATRAVÉS DO PAINEL "ELEMENTOS DA PÁGINA";

►POSSUI 3 COLUNAS NO RODAPÉ;

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

(VEJA AS EXPLICAÇÕES SOBRE O MENU EM ABAS EM CONTINUE LENDO)

Clique na imagem para ampliar.

DEMO | DOWNLOAD

Para Configurar 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º►COMO ACRESCENTAR AS WIDGETS NAS ABAS
1º- Clique sobre o número da Aba que você deseja colocar a widget;
2º- Clique em: Editar para alterar o conteúdo da widget que já está naquele número (pode ser apagando a widget e colocando outra ou editando a já existente), ou em Adicionar elemento de página caso este apareça;
►Os TÍTULOS das abas serão sempre o título da widget que você escolher para colocar mesmo que apareça números na página de Elementos de Página.

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://www.barelyfitz.com/projects/tabber/tabber.js' type='text/javascript'">;
»Hospede no local de sua preferência substituindo o LINK: http://www.barelyfitz.com/projects/tabber/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 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 O CÓDIGO BASE ABAIXO◄
</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!

► Leia mais...

TEMPLATE ANIME-02

Clique na imagem para ampliar.

»DOWNLOAD AQUI«

Para Configurar 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º► COMO ACRESCENTAR AS WIDGETS NAS ABAS
Em Layout→Elementos da página→Clique nos números 1, 2, 3 e 4 para acrescentar as widgets ou editar as pré-existentes.

Atenção: Cada aba aceita apenas uma widget e o título da widget será o da aba.

»Se você quiser acrescentar mais abas ou mais menus em abas siga as instruções do post do Template Tabs.


APROVEITEM O TEMPLATE!

► Leia mais...

TEMPLATES BUTTERFLY

Para começar a série de templates femininos com o tema Butterfly
Já estão prontos o Pink e o Yellow para vocês!

Clique na imagem para ampliar.

»DOWNLOAD AQUI«

Clique na imagem para ampliar.

»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.
▼Clique em Continue Lendo▼

1º►CONFIGURANDO OS LINKS DA BARRA DE NAVEGAÇÃO SUPERIOR
Vá em Layout→ Editar HTML e encontre o código:
<div id='tabsE'>
<ul>
<li> <a href='#' title='Link 1'> <span>Link 1 </span> </a> </li>
<li> <a href='#' title='Link 2'> <span>Link 2 </span> </a> </li>
<li> <a href='#' title='Link 3'> <span>Link 3 </span> </a> </li>
<li> <a href='#' title='Link 5'> <span>Link 5 </span> </a> </li>
<li> <a href='#' title='Link 6'> <span>Link 6 </span> </a> </li>
</ul>
</div>

»Substitua # pelo endereço do link e onde está escrito Link 1, Link 2, Link3, Link5 e Link6 substitua pelo Título do link. (Pulei o Link 4 né! Não tem problema não irá interferir em nada a configuração dos seus links.)

» Se quiser acrescentar mais links, copie uma linha como esta:
<li> <a href='#' title='Link 6'> <span>Link 6 </span> </a> </li>

E coloque abaixo da última linha de links e acima da linha </ul>

2º► COMO ACRESCENTAR AS WIDGETS NAS ABAS
Em Layout→Elementos da página→Clique nos números 1, 2, 3 e 4 para acrescentar as widgets ou editar as pré-existentes.

Atenção: Cada aba aceita apenas uma widget e o título da widget será o da aba.

»Se você quiser acrescentar mais abas ou mais menus em abas siga as instruções do post do Template Tabs.

APROVEITEM OS TEMPLATES!

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.

Para hospedar o arquivo Java leia este Tutorial: Hospedar Arquivos Java

► Leia mais...

TEMPLATE CLIPS

SE VOCÊS GOSTARAM DO TEMPLATE TABS, VÃO GOSTAR MUITO DO TEMPLATE CLIPS TAMBÉM 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;

►É UM TEMPLATE CLARO, COM UM DESIGN SIMPLES E BONITO;

►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 04/04/2008 ÀS 13:00h

Clique na imagem para ampliar.

VISUALIZE O TEMPLATE CLIPS AQUI .


»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.
▼Clique em Continue Lendo▼

1º►CONFIGURANDO OS LINKS DA BARRA DE NAVEGAÇÃO SUPERIOR e COMO ACRESCENTAR AS WIDGETS NAS ABAS

»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;
O Link do código original é este: http://www.barelyfitz.com/projects/tabber/tabber-minimized.js caso o tpvocegooglepages não funcione
»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 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 O CÓDIGO BASE ABAIXO◄
</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!
Update em 28/07/2009

► Leia mais...

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 29/03/2008 ÀS 13:00h

Clique na imagem para ampliar.

VISUALIZE O TEMPLATE TABS 01 AQUI .


»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.
▼Clique em Continue Lendo▼

1º►CONFIGURANDO OS LINKS DA BARRA DE NAVEGAÇÃO SUPERIOR e COMO ACRESCENTAR AS WIDGETS NAS ABAS

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

► Leia mais...

TEMPLATE NICE-02

ESTA É UMA VERSÃO ESCURA DO 1º "TEMPLATE NICE!" COM AS MESMAS CARACTERÍSTICAS

ESTE TEMPLATE TEM:

►O MENU COM 4 ABAS SOBREPOSTAS CUJOS CONTEÚDOS PODEM SER EDITADOS ATRAVÉS DO PAINEL "ELEMENTOS DA PÁGINA";
►MENU DE NAVEGAÇÃO SUPERIOR QUE TAMBÉM PODE SER EDITADO ATRAVÉS DO PAINEL "ELEMENTOS DA PÁGINA";
►CAIXA DE BUSCA;
►E ESPAÇO PARA COLOCAR ANÚNCIOS ADSENSE LOGO ABAIXO DO MENU SUPERIOR (SUGESTÃO DE FORMATO: Cinco blocos de links- Linha horizontal 728x15).

(VEJA AS EXPLICAÇÕES SOBRE OS DOIS MENUS E A CAIXA DE BUSCA EM CONTINUE LENDO)

ÚLTIMA ATUALIZAÇÃO EM 18/03/2008 ÀS 21:00h

Clique na imagem para ampliar.

VISUALIZE O TEMPLATE NICE AQUI .


»DOWNLOAD AQUI«

Para Configurar a Barra de Navegação Superior, O Menu de Abas Sobrepostas e a Caixinha de Busca.
Clique em Layout►Editar HTML e na caixinha com o código do seu blog faça as alterações necessárias.

1º►CONFIGURANDO OS LINKS DA BARRA DE NAVEGAÇÃO SUPERIOR

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

2º►CONFIGURANDO A CAIXINHA BUSCA DO BLOG

UPDATE: A CAIXA DE BUSCA FOI SUBSTITUIDA PELA GADGET DE BUSCA DO GOOGLE - 27/07/2009

3º►CONFIGURANDO OS TÍTULOS DAS ABAS SOBREPOSTAS

→Encontre o código:

<!--Start of the Tabmenu -->
<div id='stylefourcontainer'>
<div id='stylefour'>
<ul>
<li><a class='tabactive' href='#' id='tablink1' onclick='return false;' onmouseover='blendon("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); swichtabs("1");' title=''> CONFIGURAR ABAS </a></li>

<li><a href='#' id='tablink2' onclick='return false;' onmouseover='blendon("tabcontent2"); blendoff("tabcontent1"); blendoff("tabcontent3"); blendoff("tabcontent4"); swichtabs("2");' title=''> DICAS </a></li>

<li><a href='#' id='tablink3' onclick='return false;' onmouseover='blendon("tabcontent3"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent4"); swichtabs("3");' title=''> ARTIGOS </a></li>

<li><a href='#' id='tablink4' onclick='return false;' onmouseover='blendon("tabcontent4"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); swichtabs("4");' title=''> COMPATIBILIDADE </a></li>
</ul>
</div></div>
<!--End of the Tabmenu -->

»Altere as palavras CONFIGURAR ABAS, DICAS, ARTIGOS, COMPATIBILIDADE, pelos títulos das Abas de acordo com sua necessidade.

»Para utilizar o conteúdo do menu de abas sobrepostas siga esta imagem que está contida na primeira aba:


APROVEITEM O TEMPLATE!

► Leia mais...

TEMPLATE NICE!

ESTE TEMPLATE TEM:

►O MENU COM 4 ABAS SOBREPOSTAS CUJOS CONTEÚDOS PODEM SER EDITADOS ATRAVÉS DO PAINEL "ELEMENTOS DA PÁGINA";

►MENU DE NAVEGAÇÃO SUPERIOR QUE TAMBÉM PODE SER EDITADO ATRAVÉS DO PAINEL "ELEMENTOS DA PÁGINA";
►CAIXA DE BUSCA;
►E ESPAÇO PARA COLOCAR ANÚNCIOS ADSENSE LOGO ABAIXO DO MENU SUPERIOR (SUGESTÃO DE FORMATO: Cinco blocos de links- Linha horizontal 728x15).

ÚLTIMA ATUALIZAÇÃO EM 27/07/2009 ÀS 13:00h

Clique na imagem para ampliar.

DEMO | DOWNLOAD

Para Configurar a Barra de Navegação Superior, O Menu de Abas Sobrepostas e a Caixinha de Busca.

Clique em Layout►Editar HTML e na caixinha com o código do seu blog faça as alterações necessárias.

1º►CONFIGURANDO OS LINKS DA BARRA DE NAVEGAÇÃO SUPERIOR

»Clique na imagem para ampliar ► Você pode inserir os links no menu superior usando uma Lista de Links.

2º►CONFIGURANDO A CAIXINHA BUSCA DO BLOG

UPDATE: A CAIXA DE BUSCA FOI SUBSTITUIDA PELA GADGET DE BUSCA DO GOOGLE - 27/07/2009

3º►CONFIGURANDO OS TÍTULOS DAS ABAS

→Encontre o código:

<!--Start of the Tabmenu -->
<div id='stylefourcontainer'>
<div id='stylefour'>
<ul>
<li><a class='tabactive' href='#' id='tablink1' onclick='return false;' onmouseover='blendon("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); swichtabs("1");' title=''> CONFIGURAR ABAS </a></li>

<li><a href='#' id='tablink2' onclick='return false;' onmouseover='blendon("tabcontent2"); blendoff("tabcontent1"); blendoff("tabcontent3"); blendoff("tabcontent4"); swichtabs("2");' title=''> DICAS </a></li>

<li><a href='#' id='tablink3' onclick='return false;' onmouseover='blendon("tabcontent3"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent4"); swichtabs("3");' title=''> ARTIGOS </a></li>

<li><a href='#' id='tablink4' onclick='return false;' onmouseover='blendon("tabcontent4"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); swichtabs("4");' title=''> LINKS </a></li>
</ul>
</div></div>
<!--End of the Tabmenu -->

»Altere as palavras CONFIGURAR ABAS, DICAS, ARTIGOS, LINKS, pelos títulos das Abas de acordo com sua necessidade.

»Para utilizar o conteúdo do menu de abas sobrepostas siga esta imagem que está contida na primeira aba:


APROVEITEM O TEMPLATE!

► Leia mais...