Dicas Blogger: Templates Gratuitos

Home » Categories: Templates Gratuitos

Mostrando postagens com marcador Templates Gratuitos. Mostrar todas as postagens

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. 
 
<img alt="Template Style" border="0" height="297" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDk_fV3mcrtva3yZpmvHRhJ4P-qR-iTkG9re6IycIYH2ktA_WcO0yPOB4x_NUZTgMCNMPjzkX0G9KRbiuCAx9zFgGTa6uTcnGM7JOBAWaWQEw007rOotfPkcUNVASWQShmNz6_FZzRztGO/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Template Style" width="520" /> 
 
<div align="center">
<a href="http://tempstyle.blogspot.com/">Demonstração</a> – <a href="https://drive.google.com/file/d/0B7G-mAQQKCyZeEN3YXJzVWYxNmc/view?usp=sharing">Download</a><a href="http://www.4shared.com/file/UOHvr-SB/Template_Style.html"> </a>– <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt">Licença</a></div>

<table border="1" cellpadding="2" cellspacing="2" collapse="collapse" style="text-align: left; width: 100%;"> <tbody>
<tr> <td width="361"> RECURSOS INSTALADOS</td> <td align="undefined" valign="undefined" width="353">CARACTERÍSTICAS DO TEMPLATE</td></tr>
<tr> <td align="undefined" valign="undefined" width="389"><a href="http://dicasblogger.blogspot.com/2008/02/cdigo-para-posts-relacionados.html">Posts Relacionados</a></td> <td align="undefined" valign="undefined" width="366">Cores e fontes personalizáveis</td></tr>
<tr> <td align="undefined" valign="undefined" width="396"><a href="http://dicasblogger.blogspot.com/2008/04/retirar-navbar-do-blogger.html">Retirada da Navbar</a></td> <td align="undefined" valign="undefined" width="370">Compatível com navegadores atuais</td></tr>
<tr> <td align="undefined" valign="undefined" width="397"><a href="http://www.dicasblogger.com.br/2009/09/avatar-nos-comentarios-do-blogger.html">Avatar nos comentários</a></td> <td align="undefined" valign="undefined" width="372">1 coluna de cada lado</td></tr>
<tr> <td padding="5" width="396"><a href="http://www.dicasblogger.com.br/2010/07/modelos-de-blockquotes-citacao.html">Citação em bloco personalizada</a></td> <td align="undefined" valign="undefined" width="373">Nome do seu blog nos créditos</td></tr>
<tr> <td align="undefined" valign="undefined" width="396"><a href="http://www.dicasblogger.com.br/2009/11/como-colocar-o-leia-mais-no-blogger.html">Jump Break e Hack Leia Mais</a></td> <td padding="5px" width="373">CSS otimizado</td></tr>
<tr> <td align="undefined" valign="undefined" width="396"><a href="http://www.dicasblogger.com.br/2010/04/botao-share-this-compartilhe-redes.html">Botões de compartilhamento</a></td> <td padding="5px" width="373">Cores em degradé</td></tr>
<tr> <td align="undefined" valign="undefined" width="396"><a href="http://www.dicasblogger.com.br/2009/09/caixa-de-busca-cabecalho-blogger.html">Caixa de busca no cabeçalho</a></td> <td padding="5px" width="373">Caixa de busca estilizada</td></tr>
<tr> <td align="undefined" valign="undefined" width="396"><a href="http://www.dicasblogger.com.br/2008/10/colocando-favicon-no-blog.html">Favicon</a></td> <td padding="5px" width="373">Carregamento rápido</td></tr>
<tr> <td align="undefined" valign="undefined" width="396"><a href="http://www.dicasblogger.com.br/2010/07/modelos-de-blockquotes-citacao.html">Citação em bloco personalizada</a></td> <td padding="5px" width="373">Design moderno</td></tr>
</tbody></table>
 Antes de instalar o Template Style em seu blog, leia atentamente este artigo: 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2009/08/instrucoes-para-uso-dos-templates.html">Instruções para uso dos templates do Dicas Blogger</a></li>
</ul>
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: 
 <blockquote>
<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='<a href="http://lh3.ggpht.com/_mcq01yDJ2uY/TIoN4zHVJmI/AAAAAAAADi0/-lPcOV2086M/search.gif%27">http://lh3.ggpht.com/_mcq01yDJ2uY/TIoN4zHVJmI/AAAAAAAADi0/-lPcOV2086M/search.gif'</a> style='border:0; vertical-align: top;' type='image'/> 
</form> 
</div></blockquote>
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.

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ópri...

Continue Lendo >>

19:30

Template Business

<div align="left">
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.</div>
 
<div align="center">
<img alt="Template Business" border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh38jnbwUSFaVC3QFQyZDnFZ_YvmzpWhdiiw_YuhLvtNYt8rXtLjbBSGE7CH004YLuNIQk4qfs-OwSB5QDEXIDDRr0r6qjyrWnik2_2BRAgaPljSnFRaJ9E4JfTnNydWUXNuhZJCvOtDr3o/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Template Business" width="520" /> <a href="http://tempbusiness.blogspot.com/" target="_blank">Demonstração</a> – <a href="https://drive.google.com/file/d/0B7G-mAQQKCyZM3h0d2NXWHpGRnM/view?usp=sharing" target="_blank">Download</a> – <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt">Licença</a></div>
 <table cellpadding="2" cellspacing="2" style="background: none repeat scroll 0% 0% rgb(249, 240, 219); border: 3px solid rgb(254, 226, 160); padding-left: 5px; text-align: left; width: 100%;"><tbody>
<tr> <td valign="top" width="275">RECURSOS INSTALADOS 
<ul>
<li><a href="http://dicasblogger.blogspot.com/2008/02/cdigo-para-posts-relacionados.html">Posts Relacionados</a> </li>
<li><a href="http://dicasblogger.blogspot.com/2008/04/retirar-navbar-do-blogger.html">Retirada da Navbar</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/09/jump-break-o-leia-mais-do-blogger.html">Jump break</a> e <a href="http://www.dicasblogger.com.br/2009/11/como-colocar-o-leia-mais-no-blogger.html" target="_blank">hack leia mais</a> </li>
<li><a href="http://www.dicasblogger.com.br/2008/10/colocando-favicon-no-blog.html">Favicon</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/09/avatar-nos-comentarios-do-blogger.html">Avatar nos comentários</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/07/modelos-de-blockquotes-citacao.html">Citação em bloco personalizada</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/04/botao-share-this-compartilhe-redes.html">Botão para redes sociais</a> </li>
<li>ícones de navegação </li>
</ul>
</td> <td valign="top" width="275">CARACTERÍSTICAS 
<ul>
<li>1 coluna à direita </li>
<li>3 blocos no rodapé </li>
<li>Nome do seu blog nos créditos </li>
<li>CSS otimizado </li>
<li>caixa de busca estilizada </li>
<li>compatível com as últimas versões dos principais navegadores </li>
<li>fontes e cores personalizáveis </li>
</ul>
</td> </tr>
</tbody></table>
Modo de Usar – Instruções comuns a todos os templates 
 Leia atentamente as instruções abaixo antes de instalar este template: 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2009/08/instrucoes-para-uso-dos-templates.html">Instruções para uso dos templates do Dicas Blogger</a> </li>
</ul>
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” 
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSl4grt70udBXA9GWl01qjh5VLdwCGIE67nzxpzAH73fxJnz8FqA3xYP84uO_bxF29TdPDnwNXzYlPJGbPEk1R6lQPIxHCrwbRgtMeEI0-Js9uNEl8_cioSQzoFbJvPC3zARAZ4AuNNuGY/s1600-h/image%5B14%5D.png"><img alt="Upload da imagem" border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvvNv520eCPvIbjVVfU03u8c8TzX9WuVyBSW2HynpzGwqrYwznIXTKOvPdqLeVRPYZO0QllOQfUi1IK1vj5bW6t9G-3298x54i_v7k5V8Fi2p9Q5BI4csenFN0-0Fbrl6RMLzckmzvSTbW/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Upload da imagem" width="452" /></a> 
 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: 
 <blockquote>
<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="<a href="http://lh3.ggpht.com/_mcq01yDJ2uY/TIoN4zHVJmI/AAAAAAAADi0/-lPcOV2086M/search.gif%22">http://lh3.ggpht.com/_mcq01yDJ2uY/TIoN4zHVJmI/AAAAAAAADi0/-lPcOV2086M/search.gif"</a> style="border:0; vertical-align: top;" type="image" /> </form> 
</div></blockquote>
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.

Template Business

Apresento-lhes o Template Business. Trata-se de um tema moderno e arrojado, com diversos recursos instalados, fontes e cores personalizávei...

Continue Lendo >>

08:12

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). 
 
<img alt="Template Soccer" border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWAG72Dw6Ztdymx8QJmM3wDgLKE-SOkwiSpFP9E1kCcNWydOSwXBWZEljyNiNdkGiy_VT0hME35siGPxG-Bqll_Q9NF7yZlPa8kR9FvG1hhnMLJC7NlFg9sMo1Z0RNTrPTwywwi83FZl4-/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Template Soccer" width="520" /> 
 <div align="center">
<a href="http://templatesoccer.blogspot.com/" target="_blank">Demonstração</a> – <a href="https://drive.google.com/file/d/0B7G-mAQQKCyZMGJXUVQ4ZVNwSVU/view?usp=sharing" target="_blank">Download</a> – <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt">Licença</a></div>
<table cellpadding="2" cellspacing="2" style="background: none repeat scroll 0% 0% rgb(249, 240, 219); border: 3px solid rgb(254, 226, 160); text-align: left; width: 100%;"><tbody>
<tr> <td valign="top" width="275">RECURSOS INSTALADOS 
<ul>
<li><a href="http://dicasblogger.blogspot.com/2008/02/cdigo-para-posts-relacionados.html">Posts Relacionados</a> </li>
<li><a href="http://dicasblogger.blogspot.com/2008/04/retirar-navbar-do-blogger.html">Retirada da Navbar</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/09/jump-break-o-leia-mais-do-blogger.html">Jump break</a> e <a href="http://www.dicasblogger.com.br/2009/11/como-colocar-o-leia-mais-no-blogger.html" target="_blank">hack leia mais</a> </li>
<li><a href="http://usuariocompulsivo.blogspot.com/2008/08/como-personalizar-o-navegador-do.html">Personalização dos ícones de navegação</a> </li>
<li><a href="http://www.dicasblogger.com.br/2008/10/colocando-favicon-no-blog.html">Favicon</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/09/avatar-nos-comentarios-do-blogger.html">Avatar nos comentários</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/07/modelos-de-blockquotes-citacao.html">Citação em bloco personalizada</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/04/botao-share-this-compartilhe-redes.html">Botão para redes sociais</a> </li>
</ul>
</td> <td valign="top" width="275">CARACTERÍSTICAS 
<ul>
<li>Bordas arredondadas </li>
<li>2 tipos de plano de fundo </li>
<li>Uso de gradiente </li>
<li>Template temático </li>
<li>1 coluna à direita </li>
<li>3 blocos no rodapé </li>
<li>Nome do seu blog nos créditos </li>
<li>CSS otimizado </li>
<li>Diversos hacks instalados </li>
</ul>
</td> </tr>
</tbody></table>
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: 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2009/08/instrucoes-para-uso-dos-templates.html">Instruções para uso dos templates do Dicas Blogger</a> </li>
</ul>
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: 
 <blockquote>
<div id='imagem'> <img alt='' src='<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/TGtDyWbvJbI/AAAAAAAADKg/JwE6-knvRYU/soccer_5.png%27/">http://lh4.ggpht.com/_mcq01yDJ2uY/TGtDyWbvJbI/AAAAAAAADKg/JwE6-knvRYU/soccer_5.png'/</a>> </div></blockquote>
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: 
 <blockquote>
#imagem { padding-right:35px; position:absolute; right:0; top:0px; }</blockquote>
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. 
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht9Gbo9s9v3AlkxKtRVnzoN5LRfH1aOIQhmLOkYyOpOljhV-QdHURUu_mwiQA7jXv8QX7DV5aO3JQ86YiCCtuP9MJ_xlGTF-zDfNGyVLibS7KcuMF6wdXitV5f7H2hyphenhyphen_WkWxrglVhHNwBb/s1600-h/image%5B19%5D.png"><img alt="Backgrounds" border="0" height="118" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh5WHTwJ8nJzDhDXZI68b9n0m8CSQycEwX2UbyUBZtja-nmqGLDN37Oppi9kz3OOkUg61KnQGjjbHlRTdBzkkf-vixV-mBXgE-eXGIg-mAVEYw6ZUz3uTWo6fw6GcAp7SpPjP_l3zt29ES/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Backgrounds" width="452" /></a> 
 Para mudar o atual plano de fundo verde por um desses três, procure por: 
 <blockquote>
body { text-align:center; color:$textColor; background-color:$bodybgColor; background-image: url(<a href="http://lh3.ggpht.com/_mcq01yDJ2uY/TGnnSrQHpgI/AAAAAAAADFw/VY_Bn1MqTHE/bg_soccer.png">http://lh3.ggpht.com/_mcq01yDJ2uY/TGnnSrQHpgI/AAAAAAAADFw/VY_Bn1MqTHE/bg_soccer.png</a>);</blockquote>
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.

Template Soccer

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

Continue Lendo >>

08:03

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 <a href="http://www.dicasblogger.com.br/2010/08/template-pet.html" target="_blank">Template Pet</a>. 
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. 
 
<img alt="Template Gourmet" border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ0AUhyVHGlnq6sVGWQQcKlCI5E4k2CArJAMIXAZBvgeT153JjH6GsovsbYaNxym5RDiQm5_hgor8xdGFCNRoXbnqcilbYqFxJf3Dul87KDmCw781K5OBLICa76Vrm40PtoNTMm-1hexzZ/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Template Gourmet" width="520" /> 
 <div align="center">
<a href="http://templategourmet.blogspot.com/" target="_blank">Demonstração</a> – <a href="https://drive.google.com/file/d/0B7G-mAQQKCyZdEtVN0lxRFI4WDA/view?usp=sharing">Download</a> – <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt">Licença</a></div>
<table cellpadding="2" cellspacing="2" style="background: none repeat scroll 0% 0% rgb(249, 240, 219); border: 3px solid rgb(254, 226, 160); text-align: left; width: 100%;"><tbody>
<tr> <td valign="top" width="275">RECURSOS INSTALADOS 
<ul>
<li><a href="http://dicasblogger.blogspot.com/2008/02/cdigo-para-posts-relacionados.html">Posts Relacionados</a> </li>
<li><a href="http://dicasblogger.blogspot.com/2008/04/retirar-navbar-do-blogger.html">Retirada da Navbar</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/09/jump-break-o-leia-mais-do-blogger.html">Jump break</a> e <a href="http://www.dicasblogger.com.br/2009/11/como-colocar-o-leia-mais-no-blogger.html" target="_blank">hack leia mais</a> </li>
<li><a href="http://usuariocompulsivo.blogspot.com/2008/08/como-personalizar-o-navegador-do.html">Personalização dos ícones de navegação</a> </li>
<li><a href="http://www.dicasblogger.com.br/2008/10/colocando-favicon-no-blog.html">Favicon</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/09/avatar-nos-comentarios-do-blogger.html">Avatar nos comentários</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/07/modelos-de-blockquotes-citacao.html">Citação em bloco personalizada</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/04/botao-share-this-compartilhe-redes.html">Botão para redes sociais</a> </li>
</ul>
</td> <td valign="top" width="275">CARACTERÍSTICAS 
<ul>
<li>Cores e fontes personalizáveis </li>
<li>Compatível com qualquer navegador que esteja devidamente atualizado. </li>
<li>Template temático </li>
<li>1 coluna à direita </li>
<li>3 blocos no rodapé </li>
<li>Nome do seu blog no rodapé (auto) </li>
<li>CSS otimizado </li>
<li>Diversos hacks instalados </li>
</ul>
</td> </tr>
</tbody></table>
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: 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2009/08/instrucoes-para-uso-dos-templates.html">Instruções para uso dos templates do Dicas Blogger</a> </li>
</ul>
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: 
 <blockquote>
<div id='imagem'> <img alt='' src='<a href="http://lh5.ggpht.com/_mcq01yDJ2uY/TGlUrlxRLSI/AAAAAAAADCw/hiKVSnCB588/22.png%27/">http://lh5.ggpht.com/_mcq01yDJ2uY/TGlUrlxRLSI/AAAAAAAADCw/hiKVSnCB588/22.png'/</a>> </div></blockquote>
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: 
 <blockquote>
#imagem { padding-right:35px; position:absolute; right:0; top:0px; }</blockquote>
©Template by Dicas Blogger – alguns direitos reservados. Não retire os créditos.

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

Continue Lendo >>

21:32

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. 
 
<img alt="Template Pet" border="0" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihknV7vUOErtlT5e_9ScH4JbT0CoBhiIrkJtmSqaebkmZtsS-oTjydLsiGDA-2RO9PsPiAxKTSbHHOdaUWmoqPtsdQsP3oJ6zSVwUgeRmX05BE_xTEfhYCxZUc2lXzg3f66JOS3QsykxxG/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Template Pet" width="520" /> 
 <div align="center">
<a href="http://templatepet.blogspot.com/" target="_blank">Demonstração</a> – <a href="https://drive.google.com/file/d/0B7G-mAQQKCyZcEdMZWdpdDc4bWs/view?usp=sharing" target="_blank">Download</a> – <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt" target="_blank">Licença</a></div>
<table cellpadding="2" cellspacing="2" style="background: none repeat scroll 0% 0% rgb(249, 240, 219); border: 3px solid rgb(254, 226, 160); text-align: left; width: 100%;"><tbody>
<tr> <td valign="top" width="275">RECURSOS INSTALADOS 
<ul>
<li><a href="http://dicasblogger.blogspot.com/2008/02/cdigo-para-posts-relacionados.html">Posts Relacionados</a> </li>
<li><a href="http://dicasblogger.blogspot.com/2008/04/retirar-navbar-do-blogger.html">Retirada da Navbar</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/09/jump-break-o-leia-mais-do-blogger.html">Jump break</a> e <a href="http://www.dicasblogger.com.br/2009/11/como-colocar-o-leia-mais-no-blogger.html" target="_blank">hack leia mais</a> </li>
<li><a href="http://usuariocompulsivo.blogspot.com/2008/08/como-personalizar-o-navegador-do.html">Personalização dos ícones de navegação</a> </li>
<li><a href="http://www.dicasblogger.com.br/2008/10/colocando-favicon-no-blog.html">Favicon</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/09/avatar-nos-comentarios-do-blogger.html">Avatar nos comentários</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/07/modelos-de-blockquotes-citacao.html">Citação em bloco personalizada</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/04/botao-share-this-compartilhe-redes.html">Botão para redes sociais</a> </li>
</ul>
</td> <td valign="top" width="275">CARACTERÍSTICAS 
<ul>
<li>Cores e fontes personalizáveis </li>
<li>Compatível com qualquer navegador que esteja devidamente atualizado. </li>
<li>Template temático </li>
<li>1 coluna à direita </li>
<li>3 blocos no rodapé </li>
<li>Nome do seu blog no rodapé (auto) </li>
<li>CSS otimizado </li>
<li>Diversos hacks instalados </li>
</ul>
</td> </tr>
</tbody></table>
Leia atentamente as instruções a seguir, onde explico detalhadamente como instalar os templates, bem como realizar algumas modificações básicas: 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2009/08/instrucoes-para-uso-dos-templates.html" target="_blank">Instruções para uso dos templates do Dicas Blogger</a> </li>
</ul>
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: 
 <blockquote>
<div id='imagem'> <img alt='' src='<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/TGgeorYJfbI/AAAAAAAADA8/QHBfsyY8eR4/dog-icon.png%27/">http://lh4.ggpht.com/_mcq01yDJ2uY/TGgeorYJfbI/AAAAAAAADA8/QHBfsyY8eR4/dog-icon.png'/</a>> </div></blockquote>
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 <a href="http://www.dicasblogger.com.br/">Dicas Blogger</a> – 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 ;)

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

Continue Lendo >>

07:29

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. 
 
<img alt="Template Cinema" border="0" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqkpW46FyKonDqMndyg-tKRwUzgRDgVKvCqnFS-sdtYDGvyQ8NtqGNCe_zv7TzI5N5J3BPkIi0wTJnThr3UvMjPLiksNe50-dMpGlPg7zVBxGf7IZPmJGhhz3q4Ttq081eWS0M_gYyldcn/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Template Cinema" width="520" /> 
 <div align="center">
<a href="http://templatedbcine.blogspot.com/">Demonstração</a> – <a href="https://drive.google.com/file/d/0B7G-mAQQKCyZMVBSU1NDZk5RM0E/view?usp=sharing">Download</a> – <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt">Licença</a></div>
<table cellpadding="2" cellspacing="2" style="background: none repeat scroll 0% 0% rgb(249, 240, 219); border: 3px solid rgb(254, 226, 160); text-align: left; width: 100%;"><tbody>
<tr> <td valign="top" width="275">RECURSOS INSTALADOS 
<ul>
<li><a href="http://dicasblogger.blogspot.com/2008/02/cdigo-para-posts-relacionados.html">Posts Relacionados</a> </li>
<li><a href="http://dicasblogger.blogspot.com/2008/04/retirar-navbar-do-blogger.html">Retirada da Navbar</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/09/jump-break-o-leia-mais-do-blogger.html">Jump break</a> </li>
<li><a href="http://usuariocompulsivo.blogspot.com/2008/08/como-personalizar-o-navegador-do.html">Personalização dos ícones de navegação</a> </li>
<li><a href="http://www.dicasblogger.com.br/2008/10/colocando-favicon-no-blog.html">Favicon</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/09/avatar-nos-comentarios-do-blogger.html">Avatar nos comentários</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/07/modelos-de-blockquotes-citacao.html">Citação em bloco personalizada</a> </li>
</ul>
</td> <td valign="top" width="275">CARACTERÍSTICAS DO TEMPLATE 
<ul>
<li>Cores e fontes personalizáveis </li>
<li>Compatível com qualquer navegador que esteja devidamente atualizado. </li>
<li>Área de postagem expandida </li>
<li>3 blocos de widgets no rodapé </li>
<li>Sem sidebar e com menu no topo </li>
<li>Nome do seu blog no rodapé (auto) </li>
<li>CSS otimizado </li>
</ul>
</td> </tr>
</tbody></table>
Modo de Usar 
 <cite> </cite>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: 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2009/01/como-trocar-o-template-do-blogger.html">Como trocar o template do Blogger</a> </li>
</ul>
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. 
 <table border="0" cellpadding="2" cellspacing="0" style="width: 550px;"><tbody>
<tr> <td valign="top" width="275"><img alt="Imagem 1" border="0" height="69" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8LkoQlMZROOLVIw0VF1JI2mF60GJcPFsH7tTlxx2OOo6SFG8L9uZdE5Vc4jb6QvUwkWEmMqk7zkUZqRwan2goi5pS1LdaNIQakzPqez5J3Qw-w-CA_LQzvegjZUFZ7S1jpdr3U_OBpNZD/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Imagem 1" width="242" /></td> <td valign="top" width="275"><img alt="Imagem 2" border="0" height="69" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFr5Qpgnou3moFns6RWQNypsxWPswuN5VtalV4zSTZ1nvE7H6_uVLxqregx3IW6V7NR36npIiETr4oowSEejmCc3s2DrIcaesL9fMphG0YH19UvxdDNWmZmnp5MycpqfNJzM0OFbYMVtqi/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Imagem 2" width="242" /></td> </tr>
</tbody></table>
Se você preferir criar a sua própria imagem, a largura do cabeçalho é de 900px 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2010/07/imagem-para-o-cabecalho-do-blogger.html">Imagem para o cabeçalho do Blogger com Photoshop</a> </li>
</ul>
A fonte utilizada na imagem 1 é a <a href="http://www.sofontes.com.br/Forte/download/10327" target="_blank">forte</a> e na imagem 2 é a <a href="http://www.urbanfonts.com/fonts/Brushed.htm" target="_blank">brushed</a>. 
 Colocando links na linkbar 
 Para colocar links no menu que fica acima do cabeçalho - acesse: 
 <ul>
<li><a href="http://dicasblogger.blogspot.com/2009/01/como-inserir-links-na-linkbar.html">Como inserir links na linkbar</a> </li>
</ul>
Usando o resumo de postagens 
 No Template Cinema, instalei o jump break do Blogger. Saiba como usar: 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2009/11/como-colocar-o-leia-mais-no-blogger.html">Dicas Blogger: Como colocar o hack “Leia Mais” no Blogger</a> </li>
</ul>
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: 
 <blockquote>
<div align="left">
]]></b:skin> </div>
<div align="left">
<link href='<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/TF8hCqGGu-I/AAAAAAAAC7M/2zqr6jmvv2U/favicon.png%27">http://lh4.ggpht.com/_mcq01yDJ2uY/TF8hCqGGu-I/AAAAAAAAC7M/2zqr6jmvv2U/favicon.png'</a> rel='shortcut icon'/> </div>
<div align="left">
<link href='<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/TF8hCqGGu-I/AAAAAAAAC7M/2zqr6jmvv2U/favicon.png%27">http://lh4.ggpht.com/_mcq01yDJ2uY/TF8hCqGGu-I/AAAAAAAAC7M/2zqr6jmvv2U/favicon.png'</a> rel='apple-touch-icon'/> </div>
<div align="left">
<link href='<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/TF8hCqGGu-I/AAAAAAAAC7M/2zqr6jmvv2U/favicon.png%27">http://lh4.ggpht.com/_mcq01yDJ2uY/TF8hCqGGu-I/AAAAAAAAC7M/2zqr6jmvv2U/favicon.png'</a> rel='shortcut icon' type='image/x-icon'/></div>
</blockquote>
Como alterar a cor dos links do rodapé 
 Os links do rodapé estão na cor azul. Para alterar a cor, encontre este trecho: 
 <blockquote>
<div align="left">
#creditleft a,.creditleft a:hover,.creditleft a:visited,#creditright a,.creditright a:hover,.creditright a:visited { color: #0f5cbb; text-decoration:none; }</div>
</blockquote>
Mude a parte que está em vermelho. Veja uma tabela de cores <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm">neste link</a>. 
 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. 
 <blockquote>
<div align="left">
<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="<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/Sx_NkkqinjI/AAAAAAAABHU/Rur7RwxSxDc/email-32x32.png%22">http://lh4.ggpht.com/_mcq01yDJ2uY/Sx_NkkqinjI/AAAAAAAABHU/Rur7RwxSxDc/email-32x32.png"</a> /></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="<a href="http://lh3.ggpht.com/_mcq01yDJ2uY/Sx_NlEX7DFI/AAAAAAAABHc/A_yeYFAVdrs/feed-32x32.png%22">http://lh3.ggpht.com/_mcq01yDJ2uY/Sx_NlEX7DFI/AAAAAAAABHc/A_yeYFAVdrs/feed-32x32.png"</a> 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="<a href="http://lh5.ggpht.com/_mcq01yDJ2uY/Sx_Nk3Va44I/AAAAAAAABHY/Bk5e6uCxql8/facebook-32x32.png%22">http://lh5.ggpht.com/_mcq01yDJ2uY/Sx_Nk3Va44I/AAAAAAAABHY/Bk5e6uCxql8/facebook-32x32.png"</a> 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="<a href="http://lh6.ggpht.com/_mcq01yDJ2uY/Sx_NlCwaSAI/AAAAAAAABHg/-jmESVlNpuw/orkut-32x32.png%22">http://lh6.ggpht.com/_mcq01yDJ2uY/Sx_NlCwaSAI/AAAAAAAABHg/-jmESVlNpuw/orkut-32x32.png"</a> 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="<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/Sx_NlotqK6I/AAAAAAAABHk/XEyAjirvcn0/twitter-32x32.png%22">http://lh4.ggpht.com/_mcq01yDJ2uY/Sx_NlotqK6I/AAAAAAAABHk/XEyAjirvcn0/twitter-32x32.png"</a> 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="<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/S6JtAbXQ4JI/AAAAAAAACOY/DaiSgBRc8sU/youtube-32x32.png%22">http://lh4.ggpht.com/_mcq01yDJ2uY/S6JtAbXQ4JI/AAAAAAAACOY/DaiSgBRc8sU/youtube-32x32.png"</a> /></img ></a></td> </tr> </tbody> </table></div>
</blockquote>
Postando vídeos 
 Para que o vídeo ocupe toda a área de postagem, use o tamanho de 800x625 
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHQsAYT_5-nzE25kauTFgFL7a45AAoNd_wR-yRxn1AUmkp1YdR8xT1PoTro6yT2odvy6CG9ccdbCtSgpLinPtzppCGJJTD3PI_yEo9GC1pDeO0YMWLkY8XWPaArtNo7nCl_eNCQeE-agcv/s1600-h/image%5B8%5D.png"><img alt="YouTube" border="0" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguR6nzwX3-982i7K13bXPe-9uy4YbCYs53IFI2wTlsPMyMceHCuSwlKq3e5BOxrdiloaCergqOwkhHuOg9MeGhN1i0O6ZGv2OXAaHZpqk9AMT0oygdVx46FAzMhYzE8bhNszy66PDn4cTP/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="YouTube" width="502" /></a> 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2010/01/colocar-video-youtube-blogger.html">Como colocar videos do YouTube no Blogger</a> </li>
</ul>
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 
 <img alt="Fontes e Cores" border="0" height="138" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIL64Oojskyt3Id4RTc6K-pgboJyUeG8o8pVgfSuBFp7dJ9_iZX4eqs1za58ZSf0pHQcFw7-ceMQFnLyqexeUXmNlfx5mzJmZ1odcjYaQ8yRUk6ZoMuKbLDx1FlSgTh5Y_HSjYpefbiLnu/?imgmax=800" style="display: block; float: none; margin-left: auto; margin-right: auto;" title="Fontes e Cores" width="502" /> 
 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. 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2010/06/voltar-usar-antigos-templates-blogger.html">Como voltar a usar os antigos templates do Blogger</a> </li>
</ul>
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. 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2010/01/ajuda-blogger-blogspot.html">Ajuda Blogger Blogspot</a> </li>
<li><a href="http://www.google.com.br/webhp?hl=pt-BR">Google - buscador</a> </li>
</ul>
Saiba mais sobre a utilização de nossos templates gratuitos, acessando: 
 <ul>
<li><a href="http://www.dicasblogger.com.br/p/termos-e-condicoes-de-uso.html">Termos de Uso do Dicas Blogger</a> </li>
</ul>
©Template by <a href="http://www.dicasblogger.com.br/">Dicas Blogger</a> – alguns direitos reservados. Não retire os créditos.

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

Continue Lendo >>

20:00