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

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. 
 
<div align="center">
<img alt="Blogger Writer" border="0" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrxynR0QhAQX0MLlHf05cYsfRg0djjFxymghs8ctRpvdnWRDRPXWIib5XIyit-XIHEgoa9FuIBrvHgg__rdsdbE5iIm_mKD__QBtGHZKrceOjKWlQZXVLivepMQLLDOMhoO_yQGt9QmlWV/?imgmax=800" style="border: 0px none; display: block; float: none; margin-left: auto; margin-right: auto;" title="Blogger Writer" width="520" /> <a href="http://templatebloggerwriter.blogspot.com/" target="_blank">Demonstração</a> – <a href="https://drive.google.com/file/d/0B7G-mAQQKCyZbVhoUkVtRHZrWmM/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/11/como-colocar-o-leia-mais-no-blogger.html">Hack Leia Mais</a> e <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" target="_blank">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>2 colunas à direita </li>
<li>3 blocos de widgets no rodapé </li>
<li>Diversos hacks instalados </li>
<li>Nome do seu blog no rodapé (auto) </li>
<li>CSS otimizado </li>
</ul>
</td> </tr>
</tbody></table>
Introdução 
 <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 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: 
 <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, 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: 
 <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 que utlizei pra fazer o cabeçalho do Writer chama-se <a href="http://www.sofontes.com.br/Palace-Script-MT/download/18946" target="_blank">Palace Scripts</a> 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2009/08/instalando-fontes-no-photoshop.html">Instalando novas fontes no Photoshop</a> </li>
</ul>
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: <a href="http://www.backgroundlabs.com/">Background Labs</a>). 
 <blockquote>
<div align="left">
body { text-align:center; color:$textColor; background:#303030 url(URL DO NOVO BACKGROUND) repeat top left;</div>
</blockquote>
<ul>
<li><a href="http://www.dicasblogger.com.br/2010/07/mudar-background-plano-de-fundo-blogger.html">Como mudar o background nos templates do Blogger</a> </li>
</ul>
Colocando links na linkbar 
 Para colocar links no menu linkbar - que fica embaixo 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 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 
 <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>
Como alterar a cor dos links do rodapé 
 Os links do rodapé estão na cor amarela. 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: #ccc; 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>. 
 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) 
 <blockquote>
<div align="left">
]]></b:skin> </div>
<div align="left">
<link href='<a href="http://lh5.ggpht.com/_mcq01yDJ2uY/TF3q55WsE7I/AAAAAAAAC0s/maosPKbgQqE/old_openofficeorg_writer.png%27">http://lh5.ggpht.com/_mcq01yDJ2uY/TF3q55WsE7I/AAAAAAAAC0s/maosPKbgQqE/old_openofficeorg_writer.png'</a> rel='shortcut icon'/> </div>
<div align="left">
<link href='<a href="http://lh5.ggpht.com/_mcq01yDJ2uY/TF3q55WsE7I/AAAAAAAAC0s/maosPKbgQqE/old_openofficeorg_writer.png%27">http://lh5.ggpht.com/_mcq01yDJ2uY/TF3q55WsE7I/AAAAAAAAC0s/maosPKbgQqE/old_openofficeorg_writer.png'</a> rel='apple-touch-icon'/> </div>
<div align="left">
<link href='<a href="http://lh5.ggpht.com/_mcq01yDJ2uY/TF3q55WsE7I/AAAAAAAAC0s/maosPKbgQqE/old_openofficeorg_writer.png%27">http://lh5.ggpht.com/_mcq01yDJ2uY/TF3q55WsE7I/AAAAAAAAC0s/maosPKbgQqE/old_openofficeorg_writer.png'</a> rel='shortcut icon' type='image/x-icon'/></div>
</blockquote>
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 
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_4m_acRfhfag05OnjYMCzFcRJHedSb4egz8bwf_XFcqnN4cfdFPyuoAndaXYKDbB7XBXZX65q19fQOXhcvausdr5yyczYT_p8VGp9Gvml9NQfGSmIr39PxhgSGnFkuc3DlEjI4-RIzd8s/s1600-h/image8%5B2%5D.png"><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" /></a> 
 Í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. 
 <blockquote>
<div align="left">
<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="<a href="http://lh3.ggpht.com/_mcq01yDJ2uY/TF3lBbxkQGI/AAAAAAAAC0c/pLIqbnUCw_M/twitter.png%22">http://lh3.ggpht.com/_mcq01yDJ2uY/TF3lBbxkQGI/AAAAAAAAC0c/pLIqbnUCw_M/twitter.png"</a> /></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="<a href="http://lh3.ggpht.com/_mcq01yDJ2uY/TF3lBTZQtYI/AAAAAAAAC0g/vqUJ_WpiIAQ/rss.png%22">http://lh3.ggpht.com/_mcq01yDJ2uY/TF3lBTZQtYI/AAAAAAAAC0g/vqUJ_WpiIAQ/rss.png"</a> /></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="<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/TF3lBnqE-mI/AAAAAAAAC0k/tAmb4qZI42o/facebook.png%22">http://lh4.ggpht.com/_mcq01yDJ2uY/TF3lBnqE-mI/AAAAAAAAC0k/tAmb4qZI42o/facebook.png"</a> /></img ></a ></td> </tr> </tbody> </table></div>
</blockquote>
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>
Caso você queira realizar outras alterações na estrutura do template, tais como adicionar ou retirar sidebar ou mesmo instalar outros hacks, <a href="http://www.google.com.br/">pesquise</a> como fazer. 
 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 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 diferente...

Continue Lendo >>

22:07

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 :) 
 
<img alt="Template Flowers" border="0" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfjs3R_lH5o6NEmgytFL-TezrTKQwTQtpM5_L2lUkG1vQewc_c3SA4T2CswG9_0ioGxeFT5RIF5Q_ccnVSR6x_R3GTo0mNtOmYy1nEF8HyFxIp6ymCYVufImDm1ByP0lsTMUe-QrVdl7KL/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Template Flowers" width="520" /> 
 
<div align="center">
<a href="http://tempflowers.blogspot.com/" target="_blank">Demonstração</a> – <a href="https://drive.google.com/file/d/0B7G-mAQQKCyZMnZELUtlbWxCQTQ/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>

<div align="center">
Por favor, não retire os créditos</div>
 
 <table cellpadding="2" cellspacing="2" style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-size: auto auto; background-attachment: scroll; background-color: #eeeeee; background-image: none; background-position: 0% 0%; background-repeat: repeat; border: 3px solid rgb(204, 204, 204); 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/11/como-colocar-o-leia-mais-no-blogger.html">Hack Leia Mais</a> e <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://www.ferramentasblog.com/2010/06/share-buttons-do-blogger-oficialmente.html">Share Buttons oficial</a> dentro do post </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" target="_blank">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>4 colunas à direita </li>
<li>3 blocos de widgets no rodapé </li>
<li>Diversos hacks instalados </li>
<li>Nome do seu blog no rodapé (auto) </li>
<li>CSS otimizado </li>
<li>ícones para redes sociais </li>
<li>Background nos posts e no rodapé </li>
</ul>
</td> </tr>
</tbody></table>
<div align="left">
Modo de Usar </div>
<div align="justify">
A seguir, explicarei como funciona cada ítem do template. Para um melhor aproveitamento, acesse os posts de referência. </div>
<div align="justify">
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.</div>
<div align="left">
Instalando o template em seu blog</div>
<div align="left">
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:</div>
<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, 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: 
 <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>
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 
 <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>
Colocando links na linkbar 
 Para colocar links no menu linkbar - que fica embaixo 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>
Backup de Imagens 
 É altamente recomendável que você hosperede no Picasa a imagem do background: 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2010/07/como-hospedar-imagens-no-picasa.html">Como hospedar imagens no Picasa</a> </li>
<li><a href="http://www.dicasblogger.com.br/2008/09/backup-no-picasa-de-imagens-contidas.html">Backup no Picasa de imagens contidas nos templates</a> </li>
</ul>
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) 
 <blockquote>
<div align="left">
]]></b:skin> </div>
<div align="left">
<link href='<a href="http://lh6.ggpht.com/_mcq01yDJ2uY/TFiN8jk3A2I/AAAAAAAACuQ/dkJLs3hEq2s/yelp_webtreats.png%27">http://lh6.ggpht.com/_mcq01yDJ2uY/TFiN8jk3A2I/AAAAAAAACuQ/dkJLs3hEq2s/yelp_webtreats.png'</a> rel='shortcut icon'/> </div>
<div align="left">
<link href='<a href="http://lh6.ggpht.com/_mcq01yDJ2uY/TFiN8jk3A2I/AAAAAAAACuQ/dkJLs3hEq2s/yelp_webtreats.png%27">http://lh6.ggpht.com/_mcq01yDJ2uY/TFiN8jk3A2I/AAAAAAAACuQ/dkJLs3hEq2s/yelp_webtreats.png'</a> rel='apple-touch-icon'/> </div>
<div align="left">
<link href='<a href="http://lh6.ggpht.com/_mcq01yDJ2uY/TFiN8jk3A2I/AAAAAAAACuQ/dkJLs3hEq2s/yelp_webtreats.png%27">http://lh6.ggpht.com/_mcq01yDJ2uY/TFiN8jk3A2I/AAAAAAAACuQ/dkJLs3hEq2s/yelp_webtreats.png'</a> rel='shortcut icon' type='image/x-icon'/></div>
<div align="left">
</div>
</blockquote>
<ul>
<li><a href="http://www.dicasblogger.com.br/2008/10/colocando-favicon-no-blog.html">Colocando favicon no blog</a> </li>
</ul>
Como alterar a cor dos links do rodapé 
 Os links do rodapé estão na cor amarela. Para alterar a cor, encontre este trecho: 
 <blockquote>
#creditleft a,.creditleft a:hover,.creditleft a:visited,#creditright a,.creditright a:hover,.creditright a:visited { color: #ffff00; text-decoration:none; }</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>. 
 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 
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_4m_acRfhfag05OnjYMCzFcRJHedSb4egz8bwf_XFcqnN4cfdFPyuoAndaXYKDbB7XBXZX65q19fQOXhcvausdr5yyczYT_p8VGp9Gvml9NQfGSmIr39PxhgSGnFkuc3DlEjI4-RIzd8s/s1600-h/image8%5B2%5D.png"><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="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Fontes e Cores" width="502" /></a> 
 Í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: 
 <blockquote>
<td><a href="<a href="http://twitter.com/dicas_blogger%22&~~SPECIAL_REMOVE%21#%7E%7Egt;&%7E%7ESPECIAL_REMOVE%21#%7E%7Elt;img">http://twitter.com/dicas_blogger</a>"><img title="Siga-me!" style="border: 0px solid ; width: 64px; height: 64px;" alt="Twitter" src="<a href="http://lh3.ggpht.com/_mcq01yDJ2uY/TFiLvFEuh4I/AAAAAAAACuA/sBwI7XqoTs8/twitter_webtreats.png%22">http://lh3.ggpht.com/_mcq01yDJ2uY/TFiLvFEuh4I/AAAAAAAACuA/sBwI7XqoTs8/twitter_webtreats.png"</a> /></img ></a></td> </blockquote>
Código: 
 <blockquote>
<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="<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/TFiLvNjzzfI/AAAAAAAACt8/Wk20HBibniY/rss_cube_webtreats64.png%22">http://lh4.ggpht.com/_mcq01yDJ2uY/TFiLvNjzzfI/AAAAAAAACt8/Wk20HBibniY/rss_cube_webtreats64.png"</a> /></a ></td> <td><a href="URL DO TWITTER"><img title="Siga-me!" style="border: 0px solid ; width: 64px; height: 64px;" alt="Twitter" src="<a href="http://lh3.ggpht.com/_mcq01yDJ2uY/TFiLvFEuh4I/AAAAAAAACuA/sBwI7XqoTs8/twitter_webtreats.png%22">http://lh3.ggpht.com/_mcq01yDJ2uY/TFiLvFEuh4I/AAAAAAAACuA/sBwI7XqoTs8/twitter_webtreats.png"</a> /></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="<a href="http://lh5.ggpht.com/_mcq01yDJ2uY/TFiLu6hV_MI/AAAAAAAACtw/ECsp_yEeXEE/facebook_logo_webtreats.png%22">http://lh5.ggpht.com/_mcq01yDJ2uY/TFiLu6hV_MI/AAAAAAAACtw/ECsp_yEeXEE/facebook_logo_webtreats.png"</a> /></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="<a href="http://lh3.ggpht.com/_mcq01yDJ2uY/TFiLu7SPsHI/AAAAAAAACt0/HzskHHbhHAU/mail_square_webtreats.png%22">http://lh3.ggpht.com/_mcq01yDJ2uY/TFiLu7SPsHI/AAAAAAAACt0/HzskHHbhHAU/mail_square_webtreats.png"</a> /></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="<a href="http://lh6.ggpht.com/_mcq01yDJ2uY/TFiLuyTCl-I/AAAAAAAACt4/wpskLKeP2DE/orkut_webtreats.png%22">http://lh6.ggpht.com/_mcq01yDJ2uY/TFiLuyTCl-I/AAAAAAAACt4/wpskLKeP2DE/orkut_webtreats.png"</a> /></a ></td> </tr> </tbody> </table></blockquote>
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>
Caso você queira realizar alterações na estrutura do template, tais como adicionar ou retirar sidebar ou mesmo instalar outros hacks, <a href="http://www.google.com.br/">pesquise</a> como fazer. 
 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" target="_blank">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 Flowers

Lembram do Template Flowers ? Então, esta é a nova versão dele, voltada especialmente para as meninas. Ele é todo …digamos… cuti-cuti:) An...

Continue Lendo >>

19:48

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. 
 
<img alt="Template Geek" border="0" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivFKnkXxPVffusYMQRMh2UeQq5C7yf1I-BgOp0ftoH7gAn5nroghJ7FCB2kDDDne9HT0luI-Ebw9z5573Sv5e2f1pJpSmsXgV2NhFLdHi8KZrTe2_jl01geCNWgcWgBeD7tdaUmpIHh1dC/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Template Geek" width="520" /> 
 <div align="center">
<a href="http://templatebloggergeek.blogspot.com/" target="_blank">Demonstração</a> – <a href="https://drive.google.com/file/d/0B7G-mAQQKCyZSTNzbnBBck1WS2s/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>
<div align="center">
Por favor, não retire os créditos</div>
 
 <table cellpadding="2" cellspacing="2" style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-size: auto auto; background-attachment: scroll; background-color: #eeeeee; background-image: none; background-position: 0% 0%; background-repeat: repeat; border: 3px solid rgb(204, 204, 204); 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>Resumo dos posts -<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://www.ferramentasblog.com/2010/06/share-buttons-do-blogger-oficialmente.html">Share Buttons oficial</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" target="_blank">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://blogger-dicasmamanunes.blogspot.com/2010/05/criar-uma-caixa-de-busca-com-puro-css3.html" target="_blank">Caixa de busca em CSS3</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>1 coluna à direita </li>
<li>1 coluna á esquerda </li>
<li>3 blocos de widgets no rodapé </li>
<li>Diversos hacks instalados </li>
<li>Nome do seu blog no rodapé (auto) </li>
<li>CSS otimizado </li>
<li>Carregamento mais rápido </li>
</ul>
</td> </tr>
</tbody></table>
<div align="left">
Modo de Usar</div>
<div align="justify">
A seguir, explicarei como funciona cada ítem do template. Para um melhor aproveitamento, acesse os posts de referência. </div>
<div align="justify">
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.</div>
<div align="left">
Instalando o template em seu blog</div>
<div align="left">
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:</div>
<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 
 Crie uma imagem do tamanho 980 x 150 px, com fundo branco, usando o Photoshop ou outro programa de sua preferência (sugestão: <a href="http://www.pixlr.com/" target="_blank">Pixrl</a>) 
 <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>
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: 
 <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>
Colocando links na linkbar 
 Para colocar links no menu que fica embaixo 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>
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: <a href="http://www.backgroundlabs.com/" target="_blank">Background Labs</a>). 
 <blockquote>
<div align="left">
body { text-align:center; color:$textColor; background:#413f3f url(<a href="http://lh3.ggpht.com/_mcq01yDJ2uY/TFS6JpQ0zcI/AAAAAAAACks/3zZ7Rb-_z7w/5353535353535353536464643E3E3E_157.png%29">http://lh3.ggpht.com/_mcq01yDJ2uY/TFS6JpQ0zcI/AAAAAAAACks/3zZ7Rb-_z7w/5353535353535353536464643E3E3E_157.png)</a> repeat; font-family:arial,verdana,helvetica,tahoma,Sans-serif;</div>
</blockquote>
<ul>
<li><a href="http://www.dicasblogger.com.br/2010/07/mudar-background-plano-de-fundo-blogger.html">Como mudar o background nos templates do Blogger</a> </li>
</ul>
Como alterar a cor dos links do rodapé 
 Os links do rodapé estão na cor amarela. Para alterar a cor, encontre este trecho: 
 <blockquote>
#creditleft a,.creditleft a:hover,.creditleft a:visited,#creditright a,.creditright a:hover,.creditright a:visited { color: #fff; text-decoration:none; }</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>. 
 Backup de Imagens 
 É altamente recomendável que você hosperede no Picasa a imagem do background: 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2010/07/como-hospedar-imagens-no-picasa.html">Como hospedar imagens no Picasa</a> </li>
<li><a href="http://www.dicasblogger.com.br/2008/09/backup-no-picasa-de-imagens-contidas.html">Backup no Picasa de imagens contidas nos templates</a> </li>
</ul>
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) 
 <blockquote>
<div align="left">
]]></b:skin> </div>
<div align="left">
<link href='<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/TFTm_WoSC-I/AAAAAAAACmE/qMX_pjnqJR8/my_computer.png%27">http://lh4.ggpht.com/_mcq01yDJ2uY/TFTm_WoSC-I/AAAAAAAACmE/qMX_pjnqJR8/my_computer.png'</a> rel='shortcut icon'/> </div>
<div align="left">
<link href='<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/TFTm_WoSC-I/AAAAAAAACmE/qMX_pjnqJR8/my_computer.png%27">http://lh4.ggpht.com/_mcq01yDJ2uY/TFTm_WoSC-I/AAAAAAAACmE/qMX_pjnqJR8/my_computer.png'</a> rel='apple-touch-icon'/> </div>
<div align="left">
<link href='<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/TFTm_WoSC-I/AAAAAAAACmE/qMX_pjnqJR8/my_computer.png%27">http://lh4.ggpht.com/_mcq01yDJ2uY/TFTm_WoSC-I/AAAAAAAACmE/qMX_pjnqJR8/my_computer.png'</a> rel='shortcut icon' type='image/x-icon'/></div>
</blockquote>
<ul>
<li><a href="http://www.dicasblogger.com.br/2008/10/colocando-favicon-no-blog.html">Colocando favicon no blog</a> </li>
</ul>
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 
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiGQv0O4groRizX90d86hmsmm0KJCgMAxQE2cPialmWqb1Gux7SG5jpYf-cA4i3hu2AqlRFJe5yV6KO9nnd2LGT6NhbyvQBetVpXkATBQTY7wiVb7MkyKXJsL5ksKvLsf_uwvas2UujYv4/s1600-h/image8%5B2%5D.png"><img alt="Fontes e Cores" border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcHrJmaF3REpaZ7puL1HdbF22_LcQdtSdmExYRdcKap2DjgaooAG8tQkh_8lmudG0G5dRzz5-CTBUWpuYkd82vcfii-yCOY63oP-6FW92Lcj01EAHSQcPPmsqpkn5qNsKgLhuajGmkVElH/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Fontes e Cores" width="502" /></a> 
 <a href="http://www.dicasblogger.com.br/2010/06/voltar-usar-antigos-templates-blogger.html"></a> 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. 
 <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>
Caso você queira realizar alterações na estrutura do template, tais como adicionar ou retirar sidebar ou mesmo instalar outros hacks, <a href="http://www.google.com.br/">pesquise</a> como fazer. 
 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" target="_blank">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 Geek

Esta é a nova versão do Template Geek , com uma sidebar de cada lado, diversos hacks e recursos nativos instalados, CSS otimizado, dois mode...

Continue Lendo >>

00:41

Template Sky 2

Esta é a versão do <a href="http://www.dicasblogger.com.br/2010/07/template-sky.html" target="_blank">Template Sky</a>, 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. 
 
<img alt="Template Sky 2" border="0" height="274" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqUc6KDp_ncAy_PcBaCqL8zTTP43gPig77vIGSGhXFBsoX0ELcthV520e4CCSY9Yn6JYTCLmSQvq_AKy-1tmBbt4Jm6PbPCnJnpiB7hLOgSX86yUWg0C9sY2oTASbVX3lhhu3yPORsQYga/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Template Sky 2" width="520" /> 
 <div align="center">
<a href="http://tempsky2.blogspot.com/" target="_blank">Demonstração</a> – <a href="https://drive.google.com/file/d/0B7G-mAQQKCyZVTg0ZlNnT25pY1U/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>
<div align="center">
Por favor, não retire os créditos</div>
 
 <table cellpadding="2" cellspacing="2" style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-size: auto auto; background-attachment: scroll; background-color: #eeeeee; background-image: none; background-position: 0% 0%; background-repeat: repeat; border: 3px solid rgb(204, 204, 204); 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/11/como-colocar-o-leia-mais-no-blogger.html">Hack Leia Mais</a> e <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://www.ferramentasblog.com/2010/06/share-buttons-do-blogger-oficialmente.html">Share Buttons oficial</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" target="_blank">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://blogger-dicasmamanunes.blogspot.com/2010/05/criar-uma-caixa-de-busca-com-puro-css3.html" target="_blank">Caixa de busca em CSS3</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>4 colunas à direita </li>
<li>3 blocos de widgets no rodapé </li>
<li>Diversos hacks instalados </li>
<li>Nome do seu blog no rodapé (auto) </li>
<li>CSS otimizado </li>
<li>Carregamento mais rápido </li>
</ul>
</td> </tr>
</tbody></table>
<div align="left">
Modo de Usar</div>
<div align="justify">
A seguir, explicarei como funciona cada ítem do template. Para um melhor aproveitamento, acesse os posts de referência. </div>
<div align="justify">
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.</div>
<div align="left">
Instalando o template em seu blog</div>
<div align="left">
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:</div>
<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 
 Crie uma imagem do tamanho 970 x 100, com fundo transparente, usando o Photoshop ou outro programa de sua preferência (sugestão: <a href="http://www.pixlr.com/" target="_blank">Pixrl</a>) 
 <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 que utlizei pra fazer o cabeçalho do Template Sky 2 chama-se Atlas e está disponível para download no site <a href="http://www.urbanfonts.com/fonts/Atlas.htm" target="_blank">UrbanFonts</a> 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2009/08/instalando-fontes-no-photoshop.html">Instalando novas fontes no Photoshop</a> </li>
</ul>
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 
 <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>
Colocando links na linkbar 
 Para colocar links no menu que fica embaixo 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>
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: <a href="http://www.backgroundlabs.com/" target="_blank">Background Labs</a>). 
 <blockquote>
<div align="left">
body { text-align:center; color:$textColor; background: url(<a href="http://lh3.ggpht.com/_mcq01yDJ2uY/TFDzo3r782I/AAAAAAAACiY/CDgLPFz_0Zk/86.jpg%29">http://lh3.ggpht.com/_mcq01yDJ2uY/TFDzo3r782I/AAAAAAAACiY/CDgLPFz_0Zk/86.jpg)</a> repeat top left; font-family:arial,verdana,helvetica,tahoma,Sans-serif;</div>
</blockquote>
<ul>
<li><a href="http://www.dicasblogger.com.br/2010/07/mudar-background-plano-de-fundo-blogger.html">Como mudar o background nos templates do Blogger</a> </li>
</ul>
Como alterar a cor dos links do rodapé 
 Os links do rodapé estão na cor amarela. Para alterar a cor, encontre este trecho: 
 <blockquote>
#creditleft a,.creditleft a:hover,.creditleft a:visited,#creditright a,.creditright a:hover,.creditright a:visited { color: #ffff00; text-decoration:none; }</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>. 
 Backup de Imagens 
 É altamente recomendável que você hosperede no Picasa a imagem do background: 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2010/07/como-hospedar-imagens-no-picasa.html">Como hospedar imagens no Picasa</a> </li>
<li><a href="http://www.dicasblogger.com.br/2008/09/backup-no-picasa-de-imagens-contidas.html">Backup no Picasa de imagens contidas nos templates</a> </li>
</ul>
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) 
 <blockquote>
<div align="left">
]]></b:skin> </div>
<div align="left">
<link href='<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/TFD3fCYfkQI/AAAAAAAACi0/pi4mIHvNmTM/favicon.png%27">http://lh4.ggpht.com/_mcq01yDJ2uY/TFD3fCYfkQI/AAAAAAAACi0/pi4mIHvNmTM/favicon.png'</a> rel='shortcut icon'/> </div>
<div align="left">
<link href='<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/TFD3fCYfkQI/AAAAAAAACi0/pi4mIHvNmTM/favicon.png%27">http://lh4.ggpht.com/_mcq01yDJ2uY/TFD3fCYfkQI/AAAAAAAACi0/pi4mIHvNmTM/favicon.png'</a> rel='apple-touch-icon'/> </div>
<div align="left">
<link href='<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/TFD3fCYfkQI/AAAAAAAACi0/pi4mIHvNmTM/favicon.png%27">http://lh4.ggpht.com/_mcq01yDJ2uY/TFD3fCYfkQI/AAAAAAAACi0/pi4mIHvNmTM/favicon.png'</a> rel='shortcut icon' type='image/x-icon'/></div>
</blockquote>
<ul>
<li><a href="http://www.dicasblogger.com.br/2008/10/colocando-favicon-no-blog.html">Colocando favicon no blog</a> </li>
</ul>
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 
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJVzvv2AmfRLPcrb4gFIRjbwFaRNkssTAKhAr7I8-tAcLoSmmhkxy38XLNX6bBbODK_DHZ5tnsT0rdj_w9xZ1rQdR7dgez95RWeu8AeoJUWaauZk5511wimZU3Sntluh3F9NL6K5XKxQ-K/s1600-h/image8%5B3%5D.png"><img alt="Fontes e Cores" border="0" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8tDHG4LSodUzYx9rSh_JeJvV71J4E9vm657hVcfo5dPYn41PgY4sPwcaACAOmqvb0DCwiJtbcx_N5DO1dzTGmTEWn9QxO_z-EKSxh0feyVS95mLoJ34TjEyziAS_rTzjkQPlIO6nUnvlW/?imgmax=800" style="border: 0px none; display: block; float: none; margin-left: auto; margin-right: auto;" title="Fontes e Cores" width="502" /></a> 
 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. 
 <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>
Caso você queira realizar alterações na estrutura do template, tais como adicionar ou retirar sidebar ou mesmo instalar outros hacks, <a href="http://www.google.com.br/">pesquise</a> como fazer. 
 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" target="_blank">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 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,...

Continue Lendo >>

09:34

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. 
<img alt="" border="0" height="274" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-L3lz2-XWVLCVDG8dSvMvDylcoX3Dse1SofY-tk8Q4Q_o798tbzKcVDFjzAZVpmDtUdYtaOPNNhTg0V3G-4Sj2xZH8Or1evHqNJesu4NCHVgGLLLiBDsCkT4aCF6Tl8jg0WWbEK2H6Rd7/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="" width="520" /> 
<div align="center">
<a href="http://templatebloggerelegance.blogspot.com/" target="_blank">Demonstração</a> – <a href="https://drive.google.com/file/d/0B7G-mAQQKCyZaDdkU2V4SjBDOUE/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="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-size: auto auto; background-attachment: scroll; background-color: #eeeeee; background-image: none; background-position: 0% 0%; background-repeat: repeat; border: 3px solid rgb(204, 204, 204); text-align: left; width: 100%;"><tbody>
<tr> <td align="left" valign="undefined" width="266">HACKS 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" target="_blank">Jump Break</a> </li>
<li><a href="http://usuariocompulsivo.blogspot.com/2008/06/como-habilitar-formulario-de.html">Nova caixa de comentários</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><a href="http://templatesparanovoblogger.blogspot.com/2008/01/retirar-o-link-assinar-postagens-atom.html">Retirada “Feeds Atom”</a> </li>
<li><a href="http://blogger-dicasmamanunes.blogspot.com/2010/05/criar-uma-caixa-de-busca-com-puro-css3.html" target="_blank">Caixa de busca em CSS3</a> </li>
</ul>
</td> <td valign="undefined" width="294">CARACTERÍSTICAS DO TEMPLATE 
<ul>
<li>fontes personalizáveis </li>
<li>Compatível com qualquer navegador </li>
<li>3 colunas à direita </li>
<li>3 blocos de widgets no rodapé </li>
<li>Nome do seu blog no rodapé </li>
<li>CSS otimizado </li>
<li>cores:preto, vermelho e branco </li>
</ul>
</td> </tr>
</tbody></table>
 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: 
 <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>
Usando o resumo de postagens 
 No Blogger Elegance, instalei o jump break do Blogger . Veja como utlizar: 
 <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>
Colocando links na linkbar 
 Para colocar links no menu que fica embaixo 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>
Como alterar a cor dos links do rodapé 
 Para alterar a cor dos links do rodapé, encontre este trecho: 
 <blockquote>
#creditleft a,.creditleft a:hover,.creditleft a:visited,#creditright a,.creditright a:hover,.creditright a:visited { color: #ffc; text-decoration:none; }</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>. 
 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 
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0VlfJBP_xp3QHq1AmMrvFIeRPWS3mGQX_52yptZcvm946RkI7_wI2gar7U2k7o6LwfAQNt6Oi0jOAsB-Tj8rtQSAYzUQ0GwsmqKLnGhzIDVs5mr4lhAo5RbgNdLvAs7ASPNwYwUvJjCxB/s1600-h/image%5B14%5D.png"><img alt="image" border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg50ZJUxfdtsSkruSm-FXHn5KD9ZY2UD_dVBVMH91MHDu4S7ew6bAkE5pWW3Rr4QE73cHxO2lLRQQlnAbP_FtbWVOeNb-5sUH8TX_rP6PYXXkX08ZQPjFZ_jsRwDj9DQti3DyATZlGEcDbe/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="image" width="513" /></a> 
 Backup de Imagens 
 É altamente recomendável que você hosperede no Picasa as imagens do template: 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2010/07/como-hospedar-imagens-no-picasa.html">Como hospedar imagens no Picasa</a> </li>
<li><a href="http://www.dicasblogger.com.br/2008/09/backup-no-picasa-de-imagens-contidas.html">Backup no Picasa de imagens contidas nos templates</a> </li>
</ul>
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. 
 <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>
Caso você queira realizar alterações na estrutura do template, tais como adicionar ou retirar sidebar ou mesmo instalar outros hacks, <a href="http://www.google.com.br/">pesquise</a> como fazer. 
 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" target="_blank">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 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...

Continue Lendo >>

08:28

Template Blogger Green

Estou revisando todos os meus templates antigos, já que de lá para cá surgiram inúmeros recursos e hacks para Blogger/Blogspot. 
O Template Blogger Green foi um dos mais baixados até hoje, porém ele não tinha nem mesmo o resumo de postagens. Sendo assim, estou fazendo o relançamento dele, mas mantendo sua simplicidade inicial, que agradou muita gente ;) 
 
<div align="center">
<img alt="Blogger Green" border="0" height="279" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiUaJR2mcsIQvZWd5thkUjgPwYA7GilyxUJ9KzxDSstpXxv_SoJLZnUh7zWGyurtoeJigk3DHavuGXvCJUhm63KL2fNiBloqZMPJjUHiFjkCOi7AVHSRmglMFvh77Cv5i_BMNJ0FkUeVBF/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Blogger Green" width="520" /> <a href="http://templatebloggergreen.blogspot.com/" target="_blank">Demonstração</a> – <a href="https://drive.google.com/file/d/0B7G-mAQQKCyZc3pEQXQ4UjZfMW8/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="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-size: auto auto; background-attachment: scroll; background-color: #eeeeee; background-image: none; background-position: 0% 0%; background-repeat: repeat; border: 3px solid rgb(204, 204, 204); text-align: left; width: 100%;"><tbody>
<tr> <td align="left" valign="undefined">HACKS 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" target="_blank">Jump Break</a> </li>
<li><a href="http://usuariocompulsivo.blogspot.com/2008/06/como-habilitar-formulario-de.html">Nova caixa de comentários</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><a href="http://templatesparanovoblogger.blogspot.com/2008/01/retirar-o-link-assinar-postagens-atom.html">Retirada “Feeds Atom”</a> </li>
</ul>
</td> <td valign="undefined">CARACTERÍSTICAS DO TEMPLATE 
<ul>
<li>Cores e fontes personalizáveis </li>
<li>Compatível com qualquer navegador </li>
<li>3 colunas à direita </li>
<li>3 blocos de widgets no rodapé </li>
<li>Nome do seu blog no rodapé </li>
<li>CSS otimizado </li>
</ul>
</td> </tr>
</tbody></table>
 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 Green.xml. Se você não sabe 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 
 Crie uma imagem do tamanho 938 x 163, usando o Photoshop ou outro programa de sua preferência (sugestão: <a href="http://www.pixlr.com/">Pixrl</a>) 
 <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 que utlizei pra fazer o cabeçalho do Template Blogger Green chama-se Atrox e está disponível para download no site <a href="http://www.urbanfonts.com/fonts/Atrox.htm" target="_blank">UrbanFonts</a> 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2009/08/instalando-fontes-no-photoshop.html">Instalando novas fontes no Photoshop</a> </li>
</ul>
Usando o resumo de postagens 
 No Blogger Green instalei o jump break do Blogger . Veja como utlizar: 
 <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>
Colocando links na linkbar 
 Para colocar links no menu que fica embaixo 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>
Mudando o background (plano de fundo) 
 Você pode trocar, facilmente, a imagem que compõe o fundo do Template Blogger Green. 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: <a href="http://www.backgroundlabs.com/">Background Labs</a>). 
 <blockquote>
body { text-align:center; color:$textColor; background:#264f09 url(<a href="http://lh5.ggpht.com/_mcq01yDJ2uY/TFLPdGni1HI/AAAAAAAACjU/7v7j70fCWuc/154.jpg%29">http://lh5.ggpht.com/_mcq01yDJ2uY/TFLPdGni1HI/AAAAAAAACjU/7v7j70fCWuc/154.jpg)</a> center; </blockquote>
<ul>
<li><a href="http://www.dicasblogger.com.br/2010/07/mudar-background-plano-de-fundo-blogger.html">Como mudar o background nos templates do Blogger</a> </li>
</ul>
Como alterar a cor dos links do rodapé 
 Os links do rodapé estão na cor verde. Para alterar a cor, encontre este trecho: 
 <blockquote>
#creditleft a,.creditleft a:hover,.creditleft a:visited,#creditright a,.creditright a:hover,.creditright a:visited { color:#1e961e; text-decoration:none; }</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>. 
 Alterando as fontes e as cores 
 Todas as fontes e todas cores do template Sky podem ser alteradas através do painel do Blogger. Entre em designer do modelo e procure pela opção avançado 
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0VlfJBP_xp3QHq1AmMrvFIeRPWS3mGQX_52yptZcvm946RkI7_wI2gar7U2k7o6LwfAQNt6Oi0jOAsB-Tj8rtQSAYzUQ0GwsmqKLnGhzIDVs5mr4lhAo5RbgNdLvAs7ASPNwYwUvJjCxB/s1600-h/image%5B14%5D.png"><img alt="image" border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg50ZJUxfdtsSkruSm-FXHn5KD9ZY2UD_dVBVMH91MHDu4S7ew6bAkE5pWW3Rr4QE73cHxO2lLRQQlnAbP_FtbWVOeNb-5sUH8TX_rP6PYXXkX08ZQPjFZ_jsRwDj9DQti3DyATZlGEcDbe/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="image" width="513" /></a> 
 Backup de Imagens 
 É altamente recomendável que você hosperede no Picasa a imagem do background: 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2010/07/como-hospedar-imagens-no-picasa.html">Como hospedar imagens no Picasa</a> </li>
<li><a href="http://www.dicasblogger.com.br/2008/09/backup-no-picasa-de-imagens-contidas.html">Backup no Picasa de imagens contidas nos templates</a> </li>
</ul>
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. 
 <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>
Caso você queira realizar alterações na estrutura do template, tais como adicionar ou retirar sidebar ou mesmo instalar outros hacks, <a href="http://www.google.com.br/">pesquise</a> como fazer. 
 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" target="_blank">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 Blogger Green

Estou revisando todos os meus templates antigos, já que de lá para cá surgiram inúmeros recursos e hacks para Blogger/Blogspot. O Template ...

Continue Lendo >>

11:53