TEMPLATES

Template Preto e Branco Atualizado

2009-10-29T15:07:00.001-07:00

Muitas pessoas gostam deste template, então resolvi atualizá-lo acrescentando alguns hacks e melhorando a estrutura dele.
Espero que vocês gostem.

DOWNLOAD | DEMO

NÃO SE ESQUEÇAM, NÃO RETIREM OS CRÉDITOS.
Nem REDISTRIBUAM SEM A MINHA PRÉVIA AUTORIZAÇÃO.

Hacks instalados:

QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NOS LINKS DOS MESMOS PARA ENTENDER MELHOR!

Observações:

♦ Todos os códigos Javascript usados no template estão contidos nele.
♦ Para instalar o seu template leia: Como Instalar o Seu Template

A Pasta de Download Contém

Código XML;
Imagens usadas no template.

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

Aproveitem :)

Template Atualizado em 27/10/2009

Template PinkA3 Atualizado

2009-09-23T15:34:00.000-07:00

Continuando a série de atualizações dos Templates para VOCÊ.

O template que atualizei desta vez foi o lindo PinkA3.
Acho este template lindo, além de ser pink né, é um charme. Rsss...

Como utilizei o Mínima como base para refazer o template, então...
♦ O recurso Jump Break (“Leia mais”) do Blogger já funciona normalmente;
♦ As fotos nos comentários do blogger também já funcionam, basta configurar na aba Configurações ► Comentários ►Em Mostrar imagens de perfil nos comentários? ►Marque a opção Sim;

Clique na imagem para ampliar.

DOWNLOAD | DEMO

NÃO SE ESQUEÇAM, NÃO RETIREM OS CRÉDITOS.
Nem REDISTRIBUAM SEM A MINHA PRÉVIA AUTORIZAÇÃO.

Hack instalado:

Link de Comentários Corrigido

QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NO LINK PARA ENTENDER MELHOR!

Observações:

♦ Apliquei apenas um hack para não mudar a essência do template. Veja as sugestões no final do post.

♦ Para alterar os links da barra de navegação!
Encontre o seguinte código: (Use Ctrl+F)

<ul class='solidblockmenu'>
<li><a class='current' href='URL do Link'>Home</a>/li>
<li><a href='URL do Link' title=''><b>Ítem2</b></a>/li>
<li><a href='URL do Link' title=''><b>Ítem3</b></a>/li>
<li><a href='URL do Link' title=''><b>Ítem4</b></a>/li>
<li><a href='URL do Link' title=''><b>Ítem5</b></a>/li>
<li><a href='URL do Link' title=''><b>Ítem6</b></a>/li>
</ul>

1- Substitua 'URL do Link' pelo endereço do Link que você quer colocar;
2- Em title=' ' » coloque entre as aspas '____' o título do link;
3- Ítens e Home » Substitua os Ítens pelo título do link para que apareça na barra de navegação.

A Pasta de Download Contém

Código XML;
Imagens usadas no template.

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

Aproveitem :P

Template Atualizado em 15/09/2009

Caso algum dos hacks novos do blogger não funcionem você pode consultar meus amigos:
♦ Ativando foto nos comentários e Correções
♦ Jump Break – o hack “Leia mais” do Blogger

Template Angel

2009-08-29T18:14:00.000-07:00

Clique na imagem para ampliar.

DOWNLOAD | DEMO

NÃO SE ESQUEÇAM, NÃO RETIREM OS CRÉDITOS.
Nem REDISTRIBUAM SEM A MINHA PRÉVIA AUTORIZAÇÃO.

Hacks instalados:

QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NOS LINKS DOS MESMOS PARA ENTENDER MELHOR!

Observações:

♦ Todos os códigos Javascript usados no template estão contidos nele.

A Pasta de Download Contém

Código XML;
Imagens usadas no template.

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

Aproveitem :)

Template Atualizado em 29/08/2009

Template Iara

2009-08-19T19:53:00.001-07:00

» Este template tem o nome da blogueira Iara dona do blog Mais Atitudes e foi criado em sua homenagem. Um blog que tem a seguinte proposta:"Breves divagações sobre: Comportamento, Cotidiano, Relacionamentos e coisas de mulheres."
Conheço Iara desde 2007 quando criei o Aukimia e desde então, estamos sempre por aí, uma com o link da outra, de vez em quando nos falamos e comentamos. Iara é muito simpática e sincera, qualidades que gosto muito. Ela havia me pedido para fazer um template com uma coluna apenas como é o blog dela, mas não consegui e coloquei uma sidebar no template. Mesmo assim acho que ficou uma combinação bem legal.
Então aproveitem o template.

Mas, NÃO SE ESQUEÇAM, NÃO RETIREM OS CRÉDITOS.
Nem REDISTRIBUAM SEM A MINHA PRÉVIA AUTORIZAÇÃO.

DEMO | DOWNLOAD-4SHARED

Hacks instalados:

Hack Leia Mais com Imagens Reduzidas

Lista de Posts Relacionados no Fim do Post

Paginação no Blogger
» Veja o 2º Passo deste link como configurar a Paginação no Seu Blog para que Funcione Corretamente.

Breadcrumb - Uma ferramenta de Usabilidade

Link de Comentários Corrigido

Personalizando a Data do seu Post

QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NOS LINKS DOS MESMOS PARA ENTENDER MELHOR!

Observações:

♦ Você deve configurar o ícone com o link do Twitter colocando o seu ID no Twitter. Para isso encontre a linha <a href='http://twitter.com/seuID'> e substitua "seuID" pelo seu ID no Twitter.
♦ Os outros dois links de Feeds e Feeds-Email já estão configurados para funcionar automaticamente.
♦ Todos os códigos Javascript usados no template estão contidos nele.

A Pasta de Download Contém

Código XML;
Imagens usadas no template.

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

Aproveitem :)

Template Left Black

2009-08-11T12:42:00.001-07:00

Este template é a versão escura do Gray Left com um papel de parede como background.
A fonte usada é Arial diferente da Trebuchet do Gray Left.

DEMO | DOWNLOAD-4SHARED

Orientações Sobre o Menu e Caixa de Pesquisas

Hacks instalados:

Postagens Resumidas com imagem (thumbnail)

Abas nos Comentários
» Para que Funcione corretamente Configure os comentários do seu blog em: Configurações » Comentários » Posição do formulário de comentários » Marque:Postagem abaixo incorporada.

Lista de Posts Relacionados no Fim do Post

Paginação no Blogger
» Veja no 2º Passo neste link como configurar para que a paginação no seu blog funcione.

Breadcrumb - Uma ferramenta de Usabilidade

Link de Comentários Corrigido

Personalizando a Data do seu Post

QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NOS LINKS DOS MESMOS PARA ENTENDER MELHOR!

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:

Aproveitem :)

Template Gray Left

2009-08-10T13:36:00.001-07:00

Seguindo a mesma linha do Template Eddie este template tem um design mais moderno, um menu de navegação e links para feeds e feeds por email já configurados para o endereço do blog que usá-lo. (Se tiver um feed é claro.)

DEMO | DOWNLOAD-4SHARED

Orientações Sobre o Menu e Caixa de Pesquisas

Hacks instalados:

Postagens Resumidas com imagem (thumbnail)

Abas nos Comentários
» Para que Funcione corretamente Configure os comentários do seu blog em: Configurações » Comentários » Posição do formulário de comentários » Marque:Postagem abaixo incorporada.

Lista de Posts Relacionados no Fim do Post

Paginação no Blogger
» Veja no 2º Passo neste link como configurar para que a paginação no seu blog funcione.

Breadcrumb - Uma ferramenta de Usabilidade

Link de Comentários Corrigido

Personalizando a Data do seu Post

QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NOS LINKS DOS MESMOS PARA ENTENDER MELHOR!

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:

Aproveitem :)

Template Eddie

2009-08-05T08:16:00.001-07:00

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

DEMO | DOWNLOAD-4SHARED

Hacks instalados:

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:

Aproveitem :)

Template Red-Rounded Classic

2009-03-18T16:51:00.000-07:00

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:

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.

Data do post personalizada e que se repete em posts do mesmo dia. Veja: Personalizando a Data do seu Post .

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

Hack "Leia Mais" já instalado. Veja: Hack Leia Mais

Post Blockquote com imagens de aspas. Veja: Blockquote e Caixinha de Códigos

Posts Relacionados. Veja: Posts Relacionados no Fim do Post

☺Á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

Template Black and Red Basic

2009-02-24T16:21:00.000-08:00

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:

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.
Data do post personalizada e que se repete em posts do mesmo dia. Veja: Personalizando a Data do seu Post .
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
Hack "Leia Mais" já instalado. Veja: Hack Leia Mais
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

Bugs dos Templates

2009-02-24T15:51:00.000-08:00

Quando crio os templates testo-os em 3 navegadores: o Firefox (é onde crio); o Google Chrome e o IE7.

Mas mesmo testando e tentando resolver qualquer problema, às vezes aparecem alguns errinhos depois de publicados.

Muitas vezes as pessoas que baixaram os templates e estão usando comentam no post do template dizendo que há algum problema. Assim, sempre que posso, vou até o template base e procuro onde consertar. Quando detecto um problema de edição vou até a pessoa e aviso onde corrigir.

Já corrigi alguns e também corrigi o link de download nos posts de origem.

São estes aqui:

Nice!

Listen Rosa

Listen Azul e Listen Preto

Gostaria de usar este Post para que vocês Reportem nos Comentários alguns possíveis bugs de Edição que os Templates criados por mim possam estar dando.

ASSIM QUE PUDER irei ver o que está acontecendo e se eu detectar um ERRO DE EDIÇÃO e NÃO de MAU USO.

Corrigirei e vou colocar o novo link no post de origem!

Templates Listen Azul e Preto

2008-10-16T17:26:00.000-07:00

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:

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

TEMPLATE LISTEN ROSA

2008-10-16T16:54:00.000-07:00

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

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:

☺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

TEMPLATE BLUE LOVE

2008-10-16T16:52:00.002-07:00

ESTE TEMPLATE TEM:

►4 COLUNAS, UMA DEDICADA AO ADSENSE COM 120px DE LARGURA;

►POSSUI 3 COLUNAS NO RODAPÉ;

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

Clique na imagem para ampliar.

DEMO | DOWNLOAD

Para Configurar o Menu.
Clique em Layout
►Em Elementos de Página altere a Lista de Links logo Abaixo do Cabeçalho;

TEMPLATE SimpleAdSense

2008-10-16T16:52:00.001-07:00

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>

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

</div>

<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>
►ACRESCENTE AQUI O CÓDIGO BASE ABAIXO◄
</div>

Este código base:

<div class='tabber' id='tab3'>
<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg#' maxwidgets='1' showaddelement='yes'/>
</div>
</div>

→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 RED STAR

2008-10-16T16:32:00.002-07:00

Clique na imagem para ampliar.

»DOWNLOAD AQUI«

Para Configurar .
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 CONFIGURAR O MENU SUPERIOR
Em Layout→Elementos da página→Editar HTML→Encontre o código:
<div id='menu'>
<li><a class='current' href='http://http://templatesparavoce.blogspot.com'>Home</a></li>
<li><a href='http://'>Link2</a></li>
<li><a href='http://'>Link3</a></li>
<li><a href='http://'>Link4</a></li>
<li><a href='http://'>Link5</a></li>
</div>

» O que está em AZUL deve ser substituído pelo ENDEREÇO do Link.
» O que está em VERMELHO deve ser substituído pelo TÍTULO do Link

APROVEITEM O TEMPLATE!

TEMPLATE ANIME-02

2008-10-16T16:32:00.001-07:00

Clique na imagem para ampliar.

»DOWNLOAD AQUI«

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!

TEMPLATES BUTTERFLY

2008-10-16T16:17:00.000-07:00

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

TEMPLATE CLIPS

2008-06-17T18:20:00.000-07:00

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«

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

»Clique na imagem para ampliar

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

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

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

</div>

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>
►ACRESCENTE AQUI O CÓDIGO BASE ABAIXO◄
</div>

Este código base:

<div class='tabber' id='tab3'>
<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg#' maxwidgets='1' showaddelement='yes'/>
</div>
</div>

→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

TEMPLATE TABS 01

2008-06-17T18:18:00.000-07:00

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«

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>

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

</div>

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>
ACRESCENTE AQUI
</div>

Este código base:

<div class='tabber' id='tab3'>
<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg#' maxwidgets='1' showaddelement='yes'/>
</div>
</div>

→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 NICE-02

2008-04-16T18:24:00.000-07:00

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!

TEMPLATE NICE!

2008-04-16T18:22:00.000-07:00

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:

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

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

TEMPLATE NOITE

2008-04-16T18:21:00.000-07:00

Clique na imagem para ampliar.

»FAÇA O DOWNLOAD AQUI«

TEMPLATE ANIME 01

2008-04-16T18:13:00.001-07:00

Clique na imagem para ampliar.

»FAÇA O DOWNLOAD AQUI«

►Para alterar os links da barra de navegação e configurar a busca:

→Encontre o código
<div class='red'>
<div id='slatenav'>
<ul>
<li><a href='#' title=''>Home</a></li>

<li><a href='#' title=''>About Us</a></li>

<li><a href='#' title=''>Services</a></li>

<li><a href='#' title=''>Our Work</a></li>

<li><a href='#' title=''>Contact Us</a></li>

<div style='float: right; margin:10px 10px;'><form action='http://ENDEREÇO DO SEU BLOG/search' id='searchthis' method='get' style='display: inline;'>
<table cellpadding='0' cellspacing='0' style='width: 200px; height: 100%;'>
<tbody>
<tr>
<td valign='middle'>
<input id='b-query' name='q' type='text'/>
</td>
<td class='navbutton' valign='middle'>
<input id='submit' name='submit' tabindex='1' type='submit' value='Busca'/>
</td>
</tr>
</tbody>
</table></form></div>
</ul>
</div>

1º →Altere # pelo endereço do Link e as palavras Home, About Us, Services, Our Work, Contact Us pelos títulos correspondentes aos links.
2º →Na linha: <form action='http://ENDEREÇO DO SEU BLOG/search' id='searchthis' method='get' style='display: inline;'>
→ Coloque o Endereço do seu blog onde está indicado.

TEMPLATE FAIRY

2008-04-16T18:08:00.000-07:00

Clique na imagem para ampliar.

»FAÇA O DOWNLOAD AQUI«

►Para alterar os links da barra de navegação!

Encontre o seguinte 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>

1- Substitua '#' pelo endereço do Link que você quer colocar;
2- Em title='' → coloque entre as aspas '____' o título do link substituindo as palavras Link 1, Link 2, Link 3...;
3- Links → Substitua os Link 1, Link 2, Link 3... pelo título do link para que apareça na barra de navegação.

ESTE TEMPLATE ESTÁ NUM ARQUIVO ZIP ACOMPANHADO DAS IMAGENS QUE ELE CONTÉM. DESCOMPACTE-O E INSTALE O ARQUIVO XML, ELE JÁ CONTÉM AS IMAGENS HOSPEDADAS NO SITE TINYPIC, SE HOUVER QUALQUER PROBLEMA VOCÊ JÁ TEM AS IMAGENS DELE PARA HOSPEDAR ONDE QUISER E SUBSTITUIR NO HTML DO BLOG.

TEMPLATE RED A1

2008-01-24T16:11:00.000-08:00

Clique na imagem para ampliar.

►FAÇA O DOWNLOAD DO TEMPLATE COMPLETO AQUI◄

Se você não quiser mudar o código todo do template pode alterar apenas os endereços das imagens, porque eles podem parar de serem exibidos pelo Photobucket a partir de fevereiro de 2008.

Para alterar os endereços das imagens deste template você deve encontrar os endereços das imagens no código html do blog:
Vá em Layout→ Modelo→ Editar HTML → Acione a tecla F3 e digite photobucket.
►O primeiro e único endereço de imagem que você vai encontrar será o do cabeçalho:

Você pode salvar esta imagem no seu computador e depois fazer upload em algum site de hospedagem que desejar.
Ou usar o endereço: http://i30.tinypic.com/24x2rn7.jpg