Mostrando postagens com marcador Templates Gratuitos. Mostrar todas as postagens
Mostrando postagens com marcador Templates Gratuitos. Mostrar todas as postagens

domingo, 1 de maio de 2011

Template DB 4.0

Olá queridos leitores
Como eu ainda não sei quando irei voltar, resolvi presenteá-los com o antigo template do blog, que na época da troca muita gente enviou emails e comentários pedindo que eu o liberasse pra download. Trata-se do Template DB 4.0.
Template DB 4
Ele já vem com vários hacks instalados, mas as cores e fontes só podem ser mudadas entrando no HTML, então não recomendo o uso dele para quem não tem conhecimento em CSS. A imagem do cabeçalho tem largura de 970px.
É o nosso primeiro template com rodapé dividido em 4 partes.
Aqui seguem algumas instruções para um melhor aproveitamento de nossos modelos:
Para baixar o template, clique aqui
Para ver o modelo em um blog de testes, clique aqui.
Abraços, Juliana

sexta-feira, 17 de setembro de 2010

Template Style

Este é Template Style, nas cores azul, preto e cinza e com detalhes em degradé e 3D. A maioria das cores podem ser mudadas através do próprio painel do Blogger, bem como a imagem do cabeçalho. Ele é leve, moderno e gratuito.

Template Style
RECURSOS INSTALADOS CARACTERÍSTICAS DO TEMPLATE
Posts Relacionados Cores e fontes personalizáveis
Retirada da Navbar Compatível com navegadores atuais
Avatar nos comentários 1 coluna de cada lado
Citação em bloco personalizada Nome do seu blog nos créditos
Jump Break e Hack Leia Mais CSS otimizado
Botões de compartilhamento Cores em degradé
Caixa de busca no cabeçalho Caixa de busca estilizada
Favicon Carregamento rápido
Citação em bloco personalizada Design moderno

Antes de instalar o Template Style em seu blog, leia atentamente este artigo:
Agora leia as instruções específicas para o Template Style:
1. Alterando a imagem de exibição do cabeçalho
Na pasta do template, você encontrará uma imagem em formato .png. Entre em elementos de página e clique em cabeçalho>editar. Faça o upload da imagem e escolha a opção “por trás do título e descrição”
Se você quiser criar a sua própria imagem, escolha o tamanho 920 x 150 px e cor de fundo #333 e salve-a no fomato .PNG.
2. Fontes e Cores
A maioria das fontes e das cores podem ser alteradas pelo painel do Blogger, exceto o background, a linkbar e os títulos da sidebar.
3. Retirando a caixa de busca
Entre no HTML do template, procure pelo trecho abaixo e apague-o:
<div id='search'>
<form expr:action='data:blog.homepageurl + &quot;search&quot;' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s' name='q' type='text' value=''/>
<input src='http://lh3.ggpht.com/_mcq01yDJ2uY/TIoN4zHVJmI/AAAAAAAADi0/-lPcOV2086M/search.gif' style='border:0; vertical-align: top;' type='image'/>
</form>
</div>
O template é gratuito e está pronto para uso. Caso você queira realizar mudanças na estrutura dele ou instalar novos recursos, pesquise como fazer.
Depois que você instalar este template em seu blog, volte aqui e deixe o link dele nos comentários para que eu possa ver como ficou ;)
©Template by Dicas Blogger – alguns direitos reservados. Não retire os créditos.

sexta-feira, 10 de setembro de 2010

Template Business

Apresento-lhes o Template Business. Trata-se de um tema moderno e arrojado, com diversos recursos instalados, fontes e cores personalizáveis e compatível com as últimas versões dos principais navegadores – Internet Explorer, Chrome e Firefox.

Template Business DemonstraçãoDownloadLicença

RECURSOS INSTALADOS
CARACTERÍSTICAS
  • 1 coluna à direita
  • 3 blocos no rodapé
  • Nome do seu blog nos créditos
  • CSS otimizado
  • caixa de busca estilizada
  • compatível com as últimas versões dos principais navegadores
  • fontes e cores personalizáveis

Modo de Usar – Instruções comuns a todos os templates

Leia atentamente as instruções abaixo antes de instalar este template:

Instruções Específicas para o Template Business

1.Alterando a imagem de exibição do cabeçalho

Na pasta do template, você encontrará uma imagem em formato .png. Entre em elementos de página e clique em cabeçalho>editar. Faça o upload da imagem e escolha a opção “por trás do título e descrição”

Upload da imagem

2.Caixa de busca na sidebar

O uso da caixa de busca é opcional. Entre em elementos de página, escolha “adicionar uma gadget”>HTML/Javascript e cole o seguinte código:

<div id='search'>
<form expr:action='data:blog.homepageurl + &quot;search&quot;' id='searchform' method='get' name='searchform'>
<input class="keyword" id="s" name="q" type="text" value="" />
<input src="http://lh3.ggpht.com/_mcq01yDJ2uY/TIoN4zHVJmI/AAAAAAAADi0/-lPcOV2086M/search.gif" style="border:0; vertical-align: top;" type="image" />
</form>

</div>

3.Fontes e Cores

A maioria das fontes e das cores podem ser alteradas pelo painel do Blogger, exceto o background, a linkbar, os créditos e os títulos da sidebar.

O template é gratuito e está pronto para uso. Caso você queira realizar mudanças na estrutura dele ou instalar novos recursos, pesquise como fazer.

©Template by Dicas Blogger – alguns direitos reservados. Não retire os créditos.

quarta-feira, 18 de agosto de 2010

Template Soccer

Continuando a série de templates temáticos, apresento-lhes o Template Soccer, especialmente criado para blogs sobre futebol.

O Template Soccer possui dois planos de fundo: o primeiro é verde, ilustrado com bolas de futebol e o segundo é levemente transparente. Linkbar, sidebar e blocos do rodapé estão em tons de gradiente (cinza mais escuro e cinza mais claro).

Template Soccer

DemonstraçãoDownloadLicença

RECURSOS INSTALADOS
CARACTERÍSTICAS
  • Bordas arredondadas
  • 2 tipos de plano de fundo
  • Uso de gradiente
  • Template temático
  • 1 coluna à direita
  • 3 blocos no rodapé
  • Nome do seu blog nos créditos
  • CSS otimizado
  • Diversos hacks instalados

Modo de Usar – Instruções comuns a todos os templates

Leia atentamente as instruções a seguir, onde explico detalhadamente como instalar os templates, bem como realizar algumas modificações básicas:

Instruções Específicas para o Template Soccer

Alterando a imagem de exibição

Se você quiser mudar a imagem que fica ao lado do cabeçalho (o par de chuteiras), entre no HTML do template e procure por:

<div id='imagem'>
<img alt='' src='http://lh4.ggpht.com/_mcq01yDJ2uY/TGtDyWbvJbI/AAAAAAAADKg/JwE6-knvRYU/soccer_5.png'/>
</div>

Escolha ou crie uma imagem do tamanho 256 x 256 px com fundo transparente e em formato .png. Faça o upload no Picasa ou em outro serviço de sua preferência, copie o endereço da nova imagem e cole na parte em azul do código.

Ajustando a posição da imagem

Para ajustar o posicionamento da imagem (topo e direita), procure por:

#imagem {
padding-right:35px;
position:absolute;
right:0;
top:0px;
}

Mudando o plano de fundo

No arquivo que você baixou, além do template e da imagem para o cabeçalho, existem três imagens de planos de fundo – azul, vermelho e amarelo.

Backgrounds

Para mudar o atual plano de fundo verde por um desses três, procure por:

body {
text-align:center;
color:$textColor;
background-color:$bodybgColor;
background-image: url(http://lh3.ggpht.com/_mcq01yDJ2uY/TGnnSrQHpgI/AAAAAAAADFw/VY_Bn1MqTHE/bg_soccer.png);

Hospede o plano de fundo no Picasa, copie o endereço da imagem e substitua a url do código acima pela url da nova imagem.

Colocando a imagem do cabeçalho

Na pasta do template, você encontrará uma imagem em formato .png. Basta escrever o nome do seu blog e fazer o upload nos elementos de página do Blogger.

A fonte que usei para o cabeçalho da demonstração foi a Blue Highway Condensed.

©Template by Dicas Blogger – alguns direitos reservados. Não retire os créditos.

segunda-feira, 16 de agosto de 2010

Template Gourmet

Este é mais um template temático, desta vez voltado aos blogs de culinária. A customização foi feita usando o mesmo layout do Template Pet.

O Template Gourmet possui 1 coluna à direita, 3 blocos para gadgets no rodapé e todos os ícones seguem o tema do modelo. As fontes e cores são personalizáveis.

Template Gourmet

DemonstraçãoDownloadLicença

RECURSOS INSTALADOS
CARACTERÍSTICAS
  • Cores e fontes personalizáveis
  • Compatível com qualquer navegador que esteja devidamente atualizado.
  • Template temático
  • 1 coluna à direita
  • 3 blocos no rodapé
  • Nome do seu blog no rodapé (auto)
  • CSS otimizado
  • Diversos hacks instalados

Modo de Usar – Instruções comuns a todos os templates

Leia atentamente as instruções a seguir, onde explico detalhadamente como instalar os templates, bem como realizar algumas modificações básicas:

Instruções Específicas para o Template Gourmet

Alterando a imagem de exibição

Se você quiser mudar a imagem que fica ao lado do cabeçalho (neste caso é de um chef de cozinha), entre no HTML do template e procure por:

<div id='imagem'>
<img alt='' src='http://lh5.ggpht.com/_mcq01yDJ2uY/TGlUrlxRLSI/AAAAAAAADCw/hiKVSnCB588/22.png'/>
</div>

Escolha ou crie uma imagem do tamanho 256 x 256 px com fundo transparente e em formato .png. Faça o upload no Picasa ou em outro serviço de sua preferência, copie o endereço da nova imagem e cole na parte em azul do código.

Ajustando a posição da imagem

Para ajustar o posicionamento da imagem (topo e direita), procure por:

#imagem {
padding-right:35px;
position:absolute;
right:0;
top:0px;
}

©Template by Dicas Blogger – alguns direitos reservados. Não retire os créditos.

Template Pet

Trata-se de um layout temático, para quem curte animais de estimação. O Template Pet tem 1 coluna à direita, 3 blocos no rodapé e um espaço para inserir imagens de acordo com o assunto do blog. Fontes e cores 100% personalizáveis.

Template Pet

DemonstraçãoDownloadLicença

RECURSOS INSTALADOS
CARACTERÍSTICAS
  • Cores e fontes personalizáveis
  • Compatível com qualquer navegador que esteja devidamente atualizado.
  • Template temático
  • 1 coluna à direita
  • 3 blocos no rodapé
  • Nome do seu blog no rodapé (auto)
  • CSS otimizado
  • Diversos hacks instalados

Leia atentamente as instruções a seguir, onde explico detalhadamente como instalar os templates, bem como realizar algumas modificações básicas:

Instruções Específicas para o Template Pet

Alterando a imagem de exibição

Se você quiser mudar a imagem que aparece ao lado do cabeçalho (que neste caso, é um cãozinho), entre no HTML do template e procure por:

<div id='imagem'>
<img alt='' src='http://lh4.ggpht.com/_mcq01yDJ2uY/TGgeorYJfbI/AAAAAAAADA8/QHBfsyY8eR4/dog-icon.png'/>
</div>

Escolha ou crie uma imagem do tamanho 256 x 256 px com fundo transparente e em formato .png. Faça o upload no Picasa ou em outro serviço de sua preferência, copie o endereço da nova imagem e cole na parte em azul do código acima.

©Template by Dicas Blogger – alguns direitos reservados. Não retire os créditos.

Muita gente tem me perguntado porquê estou lançando tantos templates ultimamente. Bom, eu tenho dois motivos: o primeiro é que precisei refazer os antigos templates, pois os códigos e hacks estavam obsoletos. O segundo motivo é que estou estudando webdesign e preciso praticar o que estou aprendendo ;)

domingo, 8 de agosto de 2010

Template Cinema

O template Cinema foi feito pensando nos vlogs – a nova onda da web – pois não possui sidebar (barra lateral) - apenas as colunas no rodapé – o que possibilita a inserção de vídeos em tamanho grande e com boa resolução de imagem.

Além de ser interessante para os vlogs, este template pode ser útil aos blogueiros que gostem de mostrar vídeos encontrados na web, aos que vendem e/ou exibem seus trabalhos ou aos que prefiram um layout limpo, livre de penduricalhos.

Template Cinema

DemonstraçãoDownloadLicença

RECURSOS INSTALADOS

CARACTERÍSTICAS DO TEMPLATE

  • Cores e fontes personalizáveis
  • Compatível com qualquer navegador que esteja devidamente atualizado.
  • Área de postagem expandida
  • 3 blocos de widgets no rodapé
  • Sem sidebar e com menu no topo
  • Nome do seu blog no rodapé (auto)
  • CSS otimizado

Modo de Usar

A seguir, explicarei como funciona cada ítem do template. Para um melhor aproveitamento, acesse os posts de referência.

Quando for necessário encontrar algum trecho dentro do template, vá até desing > editar html. Marque a caixa expandir modelos de widgets. Dê um Crtl+F em seu teclado e cole na caixa de busca do seu navegador o trecho que está buscando.

Instalando o Template Cinema

Baixe o arquivo .zip, clique com o botão direito do mouse e escolha “abrir”. Dentro da pasta, você vai encontrar um arquivo chamado Template Cinema.xml. Se você não souber como trocar o template do seu blog, acesse:

Configurando a imagem do cabeçalho

Dentro da pasta que você baixou, existem 2 imagens em formato .png. Uma é a que aparece na demonstração do template e a outra é mais voltada aos vlogs. Abra uma delas em seu programa de edição de imagens e escreva o nome do seu blog.

Imagem 1 Imagem 2

Se você preferir criar a sua própria imagem, a largura do cabeçalho é de 900px

A fonte utilizada na imagem 1 é a forte e na imagem 2 é a brushed.

Colocando links na linkbar

Para colocar links no menu que fica acima do cabeçalho - acesse:

Usando o resumo de postagens

No Template Cinema, instalei o jump break do Blogger. Saiba como usar:

Alterando o favicon

Favicon é aquele pequeno ícone que aparece no navegador, ao lado do endereço do blog. O Template Cinema já vem com o favicon instalado. Caso queira modificar, procure pelo trecho abaixo no html do template e substitua todas as urls:

]]></b:skin>

<link href='http://lh4.ggpht.com/_mcq01yDJ2uY/TF8hCqGGu-I/AAAAAAAAC7M/2zqr6jmvv2U/favicon.png' rel='shortcut icon'/>

<link href='http://lh4.ggpht.com/_mcq01yDJ2uY/TF8hCqGGu-I/AAAAAAAAC7M/2zqr6jmvv2U/favicon.png' rel='apple-touch-icon'/>

<link href='http://lh4.ggpht.com/_mcq01yDJ2uY/TF8hCqGGu-I/AAAAAAAAC7M/2zqr6jmvv2U/favicon.png' rel='shortcut icon' type='image/x-icon'/>

Como alterar a cor dos links do rodapé

Os links do rodapé estão na cor azul. Para alterar a cor, encontre este trecho:

#creditleft a,.creditleft a:hover,.creditleft a:visited,#creditright a,.creditright a:hover,.creditright a:visited {
color: #0f5cbb;
text-decoration:none;
}

Mude a parte que está em vermelho. Veja uma tabela de cores neste link.

Icones para redes sociais

Caso você queira usar os ícones que aparecem na demonstração do template, copie o código abaixo e cole no gadget HTML/javascript dos elementos de página.

<table style="text-align: left; width: 150px;" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="text-align: left;"><a
href=mailto:ENDEREÇO DE EMAIL><img
style="border: 0px solid ; width: 32px; height: 32px;" alt=""
title="Contato"
src="
http://lh4.ggpht.com/_mcq01yDJ2uY/Sx_NkkqinjI/AAAAAAAABHU/Rur7RwxSxDc/email-32x32.png" /></img
></a
></td>
<td style="text-align: left;" valign="undefined"><a
href="ENDEREÇO DO FEED"><img
style="border: 0px solid ; width: 32px; height: 32px;" alt=""
src="
http://lh3.ggpht.com/_mcq01yDJ2uY/Sx_NlEX7DFI/AAAAAAAABHc/A_yeYFAVdrs/feed-32x32.png"
title="Feeds" /></img
></a
></td>
<td style="text-align: left;" valign="undefined"><a
href="ENDEREÇO DO PERFIL FACEBOOK"><img
style="border: 0px solid ; width: 32px; height: 32px;" alt=""
src="
http://lh5.ggpht.com/_mcq01yDJ2uY/Sx_Nk3Va44I/AAAAAAAABHY/Bk5e6uCxql8/facebook-32x32.png"
title="Facebook" /></img
></a
></td>
<td style="text-align: left;" valign="undefined"><a
href="ENDEREÇO PERFIL ORKUT"><img
style="border: 0px solid ; width: 32px; height: 32px;" alt=""
src="
http://lh6.ggpht.com/_mcq01yDJ2uY/Sx_NlCwaSAI/AAAAAAAABHg/-jmESVlNpuw/orkut-32x32.png"
title="Orkut" /></img
></a
></td>
<td style="text-align: left;"><a
href="ENDEREÇO PERFIL TWITTER"><img
style="border: 0px solid ; width: 32px; height: 32px;" alt=""
src="
http://lh4.ggpht.com/_mcq01yDJ2uY/Sx_NlotqK6I/AAAAAAAABHk/XEyAjirvcn0/twitter-32x32.png"
title="Twitter" /></img
></a
></td>
<td><a href="ENDEREÇO PERFIL YOUTUBE"><img
style="border: 0px solid ; width: 32px; height: 32px;"
alt="YouTube" title="YouTube"
src="
http://lh4.ggpht.com/_mcq01yDJ2uY/S6JtAbXQ4JI/AAAAAAAACOY/DaiSgBRc8sU/youtube-32x32.png" /></img
></a></td>
</tr>
</tbody>
</table>

Postando vídeos

Para que o vídeo ocupe toda a área de postagem, use o tamanho de 800x625

YouTube

Alterando as fontes e as cores

Todas as fontes e todas cores do template podem ser alteradas através do painel do Blogger. Entre em designer do modelo e procure pela opção avançado

Fontes e Cores

ATENÇÃO:

Se você estava usando um dos novos modelos do Blogger (designer do modelo), será necessário instalar antes o Template Mínima para retirar o gadget atribuition.

IMPORTANTE! Caso você queira realizar outras mudanças na estrutura do template, que não estejam descritas neste tutorial, pesquise como fazer. Não irei responder a este tipo de pergunta nem pelos comentários e nem por email.

Saiba mais sobre a utilização de nossos templates gratuitos, acessando:

©Template by Dicas Blogger – alguns direitos reservados. Não retire os créditos.

sábado, 7 de agosto de 2010

Template Blogger Writer

A reedição de hoje é do Template Blogger Writer, cuja principal característica é ter uma sidebar de cada lado, só que de tamanhos diferentes – o que é muito bom para monetização através de anúncios posicionados à esquerda.

Blogger Writer DemonstraçãoDownloadLicença

RECURSOS INSTALADOS

CARACTERÍSTICAS DO TEMPLATE

  • Cores e fontes personalizáveis
  • Compatível com qualquer navegador que esteja devidamente atualizado.
  • 2 colunas à direita
  • 3 blocos de widgets no rodapé
  • Diversos hacks instalados
  • Nome do seu blog no rodapé (auto)
  • CSS otimizado

Introdução

A seguir, explicarei como funciona cada ítem do template. Para um melhor aproveitamento, acesse os posts de referência.

Quando for necessário encontrar algum trecho dentro do template, vá até desing > editar html. Marque a caixa expandir modelos de widgets. Dê um Crtl+F em seu teclado e cole na caixa de busca do seu navegador o trecho que está buscando.

Instalando o template em seu blog

Baixe o arquivo .zip, clique com o botão direito do mouse e escolha abrir. Dentro da pasta, você vai encontrar um arquivo chamado Template Writer.xml. Se você não souber como trocar o template do seu blog, acesse:

Configurando a imagem do cabeçalho

Dentro da pasta que você baixou, tem a imagem do cabeçalho em formato .psd – própria para Photoshop – no tamanho 970 x 150 px. Escreva o nome do seu blog dentro desta imagem. Se você não sabe como usar o Photoshop, acesse:

A fonte que utlizei pra fazer o cabeçalho do Writer chama-se Palace Scripts

Mudando o background (plano de fundo)

Você pode trocar, facilmente, a imagem que compõe o fundo deste template. Procure pelo trecho abaixo e substitua a url do atual background pela url de outro de sua preferência (Sugestão de backgrounds: Background Labs).

body {
text-align:center;
color:$textColor;
background:#303030 url(
URL DO NOVO BACKGROUND) repeat top left;

Colocando links na linkbar

Para colocar links no menu linkbar - que fica embaixo do cabeçalho - acesse:

Usando o resumo de postagens

No Template Writer, instalei o jump break do Blogger e o “hack leia mais” com corte manual, assim, quem já usava um dos dois não vai perder as configurações anteriores

Como alterar a cor dos links do rodapé

Os links do rodapé estão na cor amarela. Para alterar a cor, encontre este trecho:

#creditleft a,.creditleft a:hover,.creditleft a:visited,#creditright a,.creditright a:hover,.creditright a:visited {
color: #ccc;
text-decoration:none;
}

Mude a parte que está em vermelho. Veja uma tabela de cores neste link.

Alterando o favicon

Favicon é aquele pequeno ícone que aparece no navegador, ao lado do endereço do blog. O Template Writer já vem com um favicon instalado. Caso queira mudá-lo, procure pelo trecho abaixo e substitua o endereço da imagem (em azul)

]]></b:skin>

<link href='http://lh5.ggpht.com/_mcq01yDJ2uY/TF3q55WsE7I/AAAAAAAAC0s/maosPKbgQqE/old_openofficeorg_writer.png' rel='shortcut icon'/>

<link href='http://lh5.ggpht.com/_mcq01yDJ2uY/TF3q55WsE7I/AAAAAAAAC0s/maosPKbgQqE/old_openofficeorg_writer.png' rel='apple-touch-icon'/>

<link href='http://lh5.ggpht.com/_mcq01yDJ2uY/TF3q55WsE7I/AAAAAAAAC0s/maosPKbgQqE/old_openofficeorg_writer.png' rel='shortcut icon' type='image/x-icon'/>

Alterando as fontes e as cores

Todas as fontes e todas cores do template podem ser alteradas através do painel do Blogger. Entre em designer do modelo e procure pela opção avançado

Fontes e Cores

Ícones para redes sociais

Se você quiser usar os ícones do Twitter, Facebook e Feeds, que coloquei na sidebar da esquerda, cole o código abaixo em seu blog - no gadget HTML/javascript – colocando, respectivamente, as URLs de cada um.

<table style="text-align: left; width: 100%;" border="0"
cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td><a href="
URL DO TWITTER"><img
style="border: 0px solid ; width: 120px; height: 120px;" alt=""
src="
http://lh3.ggpht.com/_mcq01yDJ2uY/TF3lBbxkQGI/AAAAAAAAC0c/pLIqbnUCw_M/twitter.png" /></img
></a></td>
</tr>
<tr>
<td align="undefined" valign="undefined"><a
href="URL DO FEED"><img
style="border: 0px solid ; width: 120px; height: 120px;" alt=""
src="
http://lh3.ggpht.com/_mcq01yDJ2uY/TF3lBTZQtYI/AAAAAAAAC0g/vqUJ_WpiIAQ/rss.png" /></img
></a
></td>
</tr>
<tr>
<td align="undefined" valign="undefined"><a
href="URL DO FACEBOOK"><img
style="border: 0px solid ; width: 128px; height: 128px;" alt=""
src="
http://lh4.ggpht.com/_mcq01yDJ2uY/TF3lBnqE-mI/AAAAAAAAC0k/tAmb4qZI42o/facebook.png" /></img
></a
></td>
</tr>
</tbody>
</table>

ATENÇÃO:

Se você estava usando um dos novos modelos do Blogger (designer do modelo), será necessário instalar antes o Template Mínima para retirar o gadget atribuition.

Caso você queira realizar outras alterações na estrutura do template, tais como adicionar ou retirar sidebar ou mesmo instalar outros hacks, pesquise como fazer.

Saiba mais sobre a utilização de nossos templates gratuitos, acessando:

©Template by Dicas Blogger – alguns direitos reservados. Não retire os créditos.

terça-feira, 3 de agosto de 2010

Template Flowers

Lembram do Template Flowers? Então, esta é a nova versão dele, voltada especialmente para as meninas. Ele é todo …digamos… cuti-cuti:)
Antes de mais nada, gostaria de explicar porque eu nunca havia feito um layout assim. É que eu acho que quanto mais simples for um template, mas fácil também será usá-lo e modificá-lo. Meus templates sempre foram voltados aos iniciantes e com cores personalizáveis, para que o usuário possa soltar sua própria imaginação.
Agora resolvi inovar um pouco, colocando background personalizado dentro das postagens e no rodapé. Mas vale lembrar que imagens demais dentro de uma página web, deixa-a carregada e lenta para abrir, então eu inovei, pero no mucho :)

Template Flowers
Por favor, não retire os créditos

RECURSOS INSTALADOS
CARACTERÍSTICAS DO TEMPLATE
  • Cores e fontes personalizáveis
  • Compatível com qualquer navegador que esteja devidamente atualizado.
  • 4 colunas à direita
  • 3 blocos de widgets no rodapé
  • Diversos hacks instalados
  • Nome do seu blog no rodapé (auto)
  • CSS otimizado
  • ícones para redes sociais
  • Background nos posts e no rodapé
Modo de Usar
A seguir, explicarei como funciona cada ítem do template. Para um melhor aproveitamento, acesse os posts de referência.
Quando for necessário encontrar algum trecho dentro do template, vá até desing > editar html. Marque a caixa expandir modelos de widgets. Dê um Crtl+F em seu teclado e cole na caixa de busca do seu navegador o trecho que está buscando.
Instalando o template em seu blog
Baixe o arquivo .zip, clique com o botão direito do mouse e escolha abrir. Dentro da pasta, você vai encontrar um arquivo chamado Template Flowers.xml. Se você não sabe como trocar o template do seu blog, acesse:
Configurando a imagem do cabeçalho
Dentro da pasta que você baixou, tem a imagem do cabeçalho em formato .psd – própria para Photoshop – no tamanho 970 x 150 px. Basta fazer as modificações de acordo com suas necessidades. Se você não sabe usar o Photoshop:
Usando o resumo de postagens
No Template Flowers, instalei o jump break do Blogger e o “hack leia mais” com corte manual, assim, quem já usava um dos dois não vai perder as configurações anteriores
Colocando links na linkbar
Para colocar links no menu linkbar - que fica embaixo do cabeçalho - acesse:
Backup de Imagens
É altamente recomendável que você hosperede no Picasa a imagem do background:
Alterando o favicon
Favicon é aquele pequeno ícone que aparece no navegador, ao lado do endereço do blog. O Template Flowers já vem com um favicon instalado. caso queira mudá-lo, procure pelo trecho abaixo e substitua o endereço da imagem (em azul)
]]></b:skin>
Como alterar a cor dos links do rodapé
Os links do rodapé estão na cor amarela. Para alterar a cor, encontre este trecho:
#creditleft a,.creditleft a:hover,.creditleft a:visited,#creditright a,.creditright a:hover,.creditright a:visited {
color: #ffff00;
text-decoration:none;
}
Mude a parte que está em vermelho. Veja uma tabela de cores neste link.
Alterando as fontes e as cores
Todas as fontes e todas cores do template podem ser alteradas através do painel do Blogger. Entre em designer do modelo e procure pela opção avançado
Fontes e Cores
Ícones para redes sociais
Se você quiser usar os mesmos ícones que coloquei no alto da sidebar, cole o código abaixo em seu blog - no gadget HTML/javascript – colocando, respectivamente, as URLs (em vermelho) de cada um.
Exemplo:
<td><a href="http://twitter.com/dicas_blogger"><img
title="Siga-me!"
style="border: 0px solid ; width: 64px; height: 64px;"
alt="Twitter"
src="
http://lh3.ggpht.com/_mcq01yDJ2uY/TFiLvFEuh4I/AAAAAAAACuA/sBwI7XqoTs8/twitter_webtreats.png" /></img
></a></td>
Código:
<table style="text-align: left; width: 100%;" border="0"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td align="undefined" valign="undefined"><a
href="URL DO FEED"><img title="Rss/Feed"
style="border: 0px solid ; width: 64px; height: 64px;"
alt="Feeds"
src="
http://lh4.ggpht.com/_mcq01yDJ2uY/TFiLvNjzzfI/AAAAAAAACt8/Wk20HBibniY/rss_cube_webtreats64.png" /></a
></td>
<td><a href="URL DO TWITTER"><img
title="Siga-me!"
style="border: 0px solid ; width: 64px; height: 64px;"
alt="Twitter"
src="
http://lh3.ggpht.com/_mcq01yDJ2uY/TFiLvFEuh4I/AAAAAAAACuA/sBwI7XqoTs8/twitter_webtreats.png" /></img
></a></td>
<td align="undefined" valign="undefined"><a
href="URL DO FACEBOOK"><img title="Facebook"
style="border: 0px solid ; width: 64px; height: 64px;"
alt="Facebook"
src="
http://lh5.ggpht.com/_mcq01yDJ2uY/TFiLu6hV_MI/AAAAAAAACtw/ECsp_yEeXEE/facebook_logo_webtreats.png" /></a
></td>
<td align="undefined" valign="undefined"><a
href="mailto:SEU EMAIL”<img title="Contato"
style="border: 0px solid ; width: 64px; height: 64px;"
alt="Contato"
src="
http://lh3.ggpht.com/_mcq01yDJ2uY/TFiLu7SPsHI/AAAAAAAACt0/HzskHHbhHAU/mail_square_webtreats.png" /></a
></td>
<td align="undefined" valign="undefined"><a
href="URL DO SEU ORKUT"><img title="Orkut"
style="border: 0px solid ; width: 64px; height: 64px;"
alt="Orkut"
src="
http://lh6.ggpht.com/_mcq01yDJ2uY/TFiLuyTCl-I/AAAAAAAACt4/wpskLKeP2DE/orkut_webtreats.png" /></a
></td>
</tr>
</tbody>
</table>
ATENÇÃO:
Se você estava usando um dos novos modelos do Blogger (designer do modelo), será necessário instalar antes o Template Mínima para retirar o gadget atribuition.
Caso você queira realizar alterações na estrutura do template, tais como adicionar ou retirar sidebar ou mesmo instalar outros hacks, pesquise como fazer.
Saiba mais sobre a utilização de nossos templates gratuitos, acessando:
©Template by Dicas Blogger – alguns direitos reservados. Não retire os créditos.

sábado, 31 de julho de 2010

Template Geek

Esta é a nova versão do Template Geek, com uma sidebar de cada lado, diversos hacks e recursos nativos instalados, CSS otimizado, dois modelos de background (plano de fundo), favicon personalizado e caixa de busca.

Template Geek

DemonstraçãoDownloadLicença

Por favor, não retire os créditos

RECURSOS INSTALADOS

CARACTERÍSTICAS DO TEMPLATE

  • Cores e fontes personalizáveis
  • Compatível com qualquer navegador que esteja devidamente atualizado.
  • 1 coluna à direita
  • 1 coluna á esquerda
  • 3 blocos de widgets no rodapé
  • Diversos hacks instalados
  • Nome do seu blog no rodapé (auto)
  • CSS otimizado
  • Carregamento mais rápido

Modo de Usar

A seguir, explicarei como funciona cada ítem do template. Para um melhor aproveitamento, acesse os posts de referência.

Quando for necessário encontrar algum trecho dentro do template, vá até desing > editar html. Marque a caixa expandir modelos de widgets. Dê um Crtl+F em seu teclado e cole na caixa de busca do seu navegador o trecho que está buscando.

Instalando o template em seu blog

Baixe o arquivo .zip, clique com o botão direito do mouse e escolha abrir. Dentro da pasta, você vai encontrar um arquivo chamado Template Geek.xml. Se você não sabe como trocar o template do seu blog, acesse:

Configurando a imagem do cabeçalho

Crie uma imagem do tamanho 980 x 150 px, com fundo branco, usando o Photoshop ou outro programa de sua preferência (sugestão: Pixrl)

Caso você saiba mexer com Photoshop e tenha gostado da imagem do cabeçalho deste template, dentro da pasta que você baixou tem o arquivo em formato .psd.

Usando o resumo de postagens

No Template Geek instalei o jump break do Blogger. Veja como usar:

Colocando links na linkbar

Para colocar links no menu que fica embaixo do cabeçalho, acesse:

Mudando o background (plano de fundo)

Você pode trocar, facilmente, a imagem que compõe o fundo do Template Geek. Procure pelo trecho abaixo e substitua a url do atual background ( em azul ) pela url de outro de sua preferência (Sugestão de backgrounds: Background Labs).

body {
text-align:center;
color:$textColor;
background:#413f3f url(
http://lh3.ggpht.com/_mcq01yDJ2uY/TFS6JpQ0zcI/AAAAAAAACks/3zZ7Rb-_z7w/5353535353535353536464643E3E3E_157.png) repeat;
font-family:arial,verdana,helvetica,tahoma,Sans-serif;

Como alterar a cor dos links do rodapé

Os links do rodapé estão na cor amarela. Para alterar a cor, encontre este trecho:

#creditleft a,.creditleft a:hover,.creditleft a:visited,#creditright a,.creditright a:hover,.creditright a:visited {
color: #fff;
text-decoration:none;
}

Mude a parte que está em vermelho. Veja uma tabela de cores neste link.

Backup de Imagens

É altamente recomendável que você hosperede no Picasa a imagem do background:

Alterando o favicon

Favicon é aquele pequeno ícone que aparece no navegador, ao lado do endereço do blog. O Template Geek já vem com um favicon instalado. caso queira mudá-lo, procure pelo trecho abaixo e substitua o endereço da imagem (em azul)

]]></b:skin>

<link href='http://lh4.ggpht.com/_mcq01yDJ2uY/TFTm_WoSC-I/AAAAAAAACmE/qMX_pjnqJR8/my_computer.png' rel='shortcut icon'/>

<link href='http://lh4.ggpht.com/_mcq01yDJ2uY/TFTm_WoSC-I/AAAAAAAACmE/qMX_pjnqJR8/my_computer.png' rel='apple-touch-icon'/>

<link href='http://lh4.ggpht.com/_mcq01yDJ2uY/TFTm_WoSC-I/AAAAAAAACmE/qMX_pjnqJR8/my_computer.png' rel='shortcut icon' type='image/x-icon'/>

Alterando as fontes e as cores

Todas as fontes e todas cores do template Geek podem ser alteradas através do painel do Blogger. Entre em designer do modelo e procure pela opção avançado

Fontes e Cores

ATENÇÃO:

Se você estava usando um dos novos modelos do Blogger, será necessário instalar antes o Template Mínima para retirar o gadget atribuition.

Caso você queira realizar alterações na estrutura do template, tais como adicionar ou retirar sidebar ou mesmo instalar outros hacks, pesquise como fazer.

Saiba mais sobre a utilização de nossos templates gratuitos, acessando:

©Template by Dicas Blogger – alguns direitos reservados. Não retire os créditos.

Template Sky 2

Esta é a versão do Template Sky, com a sidebar do lado direito e com caixa de busca no cabeçalho do blog. Mantive todos os demais recursos, bem como o plano de fundo e as cores e fontes da versão anterior.

Template Sky 2

DemonstraçãoDownloadLicença

Por favor, não retire os créditos

RECURSOS INSTALADOS

CARACTERÍSTICAS DO TEMPLATE

  • Cores e fontes personalizáveis
  • Compatível com qualquer navegador que esteja devidamente atualizado.
  • 4 colunas à direita
  • 3 blocos de widgets no rodapé
  • Diversos hacks instalados
  • Nome do seu blog no rodapé (auto)
  • CSS otimizado
  • Carregamento mais rápido

Modo de Usar

A seguir, explicarei como funciona cada ítem do template. Para um melhor aproveitamento, acesse os posts de referência.

Quando for necessário encontrar algum trecho dentro do template, vá até desing > editar html. Marque a caixa expandir modelos de widgets. Dê um Crtl+F em seu teclado e cole na caixa de busca do seu navegador o trecho que está buscando.

Instalando o template em seu blog

Baixe o arquivo .zip, clique com o botão direito do mouse e escolha abrir. Dentro da pasta, você vai encontrar um arquivo chamado Template Sky2.xml. Se você não sabe como trocar o template do seu blog, acesse:

Configurando a imagem do cabeçalho

Crie uma imagem do tamanho 970 x 100, com fundo transparente, usando o Photoshop ou outro programa de sua preferência (sugestão: Pixrl)

A fonte que utlizei pra fazer o cabeçalho do Template Sky 2 chama-se Atlas e está disponível para download no site UrbanFonts

Usando o resumo de postagens

No Template Sky 2 instalei o jump break do Blogger e o hack leia mais com corte manual, assim, quem já usava um dos dois não vai perder as configurações anteriores

Colocando links na linkbar

Para colocar links no menu que fica embaixo do cabeçalho, acesse:

Mudando o background (plano de fundo)

Você pode trocar, facilmente, a imagem que compõe o fundo do Template Sky 2. Procure pelo trecho abaixo e substitua a url do atual background ( em azul ) pela url de outro de sua preferência (Sugestão de backgrounds: Background Labs).

body {
text-align:center;
color:$textColor;
background: url(
http://lh3.ggpht.com/_mcq01yDJ2uY/TFDzo3r782I/AAAAAAAACiY/CDgLPFz_0Zk/86.jpg) repeat top left;
font-family:arial,verdana,helvetica,tahoma,Sans-serif;

Como alterar a cor dos links do rodapé

Os links do rodapé estão na cor amarela. Para alterar a cor, encontre este trecho:

#creditleft a,.creditleft a:hover,.creditleft a:visited,#creditright a,.creditright a:hover,.creditright a:visited {
color: #ffff00;
text-decoration:none;
}

Mude a parte que está em vermelho. Veja uma tabela de cores neste link.

Backup de Imagens

É altamente recomendável que você hosperede no Picasa a imagem do background:

Alterando o favicon

Favicon é aquele pequeno ícone que aparece no navegador, ao lado do endereço do blog. O Template Sky 2 já vem com um favicon instalado. caso queira mudá-lo, procure pelo trecho abaixo e substitua o endereço da imagem (em azul)

]]></b:skin>

<link href='http://lh4.ggpht.com/_mcq01yDJ2uY/TFD3fCYfkQI/AAAAAAAACi0/pi4mIHvNmTM/favicon.png' rel='shortcut icon'/>

<link href='http://lh4.ggpht.com/_mcq01yDJ2uY/TFD3fCYfkQI/AAAAAAAACi0/pi4mIHvNmTM/favicon.png' rel='apple-touch-icon'/>

<link href='http://lh4.ggpht.com/_mcq01yDJ2uY/TFD3fCYfkQI/AAAAAAAACi0/pi4mIHvNmTM/favicon.png' rel='shortcut icon' type='image/x-icon'/>

Alterando as fontes e as cores

Todas as fontes e todas cores do template Sky 2 podem ser alteradas através do painel do Blogger. Entre em designer do modelo e procure pela opção avançado

Fontes e Cores

ATENÇÃO:

Se você estava usando um dos novos modelos do Blogger, será necessário instalar antes o Template Mínima para retirar o gadget atribuition.

Caso você queira realizar alterações na estrutura do template, tais como adicionar ou retirar sidebar ou mesmo instalar outros hacks, pesquise como fazer.

Saiba mais sobre a utilização de nossos templates gratuitos, acessando:

©Template by Dicas Blogger – alguns direitos reservados. Não retire os créditos.

Template Blogger Elegance

O Template Blogger Elegance fez grande sucesso em sua época de lançamento, sendo muito utilizado até em blogs de outros países .

Agora ele volta com a instalação de diversas funções (algumas nativas, outras são hacks) e com uma caixa de busca muito bonita e moderna.

DemonstraçãoDownloadLicença

HACKS INSTALADOS

CARACTERÍSTICAS DO TEMPLATE

  • fontes personalizáveis
  • Compatível com qualquer navegador
  • 3 colunas à direita
  • 3 blocos de widgets no rodapé
  • Nome do seu blog no rodapé
  • CSS otimizado
  • cores:preto, vermelho e branco

Modo de Usar

A seguir, explicarei como funciona cada ítem do template. Para um melhor aproveitamento, acesse os posts de referência.

Quando for necessário encontrar algum trecho dentro do template, vá até desing > editar html. Marque a caixa expandir modelos de widgets. Dê um Crtl+F em seu teclado e cole na caixa de busca do seu navegador o trecho que está buscando.

Instalando o template em seu blog

Baixe o arquivo .zip, clique com o botão direito do mouse e escolha abrir. Dentro da pasta, você vai encontrar um arquivo chamado Blogger Elegance.xml. Se você não sabe como trocar o template do seu blog, acesse:

Usando o resumo de postagens

No Blogger Elegance, instalei o jump break do Blogger . Veja como utlizar:

Colocando links na linkbar

Para colocar links no menu que fica embaixo do cabeçalho, acesse:

Como alterar a cor dos links do rodapé

Para alterar a cor dos links do rodapé, encontre este trecho:

#creditleft a,.creditleft a:hover,.creditleft a:visited,#creditright a,.creditright a:hover,.creditright a:visited {
color: #ffc;
text-decoration:none;
}

Mude a parte que está em vermelho. Veja uma tabela de cores neste link.

Alterando as fontes

Todas as fontes podem ser alteradas através do painel do Blogger. Entre em designer do modelo e procure pela opção avançado

image

Backup de Imagens

É altamente recomendável que você hosperede no Picasa as imagens do template:

ATENÇÃO:

Se você estava usando um dos novos modelos do Blogger, será necessário instalar antes o Template Mínima para retirar o gadget atribuition.

Caso você queira realizar alterações na estrutura do template, tais como adicionar ou retirar sidebar ou mesmo instalar outros hacks, pesquise como fazer.

Saiba mais sobre a utilização de nossos templates gratuitos, acessando:

©Template by Dicas Blogger – alguns direitos reservados. Não retire os créditos.