Dicas Blogger

Home » Archives for julho 2010

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

Template Sky

Como vocês já devem ter notado, venho estudando bastante sobre customização de templates para o Blogger. Trata-se de algo que sempre gostei de fazer e, por isso, resolvi me aprofundar no tema para oferecer modelos de melhor qualidade. 
O Template Sky é um pouco diferente dos anteriores, pois possui uma plano de fundo (background) personalizado e a sidebar (barra lateral) fica à esquerda. Tratei de instalar diversos hacks, bem como todos os novos recursos do Blogger. 
 
Ele é rápido, pois tem o CSS otimizado e poucas imagens externas. 
 Espero que vocês gostem desta minha nova linha de templates. 
 <img alt="Template Sky" border="0" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmQXGOQc99n4MaefYjeom6m_aOXvS99te1vHhHpzGJKEDt3Rd-YzT1uqVVbNLyecDEMsoMjiGFU780HMfvXaq-EGOwPa-RBq9GSJv5FVYz-NLDwRa7vsHtR0DqyX9kb3Xnza_4Plfuo09A/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Template Sky" width="502" /> 
 <div align="center">
<a href="http://template-sky.blogspot.com/" target="_blank">Demonstração</a> – <a href="https://drive.google.com/file/d/0B7G-mAQQKCyZWFpnMHI0MXltM0E/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="background: none repeat scroll 0% 0% rgb(238, 238, 238); 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>
</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 à 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 Sky.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 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 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. 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>
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;</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 já vem com um favicon instalado. caso queira mudá-lo, procure pelo trecho abaixo e substitua o endereço da imagem (em azul) 
 <blockquote>
]]></b:skin> 
<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'/> 
<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'/> 
<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'/></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 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/AVvXsEgpkMikfQ_aIaZo6B7X5q7VaL3HIzrS1ziLR0mAk3_BM2K5TwpH-cNDJVibZODMmtSMqwuva5ghH9qn5KtB1WVQYPkHc03B-qh4qu829IjEq8MsMlJreCw2Aqi4Bjt09pT6rH1181A_T7ov/s1600-h/image%5B18%5D.png"><img alt="Fontes e Cores" border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqIxXBfPYQ4F9VobqCkD4oi-DoySwXuVNEpeW7lBugcNZhn0-o9PzMEMOtk1d5lKChe_Z_L8sCzeWNxE5gNg6hoZ-RGgx3_QzXTdD8G6puRN19zLx9mNC9395j6-oeBfdNvQuCHAwCkCSk/?imgmax=800" style="border-width: 0px; 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

Como vocês já devem ter notado, venho estudando bastante sobre customização de templates para o Blogger. Trata-se de algo que sempre gostei ...

Continue Lendo >>

12:55

Um blog precisa mesmo dos comentários?

Este post surgiu de um debate ocorrido no Twitter  agora há pouco. Estávamos conversando sobre a obrigatoriedade (ou não) de termos os comentários abertos em nossos blogs. Na minha opinião, não é obrigatório e vou explicar o porquê. 
Eu acho que cada um faz o que quiser com o seu blog. Nunca fui chegada em escrever sobre regras e isso pode ser confirmado fazendo uma busca aqui no blog. 
O meu único post tentando colocar ordem em alguma coisa foi este: <a href="http://www.dicasblogger.com.br/2009/04/cinco-regras-para-novatos-no-twitter.html">Cinco regrinhas básicas para novatos no Twitter</a>. Uma grande bobagem por sinal, pois cada um deve fazer o que bem entender com o seu Twitter. E, claro, aguentar os blocks e unfollows 
 
Eu sei, eu sei que blogs são conversações, mas o que fazer com as pessoas que não sabem conversar? que chegam agredindo? que escrevem linhas e linhas de palavras de baixo calão? Ah sim, basta moderar os comentários, né? Não, não basta. O dono do blog será obrigado a ler toda aquela papagaiada antes de recusar o comentário. 
 Acha que estou exagerando? Então leia estes posts sobre agressividade na web: 
 <ul>
<li><a href="http://janio.sarmento.org/agressividade-na-internet-o-que-esta-acontecendo/">Agressividade na Internet — o que está acontecendo?</a> (Blogue do Jânio) </li>
<li><a href="http://www.contraditorium.com/2010/07/21/sisifode-ai-blogueiro/">Sisifode aí, blogueiro</a> (Contraditorium) </li>
</ul>
Eu tenho 3 blogs, mas apenas este tem os comentários abertos. Foi uma opção MINHA, pois eu gosto muito de receber o feedback dos meus leitores, de saber se estou fazendo um trabalho legal e etc. Mas, por favor, não se prendam às regras feitas por outras pessoas. O blog é SEU. Faça dele o que quiser. Apenas é importante saber que, dependendo do que você fizer, virão as consequências. 
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglQCbdmgm1_JgSKdCHTnhGnIRmLPVmS7wYTaZLVPp2mtv1cpMP5rywVjDzUC6YSbDKz75_mntBhDaxvScwiBQQnCyRIPamjuLG5WRp0rybnzLbMUZTiRaJvzrtnW7s0YAfpI-RnVMVvZWZ/s1600-h/image%5B6%5D.png"><img alt="" border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtVjmYOXf-wG2f5WYI83rvXIUGHgl9AE6WGfSP5JdkPlJW1XFXllKsPUmmaWQPnpOsq0i9wnrQ-1kwG_XutEv214gPrs1E8GRRDF7q_i1Sw_s_9zTbqUk821OmBXwELKqR0hwgBmx9MId9/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="" width="452" /></a> 
 Pra mim, um blog com comentários fechados é um blog como qualquer outro. 
 Se você não aguenta mais ser agredido, feche os comentários e seja feliz. 
 Não, eu não vou fechar os comentários do DB. Apenas quis dar minha opinião. 
 Como eu resolvi o problema com os comentários agressivos que eu recebia? Simples. Eu não leio mais tais comentários, pois tenho quem apaga-os previamente. Eu só leio e modero os comentários que passaram por um filtro. E acho que tenho este direito. 
 UPDATE 1: Eu amo comentários, só acho que isso não precisa ser obrigatório 
 UPDATE 2: Atendendo a pedidos, meus outros blogs são: 
 <ul>
<li><a href="http://www.dicasdeinformatica.net/">Dicas de Informática</a> (pai do DB) </li>
<li><a href="http://receitinhasdamammy.blogspot.com/">Receitinhas da Mammy</a> (livro de receitas pessoal) </li>
</ul>
E vocês, o que pensam a respeito da obrigatoriedade dos comentários em blogs?

Um blog precisa mesmo dos comentários?

Este post surgiu de um debate ocorrido no Twitter agora há pouco. Estávamos conversando sobre a obrigatoriedade (ou não) de termos os comen...

Continue Lendo >>

15:20

Versão mobile de blogs do Blogger/Blogspot

Hoje eu estava lendo o excelente blog <a href="http://vagabundia.blogspot.com/" target="_blank">Vagabundia</a>, quando me deparei com um recurso que eu procurava há tempos: como oferecer uma versão mobile dos blogs que utilizam o Blogger. A versão mobile (ou móvel) nada mais é do que uma página com o tamanho adequado para celular e smartphone. 
Com o uso cada vez mais crescente desses dispositivos – ainda mais depois do iPhone – tornou-se essencial a qualquer página da web disponibilizar uma versão móvel, que se enquadre ao tamanho das telinhas dos celulares. 
Nos blogs que usam Wordpress, tal recurso já existia há tempos, bastando a instalação de um plugin. Agora podemos fazer o mesmo com nossos blogs do Blogger/Blogspot, graças à descoberta do amigo JMiur. Vamos lá? 
 
Acesse o site <a href="http://www.onbile.com/" title="http://www.onbile.com">http://www.onbile.com</a> e escolha o idioma (no caso, português). Clique no botão comece agora (figura 1). Na página seguinte, crie sua conta (figura 2) 
 <table border="0" cellpadding="2" cellspacing="0" style="width: 550px;"><tbody>
<tr> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNinbwky_Zu_NRK_rzPV4Ep9o7biwKvxs_Cky8anuHvQjQw-F_UJDxtmfdY-Suk_hQltjBHzZey0QCSeWOuxWAaEn5KtymzQUN9599wVuURC4Z5w5sTQgKIQ1tK26zSxRgj121JpIKnRLI/s1600-h/image%5B52%5D.png"><img alt="onbile - início" border="0" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE23gkuG3UirGhb6josUqro_BWMlK6hRpd1xd2ibQlCUXX1dmJ212K7JwLfAQqtKb6HbJTzbw1xLrv_N20IFwZhQFGLSDZHXciN3CFHINsDBlRnic4eIHH9-PdUZBX2sUG1GpU04lN31IQ/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="onbile - início" width="242" /></a> </td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifLXQ6lWo8DyhMW2Kjx8mHcLq6ScoPXVwhKLznn2hD4DgfGzwc8_id6-4gJnaMTqLtIEYFIyoAPlUHDo-RBhzRgrTPwhrJfWzSjMUrcanrQpT_uXRCAyC_51NbdqpMp16Ql2ON88gpSwG9/s1600-h/image%5B53%5D.png"><img alt="onbile - criar conta" border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSs9lNIQvcn5BDP3OgKY4dDxhYW_OQGyoqQq_vMEIbGe5qA-ZhyxjEim1aDQ7ghH5D9kdOzFz3Fzgr13YDVEw3L9qlC542KCxW38cvMe9wJqZsY0Rqr26cPkFGw3tMCwIkx3YHoRTsPBFP/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="onbile - criar conta" width="242" /></a> </td> </tr>
</tbody></table>
Escolha um dos temas disponíveis, altere as cores e clique em próximo passo 
 <table border="0" cellpadding="2" cellspacing="0" style="width: 550px;"><tbody>
<tr> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPjKoF3K0Zb6h1CiooyFP0_UQbqxuTJ4WKJZD1VhuR2yIu4rCfI3B-28Eg89W_ycohsqKZZGpjEITeYX5wKItRZcLd1JQNJMUdgiQo_FeUExP-HWhjGO3N8WI1MdLn9grsbuj5A7O-vWB9/s1600-h/image%5B68%5D.png"><img alt="onbile-temas" border="0" height="154" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2zkGdNsyzhJaZUsNInw-ChQhP59ryYdxaiowUuQMpl6hsT9B-9-Kdf3CzMT1JzUC2DHZo5I1_zDiE2qxOoHunrfEYNz8Ipk30Sz2b5yUUKHLE0XiZiwHNYE8U7neaq0f9gD7b9do5l7H-/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="onbile-temas" width="242" /></a> </td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW-3gyWcyXWBpDgNAg3ZhDqs7TjLTVricxgA3koaO4mRIPTe8NNCebd-FDW0cStJrBV9gMICXHS5w_Kgb76IrgDO_k27BYolFNNzlMVF0bfLxu1x7frlO-HUBQXhuDqrL8jroBOTj-8wPO/s1600-h/image%5B69%5D.png"><img alt="onbile-modelos" border="0" height="154" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVJqZ1d1nlQRtKERuZlxupvUwD3AMeqfEK77C2iUjR0ezXwtbd-gBSoy2PYalFakC7Sq_HuI0jdVNiHdMje-SHwfznbQ1NXpD6Pkg1QZXCgJHPrIEwOQzh0YljLQRmLjUNdI8WGL3-GZMg/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="onbile-modelos" width="243" /></a> </td> </tr>
</tbody></table>
A seguir, coloque a url do feed em RSS Url e o nome do blog em título (figura 5). Em upload file, envie um logotipo do blog. Clique em próximo passo. Na página seguinte, escreva a url do seu blog em Your Domain e clique em publish (figura 6). 
 <table border="0" cellpadding="2" cellspacing="0" style="width: 550px;"><tbody>
<tr> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIDsV4LEDDhJWGLEU-dRg6xVR95d1j2gItr8uoYxhRsC9URET5qk-Y8t5jb85TTnXgzc7cVXRHZ9aOQ1LQOY-l36zeLqmYMNMx2EqLi5jeQtb2S35jpm3hp4UPSoVoCXVKtNxRRgoYOTVX/s1600-h/image%5B70%5D.png"><img alt="onbile-dados do blog" border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSv_Y4jzvCAq3RNJEnyCKVRA5VTkEzygUbjDDnorDuqYZlBvnpfSZE_yXH_lfopEQaRuDkXWIRBa5HDi4W5lScUjmE17S7lYBqkGv7QpvCfkR0sVU9i99QY87XJpMb8KHgYXbLgDT4-qSQ/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="onbile-dados do blog" width="242" /></a> </td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZY7N0y_kU9jwqDA6lf-SshntLllZaYN13JRQB4cl2YxHTzqIDbprlZ2Ep2gq_6w4vpK2T3PCBNqMDag33eUBcMlRfME9Y0KOWPaELWhqmcazLS5TWxR2X60EjFRdIzV32OaOJTLKElMTs/s1600-h/image%5B72%5D.png"><img alt="onbile-url do blog" border="0" height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGHfERgPAlBAakZI2Y5Ki19x6Bw-bremUzvkaNuFMq6vKTqRZaetSuJSVpGap6xoBgw4N8R_cYwYbmJbK58RQvn4uzDSvvqMXDcuFRbBU5uCz5VGql8vPzhgq0rZhor8RiRWPQDWTL96i1/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="onbile-url do blog" width="242" /></a> </td> </tr>
</tbody></table>
O código de ativação chegará no email cadastrado. Clique sobre o link, copie o código fornecido e cole antes da tag </head> no html do seu template. 
 <table border="0" cellpadding="2" cellspacing="0" style="width: 550px;"><tbody>
<tr> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFW4PPKJr9pzGv3emW4esy9hib47mAr-kcMSG38K78o6m6dmdDTsy9o-qRgTEU_c7RQJiiWk5tYgRkAuGqCSsKbQ_4NifJ_vnOqiwWC6B5QzP_BhmUlbn4jXFDNTApK2eyuHsX8Yi0IJOK/s1600-h/image%5B73%5D.png"><img alt="onbile - código" border="0" height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibYPqInYmh-bLe85Scmqzs_hKmvfuEm-mTV6QF9c9GmFzmaJihPWtIUjwkpaj1CyoyiKYPR7Y9nzYB-5LAgx4ZcXr6fSG8P3UN2yQYoYKEbSkWIu6L9BxEWdXDfAGX7pTXQJ1WhZ5Gej0e/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="onbile - código" width="252" /></a></td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdGLW7-iTmG-IPGbjfY2FjY6SXxrKihGzqn9zFVM9omqZgNT75nj8tPC87zUCML_3Mbbm8yALV8hiQjR4EYQoi4uAFIVKZQn2ssyza6oMNC6pVSB68LldxPjZZF03mU2PUcZbCd_QQTB8t/s1600-h/image%5B76%5D.png"><img alt="Html do Blogger" border="0" height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXhCipXlq0Qn9Xz1XpXkrJDA1JCepUylEjWM6GOf9OuNHTqLXRgtWJRoQOou21nQpGKtswGkeXjNOoQWaXpX7qsTUC7DjnFYB8hDMPi83E9ecPuo1DdDEVA2u70ETaP5eLy0Vw7q2RxrqE/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="Html do Blogger" width="236" /></a> </td> </tr>
</tbody></table>
Veja como ficaram as páginas do Dicas Blogger no browser do meu iPhone: 
 <table border="0" cellpadding="2" cellspacing="0" style="width: 589px;"><tbody>
<tr> <td valign="top" width="171"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWYNH6Ly6RIHJCImWxYwcZ3h86-l8ErFrLlMVi39KNNQSNzaPK6KdeXdPd_Ys71vlT7Xy5LAEDCZg1PYMpBk5YrGBtEWDc7m3sP6MfsX0mGWKfMSDSfUzDWsVF-U0oGD9fjLvIIdrEnE0z/s1600-h/foto%201%5B3%5D.png"><img alt="Home" border="0" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho4V6WZse96gQd00s3uajtE0J3Pxkqy-YNmgkXBcBOh-5NioUDskiATSWyY1EsfT0I2gwLRZb2zlWCU2IUDKBHKLjdLlGPpqy58TWhC46RFbIKfUlqqKFR1QhITFLMV4LmHxsRo63Vzfqp/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="Home" width="162" /></a> </td> <td valign="top" width="173"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBunhwz78Edg33X0Ldz9RW2HRIP8rrAebAmp2ZUZsziRgnA5Zjwb2mTuhLLXAVVHDtg55Ua8VogrzWWUPRBT4sE243n44Lgg6QAvXApN-uyKXIJcLFL2247YhJLw3gyl7xkhcuf_lQTH80/s1600-h/foto%202%5B3%5D.png"><img alt="Post" border="0" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkBP2xZbdeYatDuWJXeN7tj2pCX_Yr3dyROPZIV_6F4bJKvs1-MvTJjg1nBOIv0P60ufA-PHjBm0N9NU0JJklxFZxmA1tXajJZh_yqwIZ0-FZDEovQs6PsR4kxnWn6_YWMiqpfFJYE9G7j/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="Post" width="162" /></a> </td> <td valign="top" width="243"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit_eOOT6781uVma5DsbJ79iQk4t5oxgFdzQJCQ1H8_QdWqfBshQbwP1OatL9-8nC11hSKQNUH5uv9usbdihyphenhypheny0QabFPKvpa_NcgzZnrYhyLTYHt4Qw2kQyo3MnHW5iAtVQm0wmRm4q3gTx/s1600-h/foto3%5B3%5D.png"><img alt="Post" border="0" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtcdtgUoMcdWQdgIwyWfA8QeLth5usf-393LMQ_0ZLK_RdBWnv5YCYy4o_ddYAQ2ay7rhDb5wm4mbcvRvcrbbfg-u4zg6gJtY5hWAuDmJ2jja-cI04aCyiMHbgsKHQ-mtS72tM7eum79rm/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="Post" width="162" /></a> </td> </tr>
</tbody></table>
 Fonte da informação: Vagabundia - <a href="http://vagabundia.blogspot.com/2010/07/onbile-la-version-movil-de-tu-blog.html">Onbile: La versión móvil de tu blog</a>

Versão mobile de blogs do Blogger/Blogspot

Hoje eu estava lendo o excelente blog Vagabundia , quando me deparei com um recurso que eu procurava há tempos: como oferecer uma versão mob...

Continue Lendo >>

13:56

5 dicas para o Google Adsense

<div align="justify">
Lembrando mais uma vez que tudo que falo sobre monetização de blogs é fruto da minha experiência, vou dar 5 dicas  para aumentar os ganhos com anúncios Adsense. Algumas destas dicas são bem básicas, mas no entanto vejo muitos blogs de topo que cometem alguns erros onde poderiam estar ganhando MUITO mais. Não quer dizer que vá funcionar para todos, mas a regra básica para ganhar dinheiro com o Adsense também se aplica nestas dicas: trabalho! </div>
 
1 – Retire anúncios! Existe uma idéia antiga, que vem desde o princípio do Google Adsense, de que os anúncios devem estar sempre ao alcance dos olhos do visitante, não importando a localização da página. Para conseguir isto, a maior parte das vezes são utilizados os 3 blocos de anúncios que o Adsense permite. O problema em seguir esta técnica é o fato de que o Adsense normalmente coloca os anúncios que PAGAM MAIS, e podem aparecer em qualquer um dos 3 blocos, mesmo naqueles que são menos clicados. Eu utilizo 1 só bloco, o que fez os ganhos aumentarem substancialmente, mesmo com uma diminuição no número de cliques. Os espaços que ficam disponíveis diminuindo o número anúncios Adsense pode ser explorado com outros tipos de publicidade. 
 2- Limpe o seu blog! Se o seu blog ainda tem a árvore de Natal do ano passado, 3 modelos de relógios digitais, inúmeros selos (ainda se usa dar selos para blogs?), widget para anunciar quando o seu gato mia no Twitter, e mais algumas coisas que foram ficando com o tempo e são completamente inúteis, livre-se de tudo isto! Um blog muito carregado não vai render nada em publicidade, o visitante ficará distraído. Faça um favor para você e para os seus leitores e limpe o blog. As conversões irão aumentar bastante e vai ficar muito mais agradável para quem visita regularmente. 
 3 – Faça reviews! Em todo e qualquer tipo de blog, não importa o nicho, é possível fazer reviews de produtos ou serviços. O visitante que chega do Google tem uma propensão muito grande em clicar nos anúncios quando o texto é uma descrição pormenorizada de algum produto ou serviço e a taxa de conversão tende sempre a ser bastante superior. É importante fazer um texto com pelo menos 500 palavras, utilizar imagens e  SEMPRE ORIGINAL, não importa se esteja falando sobre livros ou sobre a capa indestrutível do Iphone que comprou a semana passada. Desta maneira, vai indexar melhor nos motores de busca e acrescentar algo ao seu leitor fiel. 
 4 – Publique receitas de brigadeiro! Esta dica é virada para quem possui sites de nicho. Para exemplo, vamos utilizar o DicasBlogger, que tem como foco o que o próprio nome diz: dar dicas para blogs. No entanto, nada impede que a Juliana publique <a href="http://www.dicasblogger.com.br/2009/10/receita-de-brigadeiro.html" target="_blank">a melhor receita de brigadeiro</a> que já provei (estagiário puxa saco mode on). Neste caso, se ela publicar mais uma ou duas variações da receita, provavelmente irá receber MUITAS visitas de pessoas interessadas na arte de fazer brigadeiros. Com isto, vai aproveitar a autoridade que o Google já lhe concedeu e atrair visitantes de outros nichos interessados num determinado assunto. Quanto mais tráfego, mais cliques, além de dar algo diferente para os leitores e fidelizar outros que eventualmente se identifiquem com o assunto principal do blogue. 
 <img alt="receita de brigadeiro" border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiITn6t7IWrQ35D45hzr5EUY69TwG8I542Lc6HKJTyToCsfbwXIX0wMILalPI6s0wgX0vtwO5onsG6OE7DEzUKe2DyZOkkDVyATPm_myEto45_hnfC-J6W12oCpANETX0AM8vlkN21s7SQ/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="receita de brigadeiro" width="400" /> 
 <div align="center">
Receita de brigadeiro - <a href="http://www.flickr.com/photos/mayra/31394483/" target="_blank">Flickr</a> </div>
5 – Fuja de hypes! Hype, para quem não sabe, significa os assuntos mais falados do momento. A única vantagem de um hype é massagear o ego do blogueiro que vê o contador de visitas se mexer mais rapidamente. Se algum post do blogue indexar bem para um determinado assunto que esteja sendo muito procurado num determinado momento, provavelmente os ganhos no Adsense vão baixar. A explicação é bastante simples: vai haver uma maior impressão de anúncios e os cliques muitas vezes não acompanham na mesma proporção (CTR), fazendo com que o valor pago pelo Google Adsense diminua (eCPM). Outro fator é que, muitas vezes, principalmente quando se trata de assuntos como acidentes ou catástrofes, o Adsense nem chega a disponibilizar anúncios, aparecendo os célebres “Quando nasceram os dinossauros” e outros institucionais. Se você quer criar uma fonte de rendimento fixa e estável, o crescimento tem que ser gradual, ganhar muito dinheiro fácil e rápido, não existe. 
 
 <a href="http://twitter.com/netdentista">JV</a> é  editor do <a href="http://www.netdentista.com/">Blog do Dentista</a> e no DB escreve sobre monetização de blogs

5 dicas para o Google Adsense

Lembrando mais uma vez que tudo que falo sobre monetização de blogs é fruto da minha experiência, vou dar 5 dicas para aumentar os ganhos ...

Continue Lendo >>

11:35

O contador de comentários voltou a funcionar

Desde março deste ano, o contador de comentários do Blogger vinha mostrando valores completamente imprecisos, mas, para nossa alegria, desde ontem à noite ele voltou a funcionar corretamente. Além disso, os blogs que mudaram para domínio próprio e que tinham perdido diversos comentários, tiveram os mesmos de volta. 
 
<ul>
<li><a href="http://www.dicasblogger.com.br/2010/04/os-comentarios-do-seu-blog-sumiram.html">Os comentários do seu blog sumiram?</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/03/diminuicao-no-numero-total-de_02.html">Dicas Blogger: Diminuição no número total de comentários</a> </li>
</ul>
 Para instalar um contador em seu blog, acesse um destes posts e escolha o modelo: 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2010/04/widget-contador-feeds-e-twitter.html">Widget – feeds, seguidores, posts e comentários</a> – Dicas Blogger </li>
<li><a href="http://www.codigosblog.com.br/2010/03/widget-contador-feed-twitter_25.html">Widget contador Feed + Twitter + Comentários + Postagens</a> – Códigos Blog </li>
<li><a href="http://www.compulsivo.com.br/2008/09/widget-contador-de-posts-comentarios.html">Widget Contador de Posts e Comentários</a> – Usuário Compulsivo </li>
<li><a href="http://www.ferramentasblog.com/2010/02/menu-com-icones-e-contadores-de-artigos.html">Menu com ícones e contadores de artigos, feed, Twitter e comentários</a> – FB </li>
</ul>
Pode até demorar, mas a Equipe do Blogger sempre conserta os seus bugs ;)

O contador de comentários voltou a funcionar

Desde março deste ano, o contador de comentários do Blogger vinha mostrando valores completamente imprecisos, mas, para nossa alegria, desde...

Continue Lendo >>

15:20

Adsense – como escolher as cores dos anúncios

Numa altura em que blogs de referência no Brasil apregoam a <a href="http://www.ofimdavarzea.com/o-naufragio-dos-programas-de-afiliados-no-brasil/" target="_blank">explosão da bolha dos anúncios de programas afiliados</a> e o fim do dinheiro fácil na internet, os olhos viram-se para o Google Adsense. Nos próximos tempos vamos ver a utilização cada vez maior deste serviço, e também mais reclamações sobre as migalhas que são pagas pelos anunciantes. Quem quiser ganhar mais dinheiro, precisa estar atento para muitos detalhes do funcionamento do Google Adsense. E trabalhar muito. 
 
As cores que são usadas nos anúncios adsense são um dos fatores determinantes na quantidade de cliques que os anúncios irão receber, e este é um detalhe importante que tem que ser aprofundado. Existem várias recomendações, todas de consenso geral, sobre as cores que se devem utilizar nos anúncios: 
 Cores para criar harmonia – utiliza-se as cores do próprio blog nos anúncios, de maneira à diminuir a poluição visual que os anúncios normalmente provocam. Não se deve tentar esconder ou camuflar os anúncios de maneira à que o visitante interprete como conteúdo. O Pedro Dias, engenheiro chefe do Google, declarou recentemente <a href="http://twitter.com/pedrodias/statuses/17811994941" target="_blank">no Twitter</a>:  Anúncio –> não é conteúdo 
 Abusar nesse aspecto é contra os <a href="https://www.google.com/adsense/support/bin/answer.py?answer=48182" target="_blank">regulamentos do Google Adsense</a>. Além disto, quando você tem conteúdo com boa qualidade, terá visitantes também de boa qualidade, que sabem que estão clicando num anúncio, mas têm interesse nos produtos ou serviços. E poder de compra. 
 A não ser que você tenha um blog caça paraquedistas para amealhar centavos e completar a mesada, não subestime seu visitante nem o Google. 
 Cores de destaque – em blogs com fundo escuro é possível criar contrastes interessantes para chamar a atenção do visitante e gerar cliques, mas não convém utilizar cores muito quentes, o efeito pode ser inverso e afastar o visitante. 
 Outras considerações – Fala-se muito sobre as cores que se deve utilizar ou não em anúncios Adsense. Alguns blogs especializados no assunto recomendam, por exemplo, não utilizar o vermelho, que inconscientemente sugere perigo. O verde teria o efeito oposto. Acredito que não existam dois blogs em que as configurações de cor funcionem da mesma maneira, portanto é preciso experimentar várias combinações. 
 Como escolher as cores dos Anúncios Adsense: 
 <div align="center">
</div>
A técnica que vou descrever abaixo funciona perfeitamente para mim. Provavelmente existam outras semelhantes e que já tenham sido descritas em outros lados, mas foi a maneira que encontrei de me organizar e ter uma percepção exata de como as combinações de cores funcionam melhor quando insiro anúncios Adsense. 
 <div align="justify">
Antes de continuar, quero salientar ainda um ponto, a divisão entre Título do Anúncio, Texto e Link do anunciante.</div>
<div align="left">
</div>
<div align="left">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4eRhTaoEhffji8n1tSEmYO18utmO0n6n563oX-H8Eh97pi-361QfNW2b2Uy-c6jLBFiGcdcbb3ICVdpJ1RO8_iP2X440dRfRWhFb7ovZ9A6fDj1e6uMiBeGU-iExIrxEw1IK3JIHhqoA/s1600-h/anuncio%20adsense%5B3%5D.gif"><img alt="anuncio adsense" border="0" height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgTXYsFt4t2XtQyBc_fYuc2VM5yzf0m95m4ouWZftQ7cEK7oDPQRen_tQlM7AHnKtFMyfvx0sDKV_AaOao_cpaTXAHtXNUTOPg245hbPi-HpXtTwdVuel6hoIlIWWUcyc38RC94BQCYjY/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="anuncio adsense" width="404" /></a> </div>
<div align="justify">
</div>
O Título: 
 No início do Google Adsense, qualquer área do anúncio era clicável, o que gerava muitas impressões inválidas. Com o passar do tempo o serviço progrediu e as únicas áreas onde o visitante pode clicar é no título e no link do anúncio. Á partir deste momento, os anunciantes passaram a prestar mais atenção e a realçar os títulos dos anúncios. É a parte onde também devemos tentar destacar mais as cores. 
 <div align="justify">
</div>
O texto: 
 O texto do anúncio também vem ganhando importância, existem diversas técnicas para os anunciantes realçarem o conteúdo, mas no momento ainda não há muitos anunciantes em língua portuguesa utilizando artifícios que façam destacar o texto (como por exemplo, anúncios na primeira pessoa). Normalmente cores um pouco mais leves que o título costumam funcionar melhor. 
 <div align="justify">
</div>
O link: 
 É a segunda área clicável do anúncio, aqui também convém dar um pouco de destaque nas cores, principalmente para fazer algum contraste com as cores utilizadas no texto. 
 <div align="justify">
</div>
E qual a melhor cor para os anúncios adsense? 
 A única maneira de responder esta pergunta é: experimente. O problema é que a maior parte dos blogueiros escolhe uma cor que se adapta ao blog e esquece, nunca mais faz experiências com variações de cores. Até encontrar a combinação ideal, costumo fazer uma tabela como esta abaixo: 
 <div align="left">
</div>
<div align="left">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS16lXjwaetXzawpJkzmBwuTGTBZTgWYGSC1gQL6BwoQrIshPWU9GGc1iJJtSnRiosNjQLHFGj8535XIm0W94G394zunAVRxMOWcmGICf0GxL0VTiHIhtF3IDggXRIPEdBLyeuyJ41s7E/s1600-h/adsense%5B3%5D.gif"><img alt="adsense" border="0" height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZGmV90xE2M4_rdxjCEq_mhEZpNGwm3iKTnkCgtp5plXMGQudqucjlP9794HUayf3jKhvDi_60k4tub-oStGk5pH9JxHjT94WDMhZNb0PmTqTsw-71EtLeqg9E23hyY9yRRtylPApr03g/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="adsense" width="450" /></a></div>
<div align="left">
</div>
Em blogs com muitas impressões de páginas, em poucos dias é possível ter uma idéia de como as cores dos anúncios estão funcionando. Por norma, deixo sempre pelo menos um mês para tirar conclusões. Após realizar este processo algumas vezes, é possível comparar os resultados e descobrir qual é a melhor combinação de cores. 
 <div align="justify">
</div>
É importante criar sempre um critério para cada bloco de anúncio (<a href="http://www.dicasblogger.com.br/2008/02/critrios-do-adsense.html" target="_blank">Como criar um critérios para o Adsense</a>), desta maneira podemos acompanhar com mais pormenores os relatórios do <a href="http://www.dicasblogger.com.br/2010/07/integrando-o-analytics-ao-adsense.html" target="_blank">Adsense no Google Analytics</a> e na própria interface Adsense. 
 Para os anúncios em formato de blocos de links, o processo acima também funciona. 
 <div align="justify">
</div>
Conclusão: 
 Mesmo testando e registrando várias combinações de cores para comparar os resultados, são vários fatores que vão influenciar um visitante a clicar ou não em um anúncio. Esta maneira que encontrei, no entanto, me fez a chegar a conclusões muito interessantes sobre que cores utilizar. Em um blog antigo que tenho a melhor combinação transformava o template num arco iris, mas é óbvio que devemos ter um pouco de bom senso e tornar a experiência do visitante o mais agradável possível. 
 Um paraquedista dos motores de busca que se torne um leitor regular é, na estratégia à longo prazo, muito mais importante do que um clique de alguns centavos de alguém que nunca mais vai voltar ao blogue. 
 E você, tem alguma preocupação com as cores de anúncios Adsense que utiliza? 
 <a href="http://twitter.com/netdentista">JV</a> é  editor do <a href="http://www.netdentista.com/">Blog do Dentista</a> e no DB escreve sobre monetização de blogs

Adsense – como escolher as cores dos anúncios

Numa altura em que blogs de referência no Brasil apregoam a explosão da bolha dos anúncios de programas afiliados e o fim do dinheiro fácil...

Continue Lendo >>

16:39

Bordas arredondadas nos templates para Blogger

Hoje vou tentar explicar como usar bordas arredondadas nos templates para Blogger/Blogspot. Já adianto que o HTML varia muito de um modelo para outro e que este tutorial não se aplica aos novos templates do Blogger (<a href="http://www.dicasblogger.com.br/2010/03/novas-funcionalidades-de-layout-no.html" target="_blank">Designer do Modelo</a>). As bordas arredondadas funcionam perfeitamente no Mozilla Firefox (Figura 1) e no Google Chrome, mas infelizmente não funcionam no Internet Explorer (figura 2). <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYighgeMsdhe9aVQpvNQuyOS_Ej1RrJ6vihJjtBtQEaXUcceUVv5WXc0jT_eFCll6sa6NBUZ_vABkkNMMPncVhS2eu-AJEKunvDys915iClAJj_HX5rt-41gzJbUC0VEMv7zb9kdoexHtY/s1600-h/image%5B12%5D.png"><img alt="Firefox" border="0" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_2oo__0TIbcvwwHq3Rtj7DelIvBkHaqxAzhdgfdqst6xVdxQegmwo3fTFOLgMybixQfeVD3KZVAzS-WNePmD-Rzb1y508IZOt_w2CWfjKhNqXwfC_YF58zrD1c0VF8SIuIo0n22y1SdwP/?imgmax=800" style="border-width: 0px; display: inline;" title="Firefox" width="242" /></a> </td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkKXoSZx-V65t3NvTnC0hAHH_CoqsBN2IHK1znZGB-OqN_iV6GptUhSUrRf-b8qfsvgN7MXMGpA99DoCTyceU7e5iM1-5E3vE_SidYEng5lGyYfGsFLzLyDT6N9VEEvRpB9jokdUrHGiVf/s1600-h/image%5B13%5D.png"><img alt="Internet Explorer" border="0" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibe81GBs4N4nSikseKFA6h8Bu9dp0Wzw9RWv53-kHUjLWKdIwu2-bjlk6OiyGv8t3ipQyMZ7ko3XDl0YTBIwqYKntREeOWJWD57PvFMoIyZ5xSJMfEO0BqG0qW8nzG4c6TuPkCGyIhe3Yf/?imgmax=800" style="border-width: 0px; display: inline;" title="Internet Explorer" width="243" /></a> </td> </tr> </tbody></table> Mesmo os templates do Designer do Modelo, demoraram a se acertarem com o IE e ainda hoje ficam estranhos, como se tivessem sombras nas bordas (um horror!). ATENÇÃO: Recomendo a criação de um blog de testes para realizar toda e qualquer modificação no template do seu blog. Se der errado, você não terá nenhum prejuízo. Para inserir as bordas arredondadas, entre no painel do Blogger, clique em design e depois em editar HTML. Dê um Crtl+F com o teclado e procure por “border”. O código que devemos usar para arredondar as bordas é este: <blockquote> -moz-border-radius:6px; -webkit-border-radius:6px; -goog-ms-border-radius:6px; </blockquote> Os templates para Blogger são divididos em vários trechos, que começam com “#”. Temos como exemplos: #blog-wrapper (corpo do blog), #header-wrapper (cabeçalho),#linkbar (menu de links), #main-wrapper (área de postagem ) e etc. São nestes locais que você vai ter que encontrar as bordas e colocar o código para arredondá-las. Vamos para dois exemplos, usando o html do <a href="http://www.dicasblogger.com.br/2010/07/template-db-30.html" target="_blank">Template DB 3.0</a>: <table style="border: 2px solid rgb(192, 192, 192); text-align: left; width: 100%; background: none repeat scroll 0% 0% rgb(238, 238, 238);" align="center" cellpadding="2" cellspacing="4"><tbody> <tr> <td align="left" valign="undefined"> ANTES #blog-wrapper { text-align:center; position:relative; width:970px; background:$blogframeColor; border:1px solid $blogBorderColor; margin:15px auto 10px; padding:6px 8px 6px 6px; } </td> <td valign="undefined"> DEPOIS #blog-wrapper { text-align:center; position:relative; width:970px; background:$blogframeColor; border:1px solid $blogBorderColor; -moz-border-radius:6px; -webkit-border-radius:6px; -goog-ms-border-radius:6px; </td> </tr> </tbody></table> <table style="border: 2px solid rgb(192, 192, 192); text-align: left; width: 100%; background: none repeat scroll 0% 0% rgb(238, 238, 238);" align="center" cellpadding="2" cellspacing="4"><tbody> <tr> <td align="left" valign="undefined"> #linkbar { width:100%; position:relative; background:$linkbarbgColor; border:0 solid $contentBorderColor; border-bottom:1px solid $contentBorderColor; margin:0px 0 0; padding:0; } </td> <td valign="undefined"> #linkbar { width:100%; position:relative; background:$linkbarbgColor; border:0 solid $contentBorderColor; border-bottom:1px solid $contentBorderColor; -moz-border-radius:6px; -webkit-border-radius:6px; -goog-ms-border-radius:6px; </td> </tr> </tbody></table> O código (em vermelho) deve ser inserido logo abaixo da linha da borda. Repita o mesmo procedimento em todas as áreas onde as bordas devem ficar arredondadas. Para cada borda arredondada, clique no botão visualizar para ir conferindo o resultado e só salve o template quando estiver tudo do seu gosto. Quando você tiver certeza que aprendeu a colocar as bordas arredondadas no blog de testes, aí sim você pode fazer o mesmo no template do seu blog. Repito: o html varia muito de um template para outro e é preciso fazer vários testes até encontrar os locais corretos para inserção do código. Divirtam-se ;)

Bordas arredondadas nos templates para Blogger

Hoje vou tentar explicar como usar bordas arredondadas nos templates para Blogger/Blogspot. Já adianto que o HTML varia muito de um modelo p...

Continue Lendo >>

09:47

Templates exclusivos para Blogger

Desde que eu comecei com este blog, perdi a conta das vezes que recebi pedidos de encomenda de templates. Eu sempre resisti bravamente, pois não me achava suficientemente capaz de cobrar por esse tipo de serviço e sempre encaminhava-os a outros colegas que atuam na área de design para Blogger. O tempo foi passando e os conhecimentos foram se aperfeiçoando. Daí eu estava assistindo uma vídeo-aula do <a href="http://twitter.com/hordones" target="_blank">@hordones</a> sobre monetização, onde ele dizia que existem formas indiretas de se ganhar dinheiro com blogs. Pensei: “por que não?” <blockquote> <a href="http://www.ferramentasblog.com/2010/06/webinar-video-aula-sobre-monetizacao-de.html">Webinar: Vídeo-aula sobre Monetização de Blogs: como ganhar dinheiro com seu Blog</a> </blockquote> No começo do mês de junho, lancei no Twitter a página <a href="http://www.dicasblogger.com.br/2009/08/produtos-e-servicos.html" target="_blank">produtos e serviços</a> - totalmente em fase beta - onde apresento o que eu sei e posso fazer, os valores de cada trabalho e o meu (ainda) pequeno portfólio. Ainda é só uma experiência, mas se vocês tiverem interesse na aquisição de um template exclusivo, basta me enviar um email através do formulário de contato. Gostaria também de apresentar-lhes dois templates que criei recentemente, como cortesia aos amigos que resolveram criar novos blogs no Blogger: <a href="http://twitter.com/luanfr" target="_blank">@luanfr</a> e <a href="http://twitter.com/bqeg" target="_blank">@bqeg</a>. <a href="http://www.luanfeelings.com.br/" target="_blank">Template LuanFeeligns</a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgteDzufg48zQi0QrqdvDjWAuQAI2XPAtsfRRoBjOpws90lKLgNYyUkqyvW7BUYYVfRZXbL88eApKHJ6aDzMle0jJsIWGI9ZenNO6ElaHlmsvxvqqyJE1QL4wh9uskr-D7UdXoXqbQHMuCZ/s1600-h/image%5B15%5D.png"><img alt="Template do Luan" border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwc1s54fz397EtjVHNrFWfKmKsrNFWtZWFCr6BVBZLwtp21O-yqotvVDhyphenhyphenxDZmkroDJi5PMed8QVv5qurufvKp-Rhvarl14_UAHPOg-zJsTj_lD2KIB0ud3_0T3mZ3GAtTx_uoN6TPP-Xb/?imgmax=800" style="border-width: 0px; display: inline;" title="Template do Luan" width="502" /></a> Trata-se de um modelo mais jovial – para combinar com a proposta do blog/vlog do Luan felipe - com plano de fundo estilizado, ícones para as redes sociais ao estilo teen e uma imagem do nosso jovem galã mostrando três de suas mil caretas. Utilizei fontes mais claras para contrastar com o fundo escuro. O layout tem o CSS otimizado, é leve, abre rapidamente e tem vários hacks instalados. <a href="http://cademeudorflex.blogspot.com/" target="_blank">Template Cadê meu Dorflex?</a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdypuGdkzvrhRcxycj9H6aRxOAOvmJaD22WemHLebRFYha-PXl1LtsiLWNumdM47bnFue2Czc_57zXxIhjJYxWNxSxA1or-GMC4iuTYaM3sG0pcYC4cIZKS8cnGNW_mmONOpG3sJTMy-Ky/s1600-h/image%5B16%5D.png"><img alt="Template do Marcel" border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7l1yf_Yov3ggZ9MggXenfbywas2S4mIjIMG-IxmMsIIuMBAq4rXRDJmpKsd4YnZ6Wmi_ZoTEv43FjlsMa5gYLioonnzmbV4CI2u2DpXnk91C7pNswSu6G9n3WXmNWOdRKc5rXf_Y9yahi/?imgmax=800" style="border-width: 0px; display: inline;" title="Template do Marcel" width="502" /></a> Já este template, tem um estilo mais alegre. No cabeçalho, utilizei a imagem do Sheldon – personagem do seriado <a href="http://pt.wikipedia.org/wiki/The_Big_Bang_Theory" target="_blank">The Big Bang Theory</a> e o ídolo nerd do nosso amigo Marcel – bem como um comprimido e uma cápsula, que representam o Dorflex. Coloquei dois tipos de backgrounds – um mais escuro, no fundo do blog e outro mais clarinho, no plano fundo dos posts e da sidebar. Na caixa de comentários vemos um ícone dourado, para combinar com as cores do blog e os ícones do gadget de estatísticas também foram modificados. Ao final da sidebar, inseri uma borda para dar um charme extra e mostrar que é ali que ela termina. Como o blog está começando agora, não deu para usar muitos gadgets, mas eu sei que o futuro dele é promissor. Marcel, welcome to Blogger ;) Tenho também uma parceria com o <a href="http://design.icebreaker.com.br/" target="_blank">Icebreaker Design</a>, onde uma equipe - formada por feras de verdade ( o que não é o meu caso) - trabalha criando, modificando e instalando templates para o Blogger/Blogspot, entre outras coisas. Confiram.

Templates exclusivos para Blogger

Desde que eu comecei com este blog, perdi a conta das vezes que recebi pedidos de encomenda de templates. Eu sempre resisti bravamente, pois...

Continue Lendo >>

16:29

Google incentiva o uso do Blogger

Hoje eu fui fazer uma busca no Google e me deparei com o seguinte convite na página principal do buscador: “Novo! Expresse as suas ideias com estilo usando o criador de modelos do Blogger” Curiosa com tal novidade, cliquei para verificar do que se tratava e e fui direcionada para um vídeo do designer do modelo. 
Vejam, a seguir, a sequência de imagens que salvei (clique sobre elas para ampliar) 
 
<table border="0" cellpadding="2" cellspacing="0" style="width: 550px;"><tbody>
<tr> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrmN54kU77jvIY76IyoyNgT2VxNzA5Q0NyMGKtu1Xavp_YOofZoKfcV0q6iqY75wLFTTdcH6Cnv90eIKXr5CROMgqQWirLcu6JkQ7_VwqJqswx9VuhkB31FJOpT7ocj0AnEPHF_x6YeoaS/s1600-h/google_blogger%5B5%5D.jpg"><img alt="" border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhigZkClhwLDDVYkRybZA2pEUJhK930z1aZTVn6ViZ9KUNMCRhE8C3RhyphenhyphenE6vUSIJWUr3QxABUOeO-xM6kWFH8Vwh8r0rz6CgjAuspflRXzPKde90zoHE2aQFTIEDP-Ne29lBrvbnDpqEw4a/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="" width="252" /></a> </td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8nkNvbqMABqsTS5BAd3Y4dPyxcUs34dTFiA5EKFClNgRDGmzlOrxYL-qfJZdlvVXAA7v26IgLgPpPuMC3mvmX_dAwXxC6Tx1iJV6PKl2_aeXiM3YQ3qzeJywhoz4iQkG1e0pjixyCoUyr/s1600-h/designer%5B5%5D.jpg"><img alt="" border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVtn3x6audaoa2cLBvo3mks32iOAIX0ksGXtaEeLfWFGJgupYu_cfthh2FUBz95S03eR2az7eXGKpCuMT_-HSgNR2O73pdB5fedQIJ4JhspFGvdpYfWuLEipEiyDhDE49YL0OSDFK5j8Xb/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="" width="252" /></a> </td> </tr>
</tbody></table>
 <table border="0" cellpadding="2" cellspacing="0" style="width: 550px;"><tbody>
<tr> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzrK1Gx2zBbCqj7wmiWLONLSVDiW4l6TQAIK0pfl5-_HJ0tNmsKBOoYR6-YbwntYEcYnHpbiHzsM1ECk5FNRqU7GrjDo4boBl4El52F4O9UQZsWQg-0KCQB7ZEf36p2UGeS_uTN9w9MiuN/s1600-h/modelos%5B5%5D.jpg"><img alt="" border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgASmpf0ML9wDmXIDcByx018pWnjg4MdXnW5UQYSUSnbx1zzVczTCH2XCpG6XRDJv7n48reEnDlkHe3LzHPdrOPLLOp68SfyMEVlgDliikYsF7fO7xnzOIjvjvUAyDETNxWM9f9GZjzk-HQ/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="" width="252" /></a> </td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5QXXtM9NXhFcw-Nz0kyr09-jIzNBwGo7mJZXay0EaFlkkpcVoYRvCY3gnk55Nb10BmJHBOLF6Udz1warLJCmGGgctGSBB-kMj_SoMNihRAIsPTE1kbNkFmRL86XqJ7CHNXez5GX5fXmM0/s1600-h/conta%5B5%5D.jpg"><img alt="" border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzvDanvfI5tTBhekkaa95svxKqv4hOygdmUh1ryohN3EN4EueHzbWv0uSS1YMSMnJ8xA09a0DeFY7QSmdUyjN7oE1B38wFWdL9rZ1qgHFL2YSeD1n3K5OsAYagp8ijY4q_2DejDmmaF8aR/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="" width="252" /></a> </td> </tr>
</tbody></table>
 
Pelo que entendi, o Google está incentivando a criação de blogs pela plataforma Blogger/Blogspot. Isso significa, entre outras coisas, que eles estão investindo no serviço, o que, por consequência, deve nos trazer ainda mais melhorias. 
 Só neste ano, tivemos diversas novidades na plataforma, entre elas: 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2010/07/nova-pagina-de-erro-404-do-blogger.html">Nova página de erro 404 do Blogger</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/07/servico-de-estatisticas-integrado-ao.html">Serviço de estatísticas integrado ao Blogger</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/05/novo-recurso-pre-visualizacao-dos-posts.html">Novo recurso: pré-visualização dos posts</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/03/novos-recursos-de-imagens-no-blogger-in.html">Novos recursos de imagens no Blogger In Draft</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/03/novas-funcionalidades-de-layout-no.html">Novas funcionalidades de layout no Blogger</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/02/auto-paginacao-no-blogger.html">Auto paginação no Blogger</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/02/blogger-in-draft-legendas-nas-imagens.html">Blogger in Draft – legendas nas imagens</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/01/como-salvar-widgets-no-blogger.html">Como salvar widgets automaticamente no Blogger</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/01/paginas-estaticas-no-bloggerblogspot.html">Páginas estáticas no Blogger/Blogspot</a> </li>
</ul>
E no ano passado, as melhorias mais significativas foram: 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2009/09/avatar-nos-comentarios-do-blogger.html">Avatar nos comentários do Blogger</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/09/jump-break-o-leia-mais-do-blogger.html">Jump Break – o hack “Leia mais” do Blogger</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/08/blogger-10-anos-nuvem-de-tags.html">Blogger 10 anos – nuvem de tags direto dos gadgets</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/03/excluiu-seu-blog-recupere-o-facilmente.html">Excluiu seu blog? Recupere-o facilmente!</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/02/blogger-otimiza-as-urls-dos-posts.html">Blogger otimiza as urls dos posts</a> </li>
<li><a href="http://www.dicasblogger.com.br/2008/07/todas-as-novidades-do-blogger-in-draft_02.html">Todas as novidades do Blogger in Draft</a> </li>
</ul>
Me lembro quando criei o Dicas Blogger, em agosto de 2007. Era quase impossível fazer um blog bonito e funcional, sem conhecimentos avançados em HTML e CSS. Hoje, qualquer usuário novato é capaz de criar um blog bacana, usando o designer do modelo, pois além da estética, esses templates já vêm com a grande maioria das funcionalidades instaladas, não sendo necessário o uso de hacks. 
 <blockquote>
<div align="center">
Designer do modelo - <a href="http://www.dicasblogger.com.br/2010/03/como-criar-um-template-para-blogger.html">Como criar um template para Blogger / Blogspot</a></div>
</blockquote>
Eu fiquei contente com o apoio do Google e desejo longa vida ao Blogger o/

Google incentiva o uso do Blogger

Hoje eu fui fazer uma busca no Google e me deparei com o seguinte convite na página principal do buscador: “Novo! Expresse as suas ideias co...

Continue Lendo >>

07:53

Como hospedar imagens no Picasa

Eu sempre falo do <a href="http://picasaweb.google.com/home" target="_blank">Picasa Web</a> – o serviço de armazenamento de imagens do Google – em meus posts, mas só recentemente é que me dei conta de que não existe um tutorial em nossos arquivos ensinando, passo-a-passo, como utilizá-lo. #fail Temos à nossa disposição, diversos sites que aceitam hospedar imagens, tais como Flickr, ImageShack e Photbucket - <a href="http://www.dicasblogger.com.br/2008/09/hospedagem-gratuita-de-arquivos.html">Hospedagem gratuita de arquivos para download</a>. O diferencial, para nós blogueiros, do Picasa Web em relação aos demais, é que o serviço já está integrado com a nossa conta do Google e do Blogger. Todas as imagens que usamos em nossos templates, ficam armazenadas lá. A principal função do Picasa, para blogs do Blogger, é hospedar a imagem e fornecer a url (ou link) que utilizaremos em banners, backgrounds, ícones, gadgets e etc. Como usar o Picasa Web Faça o login com sua conta do Google. Lá você já vai encontrar alguns álbuns que foram criados, automaticamente, pelo Blogger. Clique no botão fazer upload. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW9liZKtjYLm2_ubljK9wGKAIq9mkEnR0UxAteFUhnZpPN7qb4LUZC-QOZa0zVSAmvUDcUfuxdXxkYDdv1g_y3vlrupqVy2NAZer-_HyDLmQbzc7gzxLY6h69U4bH9o2vjBYYdOFwxXovO/s1600-h/upload%5B6%5D.jpg"><img alt="upload" border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEK7a1c1RnOngIvhCLLW5N-qtn6WwYYyc0b-cFa8sd5tJQlz7N0soTl3LDS8HAA_s_Dsh9ffpByIKZWnyhundA86E3VmlP5NmMQNutPYGtLonbiaSwwL9pq7umcK_cP_FBSvaGWQfTteSE/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="upload" width="452" /></a> A seguir, selecione um dos álbuns disponíveis (1) ou crie um novo álbum (2) <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9x9TaGb0TQOzznLui3xf4s8epKcy7XIv4OR1cSrWPo5NJFSwzmC3mBth6l3EDKdkDOLDnQe7O7KDrHJu4rvSkRwqM6cS5V8QAANpNJFwQ4RsVnv7Em-JXT-3HDDZjOPciItB46kYZ5eEd/s1600-h/picasa_web%5B5%5D.jpg"><img alt="álbuns" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6iGQsdcWdEeLa7-JH0OIuBC5pmax7WPoccKUYbe3HCjiiGdj8-3_CZQnPDiVWVPAuYSG7__Sq0cuxwLUEw5xq4zGL2OXx0OSpNVr43mAWceN8XEPP4o47IzXuYQAUXVh2bcT_eVAg72zL/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="álbuns" width="452" /></a> Na próxima página, clique no botão arquivo (1) e procure pelas imagens em seu computador (2). Após selecionar todas, clique no botão iniciar upload. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnATNLfVGBn6Jl9JXC0jKywA41trNk38MQow1bYrhUZcoI1TDTRq10vWIKnPdxcL9px6uEgmC__2EL4CXaKNs__BdF5inWMZkUN-THdb1JK9oDClORtfEaZkEBAsbwzNdVGFlwnDgZxUpg/s1600-h/select%5B6%5D.jpg"><img alt="selecionar" border="0" height="203" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmy6ylvEO0ekjDxLeRFJBMUx6OhsPvYIlQn63oxp8H0bPNzxQ4fUTFSAYo_D1GWuGv7ZaJloFULqOrFKs60rShRFIHegDGmr8fykmbRtaA_tjq1CBdmiZOGm3ajQLG1UUmLOqV9d6urk8-/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="selecionar" width="452" /></a> Você vai ser direcionado para o ábum onde a imagem foi armazenada. Escolha uma das imagens, clique sobre ela e, com o botão direito do mouse, copie o endereço. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTgh_jA6NStJzJpwW17urGQBdiodLzfkHqAbauHBZKGq7P9Ab1A94nGQhNwsoKJHr_mjHBGaZi2FT0Ti7T_ZVmIRblwOloEr8u4Q1DUysSgRnX9V-kr5afqQsKCqraLmmjDlWvRdwA2lWY/s1600-h/picasa_web2%5B6%5D.png"><img alt="copiar link" border="0" height="174" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqqYW_yYN3LUs7xP01S276XRyYwe5dKqTYsdxEVABMXuDaMytL99sCNBwAHDry05AV9dOvkgDYkGNMBvkSti0X_4rbFfGwfftoem72hQMF98JdDSTfLGWUQ1b9l-vaVohZDkpW9ij7ancC/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="copiar link" width="452" /></a> Acesse os posts abaixo para aprender um pouco mais sobre imagens em blogs: <ul> <li><a href="http://www.dicasblogger.com.br/2009/01/como-colocar-um-link-em-uma-imagem.html">Como colocar um link em uma imagem</a> </li> <li><a href="http://www.dicasblogger.com.br/2010/07/como-criar-banner-para-blog.html">Como criar banner simples com o Photoshop</a> </li> <li><a href="http://www.dicasblogger.com.br/2010/07/banner-animado-photoshop-cs4.html">Como criar banner animado com o Photoshop CS4</a> </li> </ul> Atualizações (14/07/2010) O leitor Igor Souza <a href="http://www.dicasblogger.com.br/2010/07/como-hospedar-imagens-no-picasa.html?showComment=1279115079822#c567796478396255384">lembrou</a> de algo muito importante: as imagens hospedadas no Picasa não desaparecem, ao contrário do que acontece em outros serviços. O nosso amigo <a href="http://twitter.com/ricardofraga" target="_blank">@RicardoFraga</a>, informou ontem no Google Discovery que agora o Picasa Web está integrado ao Picnik, um serviço de edição de imagens, muito eficiente por sinal - <a href="http://googlediscovery.com/2010/07/13/recurso-de-edicao-de-imagens-do-picnik-chega-ao-picasa-web/">Recurso de edição de imagens do Picnik chega ao Picasa Web</a>

Como hospedar imagens no Picasa

Eu sempre falo do Picasa Web – o serviço de armazenamento de imagens do Google – em meus posts, mas só recentemente é que me dei conta de q...

Continue Lendo >>

20:57

Modelos de Blockquotes (citação em bloco)

Em linguagem web, blockquote ( ou simplesmente quote) é um recurso em HTML, utilizado para destacar parte de um texto ou para citar, dar referência a algo ou alguém. Em português, usa-se a denominação citação ou bloco de texto. O blockquote não é usado somente em páginas da internet, sendo muito comum em livros, revistas, jornais e em toda forma de <a href="http://pt.wikipedia.org/wiki/Tipografia" target="_blank">tipografia</a>. Segundo definição da <a href="http://en.wikipedia.org/wiki/Block-quote" target="_blank">Wikipedia</a>: <blockquote> Um bloco de citação (também conhecido como uma citação longa ou extrato) é uma citação de um documento escrito, que é definido fora do texto principal como um ponto distinto (ou bloco) (…) Bloco de citações são geralmente distinguidos visualmente utilizando o recuo , um diferente tipo de letra ou tamanho menor. </blockquote> Como vocês podem notar, eu acabei de usar o blockquote para citar o texto acima. Para usar blockquote no editor de textos do Blogger, passe o mouse sobre a área que será destacada e clique no ícone Citação (figura 1). Para usar no Windows Live Writer, procure por citação em bloco (figura 2) <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZmn_kN_supcNlV5Fq_UDU_NZqUXPFjZ8zvwf8UgJZrC-hO14ar2CfD2x2dajNienzDOqElTy9srwhx-eeQi9wfWCsb8ZXjz-giy6J31jY-T_61Mj-rq3yBMuqIwtjBaj14jIDvN0XOpC/s1600-h/image%5B12%5D.png"><img alt="" border="0" height="123" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRHRKYy1do3qvil0xx42NAX8o4ks6NMu8eR1-mh-YwC3R5AUmZEFiyq7uIhDkLF-eofk2wCWy2brYqle4C9PCfr67MumvGXPZR2GrARYpx8rkzTjdcSoIXyoWlv5e5L3deRbEb0wChv3gN/?imgmax=800" style="border-width: 0px; display: inline;" title="" width="242" /></a> </td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVq9JHJqUdaSMDj5QYN7wimgwsrQNGOWm7aa1PGNoFCRtS-IhfYFjktFdjd5iQsBkvMeTK5m51xhH10NJYASqVbd5V5kyJK3StWf3BH4VfiTUxjKt8OhSnvkVxkKGZJMbjuYsdJZNHpT_T/s1600-h/image%5B17%5D.png"><img alt="" border="0" height="121" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWjyfO40Qf73tfh0S5UdRc71RRj0J0wSULPSZYP8m4-723PB1laxfe3yPEy9Lr89irzUJ7ODdy4VeQNM3ijrNMOzLyKYkQb-ym-sZZ5eYsJsYDp_ti1hr-_dg69yZx0ZG8hsmp37tnVdw7/?imgmax=800" style="border-width: 0px; display: inline;" title="" width="242" /></a> </td> </tr> </tbody></table> Para mudar o modelo de blockquote dos templates do Blogger ( e eu acho que isso serve também para Wordpress), precisamos usar alguns códigos em CSS. Antes de mais nada, entre no editar HTML do Blogger e procure por algo assim: <blockquote> blockquote { width:90%; font:$quoteFont; line-height:1.6em; color:#333; } </blockquote> Todo o trecho deverá ser substituído por outro modelo de sua preferência. Modelos de blockquote Fonte: <a title="http://css-tricks.com/examples/Blockquotes/" href="http://css-tricks.com/examples/Blockquotes/" target="_blank">Css Tricks - Better Blockquotes</a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgjQrJeBBPNyRlhyphenhyphen8DJFm8obwyxnSbelJ2skeJsNNctfk99hWbZFf4QRjUaa2y7yLWsNvVK8HDzRVKgP6DSA5DPvGo_stWM1ksgaWUCQcTY4JFDxr3k526HI2RurqqibSuUPESwKo_Tg1v/s1600-h/image%5B8%5D.png"><img alt="blockquote" border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz9TpFUdszJi1S-Owjvl6mT7APaS_t7tQAFoi2Vik6cGLUigTIRCJQjXnGme1QpNYxkO7FYoam4OVODO-SZMN4aJ8hn69BTPdUFm6wB58Muk-bhhfD8ud74dlSHmBgm_borN4zGbcevrDZ/?imgmax=800" style="border-width: 0px; display: inline;" title="blockquote" width="500" /></a> <blockquote> blockquote { font: 14px/22px normal helvetica, sans-serif; margin-top: 10px; margin-bottom: 10px; margin-left: 50px; padding-left: 15px; border-left: 3px solid #ccc; } </blockquote> <img alt="blockquote" border="0" height="154" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqpePw_GQhmRDf1tjbUmOjoWyjM2U_sGHeUf3ihWhy-WnxWHndvDywJfHuo0a0MT6Rqugryv17Sbi9f8ssJHgq0FxBqs6H1aV_XIGyrygO1mokjL3xjYye4_06RoiyFzIVt-813q-_zCp3/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="blockquote" width="520" /> <blockquote> blockquote { font: 14px/20px italic Times, serif; padding: 8px; background-color: #faebbc; border-top: 1px solid #e1cc89; border-bottom: 1px solid #e1cc89; margin: 5px; background-image: url(URL DA IMAGEM); background-position: top left; background-repeat: no-repeat; text-indent: 23px; } blockquote { display: block; background-image: url(URL DA IMAGEM); background-repeat: no-repeat; background-position: bottom right; } </blockquote> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDALCD-Ebi1n2VprsIkvizTxVa-PNcq8PanwPb8uuQ-gxVipdYpy0OSk-xPOo7JV44ayjivsXG3seiFm8G93hiwmOVdIsZuVEg9Zj6nJ_C5FhpyBMS9ncH4JdIX24iGUrgIM9BI-CaWneN/s1600-h/image%5B24%5D.png"><img alt="blockquote" border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7yUCml6CUyagaPC2ZwAVlXxadCzMWr9rVl3Zs8hvT3x2p9CbYuVMTUjzL0cCN7jwV0H5mtveH-vZab8vZVcIHXYSR2z-9Sdh8eTvRAOK4fdIt3IBF1t4DOp5EQ9jPnHTeR5HBCwtRMI5_/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="blockquote" width="520" /></a> <blockquote> blockquote { font: 14px/20px italic Times, serif; padding-left: 70px; padding-top: 18px; padding-bottom: 18px; padding-right: 10px; background-color: #dadada; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 5px; background-image: url(URL DA IMAGEM); background-position: middle left; background-repeat: no-repeat; text-indent: 23px; } </blockquote> Aqui estão as duas imagens utilizadas nos modelos acima. Salve-as em seu computador e faça o upload no <a href="http://picasaweb.google.com/" target="_blank">Picasa Web</a> ou no serviço de hospedagem que preferir. Depois é só copiar a url e colocar nos locais indicados (em vermelho) <table border="1" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><img alt="openquote4" border="0" height="96" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf0g1HUs7m5YVUEhafijomK7JUELGn1AgSK_tV0N1shGoLJjsOFsZI_dBBIFj1hIEvdi1C-AtL66shsmlWnDhrQGybZYxdW4s30JskcEym7fvQ3HRU53L-Nz4MRYq4EiQpHjJ1H7nqg1_Y/?imgmax=800" style="border-width: 0px; display: inline;" title="openquote4" width="65" /></td> <td valign="top" width="273"><img alt="closequote1" border="0" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYjgF-gR9YH5J11w1Z7BN1-eweNXVyfmSJSPVAVQEKhf_QM_iBjuXGy67tTZLaixd2aY_HQqPfNAaVBfMP96TuTtMc19iTLswM8grfhl99sCyF1NROSaZzQAoNoT0GYK0KigrKW2ErTCIj/?imgmax=800" style="border-width: 0px; display: inline;" title="closequote1" width="25" /></td> </tr> </tbody></table> Fonte: <a title="http://css-tricks.com/examples/Blockquotes/" href="http://www.cssnewbie.com/six-ways-style-blockquotes/" target="_blank">Css NewBie- Six Ways to Style Blockquotes</a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK1aW_nK4OSdvYGPF-WZGYMAuyCp5OlpKMRAGL4-Xodov6xDqiU4cDXwlGKQFo9PCL4f3mXT1tHZsxi_wlXmfv8iRcysMruV5CUAa5B_JJo_J-OGOD86QSHf4-uddpuqrPvCURCIxGnwrv/s1600-h/image%5B31%5D.png"><img alt="blockquote" border="0" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL73fowVAMzrn6O8qofnX5tGy1XTuAdCyL_27JY4t4eNvTzM-JaUDJGXIB_qBBM4bpwCL6M9_hHaCtDOLZZoEsEL-Gazo6QDXJKn91zBN8Hj-DY7c5hOnvcdTPitdZfMGGA5uAYK1jb4q9/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="blockquote" width="520" /></a> <blockquote> blockquote { background: #f5f5f5; border-left: 0.8em solid #ccc; border-right: 0.8em solid #ccc; font: italic 120% Georgia, "Times New Roman", Times, serif; padding: 0.75em; } </blockquote> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3I0Dy-0n70ZoEq1uecCBiChv-6cCUOVQw0OuczUTeKvIW4qNE245zmSuUYvUQmADvunRnyHpWWWCQQsv2VbB5sutjK6PzA_dTCerFaCfj_Ot3oswXYYETezfmfERLiHEwqkWzRqd2rko2/s1600-h/image%5B38%5D.png"><img alt="blockquote" border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjteBw1oehspge04Lrjf5jQAOJmAqxP4etgFSJiSWMPZpw2Y8j2qIq1e7IYSJ8Bdoahhsj0QnwU2SqgHm3NtxvXEGXIUPJzOYRrbN60CVM808G24Ex0dhcGoPALZyhUrAsCwfYTNKDXYF1N/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="blockquote" width="520" /></a> <blockquote> blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; } </blockquote> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8FYyRQ53aoB_acU5dtoZO2_0vN2BASYRhIni1NxK6t_qr7rYSnEzGdgRU-EJu7-FaZIcmqug6q2JNAsrxuleRvudc9l5vwt3IRtNJZ_yQjRztfXA3HCiqCtjg0OI-Fet6SAfLXzdK1WBf/s1600-h/image%5B45%5D.png"><img alt="blockquote" border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuFXlzAb2lTKLhOGwRXXkGdoIIl66mCee__EMRtgR66OObb26COR84z_zfPt9_gb_4fCgOU5ziBB8F9JqTAHivxd36Te97LTdfJkORIcQiXKoYYM4K_p5NtQL9yNjC4IPH8u-0GpCzzf6B/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="blockquote" width="520" /></a> <blockquote> blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; } </blockquote> Fonte: <a href="http://usuariocompulsivo.blogspot.com/2008/03/citaes-com-destaque-no-blogger.html" target="_blank">Usuário Compulsivo</a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid1DVO3XLtwsqnTkeS-mFe6s-bznmVsl3NYDNnJwZXu7aJmSPkd8MGhY0ZGdjj71Gn4kIa_n-lxTIytmF6MsAG8D1ELaV99mK5OtRaCQfTzryYHAClzND-pc50lZDNYZcWAffjqrQriiLM/s1600-h/image%5B24%5D.png"><img alt="" border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pEwfRXX02aS_GEOuznwNILQo_t6hylZlMH57ECkhR8p2p5R4xMY4OUD1lbMo3e5k3J_SwVPSypWp9dY0jXM5hluZcbdCvYOTM_GdLI4AlDIiBLrdoUdVDl7SRMsBiNlpJJKRcftWcqIB/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="" width="520" /></a> <blockquote> .post blockquote { margin: 1em 20px; border: 1px solid #c0c0c0; background: #f5f5f5; padding: 7px; } </blockquote> E este é o atual modelo usado aqui no Dicas Blogger: <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf49KFaavO9Hc9yMnqzqLGLGf9tHsyByJg8HDZIFmTaIbEiDRjsurlmR0E_Hw2PE1g-zE1oHEqgcB6FL1F0tSvruQnPneoXn8eMMFza54WJn7URKc9490OHMTsvS1MUYHjaKmEffK5ks8B/s1600-h/image%5B23%5D.png"><img alt="" border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFIB5XNYB3LYLnYCT4p3hyphenhyphen1BbRc4WZrgdZ9_xcyVXOrP_tkMnk56A2E_1BRwJXI2vPmAp_p9cYPcr1IqTzf-vUxkQBG5wnZbg4SbFiDzKHNsepNHLTz2QmO-uXxzSTIJxYGFHC1-Ni-03a/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="" width="520" /></a> <blockquote> blockquote { width:90%; font:arial; line-height:1.4em; color:#333; border-left:2px solid silver; border-right:2px solid silver; background:#EEE; margin:10px; padding:0 10px; } </blockquote> Fazendo uma busca no Google, vocês vão encontrar ainda mais modelos.

Modelos de Blockquotes (citação em bloco)

Em linguagem web, blockquote ( ou simplesmente quote) é um recurso em HTML, utilizado para destacar parte de um texto ou para citar, dar r...

Continue Lendo >>

19:01