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

Menu Expansível






Quer aprender como fazer isso? Clique no link TUTORIAL MENU EXPANDÍVEL TEMPLATES E ACESSÓRIOS que você saberá como fazer!
Esta é uma dica muito legal que aprendi com minha amiga Elke.
Ela ensina no seu blog isto e muito mais entre lá e veja o botão Dicas! Você não vai se arrepender!

TEMPLATES BLACK 3 COLUNAS SEM BARRA DE NAVEGAÇÃO





Estes templates são customizáveis, ou seja, as cores podem ser alteradas, a imagem do cabeçalho pode ser acrescentada e seu tamanho também pode ser alterado, exceto os títulos das sidebars e posts.

Especificações
Coluna da esquerda (sidebar-wrapper): 250px
Coluna do centro (main-wrapper): 470px
Coluna da direita (newsidebar-wrapper): 250px
Largura total do template (outer-wrapper): 985px
Cabeçalho (header): 985px (lagura) x 240px(altura)

Para alterar o tamanho (altura) do cabeçalho
Encontre os códigos:
#header-wrapper {
width:985px;
height:242px;
padding:0px;
margin:0px 0px 10px 0px;
background: url() no-repeat left top;
}
#header {
height:240px;
background:$headercolor url()top;
text-align: center;
color:$titlecolor;
border: 1px solid $bordercolor;
}
As linhas em verde correspondem à altura do cabeçalho, se você quiser aumentar ou diminuir deve alterar as duas de acordo com a sua imagem para que o template não fique todo bagunçado.

Ex: Sua imagem tem 985px de largura e 300px de altura, então altere as linhas verdes no seu código HTML para height:300px;

Qualquer dúvida consulte o tutorial:
COMO ALTERAR O TAMANHO DO CABEÇALHO E SUA IMAGEM

Para acrescentar a Imagem no topo do template:
Vá em Modelo → Elementos da página → Acrescente no cabeçalho um código html com o endereço (<img src="Endereço da Imagem">) link da imagem que quer colocar.
Não se esqueça de ajustar o tamanho do cabeçalho para que seu template não fique todo desconfigurado.

ATENÇÃO TEMPLATES CORRIGIDOS E IMAGENS PARA DOWNLOAD ► CLIQUE AQUI

Correção do Template PurppleA1




Se você usa o Internet Explorer deve ter percebido que a imagem do template PurpleA1 está descentralizada. Isso porque muitas vezes pode dar algumas diferenças nos templates quando mudamos de programas de navegação.
Como eu uso o Firefox, às vezes me esqueço de visualizar no IE como o template ficou, foi o que aconteceu com este template.
Então vou ensinar como corrigir este problema:
Clique em Layout no painel principal da sua conta blogger. Lá clique em Modelo→ Editar HTML→ No quadrado com o código em HTML encontre o código.
#header-wrapper {
width:800px;
height:400px;
padding-left:10px;
margin:0px 0px 0px 0px;
background:;
float: right;
}
Retire, delete as linhas em vermelho e clique em visualizar.
Viu? Sua imagem ficou centralizada de novo! Então salve o template!

TEMPLATE BLACK & YELLOW




Qualquer semelhança é mera coincidência! Hehehe...

Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar.

FAÇA O DOWNLOAD AQUI

Especificações
Coluna da direita (sidebar-wrapper): 230px
Coluna do centro (newsidebar-wrapper): 230px
Coluna da esquerda (main-wrapper): 460px
Widget abaixo das sidebars (rightsidebar-wrapper): 470px;
Largura total do template (outer-wrapper): 945px

Para colocar os Links da Barra de Navegação e os Nomes dos Links

Encontre o seguinte código:

<div id='menu'>
<ul >
<li><a href='Endereço'>Home</a>>/li>
<li><a href='Endereço' title=''><b>Nome do Link1</b>>/a>>/li>
<li><a href='Endereço' title=''><b>Nome do Link2</b>>/a>>/li>
<li><a href='Endereço' title=''><b>Nome do Link3</b>>/a>>/li>
</ul>
</div>

1- Substitua 'Endereço' pelo endereço do Link que você quer colocar;
2- Em title='' ? coloque entre as aspas '____' o título do link;
3- Nome do Link ? Substitua as paralvras "Nome do Link" pelo título do link para que apareça na barra de navegação;
4- Em Home ? Substitua 'Endereço' pelo endereço do seu blog.


NOTA: GOSTARIA DE PEDIR DESCULPAS A TODOS QUE TENTARAM FAZER O DOWNLOAD DESTE TEMPLATE DESDE 22/11 ATÉ 24/11 DE MANHÃ.
O LINK PARA DOWNLOAD ESTAVA ERRADO, MAS JÁ FOI FEITA A CORREÇÃO!

TEMPLATE CADERNO1




Um template escolar para quem gosta do tema!

Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar.

FAÇA O DOWNLOAD AQUI

Especificações
Coluna da esquerda (sidebar-wrapper): 210px
Coluna do centro (newsidebar-wrapper): 210px
Coluna da direita (main-wrapper): 450px
Largura total do template (outer-wrapper): 880px
Tamanho da Imagem: 450px(Largura) x 300px(Altura)

Para colocar os Links da Barra de Navegação e os Nomes dos Links

Encontre o seguinte código:

<div id='menu'>
<ul >
<li><a href='Endereço'>Home</a>>/li>
<li><a href='Endereço' title=''><b>Nome do Link1</b>>/a>>/li>
<li><a href='Endereço' title=''><b>Nome do Link2</b>>/a>>/li>
<li><a href='Endereço' title=''><b>Nome do Link3</b>>/a>>/li>
<li><a href='Endereço' title=''><b>Nome do Link4</b>>/a>>/li>
<li><a href='Endereço' title=''><b>Nome do Link5</b>>/a>>/li>
</ul>
</div>

1- Substitua 'Endereço' pelo endereço do Link que você quer colocar;
2- Em title='' → coloque entre as aspas '____' o título do link;
3- Nome do Link → Substitua as paralvras "Nome do Link" pelo título do link para que apareça na barra de navegação;
4- Em Home → Substitua 'Endereço' pelo endereço do seu blog.


Conhecem o Tray Color?




Tem muitos dias que quero divugar este programinha e fazer um tutorial sobre ele aqui no Templates, mas o tempo acaba não dando, ou acabo esquecendo!
Hoje resolvi colocar tudo aqui!
Este programa é muito útil para quem edita imagens e quer saber quais cores uma imagem tem!
Vamos lá:
- Baixe o programa AQUI e extraia do arquivo zip.

Unlimited Free Image and File Hosting at MediaFire
Você pode ver que ele tem um arquivo de ajuda, mas em inglês.
Então, para ficar mais fácil utilizá-lo siga os passos que vou ensinar aqui.


1º Selecione o tipo de código de cor que deseja usar → Sempre uso HTML
→Nesse caso Branco-#FFFFFF
Unlimited Free Image and File Hosting at MediaFire

2º Clique em Grab Color→ Irá aparecer o conta-gotas que está em cima da cor verde na segunda seta da imagem→ Clique em cima da cor que deseja (Aqui é a cor verde)→ O programa irá identificar e dar o Código em HTML da COR →#00FF00 (verde)
Unlimited Free Image and File Hosting at MediaFire

3º Clique em Copy que você terá o código copiado automaticamente para poder usar onde quiser.
Unlimited Free Image and File Hosting at MediaFire

OBS: Logo que você clica em Copy o programa se esconde automaticamente na Barra de Tarefas do seu computador (Do lado direito Abaixo)
→ Se precisar usá-lo novamente clique no ícone dele com o botão direito e já selecione Grab Color →Ele irá disponibilizar a ferramenta de cópia de cor no que estiver aberto no seu PC ou clique em Show TC→ Abra o que quer identificar as cores e proceda como ensinei anteriormente.

Este programinha é leve e muito útil para identificarmos as cores do que estamos usando!

TEMPLATE UVA 2COLUNAS





Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar.

FAÇA O DOWNLOAD AQUI

TEMPLATE GREEN




Meu primeiro template verde! Gostei do resultado!

Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar.

»FAÇA O DOWNLOAD AQUI«

Especificações
Coluna da esquerda (sidebar-wrapper): 235px
Coluna do centro (main-wrapper): 490px
Coluna da direita (newsidebar-wrapper): 235px
Largura total do template (outer-wrapper): 970px



Encontre o seguinte código:

<div id='stylefour'>
<ul >
<li><a class='current' href='Endereço'>Home</a>>/li>
<li><a href='Endereço' title=''><b>Ítem2</b>>/a>>/li>
<li><a href='Endereço' title=''><b>Ítem3</b>>/a>>/li>
<li><a href='Endereço' title=''><b>Ítem4</b>>/a>>/li>
<li><a href='Endereço' title=''><b>Ítem5</b>>/a>>/li>
<li><a href='Endereço' title=''><b>Ítem6</b>>/a>>/li>
</ul>
</div>
1- Substitua 'Endereço' pelo endereço do Link que você quer colocar;
2- Em title='' -> coloque entre as aspas '____' o título do link;
3- Ítens -> Substitua os Ítens pelo título do link para que apareça na barra de navegação.


ATENÇÃO TEMPLATE CORRIGIDO E IMAGENS PARA DOWNLOAD ► CLIQUE AQUI

TEMPLATE PURPPLE A2




Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar.

FAÇA O DOWNLOAD AQUI

Como Salvar as Widgets do seu Template Antigo para o Novo




Você tem um blog já estruturado e com várias caixinhas (widgets) laterais com um conteúdo bem legal que não quer perder. Mas se depara com um template lindo e quer mudar a "cara" do seu blog.

Você baixa o template novo, faz o Upload do template novo, e dá de cara com esta mensagem:

Os widgets serão excluídos

Se você confirmar a exclusão dos itens a seguir. Toda a configuração dos itens será perdida.

Aparecem os dois botões: CONFIRMAR & SALVAR ou CANCELAR

Realmente serão perdidas se você clicar em CONFIRMAR & SALVAR.

Para que isso não aconteça siga estes passos abaixo que você recupera todas as suas widgets e fica com o template lindo novo em folha.

1º- Antes de qualquer coisa, salve seu template atual! Clique em Baixar Modelo Completo e salve uma cópia no seu computador.

2º- Para que você não perca as caixinhas (widgets) laterais você deve, antes de mudar o template (qualquer template), salvar em um bloco de notas todas as informações que contiverem nelas.
Por exemplo:
a. Se a sua primeira caixinha lateral é um slideshow, com certeza um código HTML, então copie o código e cole num bloco de notas. Faça isso para todos os widgets com códigos HTML. Clique em cancelar, não altere a caixinha e ela volta para o template atual.

b.Se for uma lista de links, abra a caixinha e clique em editar do lado esquerdo do link que você já havia adicionado, então copie o título cole no bloco de notas em seguida copie o endereço do link e cole abaixo do título no bloco de notas. Faça isso com todos os links da sua lista. Depois clique em cancelar.

c. Se você tem uma imagem na sua caixinha, certamente você tem uma cópia desta imagem no seu PC ou sabe o endereço dessa imagem na rede. Grave que aquele widget era uma imagem e depois recoloque-o no seu blog.

Sempre que você clicar em cancelar suas caixinhas voltam para seu tempalte atual normalmente, mas quando você mudar seu template você pode perdê-las ou não, mas mais provavelmente vai perdê-las.

Por isso você deve salvar o conteúdo de todas as caixinhas para restaurá-las assim que mudar o template.

Os posts serão mantidos sem alteração seja qualquer mudança de template que você fizer.

Olha que já troquei muitos templates e os posts sempre estiveram intactos.
____________________________________________________________________


☺EXPERIÊNCIA PRÓPRIA:
Perdi todo o conteúdo das widgets de 2 blogs quando fui mudar o template deles.
►Da 1ª vez mudei com a cara e coragem clicando em CONFIRMAR & SALVAR deixando que elas fossem excluídas por não saber, na época, nem o que fossem widgets.

►Da 2ª vez segui o passo a passo do tutorial do Blog Templates, vi que as widgets estavam lá, mas vazias sem conteúdo e não adiantou voltar para o template anterior salvo que elas não voltaram.

Por isso adotei a prática de salvar todo o conteúdo das widgets antes de fazer qualquer alteração, aí deu certo!

Boa sorte!

TEMPLATE SUBSCRIBE DO BLOGGER MODIFICADO COM 3COLUNAS






Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar.

FAÇA O DOWNLOAD AQUI

Especificações
Coluna da esquerda (sidebar-wrapper): 180px
Coluna do centro (main-wrapper): 470px
Coluna da direita (newsidebar-wrapper): 180px
Largura total do template (outer-wrapper): 860px


BLACK-RED A2





Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar.

►FAÇA O DOWNLOAD AQUI◄

Especificações
Coluna da esquerda (sidebar-wrapper): 220px
Coluna do centro (main-wrapper): 430px
Coluna da direita (newsidebar-wrapper): 220px
Largura total do template (outer-wrapper): 900px


►Para colocar os links na barra de navegação
Encontre o seguinte código:

<div id='menu'>
<ul>
<li><a href='Endereço' title=''><b>Ítem1</b>>/a>>/li>
<li><a href='Endereço' title=''><b>Ítem2</b>>/a>>/li>
<li><a href='Endereço' title=''><b>Ítem3</b>>/a>>/li>
<li><a href='Endereço' title=''><b>Ítem4</b>>/a>>/li>
<li><a href='Endereço' title=''><b>Ítem5</b>>/a>>/li>
<li><a href='Endereço' title=''><b>Ítem6</b>>/a>>/li>
</ul>
</div>

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

ATENÇÃO TEMPLATE CORRIGIDO E IMAGENS PARA DOWNLOAD ► CLIQUE AQUI

CREAM-A1





Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar.

FAÇA O DOWNLOAD AQUI

Especificações
Coluna da esquerda (sidebar-wrapper): 220px
Coluna do direita (main-wrapper): 480px
Largura total do template (outer-wrapper): 720px



Encontre o seguinte código:

<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>
</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 -> Substitua os Ítens pelo título do link para que apareça na barra de navegação.

TEMPLATE PURPPLE





Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar.

FAÇA O DOWNLOAD AQUI


Especificações
Coluna da esquerda (sidebar-wrapper): 185px
Coluna do centro (main-wrapper): 400px
Coluna da direita (newsidebar-wrapper):1850px
Largura total do template (outer-wrapper): 800px

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

Encontre o seguinte código:

<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 -> Substitua os Ítens pelo título do link para que apareça na barra de navegação.

ATENÇÃO TEMPLATE CORRIGIDO E IMAGENS PARA DOWNLOAD ► CLIQUE AQUI


 
Copyright ©2007-2014. Templates para VOCÊ - Todos os Direitos Reservados
Licença Creative Commons
Baseado no Tema Johny Classicsite | Tecnologia do Blogger