Como criar uma página de fãs no Facebook

No post anterior ensinamos <a href="http://www.dicasblogger.com.br/2010/09/como-colocar-o-botao-do-facebook-no.html" target="_blank">como colocar o botão do Facebook no Blogger</a> e a importância de divulgar posts na rede social que mais cresce atualmente. Dentro de poucos meses o tráfego do Facebook irá superar o do Google, é vital para qualquer blog ter uma presença nesta rede, por isto vamos mostrar <strong>como criar uma página de fãs no Facebook</strong>. Centenas de outros blogs já abordaram este assunto, mas com algumas pequenas alterações em pormenores que poucos conhecem, é possível gerar um tráfego muito maior de visitas para o blog do que somente com a simples criação da página. <br /> <br /> Uma dúvida muito frequente é o porque da utilização de uma página de fãs para integrar o blog e não o perfil no Facebook, e a resposta é bastante simples: o perfil é limitado à 5000 amigos, a página de fãs não tem limites. Além disto, é possível utilizar aplicativos que vão potencializar ainda mais a página, como vamos demonstrar à seguir.<br /> <br /> <strong>Como criar a página de fãs</strong> <br /> O processo de criação da página é bastante simples e intuitivo, basta ir à <a href="http://www.facebook.com/pages/create.php" target="_blank">http://www.facebook.com/pages/create.php</a> e preencher os dados necessários:<br /> <br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDSwrnm-79rFoFtLsxjp4AuzCmLU1j4GFddkbFyN7L0nUDK9nFpUOi6htQladGDCuNsrTM2st9iwoFwrdHBSki1jn4WkDv1hTPwvWnaFfM5XnBdk-mZdjJIuuvCm9jpP0rV6xJdFBQN0c/s1600-h/pagina%20fas%20facebook%5B5%5D.png"><img alt="pagina fas facebook" border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7RlZvNH7J8vFaU089EURMx5a545hplXPsLIDroKSyw40YqwN8QrfiK-QUN7gH1np5jjkzs8kJTgPi33bWf1B3tyyq001DQNevyvlkQbDWa3xOoYlKKoW8VqpAX7eZnV8WH40-lN7ORBA/?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="pagina fas facebook" width="350" /></a><br /> Como a página no exemplo é relacionada com um blog, optamos por escolher <em>Marca</em> e <em>Site</em>. <br /> O passo seguinte é preencher as informações sobre o blog e colocar uma imagem:<br /> <br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWDlFSauyEmhsrrP50W54v7VRJ3OR5cKjoikJX3b6QDqoN29ifOw6LUhDdw5Juoebba871PzYPx25bLz-y2h6Cn9WsWeha013HBgzABW9gxqG238-rRlw4Zg9TaSHYbkf7zlWZiMMPCQI/s1600-h/facebook%20blogger%5B4%5D.png"><img alt="facebook blogger" border="0" height="472" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGmg9jYvCji8nHyPANfD345a3b_3_M0sIXqKifsLrSdMRWaHSXpO4xw5TWrHqqXPrfJRDg28KBqTUu9JTuNktxxgkNp0c5EvIlL3hZSYmXHV_xf4dOubUcN38FfnYFxtHfy7tWV_mJgeU/?imgmax=800" style="border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="facebook blogger" width="350" /></a> <br /> A imagem utilizada não deve ser superior à 150px de altura e 150px de largura, para não ficar desajustada no widget do Facebook para blogs.<br /> Após preencher alguns dados, estas sugestões na página inicial desaparecem.<br /> <br /> <strong>Personalizar a URL</strong><br /> Após 25 usuários do Facebook tornarem-se fãs da página, o Facebook disponibiliza a opção de personalizar a URL: <a href="http://www.facebook.com/username">http://www.facebook.com/username</a>. Este ponto é talvez o mais importante, os motores de busca atribuem um peso muito grande à URL, é comum ver páginas de fãs no Facebook nos primeiros resultados de buscas do Google. Tenha atenção que, uma vez escolhido o username, o Facebook não permite que seja alterado. Se a página for apagada o username fica indisponível para sempre (a não ser em caso de marcas registradas, que podem solicitar a utilização na central de apoio do Facebook).<br /> <br /> <strong>Página de aterragem no Facebook</strong><br /> Página de aterragem é a página que os visitantes serão direcionados ao entrar pela primeira vez na página de fãs do blog no Facebook. Por norma, se não for feita nenhuma alteração, o visitante ao clicar no link que leva à página (vindos dos motores de busca, de widgets no blog ou de outro link qualquer) serão direcionados para o Mural, onde a probabilidade de clicar no botão gostar é MUITO menor do que se for direcionado para uma página convidando à tornar-se fã.<br /> <br /> Veja como exemplo a página de boas vindas do <a href="http://www.facebook.com/blogdicasblogger" target="_blank">Dicas Blogger no Facebook</a>:<br /> <br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFNY_rgbjx4bCD45OGj9awFWXpHQqw6KQNB-EgeyhqF2oQewvaVGorqLpTi9QUTxTsANfVpYFcTvK8Cdxq5e7AxwXhXsBuLVlh70oinr3lqD6KtZ7dxEQsgboECUN8JPfP9cQLAzlJnK4/s1600-h/pagina%20blog%20Facebook%5B4%5D.png"><img alt="pagina blog Facebook" border="0" height="247" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJrITi3wAah7FeQox0iffHKuMwg6K6zdbr5JRlZp_iMXWQl387jS-NUHiGhhsWu3yrRQXAGNpsaeG1zomjpimsTwtxV9NlzV08k702zRfjpWf9g3jJl2EqmdR_tGUlo-3ACcmcVtoa3H8/?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="pagina blog Facebook" width="400" /></a> <br /> <br /> A tendência do visitante em clicar em "gosto" e tornar-se fã é muito superior à se fosse direcionado para o mural, onde o excesso de informações contido nesta parte da página pode acabar distraindo a atenção (como o feed do blog, comentários de outros visitantes, banners e imagens).<br /> <br /> <strong>Como criar uma página de aterragem no Facebook</strong><br /> O processo de criação de uma página de boas vindas é bastante simples, para isto é necessário utilizar o<strong> aplicativo FBML</strong>. Esta aplicação abre uma (ou várias) guias onde podemos inserir qualquer código HTML. Para instalar o FBML basta ir em <strong>Editar página </strong>e, no final da página, clicar em FBML (ou em Mais aplicativos, caso não apareça o FBML):<br /> <br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL-hgvw2AGzxVRm3mkNmCVcVoomuGXvrnL8nws78vyrFbLngWtMqGiUjJs4BwG1rOcx36ezhi_QkvNqFZzSX4WC26OCiGRn0bh2ta8t7jhEBFKM-FLimGOztQ6PrMcNQZV-pjRGMc4zJ0/s1600-h/facebook%20blogger%5B4%5D.png"><img alt="facebook blogger" border="0" height="351" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP1KNvFNz-_-XgfPMitRKbPcu4n_2d7ZbaUPFn711n-wvzsqGpxpbU57J05dwGdiLDUZZkqquCMvO7iQwTg_qfwJzVPYpXHfRRs8kx22aXg5-sPqQ41sS2i9wpe8Ta1aKjr4ZpmqR_KvU/?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="facebook blogger" width="300" /></a> <br /> <br /> Automaticamente aparece uma guia com o aplicativo na página de fãs. Para configurar, basta voltar à <strong>Editar página</strong> e clicar em Editar no FBML:<br /> <br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhedJJkBlXqRxoXJxaoJ7CxlfM-VdAT3pUR2AVBDT5puh_ARK-m9a790jzyAFSoGAnoxLHjtP6Htbt8ow-lbPubKh-qh9yfU2Hnk_jJs6TOU2KTVS6-cymsqSbEDPdthEpbcUUnaNEehq8/s1600-h/blogger%20no%20facebook%5B4%5D.png"><img alt="blogger no facebook" border="0" height="377" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYzn2Z5NCTVzjA6sXQ0maVPK0jgDh_8-mMRJTQJTshjaMnsA7TnwR5e0dRmhm0xlOoLEchm5-s8pwhoLPdmIByH0KHvFwWrjDfmD5cAeu82o3HASEnLDUZizoX3srxRs6V40Nr5hZ8NyM/?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="blogger no facebook" width="300" /></a> <br /> <br /> Nesta etapa vamos alterar o nome que vai aparecer na guia (sidebar) da página inicial. No caso do Dicas Blogger utilizamos <em>“Bem Vindo!”.</em> Na caixa embaixo é inserido o código HTML. Neste caso foi utilizado apenas uma imagem previamente salva no próprio Blogger:<br /> <br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYRmboYvccY_UeTxZMSFBSTNtQY5fDdhjCzDcVRXX5ApDavopfSJ8ltEFRlybl2ct_7FYX2TuOh6QqS5_QUVAfDmEFtSFijvKk6YUDcRORwd38EvFrIbmkyOky5Qa8_UOMynvZRFh6Qas/s1600-h/blogger%20e%20facebook%5B4%5D.png"><img alt="blogger e facebook" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAJfhtgARUt_BNAnLRdOHG0u-vb5n8Uj9YxM1N5Ia49JjVA3zQ9KqX-jIZ0b-t_kpFzCfqK5JktyuBwV0MXC-YqIfeFMteHiBUKivP_rQOI227TpsOnXwte1ycVmvRPgw1oeQb4-JXlEc/?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="blogger e facebook" width="400" /></a><br /> <br /> Após salvar, é necessário um último passo para que o visitante que ainda não tornou-se fã da página (ou que não esteja <em>logado</em> no Facebook) seja direcionado para a página de aterragem. Para isto, voltamos à <strong>Editar página</strong> – <strong>Configuração do Mural</strong> e escolhemos a página que configuramos previamente (<em>Bem Vindo!</em>):<br /> <br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtgavNKcbZlfjQTR83Bf25pfXsRjljlAeew-UIrRUWPXiEoiUZnNBJs2YF5L6uaRKGrk3EcJj0DXkDpShE_Zh9cEmzwVudM_Ie7_Z0WqrU9ajsolKbB-9ay4brcyLShIVu33FD2N6FjhA/s1600-h/facebook%5B5%5D.png"><img alt="facebook" border="0" height="344" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgCD6xqkdrwQxMbBzbN-0fZ12PfBzBpkxXc6qdkpQB5RLFGhfsDxBUN1eJPNBNcFlDL95mperUM_lPBKMuK3knyJYBxkcT9_x5N45M9FXu_u6MbVAq3mbO9dKAu9fDt8NjklLL7UsaEE0/?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="facebook" width="350" /></a> <br /> <br /> Como disse no início do post, é bastante fácil criar uma página de fãs no Facebook, mas estes detalhes de otimização vão fazer uma diferença muito grande no número de pessoas que vão tornar-se fã e, consequentemente, no número de visitas para o blog que isto irá gerar.<br /> <br /> E você, já é fã do <a href="http://www.facebook.com/blogdicasblogger" target="_blank">Dicas Blogger no Facebook</a>? <br /> <br /> (Post baseado na página de fãs do <a href="http://www.problogger.net/" target="_blank">problogger.net</a>)

Como criar uma página de fãs no Facebook

No post anterior ensinamos como colocar o botão do Facebook no Blogger e a importância de divulgar posts na rede social que mais cresce atu...

Continue Lendo >>

Entendendo os códigos do Blogger

Agora que vocês já sabem a diferença entre layout e template e que é preciso entender HTML e CSS para modificar templates, vamos então começar a estudar os códigos usados nos templates criados para o Blogger/Blogspot.<br /> Antes de mais nada, recomendo que vocês instalem o Template Mínima em um blog de testes. Não sabe como instalar o Mínima? Então acesse: <br /> <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> Bom, os templates que funcionam no Blogger possuem a extensão .XML<br /> <blockquote> <em>O XML é um formato para a criação de documentos com dados organizados de forma hierárquica, como se vê, frequentemente, em documentos de texto formatados, <a href="http://pt.wikipedia.org/wiki/Imagens_Vetoriais">imagens vetoriais</a> ou <a href="http://pt.wikipedia.org/wiki/Bancos_de_Dados">bancos de dados</a>. Entre linguagens baseadas em XML incluem-se <a href="http://pt.wikipedia.org/wiki/XHTML">XHTML</a> (formato para páginas <a href="http://pt.wikipedia.org/wiki/Web">Web</a>) </em><em><strong>Fonte:</strong> <a href="http://pt.wikipedia.org/wiki/Xml" target="_blank">Wikipedia</a></em></blockquote> Existem algumas regras para o uso de documentos em XML:<br /> <ul> <li>Todo documento XML, tem que ter uma tag introdutória; </li> <li>XML  difere letras maiúsculas e minúsculas; </li> <li>Todo elemento XML deve ser iniciado e fechado; </li> <li>Comentários em XML são iguais ao HTML (<!--comentário-->) . </li> </ul> A tal tag introdutória pode ser vista no começo do Template Mínima:<br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Qmuvb9WyZVV6rJu9HsnnLI9Bngjm0EZf4qVP9kxsL7lbLs4ZGjeFnyuH93SLHMs9R-7msbvUdQPt4V7LrwEtXQ-ZmqQDj6J10WXLFG54TmeD2dHeYdLHqS0aJetHk0fdtbHf__xBpAcl/s1600-h/image%5B7%5D.png"><img alt="Tag Introdutória" border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVrCO8aLfoSfrgcHbBemjCkZi69iBTrTrNnN4UFCeRKJ1BhgbMaiplxp6qdNg8Ix5d4T-E9BktnEpE8btK08bnbY6kAsv3Tv6WQVW9T-OpkEkRvXaDoMrxjBEk5Rccrw4NkM4WwMh0Jakp/?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="Tag Introdutória" width="502" /></a><br /> O XML ou o seu derivado XHTML, a grosso modo, é um HTML melhorado. Ambos utilizam de comandos simples, chamados de tags, para definir as várias partes de uma página web. Veja, a seguir, alguns exemplos de tags HTML:<br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaAgWFOsX2CsQZurHzVf7KM8N0E21T0vl33_oB__evsnXP7xtkvNJqldveCNTL-GEiNFo23ukspU1XBBJdNAjEVDz-hz-SIKJTfHmO3GiAu1oSRZ7DkeBbzlhFj2L5UCdbj09H3AIJho6b/s1600-h/image%5B12%5D.png"><img alt="tags HTML" border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNGXbXgesgGIzXiRZTo8R1nvQh9XH0-UYbfkP9UwcjK9z9zFrTB-Anpi5LyeOJRVU03kNSCyyHxvNvdg2gkM5L1nnmzWuZ9kLhVhqXoYCetoKLwlCcnrJ3TjhkQFmHTk1azEh77nA193RC/?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="tags HTML" width="502" /></a>No site <strong>Truques e Dicas</strong>, encontrei uma lista com as tags HTML mais utilizadas e suas respectivas funções – <a href="http://www.truquesedicas.com/tutoriais/html/00007a.htm" target="_blank">Listas de tags comuns</a><br /> Os templates do Blogger são feitos com XHTML. Sendo assim, aceitam tags HTML.<br /> Basicamente, um template para Blogger/Blogspot é dividido em;<br /> <ol> <li>tag introdutória </li> <li>variáveis </li> <li>CSS </li> <li>DIVs e Classes </li> </ol> Já expliquei sobre a tag introdutória. Quanto às variáveis,  são a parte que permite a edição das fontes e das cores diretamente pelo painel do Blogger:<br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKtvKyt2NDQJlKRggZEAQ_HCcIDDS5TGoMAHqLCWtlvTFGPwldhXp_lOaaQoGj8x4SjL_40U8SWal2ClyBFyKq2aFmsvoKUWNmcIiHVAeObt4ae_jBLaf-qiazhmbKXIp5sF-pgX83Ob9B/s1600-h/image%5B17%5D.png"><img alt="Variáveis" border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw2EMzoeVBtXMZLPSqVLPmf0tkKcUGCTJ7xarsDqnIFkqwrKnHK6QDDVppE5SM9sM1bR7i4Zf0-7Z25xkWU67bpln3J3zL5D94W3AD5WO37KX09odH9oequRcjsvnzrNfirWS39lVvprGi/?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="Variáveis" width="502" /></a><br /> O CSS é que vai ditar as regras de posicionamento de todos os elementos do layout, juntamente com as DIVs e classes. Detalhes? Somente no próximo post ;)

Entendendo os códigos do Blogger

Agora que vocês já sabem a diferença entre layout e template e que é preciso entender HTML e CSS para modificar templates, vamos então começ...

Continue Lendo >>

Conhecendo o layout do Blogger

Para dar continuidade à série “Como personalizar templates para Blogger/ Blogspot”, agora nós vamos conhecer os layouts utilizados no Blogger.<br /> Antes de mais nada, é importante entender a diferença entre layout e template.<br /> O<strong> layout</strong>, para fins de linguagem do Blogger, é aquela parte onde ficam os gadgets. É a estrutura do template, que compreende a disposição dos elementos de página.<br /> <blockquote> <em><strong>Layout gráfico</strong> (em </em><a href="http://pt.wikipedia.org/wiki/L%C3%ADngua_inglesa"><em>inglês</em></a><em>: Page layout) é um esboço mostrando a distribuição física, tamanhos e pesos de elementos como </em><a href="http://pt.wikipedia.org/wiki/Texto"><em>texto</em></a><em>, </em><a href="http://pt.wikipedia.org/wiki/Gr%C3%A1fico"><em>gráficos</em></a><em> ou figuras num determinado espaço. Pode ser apenas formas rabiscadas numa folha para depois realizar o projeto ou pode ser o projeto em fase de desenvolvimento. <strong>Fonte:</strong> <a href="http://pt.wikipedia.org/wiki/Layout_gr%C3%A1fico" target="_blank">Wikipedia</a></em></blockquote> Vejam como é o layout do famoso Template Mínima, criado por <a href="http://stopdesign.com/about" target="_blank">Douglas Bowman</a>:<br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirdVDj1PzPGGnZae_HRVdDcoG4W_mWJZ5geOImOVTfVnueRtqZ2Hg0mRvEy539GjPZVOLNamqB63xUc6tRCsxhJAhNJ-I7oUjUYeyk-r1X8YzZ1laIyH41abOwPOKXpfNaT1a-3-Ps37Vo/s1600-h/layoutblogger5.jpg"><img alt="layout-blogger" border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMUVypIWOzflJD1uT9D_ka-9bo0Vwg5Aa2aiWwWJO-mW8jyc00v_-rBW0LqGQkhK8hUKr8V-OmQzp4WqINZsb3ISs2ixLGNYiqOYbt6CtXVwwEVrv2YyWcVrDGTsMpYBTS2mmH42N7Xchp/?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="layout-blogger" width="452" /></a><br /> O layout do Blogger é dividido, basicamente, nos seguintes elementos:<br /> <ol> <li>navbar: barra de navegação </li> <li>cabeçalho: é onde fica o título do blog (header, em inglês) </li> <li>área dos posts </li> <li>barra lateral: barra que pode ficar à direita ou à esquerda ( sidebar, em inglês) </li> <li>rodapé: área final (footer, em inglês) </li> </ol> Já o <strong>template</strong> é a parte gráfica, o visual,  também chamado de tema ou modelo.<br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY0JWefgl4nqJcAt1p-Tt9ry4YnrEw7UHks1XG4yb3uaMdvrShCCnWG0ZrYHThM949NoxfFGe6VE9TyDyxBTRYVrjnk9tqVEpNG7k1dIuIDUpsa9kOvNjUhfQJkIrQj_xyp2VW8vW__mIa/s1600-h/minima%5B5%5D.jpg"><img alt="template-minima" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFPhrCGSrLKS8JbEhgymxUgYaia8fM2f4ew5JsJpqhGkebqgPVsVMeZaIQX1T3qHusN926jniCjU8wtcqOsgH09GTVDGJKhTCDIMozgyvO-M-Xk2isI_FmdDGMBhHh8ghFAqcdIN2p5Tid/?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="template-minima" width="452" /></a><br /> Vocês devem estar se perguntando, por que é que eu estou usando o Template Mínima para exemplificar a diferença entre layout e template, correto? Simples. Porque a maioria dos templates criados por usuários nasceram do Mínima. <br /> Os templates do <a href="http://www.dicasblogger.com.br/2010/06/o-designer-de-modelo-agora-e-oficial.html" target="_blank">Designer do Modelo</a> foram lançados há menos de 6 meses. Eles possuem um código diferente, nem todos os recursos (hacks) funcionam neles e a personalização pode ser feita, em partes, pelo próprio painel do Blogger.<br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivaljB9cJZLPMh-6cSb6_C5aS_NGKRjWMmzUvyjsU0h13B4iXf2n8Zj1nwAYzA-7OJupU_AutPWcqySGULNJqTEBJ0HVGo7xWq_ocytZU1NkbDrSHLZZGVmmZhXdQ4aIk8nOqMeHJaTGOY/s1600-h/image%5B6%5D.png"><img alt="blogger-designer-do-modelo" border="0" height="229" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixD3KkfYABuSR6-OIdWVnC5G3bCDLYBtTKtXCuVldKpr0pk2C5uwOQbrIJl3kfQKYbAeEoomdocYQdA6aYdv7Ibt7jpDzsfudFGrKUdPrDGjjn03oTINIAhJkBLJRf48Iw8UgHk6DmuYtW/?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="blogger-designer-do-modelo" width="452" /></a><br /> Sendo assim, quando entrarmos nos posts sobre HTML e CSS, usarei sempre o código do Mínima e/ou dos meus templates para fornecer os exemplos.<br /> Se você ainda não conhece todos os tipos de templates para o Blogger, acesse:<br /> <ul> <li> <a href="http://www.dicasblogger.com.br/2010/09/opcoes-de-templates-para-blogger.html">Opções de templates para Blogger</a> </li> </ul> Além do layout padronizado pelo Mínima, podemos encontrar modelos com sidebar à direita ou dos dois lados, com menu horizontal (chamado também de linkbar), com o rodapé dividido em 2, 3 ou 4 partes e por aí vai. Opções é o que não faltam.<br /> Na figura abaixo, vemos o atual layout do <a href="http://www.templates.dicasblogger.com.br/" target="_blank">DB Templates</a>, com o cabeçalho dividido em dois, a barra lateral dividida em 3 e o rodapé dividido em 4 partes.<br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1F6N-B7yXA-w7QTLXAHf3DtB_MKj6Dn9sMpBXbCPw1Erjlvfb14YN2P6IglX7SZ635eDt9084JY24yDr-o-rRBxaHss63lBGHmAOTWRDA92Dc55yo_1AKjKtqzSrBu-v10oro1GfcrtFX/s1600-h/image%5B13%5D.png"><img alt="dicasblogger-templates" border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFiQgvrlEYAle-va3YsTjIuUpELqiWNT1-IuUZwxbDE0x6ccL45A0B_wM5HRUdnew4nbUb24Jr6WxUlETg1Bz9sM77MF9PtImCQewF5oWAuImmmMXFWqhrtAwnLqwVVKsagsLkNABBEVw3/?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="dicasblogger-templates" width="452" /></a><br /> Tudo isso foi feito única e exclusivamente aplicando técnicas de CSS. Legal, né?

Conhecendo o layout do Blogger

Para dar continuidade à série “Como personalizar templates para Blogger/ Blogspot”, agora nós vamos conhecer os layouts utilizados no Blogge...

Continue Lendo >>

Nova série: como personalizar templates do Blogger

Enquanto o <a href="http://www.blogger.com/profile/06715841108717459300" target="_blank">JV</a> inicia uma série de posts sobre o uso do <a href="http://feedproxy.google.com/~r/dicasblogger/~3/C6cw3Pyw_AI/como-colocar-o-botao-do-facebook-no.html" target="_blank">Facebook para blogueiros</a>, eu vou começar uma outra: “como personalizar templates para Blogger/ Blogspot”.<br /> É muito comum me perguntarem se eu uso algum programa para criar meus templates. A resposta é não. O que eu uso é o próprio editor HTML do Blogger, onde vou personalizando o layout através do uso de HTML e CSS.<br /> Primeiramente eu quero deixar claro que todo blogueiro que deseja personalizar seu próprio template, tem que saber HTML e CSS, que são as linguagens de programação utilizadas na criação e personalização de páginas web.<br /> <blockquote> <em><strong>HTML</strong> (acrônimo para a </em><a href="http://pt.wikipedia.org/wiki/L%C3%ADngua_inglesa"><em>expressão inglesa</em></a><em> HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma </em><a href="http://pt.wikipedia.org/wiki/Linguagem_de_marca%C3%A7%C3%A3o"><em>linguagem de marcação</em></a><em> utilizada para produzir </em><a href="http://pt.wikipedia.org/wiki/P%C3%A1gina_web"><em>páginas na Web</em></a><em>. Documentos HTML podem ser interpretados por </em><a href="http://pt.wikipedia.org/wiki/Navegador"><em>navegadores</em></a><em>. A </em><a href="http://pt.wikipedia.org/wiki/Tecnologia"><em>tecnologia</em></a><em> é fruto do "casamento" dos padrões </em><a href="http://pt.wikipedia.org/wiki/HyTime"><em>HyTime</em></a><em> e </em><a href="http://pt.wikipedia.org/wiki/SGML"><em>SGML</em></a><em>. <strong>Fonte:</strong> <a href="http://pt.wikipedia.org/wiki/HTML" target="_blank">Wikipedia</a></em></blockquote> <blockquote> <em><strong>Cascading Style Sheets</strong> (ou simplesmente CSS) é uma </em><a href="http://pt.wikipedia.org/w/index.php?title=Linguagem_de_estilo&action=edit&redlink=1"><em>linguagem de estilo</em></a><em> utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como </em><a href="http://pt.wikipedia.org/wiki/HTML"><em>HTML</em></a><em> ou </em><a href="http://pt.wikipedia.org/wiki/XML"><em>XML</em></a><em>. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento. <strong>Fonte:</strong> <a href="http://pt.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank">Wikipedia</a></em></blockquote> Existem sites e livros incríveis, que dão muitas dicas preciosas sobre HTML e CSS:<br /> <ul> <li><a href="http://maujor.com/" target="_blank">CSS, Padrões Web e Acessibilidade</a> – Maujor </li> <li><a href="http://www.codigofonte.net/dicas/css" target="_blank">Dicas de CSS</a> - Código Fonte </li> <li><a href="http://www.pt-br.html.net/tutorials/css/" target="_blank">CSS Tutorial - Table of contents</a> - HTML.net </li> <li><a href="https://lojadigerati.assinaja.com/dig/vitrines/detalhes/Detalhe24201.asp" target="_blank">CSS – O Manual que faltava</a> – Editora Digerati </li> </ul> A maioria das <a href="http://pt.wikipedia.org/wiki/P%C3%A1gina_web" target="_blank">páginas web</a> foram construídas usando  HTML e CSS 2. Com o Blogger não tem sido diferente. Mas, de um tempo para cá, estamos nos deparando com a terceira versão do CSS - o CSS 3 - que, apesar de ser fantástico, ainda não é totalmente compatível com o Internet Explorer e nem com versões mais antigas dos demais navegadores: Firefox, Chrome, Opera e Safari.<br /> <ul> <li><a href="http://www.dicasblogger.com.br/2009/06/atualize-o-seu-navegador.html">Dicas Blogger: Campanha “Atualize o seu navegador”</a> </li> <li><a href="http://www.dicasdeinformatica.net/2010/06/o-que-e-um-navegador.html">Dicas de Informatica: O que é um navegador</a> </li> </ul> Para ver a diferença de um template criado usando CSS 3, acesse este modelo customizado pelo <a href="http://www.dicasbrowser.com/" target="_blank">Dicas Browser</a> – <a href="http://www.templates.dicasblogger.com.br/2010/08/template-gradient.html" target="_blank">Template Gradiente</a>. Todo o degradê foi feito usando CSS 3 e não imagens, como era feito no CSS 2.<br /> Conhecendo o básico de CSS, qualquer um consegue fazer modificações no template.<br /> O diferencial entre os designers de templates, nem sempre está no conhecimento e sim na  <strong>criatividade</strong>. Notem que cada designer possui um estilo próprio – o que leva gente ignorante a achar que os modelos são todos parecidos.<br /> Quem ganha com isso é você, usuário do Blogger, que na hora que quiser baixar um template gratuito ou encomendar um template exclusivo, vai poder escolher entre vários estilos e autores.<br /> Esta série vai receber o marcador “dicas templates”. Um bom proveito para todos nós.

Nova série: como personalizar templates do Blogger

Enquanto o JV inicia uma série de posts sobre o uso do Facebook para blogueiros , eu vou começar uma outra: “como personalizar templates pa...

Continue Lendo >>

Como colocar o botão do Facebook no Blogger

Com a popularização de aplicativos como o Farmiville e outros jogos online, o Facebook obteve um crescimento explosivo no Brasil. Ficar de fora do Facebook é perder a oportunidade de receber milhares de visitas no seu blog ou site. Vou iniciar uma série de artigos ensinando como integrar um blog ao Facebook, e o primeiro é <strong>como colocar um botão do Facebook no Blogger:</strong><br /> <div class="separator" style="clear: both; text-align: center;"> <a alt="como colocar botão facebook blog" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFNH-_2n09-KzbvijaLidXI0Jx9zYmgFhiAjkmEqiKXgrwlcVPQi4r4rRvaEteevbt0R1tdLWNb8vdGmNqWy-W-_25L_YxTqwHtZMv9KFdmCHd6R4M0S0F2WUY2DZHe-y5nPvjzs8erwQ/s1600/bot%C3%A3o+facebook.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFNH-_2n09-KzbvijaLidXI0Jx9zYmgFhiAjkmEqiKXgrwlcVPQi4r4rRvaEteevbt0R1tdLWNb8vdGmNqWy-W-_25L_YxTqwHtZMv9KFdmCHd6R4M0S0F2WUY2DZHe-y5nPvjzs8erwQ/s1600/bot%C3%A3o+facebook.png" /></a></div> A vantagem de utilizar o botão "Gosto" (ou "Like", em inglês e "Curtir", em português de Portugal) é que sempre que alguém clica no botão será feita uma atualização do status no mural do perfil no Facebook com o link do post em questão. Os amigos deste perfil também irão receber esta atualização. Para colocar este botão, tal como o <a href="http://www.dicasblogger.com.br/2010/02/tweetmeme-botao-de-retweet-blogger.html" target="_blank">botão do Twitter</a>, não é necessário ter conta no Facebook.<br /> <br /> <strong>Integrando o botão do Facebook no Blogger:</strong><br /> O botão "Gosto" pode ser inserido em qualquer parte. Recomendo que seja colocado no final do post, é o local onde o leitor irá realizar a próxima ação após a leitura, mas isto não é uma regra. Antes de fazer esta alteração, faça um backup completo do template do blog.<br /> <br /> Entre no painel do Blogger, clique em <strong>design</strong> e, depois, em <strong>editar HTML</strong>. Marque a caixa <strong>expandir modelos de widgets</strong> e procure por:<br /> <blockquote> <data:post.body/> </blockquote> Copie e cole logo abaixo do código anterior: <br /> <blockquote> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/> </blockquote> Se deseja que o botão do Facebook apareça na parte superior do post, ao lado do título, coloque o código logo abaixo desta linha:<br /> <blockquote> <div class='post-header-line-1'/></blockquote> <strong>Otimizar o botão do Facebook:</strong><br /> Para que o botão não apareça na página inicial, somente nos posts, deve inserir o código em verde:<br /> <blockquote> <span style="color: green;"><strong><b:if cond='data:blog.pageType == &quot;item&quot;'></strong></span> <br /> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/> <br /> <span style="color: green;"><strong></b:if></strong></span></blockquote> Para que <strong>apareça as fotos dos utilizadores</strong> que <em>gostaram</em>, deve alterar o <em>false</em> para <em>true</em>, e o tamanho do widget de 40px para 80px:<br /> <blockquote> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=<strong><span style="color: green;">true</span></strong>&amp;width=100&amp;action=<strong><span style="color: red;">like</span></strong>&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; <strong><span style="color: green;">height:80px</span></strong>;'/></blockquote> Outra coisa que pode ser feita é alteração de "Gosto" para "Recomendar", bastando para isto alterar o<em> </em>like (em vermelho, no código acima), por recommend.<br /> <br /> A fonte das letras também pode ser alterada, por default vem em Arial, mas é possível utilizar outras fontes.<br /> <br /> Salve e veja se ficou tudo correto. <br /> <br /> Gostou? Seja fã do <a href="http://www.facebook.com/pages/Dicas-Blogger/138629696182870" target="_blank">Dicas Blogger no Facebook</a>!

Como colocar o botão do Facebook no Blogger

Com a popularização de aplicativos como o Farmiville e outros jogos online, o Facebook obteve um crescimento explosivo no Brasil. Ficar de f...

Continue Lendo >>

Erro 503 no Blogger - Service Unavailable

Há cerca de 10 dias, o Blogger começou a apresentar a mensagem <strong>Service Unavailable – Error 503 </strong>e o problema só vem aumentando.<br /> Os erros 503 aparecem em diversas situações em que estamos usando o Blogger; seja na hora de colocar um gadget, postar, mudar o template, acessar o blog e etc.<br /> Segundo informações do nosso amigo Cidão, trata-se de sobrecarga nos servidores:<br /> <ul> <li><a href="http://crazyseawolf.blogspot.com/2010/09/bugs-imagens-erro-503-blogger.html" target="_blank">Bugs ao inserir imagens e os infinitos erros 503 no Blogger</a> </li> </ul> Pesquisando na web sobre o Erro 503, encontrei a seguinte definição:<br /> <blockquote> O servidor Web (que faz o website funcionar) não consegue no momento lidar com o pedido de HTTP devido a uma sobrecarga temporária ou manutenção do servidor. A implicação é que esta é uma condição temporária que será resolvida depois de algum atraso. Alguns servidores nesta condição também podem simplesmente recusar conexão de soquete, e neste caso um erro diferente pode ser gerado por que a criação do soquete devido ao tempo esgotado de criação de soquete. <strong>Fonte:</strong> <a href="http://www.checkupdown.com/status/E503_pt.html" target="_blank">CheckupDown</a></blockquote> Quando os <strong>erros 503 </strong>aparecem pra você, basta atualizar a página, clicando em “atualizar (refresh)” no navegador ou apertando a tecla F5 do teclado.<br /> <br /><img alt="error 503" border="0" height="141" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKeCkeTJigTfxZualdWozjAdgKZyKvMXCZ3Vp761RXsFrNK1S0U6RuS8IWKN8NhpAQQF4kxhOg-7vhlmRY0x4-Vpnphfjp3DEEItiA_JtZXsEYcsfX89PVR-AGDEEOod_4Ol6U-UQBGdK/?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="error 503" width="376" />

Erro 503 no Blogger - Service Unavailable

Há cerca de 10 dias, o Blogger começou a apresentar a mensagem Service Unavailable – Error 503 e o problema só vem aumentando. Os erros 503...

Continue Lendo >>

Blogger no iPhone - Como escrever e publicar posts

Até há pouco tempo <b>escrever posts no iPhone para serem publicados no Blogger</b> era um exercício de paciência: ou escrevia-se o HTML na unha e enviava-se por email para ser automaticamente publicado, ou recorria-se à aplicações muito incompletas, sem grande possibilidade de otimização.<br /> <br /> Um dos programas que sempre utilizei foi o BlogPress, mas era bastante limitado em relação à outra coisa que não fosse escrever os posts, colocar fotos, categorias e publicar. Para inserir um link no texto era um martírio, com vários passos: publicar o post, abrir o Blogger no browser e editar o HTML. Usei durante muito tempo para fazer posts pequenos e rápidos, mas com as últimas atualizações da aplicação estou utilizando cada vez mais.<br /> <br /> <b>Como escrever e publicar um post no Blogger com o iPhone</b><br /> Quando se inicia a aplicação BlogPress a primeira coisa que se deve fazer é o login com o username da conta do Google. Automaticamente todos os blogs desta conta serão sincronizados com a aplicação. A seguir, podemos começar a escrever o post:<br /> <br /> <b>Título e Categorias:</b><br /> Após inserir o título do post, podemos escolher a categoria do post (clicando no <i>i</i> após o título), ou mesmo criar novas categorias. Pode-se também escolher entre publicar ou salvar o rascunho no Blogger:<br /> <br /> <div align="center"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikq7E-fVzB8SjXe7UdgSGGZdKkm-DB_WueHJ17fnYcACGBAPsfeOV3Ozm3BdKMN1Oed7PRcKL7-9uvytR0Pn_XIS_5Hg0taUM3BV303zKMVfEo_65aWXPdFaDfXFlbh0OaG_JYywgdljE/s1600-h/Blogger%20Iphone%201%5B6%5D.jpg"><img alt="Blogger no Iphone" border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ0QeWQpENPQWDkPWXvR23YcVtewI6kK-R3Mfy17nL8zYTNz9He2Jo6lGlhyMfCsYET2trweua8GEcnpbMBgvB1H_VKTHwocNiq4RbLTG8G3vWM48Ol-egKg1_Z6Rz2kkjhjBtGPugt2M/?imgmax=800" style="border-width: 0px; display: inline;" title="Blogger Iphone" width="180" /></a>     <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjExbKY8Yoma3aQ0vUnxnpGpe02glc_qlZkbE73rosgWNFewmDDYXIYrrcaZLl3s9EYwTOOeOLsOy-1-xIXqaq433Czd5EpQwCJVPLBL-mb4l3yJFXEoz8YB6wwwQEOcTqpeehU0fnLqe0/s1600-h/Blogger%20iphone%202%5B4%5D.jpg"><img alt="Blogger iphone" border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN8JEw4sH9Du_3yicV7dtW0EwZ8_EmvGHppFVMYl2HR8Y3urSo0Ef2iCREqbNRyHr1cLtu5R86NdHMzr7KSv9YeazyvPNpoCFpvwh7VmvhWyFqIUD6GGUevRT0zIJpRMVBBGeMzmchgO0/?imgmax=800" style="border-width: 0px; display: inline;" title="Blogger iphone" width="180" /></a> </div> <br /> <b>Inserir imagens no post:</b><br /> As imagens podem ser inseridas através da livraria do iPhone ou tiradas na hora com a camera, bastando para isto clicar no ícone da camera no canto superior direito. Serão automaticamente enviadas para a conta definida pelo utilizador: Picasa ou Flickr. Também há possibilidade de ajustar o tamanho da imagem e o posicionamento no post:<br /> <br /> <div align="center"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTIaj7om48wgzFhbkIH1xHT334UbX94wEIVIIvqifmnXJlJWvgZ5ZEK8-MK3gJHd7vkD8bjB79PmVkb6hBLfI3tPBXz2_5gap_28-XYZtWDS6yv7Rcn9_Dh6801kYdiTKAJJ6YdrRoyt0/s1600-h/Blogger%20iphone%204%5B4%5D.jpg"><img alt="Blogger iphone" border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPpokK9I7D90bHvVT_uZJGL94Yt50-z5m0MOcZiraoU2UtEgIXVtPq2oafkQF9aI_32ugzkbSUp49a8Jp93auZWaG8aOwxF1tPx1Jhbpwv6buaD6kG8VGMdQNBIat54HDUyaW6BJvp9iI/?imgmax=800" style="border-width: 0px; display: inline;" title="Blogger iphone 4" width="180" /></a>      <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5iSN_yWe5sNfha_j0nKMWO89LlznMCTLXszQfs0tlaIAdrUHBoeyrkM3fDSuCiqZqgSF8XFr1W2iBoTyIJpCSd1W8LmELsf5cHOhOoDAbQDIdXLJHEgxEHofUcEV2P613WEpVUYzyk0k/s1600-h/blogger%20iphone%205%5B5%5D.jpg"><img alt="blogger iphone" border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIIjMm_C5Oo1a7fVjw8rOyIQYKXFcllGtAaUTIIMKEbHgwNEdoyiZLkQjP2uUQsVbOOJCKrBr0833Ko5Mu2wnzshd_ssxwpbcJrGRsI3-r44ohoxB8zN5BfNopCy-hUazgtl2gyHwv5D4/?imgmax=800" style="border-width: 0px; display: inline;" title="blogger iphone 5" width="180" /></a> </div> <br /> <b>Inserir links e outros códigos HTML:</b><br /> O que tornou o BlogPress muito mais útil para publicar posts no iPhone foi a possibilidade de edição em HTML direto na aplicação, permitindo a inserção de links e outros códigos, como mostra a imagem a seguir:<br /> <br /> <div align="center">  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLMBQo9iLnCY753nDYbaUTtZWWMFMA2Q0vw7TN_jza7_74nsSTi0OCu9cOEOpNcQy3pFP_MJZjmivWJalKtEqc8phrUhNISBysP0605-dRv9l_DhPzDnTWp-aXH2A-42VQhLxedthBLAo/s1600-h/blogger%20iphone%208%5B4%5D.jpg"><img alt="blogger iphone" border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-lgW0x4QmSLTcl3S7QNqpDCdeFYyMtfQ3ZygDrcHTA-xt5KhurZfEH15Wc7OWJwCUvtQEgEKMefLtk-iLr1LDVjSdGIYMEBEcHPRZBNTILoDKp_w0Kb8YNHNsG-wGkmyTCO5NDBS5PaA/?imgmax=800" style="border-width: 0px; display: inline;" title="blogger iphone 8" width="180" /></a>      <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKWyyQkSaL9jirg7u_ojr_sW71scnMv945RpZt260znVa3ELN7TrECFMluS9IE_4tsefINTnx286hipkrjQzHTT5Y0L9PkyvQ5MCtD7acXf8yCtxhaZAzAivAop4xRk-zDOHbODtqxlSo/s1600-h/blogger%20iphone%206%5B4%5D.jpg"><img alt="blogger iphone" border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn2PGB1D30YZDzZ5cEK0Jo7bs7Fd65iKk7J87o97sA7wbVeQiAtQUNb-H1xVSvgRZ9qej9ob7uHKz9DnSQ_MMrlhCNtGqoCPcYxEvcSuVB-Q_P_sTE04vicVusuFBJNr90lFqDNdgkjQk/?imgmax=800" style="border-width: 0px; display: inline;" title="blogger iphone" width="180" /></a> </div> <br /> <b>Concluindo…</b><br /> A informação na internet circula cada vez mais rápido, os mecanismos de pesquisa estão cada vez mais aprimorados e indexando e mostrando resultados em tempo real (Google Caffeine, Google instant), as aplicações do iPhone e outros dispositivos móveis que possibilitam produzir posts em blogs podem acabar por deixar de ser uma simples curiosidade e se tornarem em ferramentas poderosas.<br /> Eu já utilizo diariamente, e vocês, já publicaram posts através do iPhone ou de outro telefone celular?<br /> <br /> Link para Apple Store: <a href="http://itunes.apple.com/pt/app/blogpress/id317799861?mt=8" target="_blank">BlogPress</a> (2,39€)

Blogger no iPhone - Como escrever e publicar posts

Até há pouco tempo escrever posts no iPhone para serem publicados no Blogger era um exercício de paciência: ou escrevia-se o HTML na unha e...

Continue Lendo >>

Como denunciar plágio ao Blogger

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlHWSVJteL05PNfpQ8ue43TGiAQEB3NJb_TqckRNv2fyMovnVV220gFCRJP8joT9mA8MrHHy6fOJsS1SyJtnTRGrOdSkCTv1sHUjelF44y0ola6HbZhrCMfKWV0O1iHDyFmiEaYHw9RetC/s1600-h/image%5B47%5D.png"><img align="left" alt="image" border="0" height="91" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRGERX5b-HiSDTBYaZFDpdIC3LmSYHd_6YkShSU0BdWi29qABPbuR7Cfzg35F-IhzihqbdpyjMi1DbxS7bzmo1uj7gfi0gt31PPr120e3ZOtJ9Ote5lGDqo7V8xUAUDMfuBBFQa7jjtN2x/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin-left: 0px; margin-right: 0px;" title="image" width="91" /></a> Em junho do ano passado, publiquei um guest-post do <a href="http://www.compulsivo.com.br/">Compulsivo</a>, onde ele ensinava como <a href="http://www.dicasblogger.com.br/2009/06/como-denunciar-os-ladroes-de-conteudo.html">como denunciar os ladrões de conteúdo.</a> <br /> De lá para cá, o formulário de denúncias do Blogger mudou e passou a ser em português. Sendo assim, resolvi explicar novamente como fazer este tipo de denúncia.<br /> O formulário de denúncias do Blogger é extremanente eficiente. Das vezes que precisei usar ( e não foram poucas), os artigos clonados do meu blog foram retirados do ar em menos de 48 horas, incluindo as cópias de templates :)<br /> Vou tentar explicar como usar esse formulário usando imagens (screenshots), portanto clique sobre elas para ampliá-las.<br /> Primeiramente, acesse o formulário de denúncias através deste link:<br /> <ul> <li><a href="http://support.google.com/bin/request.py?contact_type=lr_dmca&dmca=text&product=blogger" target="_blank">Lei de Direitos Autorais do Milênio Digital – Blogger</a> </li> </ul> <b>1. INFORMAÇÕES DE CONTATO</b><br /> A primeira parte do formulário se refere às informações de contato do dono do blog. Preencha os campos (espaços em branco) do formulário da seguinte forma:<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg25Uc67nkrUz99Wr9YAEJr8Yov-ac6dsNGulBwplQHRYNZTCF8MODP9RXjvXiBtjdjR4oFnUSM1LC_qcuLZBIqLE0LmX0DGeFT6DfbKQIiMhb_0AU4EZMfMKnz-8l4Cu6DWq6CHgKRF_iL/s1600-h/image%5B6%5D.png"><img alt="Informações de contato" border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV-yuC5qTOjZGoaTj1pzxIuZjy5C5JEJUVc_vk32d3td3p798AcmjgHPnDYM571ef-ukFrks98FNC1vNiZsfBC81cTzYMaqUll3bgr-htnvoJMmpDISzORHA-2jKl_Yv3mAc6ZCeMWuMtC/?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="Informações de contato" width="452" /></a><br /> <b>2. SEU TRABALHO PROTEGIDO POR LEIS DE DIREITOS AUTORAIS</b><br /> No primeiro campo, informe o endereço (URL) do seu blog que sofreu o plágio.<br /> No segundo campo, informe as URLs dos seus posts que foram plagiados.<br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbSe2KvZLzc67H0MV0kG8dAwWeLZjtgV_COYdX-gxcmNPbVAG09JjagykEFpXMHb1T0WbzRDa0w2QZHAhjAso1FQ1zcRG0FIKozu5l5sK0muPqePzywo1ROA8s5Yj4YaG7wMtA973Uv2a3/s1600-h/image%5B19%5D.png"><img alt="Material protegido" border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFaRc4UHNoSc2BGET7Tg4M1wlxt-xdMvUEm-f7b8MUnuyHlPjKmsFtHuI3hx2gMfBYSs2kEQSPg0T78mo3F-AjHXyqdROJEZrhx6UchDznBiOPG8_hpO_5J2k5a3E-IxFwW2SNgdEGVLl3/?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="Material protegido" width="452" /></a> <br /> <b>3.LOCAL DO MATERIAL INFRATOR NO BLOG</b><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjihrldevOctunR8_-cZzrCsBvBkYrFPnZTZkv-oQXnm78V2JvAHDWMR_nmtiPLLJBOznAd0BAmcfW5NJVp-2cvzigpt2_YAVfvNn54bo9eep1Ch7ixFRsBT0nGYmYeEBIHlbyX4aUJrn2Z/s1600/como-preencher.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjihrldevOctunR8_-cZzrCsBvBkYrFPnZTZkv-oQXnm78V2JvAHDWMR_nmtiPLLJBOznAd0BAmcfW5NJVp-2cvzigpt2_YAVfvNn54bo9eep1Ch7ixFRsBT0nGYmYeEBIHlbyX4aUJrn2Z/s400/como-preencher.png" width="400" /></a></div> No primeiro campo, informe todas as URLs ( do blog plagiador) dos posts que foram copiados do seu blog.<br /> <br /><br /> Este formulário só serve para denunciar blogs que estejam hospedados no Blogspot, mesmo que tenham domínio próprio. <br /> <a href="http://soparablogueiros.blogspot.com/2009/08/como-usar-o-twitter-um-guia-para.html" title="http://soparablogueiros.blogspot.com/2009/08/como-usar-o-twitter-um-guia-para.html"></a>

Como denunciar plágio ao Blogger

Em junho do ano passado, publiquei um guest-post do Compulsivo , onde ele ensinava como como denunciar os ladrões de conteúdo. De lá pa...

Continue Lendo >>

Mundo Blogger – um metablog que veio pra ficar!

Nestes três anos à frente do Dicas Blogger, já vi muito blog nascer, crescer, fazer sucesso ou estagnar, procrastinar e até mesmo morrer.<br /> Quando comecei, eram poucos os blogs nacionais que traziam novidades para a plataforma Blogger; tanto que até consigo citar um por um: <a href="http://templatesparanovoblogger.blogspot.com/" target="_blank">Templates Novo Blogger</a>, <a href="http://www.templatesparavoce.com/" target="_blank">Templates para Você</a>, <a href="http://www.codigosblog.com.br/" target="_blank">Códigos Blog</a>, <a href="http://usuariocompulsivo.blogspot.com/2008/05/todas-as-dicas-compulsivas-para-o.html" target="_blank">Usuário Compulsivo</a>, <a href="http://blosque.com/" target="_blank">Blosque</a> e <a href="http://dicasparablogs.com.br/" target="_blank">Dicas para Blogs</a>.<br /> Para nossa alegria, estão todos no ar,  muito bem de saúde e dispensam maiores apresentações. O Templates Novo Blogger (TNB)  é que nos deu um susto recentemente, saindo do ar por um erro dos robôs do Blogger, mas o problema já foi resolvido e ele continua ocupando seu inestimável lugar na Blogsofera.<br /> <span id="fullpost"> </span><br /> <span id="fullpost">Como vocês já devem saber, todo blog que ensina a blogar é chamado de metablog e nós que escrevemos sobre o Blogger, somos chamados de metabloggers.</span><br /> <span id="fullpost"> <img alt="" border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh55x-XJ0XCu5iBtCispn4AdAzqM1f-6tELf-EWkRHkXHAtUM33T5dGiDGcANMJw8aJ2gbIpIL-2FI9KN8AU_Wn8cI1mWMf7gSt3umXMvF0Ef8jbJfyY82ChvpEjDwhuEfnEqze2R489hxf/?imgmax=800" style="border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="" width="550" /> <br /> Muito bem. Nestes três anos, também acompanhei o surgimento de muitos metablogs, mas foram poucos que me chamaram a atenção. Infelizmente, a maioria deles não traz nada de novo, apenas replica o conteúdo de seus antecessores. <br /> Eu sou uma pessoa que adora novidades. Se eu não tenho nada de novo pra compartilhar com vocês, prefiro deixar o blog sem atualizações. E se, por um motivo de força maior, eu precisar publicar algo que vi em outro blog, daí eu linko, cito a fonte e ainda agradeço. Acho que é o mínimo que podemos fazer por quem se esforçou tanto para descobrir e compartilhar algo novo, né? <br /> <a href="http://www.mundoblogger.com.br/" target="_blank"><img alt="Mundo Blogger" border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmDterv4BmYYMeLaKyDck8eZfVVDaqFeAe8pCt6r95asIRVvhsLsApineIgKbGZ0G8NtpoPAzoDss9CcRb3tZoRTlEFx6vuAgGZOFM9P5cH3GfhVHDjp1SZfH455cc-ZR4C1V6qT-m3FLx/?imgmax=800" style="border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Mundo Blogger" width="550" /></a><br /> Bom, em meio a tantos metablogs novos, conheci o <a href="http://www.mundoblogger.com.br/" target="_blank">Mundo Blogger</a> – que até cerca de 20 dias atrás se chamava <strong>Mundo Darkness</strong>. Confesso que no começo achei o blog meio estranho, com aquele template lindo, porém…… gótico! Aliás, eu nem sabia direito o que era gótico, mas o Google me deu uma forcinha :)<br /> Com o tempo eu percebi que ali estava um blog com grande potencial. A Clau, editora do <strong>Mundo Blogger</strong>, não se limita a postar tutoriais amarelados. Ela estuda, vai atrás, faz modificações, quebra a cabeça e ainda compartilha. Não é lindo?<br /> Eu tenho aprendido muito por lá. Por isso resolvi fazer este post apresentando o Mundo Blogger pra vocês. O ponto forte do blog são os tutoriais para customizar templates. É HTML e CSS que não acaba mais! Como se diz no Twitter: CORRÃO!<br /> Na página <a href="http://www.mundoblogger.com.br/2009/09/tutoriais-para-blogger-indice.html" target="_blank">Índice</a>, vocês vão encontrar todos os tutoriais feitos para blogs do Blogger, sistematicamente organizados com títulos e marcadores. Um luxo.<br /> Aproveito para deixar meu agradecimento e um super abraço para a Clau e pra todas as “Meninas Super Poderosas”  Espero não esquecer de nenhuma (ai, a idade…): <a href="http://templatesparanovoblogger.blogspot.com/" target="_blank">Ariane</a>, <a href="http://www.templatesparavoce.com/" target="_blank">Áurea,</a> <a href="http://joangelblog.blogspot.com/" target="_blank">JoAngel</a>, <a href="http://blogger-dicasmamanunes.blogspot.com/" target="_blank">Mamanunes</a>, <a href="http://www.bloggersphera.com/" target="_blank">Ro Zancheta</a> e a diva  <a href="http://blosque.com/" target="_blank">Nospheratt</a>.<br /> “Meninas Super Poderosas” foi um apelido dado a todas nós pela <a href="http://www.dicasblogger.com.br/2007/11/blogueiro-solidrio.html?showComment=1196100540000#c8252994114128455882" target="_blank">Ariane</a> em 2007 e que está bem explicado neste post da JoAngel - <a href="http://joangelblog.blogspot.com/2007/12/as-meninas-superpoderosas.html">As Meninas Superpoderosas</a>.<br /> </span>

Mundo Blogger – um metablog que veio pra ficar!

Nestes três anos à frente do Dicas Blogger, já vi muito blog nascer, crescer, fazer sucesso ou estagnar, procrastinar e até mesmo morrer. Q...

Continue Lendo >>

Hack “Leia mais” automático e com imagens

Fui procurar este hack, à pedido de uma cliente do <a href="http://www.projetos.dicasblogger.com.br/" target="_blank">DB-produtos e serviços</a> e encontrei no <a href="http://templatesparavoce.blogspot.com/" target="_blank">Templates para você</a>, blog da querida e sumida amiga Áurea.<br /> Trata-se de um hack que resume os posts da página inicial (home) automaticamente e ainda mostra uma pequena imagem (<a href="http://pt.wikipedia.org/wiki/Thumbnail" target="_blank">thumbnail</a>) do lado esquerdo da postagem.<br /> Antes de mais nada, recomendo que você instale este hack em um blog de testes ou, se quiser instalar diretamente no blog, faça antes um <a href="http://www.dicasblogger.com.br/2008/05/backup-template-widgets-blogger.html" target="_blank">backup do template</a>.<br /> <b><span style="font-size: 100%;">Como colocar o hack Leia Mais com imagens</span></b><br /> Entre no painel do Blogger, clique em <b>design</b> e, depois, em <b>editar HTML</b>.<br /> Marque a caixa <b>expandir modelos de widgets</b> e procure por:<br /> <blockquote><div class='post-body entry-content'> <br /> <data:post.body/></blockquote>Substitua a linha <b><data:post.body/></b> por:<br /> <blockquote><b:if cond='data:blog.pageType != "item"'><br /> <b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /> <div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div><br /> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><br /> <div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leia mais »»</a></div><br /> </b:if></b:if><br /> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /> <data:post.body/></b:if><br /> <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/><br /> </b:if></blockquote><b><span style="color: red;">ATENÇÃO!</span></b> Para quem usa os meus templates, que já vêm com um outro hack “leia mais” e/ ou com o jump break do Blogger, o caminho é outro. Procure por:<br /> <blockquote><b:if cond='data:blog.pageType == &quot;item&quot;'><br /> <style>#fullpost{display:inline;}</style><br /> <p><data:post.body/></p><br /> <b:else/><br /> <style>#fullpost{display:none;}</style><br /> <p><data:post.body/></p><br /> <b:if cond='data:post.hasJumpLink'><br /> <div class='jump-link'><br /> <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a><br /> </div><br /> </b:if><br /> <span id='showlink'><br /> <a expr:href='data:post.url'>Continue lendo &gt;&gt;</a><br /> </span><br /> <script type='text/javascript'><br /> checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);<br /> </script><br /> </b:if><br /> <div style='clear: both;'/> <!-- clear for photos floats --></blockquote>Substitua tudo por:<br /> <blockquote><b:if cond='data:blog.pageType != "item"'><br /> <b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /> <div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div><br /> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><br /> <div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leia mais »»</a></div><br /> </b:if></b:if><br /> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /> <data:post.body/></b:if><br /> <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/><br /> </b:if><br /> <div style='clear: both;'/> <!-- clear for photos floats --></blockquote>Agora vá no CSS do template e <b><span style="color: red;">antes </span></b>da tag <b>]]></b:skin></b> cole este código:<br /> <blockquote>.rmlink {<br /> font-size: 100%;<br /> float: right;<br /> margin-right: 30px;<br /> margin-top: 10px;<br /> font-weight: bold;}<br /> .rmlink a {<br /> font-style: normal;<br /> font-weight: bold;<br /> font-variant: small-caps;<br /> font-family: Arial,Sans-Serif;<br /> color: #24618e; /*Cor do Link*/}<br /> .rmlink a:visited { color: #649dc7;}/*Cor do link depois de clicado*/<br /> .rmlink a:hover { color: red;} /*Cor do link ao passar o mouse em cima*/</blockquote>Procure então pela tag <b></head></b> e cole este outro código em cima dela:<br /> <iframe src="https://docs.google.com/document/pub?id=13TCWaUOu64B2dLW2fc0Awudh0RCf_X6wVuPum2JtPRs&embedded=true" style="height: 168px; width: 549px;"></iframe> <br /> <b>Fontes de referência</b><br /> <ul><li>Templates para Você - <a href="http://www.templatesparavoce.com/2009/08/hack-leia-mais-com-imagens-reduzidas.html" target="_blank">Hack Leia Mais com imagens reduzidas</a> </li> <li>Mundo Blogger - <a href="http://www.mundoblogger.com.br/2009/08/hack-mais-resumo-de-postagem-automatico.html" target="_blank">Hack Leia mais com imagens na página inicial</a></li> </ul><b><span style="font-size: 100%;">Escondendo o rodapé dos post na página inicial</span></b><br /> Para esconder a data e o rodapé dos posts na página inicial, procure por:<br /> <blockquote>]]></b:skin></blockquote>e cole o seguinte código <b>depois</b> dessa tag: <br /> <blockquote><b:if cond='data:blog.pageType == "index"'> <br /> <style type='text/css'> .post-footer { display: none; } </style> <br /> </b:if> <br /> <b:if cond='data:blog.pageType == "index"'> <br /> <style type='text/css'> h2.date-header { display: none; } </style> <br /> </b:if></blockquote>Para entender melhor as condicionais do Blogger, acesse:<br /> <ul><li><a href="http://www.bloggersphera.com.br/2009/03/bif-belse-blogger-condicionais.html" target="_blank">O Blogger e as Condicionais</a> – BloggerSphera </li> <li><a href="http://www.mundoblogger.com.br/2010/08/aplicar-estilos-pagina-inicial-do-blog.html" target="_blank">Aplicar estilos a página inicial do Blogger</a> – Mundo Blogger </li> </ul>Esta última dica funcionou no Template Mínima e nos meus templates, mas talvez não funcione em outros, já que o nome dos seletores ( .post-footer e h2.date-header ), pode variar de um modelo para outro.<br /> <b><span style="font-size: 100%;">Exibindo apenas o texto</span></b><br /> Se você quiser mostrar apenas o texto na home e não as imagens, procure por:<br /> <blockquote><style type="text/css"><br /> .thumbnailimg IMG {<br /> max-width:150px;<br /> width: expression(this.width > 150 ? 150: true);<br /> max-height:120px;<br /> height: expression(this.height > 120 ? 120: true);<br /> }<br /> .thumbnailimg {<br /> float:left;<br /> padding:0px 10px 5px 0px;<br /> }</blockquote>Substitua todo o trecho acima por este: <br /> <blockquote><style type="text/css"><br /> .thumbnailimg IMG {<br /> max-width:150px;<br /> width: expression(this.width > 150 ? 150: true);<br /> max-height:120px;<br /> height: expression(this.height > 120 ? 120: true);<br /> <span style="color: red;"><b>display: none:</b></span><br /> }<br /> .thumbnailimg {<br /> float:left;<br /> padding:0px 10px <b>0px</b> 0px;<br /> }</blockquote>

Hack “Leia mais” automático e com imagens

Fui procurar este hack, à pedido de uma cliente do DB-produtos e serviços e encontrei no Templates para você , blog da querida e sumida ami...

Continue Lendo >>

Você sabe o que é um Splog?

<div align="right"> <em><span style="font-size: x-small;">Artigo de LUMA ROSA – </span></em><a href="http://luzdeluma.blogspot.com/" target="_blank"><em><span style="font-size: x-small;">Luz de Luma, Yes Party</span></em></a><em><span style="font-size: x-small;"> | </span></em><a href="http://twitter.com/Luzdeluma" target="_blank"><em><span style="font-size: x-small;">@Luzdeluma</span></em></a></div> Os meios de comunicação social fazem parte da nossa vida diária e blogar foi uma das primeiras inovações da "Internet Social" e hoje, juntamente com os <a href="http://www.focus.com/fyi/other/boom-social-sites/">sites e redes sociais</a> dão existência a Web 2.0 - O paraíso estaria perfeito, se não existissem os phishing scams, spams e lixo eletrônico. <br /> Conforme definiu o <a href="http://splogreporter.com/">SplogReporter</a> - página da internet criada para listar Splogs: "Eles são os terroristas da blogosfera e precisam parar", mas que raios é um Splog?<br /> <span id="fullpost"> </span><br /> <span id="fullpost"><strong>Spam + Blog = Splogs</strong> </span><br /> <span id="fullpost"> Por definição, Splogs são blogs que produzem conteúdo e usam do seu, sem a sua permissão e sem lhe dar crédito ou referência, publicam seus textos com a finalidade de aumentar tráfego e assim obter lucro ao atrair internautas desatentos para links patrocinados ou redirecionando-os para outras páginas, aumentando o pagerank da página de destino. <br /> Os Splogs procuram por blogs bem cotados no google, naturalmente ou aqueles que fazem uso de "truques" para melhorar o posicionamento, como por exemplo, o uso das tais "palavras-chaves". Se o seu blog é chamativo para paraquedistas, também será para Sploggers. <br /> <img align="right" alt="" border="0" height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT1Rt3LZuDH784oJpzPgmRWPSI74LBwzji680RpJVyq3z60RFVQ6ErORGSwk0rbEQ1Ff9g-1u4s5XjCI47iYubwqMcLmnutdIEcbzAC6bmTDbFA154YdGjiW6QrVri9HgsLndzFT3s51BR/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin-left: 0px; margin-right: 0px;" title="" width="120" />Parece que o feitiço vira contra o blogueiro, se este também usa de muitos artifícios para se posicionar melhor nos sistemas de pesquisas ou usa muitos anúncios dentro blog. Mas você pode fazer uma análise prévia para saber se o seu blog está livre de Splog no <a href="http://www.splogspot.com/pages/api_help">SplogSpot</a> e na mesma ferramenta <a href="http://www.splogspot.com/">pesquisar</a> se um blog/site é falso. Desconfie se algo estranho acontece no seu blog mesmo que você esteja blogando normalmente, tais como a combinação de ingredientes: problemas de indexação nos motores de busca, diminuição de pagerank, da monetização e audiência. Em resumo, veja se incorreu em penalizações. <br /> <strong>Outros prejuízos ao alimentar um Splog</strong> <br /> 1. A autoria do seu texto que não é reconhecida - configurando o crime de plágio por parte do splogger - para ele, isto pouco importa! Mas e as suas aspirações ao manter um blog? <br /> 2. Se você usa o Google Adsense, a ferramenta irá identificar dois textos iguais e selecionará anúncios de baixo rendimento para as páginas, pois é assim que o Adsense trabalha. Textos originais terão anúncios mais valorosos para o Adsense e consequentemente para o seu bolso - Mesmo que não use o Adsense, a originalidade ganha espaço no posicionamento nos sistemas de pesquisas e/ou no pagerank. Produza conteúdo original! <br /> <strong>Alguns cuidados para impedir splogs</strong> <br /> Um Splog pode aleatoriamente enviar comentários spams para o seu blog e por isso a necessidade de monitoramento constante do sistema de comentários, tanto no sistema livre ou com uso de moderação. <br /> Saiba mais: <a href="http://www.dicasblogger.com.br/2010/08/blogger-implementa-anti-spam-nos.html">Blogger implementa anti-spam nos comentários</a><br /> <img align="left" alt="" border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7xioPqKIK24UfDS_DS5D8UOaPd4xPwBLTTBGlN9CRQTBOFry2zfz8x-MsnCaYFHy4votB7zzSw-br7FyOYnkwdRYdUHyIbMF9-TfDlgCMddpssJbWOoCWqFvicjWrLVqEd4-c6i4zFE1l/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin-left: 0px; margin-right: 0px;" title="" width="225" /> Quase sempre os splogs usam Javascript. A razão para isto é que ele permite incorporar as instruções que aumentarão as receitas com os possíveis cliques. Um dos atributos de determinados Javascript é a geração de janelas pop-up quando você entra no site e clica em um link ou até mesmo quando sai do blog. Independente do que aciona essas pop-ups, elas são irritantes e mostram quão mal os sploggers trataram os visitantes na internet, se importando apenas em ganhar dinheiro. Monitore o seu blogue no sentido de retirar esses Javascripts. Vejo que alguns blogueiros usam as tais para ganhar cliques, mesmo não sendo splogs, sem dar a possibilidade do visitante de escolha - isto não é legal! Alguns blogueiros possuem a paciência de colocar no início do post uma mensagem padrão alertando os visitantes da presença de Splogs - <a href="http://westinnewengland.blogspot.com/2010/06/splog-is-splog.html">veja exemplo</a> - Porém existe uma maneira mais prática de proteger o seu feed e já demonstrada aqui no Dicas Blogger: <br /> <ul> <li><a href="http://www.dicasblogger.com.br/2009/06/assine-seus-feeds-irrite-kibadores.html">Assine seus feeds e irrite os kibadores</a> - não somente os kibadores! </li> </ul> Para os que usam o Wordpress, recomendo os plugins: <a href="http://www.smackfoo.com/plugins/sig2feed">RSS Signature Smackfoo</a> ou <a href="http://yoast.com/wordpress/rss-footer/">RSS Footer</a>, que fazem a assinatura automática no rodapé do post dentro do feed. <br /> Essa assinatura facilita para os motores de busca a detecção de conteúdo duplicado, distinguindo o conteúdo original da cópia, não prejudicando a indexação e manutenção do seu pagerank. <br /> <strong>O Futuro dos Blogs, uma preocupação real</strong><br /> Quando os splogs surgiram, a blogosfera ficou muito mal vista no território web, principalmente as plataformas que ofereciam a feitura de blogs gratuitamente, devido a facilidade de se criar uma página falsa ou Splog. O <a href="http://www.icerocket.com/search?tab=blog&lng=&q=tag%3A+splogs&x=34&y=9">IceRocket</a> esteve à frente de outros motores de buscas que cogitaram parar com a indexação de blogs para limpar seus resultados. Começou então, a patrulha Splog! <br /> No Blogger foi adicionada na Navbar o botão "<a href="http://buzz.blogger.com/2005/08/flag-as-objectionable.html">Flag</a>", para sinalizar conteúdo duvidoso e os grandes produtores de conteúdo web alavancaram uma campanha muito bacana de denúncia de Splogs, pois enxergaram na atitude dos motores de busca, a desvalorização de uma grande conquista: A Liberdade de expressão criada pelos blogs e retroação no desenvolvimento do pensamento coletivo. <br /> "A propriedade intelectual que está disponível na blogosfera é uma fonte incrível de ideias, fatos e imaginação. Agora é a hora de fazer alguma coisa antes do splog superá-los e dificultá-los. Descobrir novos blogs é emocionante." (Mark Cuban) <br /> Em 2006, 56% da blogosfera de língua inglesa era considerada Splog (dado da <a href="http://www.wired.com/wired/archive/14.09/splogs.html">Revista Wired</a> - leitura recomendada) e o Blogger sabendo deste crescimento <a href="http://www.google.com/support/blogger/bin/answer.py?hl=br&answer=42577">vem tomando suas providências</a>. Recentemente colocou um aviso em sua página inicial de acesso "Atualização: a política de privacidade foi simplificada e atualizada. <a href="http://www.google.com/intl/pt-BR/privacy_faq_2010.html">Saiba mais</a> e dentro desta atualização das políticas de privacidade, você tem acesso a <a href="http://www.google.com/intl/pt-BR/privacypolicy_2010.html">nova versão da Política de Privacidade do Google</a> que entrará em vigor no dia 03 de Outubro de 2010. Não deixe de saber as novas regras! <br /> Independente da política de privacidade, dentro dos <a href="http://www.blogger.com/terms.g">Termos de Serviço do Blogger</a> (TOS) são listados itens que configuram violação do uso do serviço, onde é destacada a infração da <a href="http://www.google.com/blogger_dmca.html">Lei de Direitos Autorais do Milênio Digital</a>. Se você não deu pelota para este "detalhe" e se for reincidente, o Blogger deletará o seu blog alegando ser ele um Splog (Blog Spam). <br /> Passível, o Blogger ainda lhe dá a oportunidade de recuperar o seu blog. Veja como proceder nesta postagem de Peter Enviroman: <br /> <ul> <li><a href="http://www.bloggertipsandtricks.com/2010/05/recover-blog-deleted-as-splog-tos.html">Recover blog deleted as splog, TOS violation</a> </li> </ul> (em inglês - aproveite e instale o <a href="http://translateclient.com/">Client for Google Translate</a>) <br /> Ademais, um blogueiro não deve se comportar como um Splog para não ser confundido com um e sempre cite a fonte de suas pesquisas. Caso tenha que citar um texto - JAMAIS copie um texto inteiro. Dê ênfase ao assunto tratado, desenvolvendo o seu ponto de vista e no máximo copie um pequeno trecho da sua fonte de pesquisa. Respeito ao alheio bate e volta! <br /> Neste texto foram utilizadas as novas regras do <a href="http://bizrevolution.typepad.com/bizrevolution/2009/01/servi%C3%A7o-de-utilidade-p%C3%BAblica-.html">acordo ortográfico</a> com excessão da palavra anti-spam, por fazer parte do título de um post escrito antes da assinatura do acordo - forma correta atual: antispam - o hífen é usado também para separar vogais (ex.: anti-inflamatório)</span>

Você sabe o que é um Splog?

Artigo de LUMA ROSA – Luz de Luma, Yes Party | @Luzdeluma Os meios de comunicação social fazem parte da nossa vida diária e blogar foi um...

Continue Lendo >>

Template Style

Este é Template Style, nas cores azul, preto e cinza e com detalhes em degradé e 3D. A maioria das cores podem ser mudadas através do próprio painel do Blogger, bem como a imagem do cabeçalho. Ele é leve, moderno e gratuito.<br /> <span id="fullpost"> </span><br /> <span id="fullpost"><img alt="Template Style" border="0" height="297" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDk_fV3mcrtva3yZpmvHRhJ4P-qR-iTkG9re6IycIYH2ktA_WcO0yPOB4x_NUZTgMCNMPjzkX0G9KRbiuCAx9zFgGTa6uTcnGM7JOBAWaWQEw007rOotfPkcUNVASWQShmNz6_FZzRztGO/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Template Style" width="520" /></span><br /> <span id="fullpost"> </span><br /> <div align="center"> <span id="fullpost"><a href="http://tempstyle.blogspot.com/">Demonstração</a> – <a href="https://drive.google.com/file/d/0B7G-mAQQKCyZeEN3YXJzVWYxNmc/view?usp=sharing">Download</a><a href="http://www.4shared.com/file/UOHvr-SB/Template_Style.html"> </a>– <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt">Licença</a></span></div> <span id="fullpost"> <table border="1" cellpadding="2" cellspacing="2" collapse="collapse" style="text-align: left; width: 100%;"> <tbody> <tr> <td width="361"><b> <span style="color: grey;">RECURSOS INSTALADOS</span></b></td> <td align="undefined" valign="undefined" width="353"><b><span style="color: grey;">CARACTERÍSTICAS DO TEMPLATE</span></b></td></tr> <tr> <td align="undefined" valign="undefined" width="389"><a href="http://dicasblogger.blogspot.com/2008/02/cdigo-para-posts-relacionados.html">Posts Relacionados</a></td> <td align="undefined" valign="undefined" width="366">Cores e fontes personalizáveis</td></tr> <tr> <td align="undefined" valign="undefined" width="396"><a href="http://dicasblogger.blogspot.com/2008/04/retirar-navbar-do-blogger.html">Retirada da Navbar</a></td> <td align="undefined" valign="undefined" width="370">Compatível com navegadores atuais</td></tr> <tr> <td align="undefined" valign="undefined" width="397"><a href="http://www.dicasblogger.com.br/2009/09/avatar-nos-comentarios-do-blogger.html">Avatar nos comentários</a></td> <td align="undefined" valign="undefined" width="372">1 coluna de cada lado</td></tr> <tr> <td padding="5" width="396"><a href="http://www.dicasblogger.com.br/2010/07/modelos-de-blockquotes-citacao.html">Citação em bloco personalizada</a></td> <td align="undefined" valign="undefined" width="373">Nome do seu blog nos créditos</td></tr> <tr> <td align="undefined" valign="undefined" width="396"><a href="http://www.dicasblogger.com.br/2009/11/como-colocar-o-leia-mais-no-blogger.html">Jump Break e Hack Leia Mais</a></td> <td padding="5px" width="373">CSS otimizado</td></tr> <tr> <td align="undefined" valign="undefined" width="396"><a href="http://www.dicasblogger.com.br/2010/04/botao-share-this-compartilhe-redes.html">Botões de compartilhamento</a></td> <td padding="5px" width="373">Cores em degradé</td></tr> <tr> <td align="undefined" valign="undefined" width="396"><a href="http://www.dicasblogger.com.br/2009/09/caixa-de-busca-cabecalho-blogger.html">Caixa de busca no cabeçalho</a></td> <td padding="5px" width="373">Caixa de busca estilizada</td></tr> <tr> <td align="undefined" valign="undefined" width="396"><a href="http://www.dicasblogger.com.br/2008/10/colocando-favicon-no-blog.html">Favicon</a></td> <td padding="5px" width="373">Carregamento rápido</td></tr> <tr> <td align="undefined" valign="undefined" width="396"><a href="http://www.dicasblogger.com.br/2010/07/modelos-de-blockquotes-citacao.html">Citação em bloco personalizada</a></td> <td padding="5px" width="373">Design moderno</td></tr> </tbody></table> <br /> Antes de instalar o Template Style em seu blog, leia atentamente este artigo:<br /> <ul> <li><a href="http://www.dicasblogger.com.br/2009/08/instrucoes-para-uso-dos-templates.html">Instruções para uso dos templates do Dicas Blogger</a></li> </ul> Agora leia as instruções específicas para o Template Style:<br /> <b>1. Alterando a imagem de exibição</b> <b>do cabeçalho</b> <br /> Na pasta do template, você encontrará uma imagem em formato .png. Entre em elementos de página e clique em cabeçalho>editar. Faça o upload da imagem e escolha a opção “por trás do título e descrição” <br /> Se você quiser criar a sua própria imagem, escolha o tamanho 920 x 150 px e cor de fundo #333 e salve-a no fomato .PNG.<br /> <b>2. Fontes e Cores</b> <br /> A maioria das fontes e das cores podem ser alteradas pelo painel do Blogger, exceto o background, a linkbar e os títulos da sidebar. <br /> <b>3. Retirando a caixa de busca</b><br /> Entre no HTML do template, procure pelo trecho abaixo e apague-o:<br /> <blockquote> <div id='search'><br /> <form expr:action='data:blog.homepageurl + &quot;search&quot;' id='searchform' method='get' name='searchform'><br /> <input class='keyword' id='s' name='q' type='text' value=''/><br /> <input src='<a href="http://lh3.ggpht.com/_mcq01yDJ2uY/TIoN4zHVJmI/AAAAAAAADi0/-lPcOV2086M/search.gif%27">http://lh3.ggpht.com/_mcq01yDJ2uY/TIoN4zHVJmI/AAAAAAAADi0/-lPcOV2086M/search.gif'</a> style='border:0; vertical-align: top;' type='image'/><br /> </form> <br /> </div></blockquote> O template é gratuito e está pronto para uso. Caso você queira realizar mudanças na estrutura dele ou instalar novos recursos, pesquise como fazer. <br /> Depois que você instalar este template em seu blog, volte aqui e deixe o link dele nos comentários para que eu possa ver como ficou ;)<br /> ©Template by Dicas Blogger – alguns direitos reservados. Não retire os créditos. </span>

Template Style

Este é Template Style, nas cores azul, preto e cinza e com detalhes em degradé e 3D. A maioria das cores podem ser mudadas através do própri...

Continue Lendo >>

Em breve, nova interface do Twitter

Foi anunciada hoje, em uma conferência de imprensa realizada na sede do Twitter, a nova interface da página <a href="http://twitter.com/" target="_blank">twitter.com</a>. No novo Twitter, teremos integração de vídeo e imagens, em uma interface mais bonita, limpa e agradável.<br /> Confiram as novidades, acessando este link - <a href="http://twitter.com/newtwitter" title="http://twitter.com/newtwitter">Meet the new Twitter.com</a><br /> <span id="fullpost"> </span><br /> <span id="fullpost"><img alt="" border="0" height="141" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2CRyir6-QgfOLeWXX2ciV1g7BzPV34vqikips3BQCAGbfpCJ6TUW0u5GelamZuDeAzINHcLx2CXtHwqfz1aH0vZFMYZTPCjOfu7U2OEko9AqXELi3MJOREV24LC-QAwvINJINQ20Xw-ci/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="" width="244" /> <img alt="" border="0" height="157" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7AekdKGpiis0Opq3b7NDNWHSkHXFut0H1LSTphyphenhyphen49fymEbOo-mdqNs2nUm0afriQtZTLgWERhQcSMHc05yFWu7t0q-zbGxIUfRactzc1ZHJtRTOPJnwjWS9ARzVSLbDXoOdMor_kk9nX1/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="" width="244" /> </span><br /> <span id="fullpost"> <strong>Fontes:</strong> <a href="http://twitter.com/RicardoFraga" target="_blank">@RicardoFraga</a> e <a href="http://twitter.com/willianmax" target="_blank">@willianmax</a><br /> <strong>Imagens:</strong> twitter.com</span>

Em breve, nova interface do Twitter

Foi anunciada hoje, em uma conferência de imprensa realizada na sede do Twitter, a nova interface da página twitter.com . No novo Twitter, t...

Continue Lendo >>

Template Business

<div align="left"> Apresento-lhes o Template Business. Trata-se de um tema moderno e arrojado, com diversos recursos instalados, fontes e cores personalizáveis e compatível com as últimas versões dos principais navegadores – Internet Explorer, Chrome e Firefox.</div> <span id="fullpost"> </span><br /> <div align="center"> <span id="fullpost"><img alt="Template Business" border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh38jnbwUSFaVC3QFQyZDnFZ_YvmzpWhdiiw_YuhLvtNYt8rXtLjbBSGE7CH004YLuNIQk4qfs-OwSB5QDEXIDDRr0r6qjyrWnik2_2BRAgaPljSnFRaJ9E4JfTnNydWUXNuhZJCvOtDr3o/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Template Business" width="520" /> <a href="http://tempbusiness.blogspot.com/" target="_blank">Demonstração</a> – <a href="https://drive.google.com/file/d/0B7G-mAQQKCyZM3h0d2NXWHpGRnM/view?usp=sharing" target="_blank">Download</a> – <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt">Licença</a></span></div> <span id="fullpost"> <table cellpadding="2" cellspacing="2" style="background: none repeat scroll 0% 0% rgb(249, 240, 219); border: 3px solid rgb(254, 226, 160); padding-left: 5px; text-align: left; width: 100%;"><tbody> <tr> <td valign="top" width="275"><b>RECURSOS INSTALADOS</b> <br /> <ul> <li><a href="http://dicasblogger.blogspot.com/2008/02/cdigo-para-posts-relacionados.html">Posts Relacionados</a> </li> <li><a href="http://dicasblogger.blogspot.com/2008/04/retirar-navbar-do-blogger.html">Retirada da Navbar</a> </li> <li><a href="http://www.dicasblogger.com.br/2009/09/jump-break-o-leia-mais-do-blogger.html">Jump break</a> e <a href="http://www.dicasblogger.com.br/2009/11/como-colocar-o-leia-mais-no-blogger.html" target="_blank">hack leia mais</a> </li> <li><a href="http://www.dicasblogger.com.br/2008/10/colocando-favicon-no-blog.html">Favicon</a> </li> <li><a href="http://www.dicasblogger.com.br/2009/09/avatar-nos-comentarios-do-blogger.html">Avatar nos comentários</a> </li> <li><a href="http://www.dicasblogger.com.br/2010/07/modelos-de-blockquotes-citacao.html">Citação em bloco personalizada</a> </li> <li><a href="http://www.dicasblogger.com.br/2010/04/botao-share-this-compartilhe-redes.html">Botão para redes sociais</a> </li> <li>ícones de navegação </li> </ul> </td> <td valign="top" width="275"><b>CARACTERÍSTICAS </b> <br /> <ul> <li>1 coluna à direita </li> <li>3 blocos no rodapé </li> <li>Nome do seu blog nos créditos </li> <li>CSS otimizado </li> <li>caixa de busca estilizada </li> <li>compatível com as últimas versões dos principais navegadores </li> <li>fontes e cores personalizáveis </li> </ul> </td> </tr> </tbody></table> <b>Modo de Usar – Instruções comuns a todos os templates</b> <br /> Leia atentamente as instruções abaixo antes de instalar este template:<br /> <ul> <li><a href="http://www.dicasblogger.com.br/2009/08/instrucoes-para-uso-dos-templates.html">Instruções para uso dos templates do Dicas Blogger</a> </li> </ul> <b>Instruções Específicas para o Template Business</b><br /> <b>1.Alterando a imagem de exibição</b> <b>do cabeçalho</b><br /> Na pasta do template, você encontrará uma imagem em formato .png. Entre em elementos de página e clique em cabeçalho>editar. Faça o upload da imagem e escolha a opção “por trás do título e descrição”<br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSl4grt70udBXA9GWl01qjh5VLdwCGIE67nzxpzAH73fxJnz8FqA3xYP84uO_bxF29TdPDnwNXzYlPJGbPEk1R6lQPIxHCrwbRgtMeEI0-Js9uNEl8_cioSQzoFbJvPC3zARAZ4AuNNuGY/s1600-h/image%5B14%5D.png"><img alt="Upload da imagem" border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvvNv520eCPvIbjVVfU03u8c8TzX9WuVyBSW2HynpzGwqrYwznIXTKOvPdqLeVRPYZO0QllOQfUi1IK1vj5bW6t9G-3298x54i_v7k5V8Fi2p9Q5BI4csenFN0-0Fbrl6RMLzckmzvSTbW/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Upload da imagem" width="452" /></a> <br /> <b>2.Caixa de busca na sidebar</b><br /> O uso da caixa de busca é opcional. Entre em elementos de página, escolha “adicionar uma gadget”>HTML/Javascript e cole o seguinte código:<br /> <blockquote> <div id='search'> <br /><form expr:action='data:blog.homepageurl + &quot;search&quot;' id='searchform' method='get' name='searchform'> <br /> <input class="keyword" id="s" name="q" type="text" value="" /> <br /> <input src="<a href="http://lh3.ggpht.com/_mcq01yDJ2uY/TIoN4zHVJmI/AAAAAAAADi0/-lPcOV2086M/search.gif%22">http://lh3.ggpht.com/_mcq01yDJ2uY/TIoN4zHVJmI/AAAAAAAADi0/-lPcOV2086M/search.gif"</a> style="border:0; vertical-align: top;" type="image" /> <br /> </form> <br /> </div></blockquote> <b>3.Fontes e Cores</b><br /> A maioria das fontes e das cores podem ser alteradas pelo painel do Blogger, exceto o background, a linkbar, os créditos e os títulos da sidebar.<br /> O template é gratuito e está pronto para uso. Caso você queira realizar mudanças na estrutura dele ou instalar novos recursos, pesquise como fazer.<br /> ©Template by Dicas Blogger – alguns direitos reservados. Não retire os créditos. <br /> </span>

Template Business

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

Continue Lendo >>

Widget “assine os feeds”

Uma forma legal de aumentar o número de assinantes de feeds, é oferecendo várias formas de assinatura aos visitantes. Muita gente nem imagina o que seja um feed e muito menos um leitor RSS; então, não custa nada facilitarmos as coisas, né?<br /> Pensando nisto, criei um widget bem simplezinho, usando os próprios recursos do FeedBurner. Apesar de simples, o widget é poderoso, pois reúne três formas de direcionamento para o FeedBurner: caixa de email,  ícone e  contador.<br /> <span id="fullpost"> </span><br /> <span id="fullpost">Se você não sabe o que é um Feed e nem o que é FeedBurner, acesse:</span><br /> <span id="fullpost"> <ul> <li><a href="http://www.dicasblogger.com.br/2008/10/o-que-so-feeds-e-para-que-servem.html">O que são Feeds e para que servem?</a> </li> <li><a href="http://www.dicasblogger.com.br/2009/10/usar-e-configurar-feedburner.html">Como usar e configurar o FeedBurner</a> </li> </ul> Nas imagens abaixo, temos um exemplo do widget já instalado no Blogger:<br /> <table border="0" cellpadding="1" cellspacing="0" style="width: 605px;"><tbody> <tr> <td valign="top" width="287"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5BAdbkCgP3LX5AmW6yazTVymw6VGHsV2niV1AJZO5QfbCU7na9vUXGNCN_Vnbi7pmnuckjWeNYpBAMEQBzflnSnMjtOdydf0vQr7Te2gYqbLmR1GVmuAaRsuV2fGrrPLYORz1PtQ7Ky30/s1600-h/image38%5B1%5D.png"><img alt="Dicas de Informática" border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOtKprlXspdb_wF_CvQcss5b3ic9C939UDukiwOVemDdK4TrbX12cAryz1ad12CgmSrWUcMGDKO3mOv3I7JhxsZ01e1mj-bs6JRqkyUkoHCce8-v1w_ONWPcxCWwMZjH1Z4ZlFDZx5Ajnf/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="Dicas de Informática" width="282" /></a> </td> <td valign="top" width="316"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjusTo08yl0zv9Hsikxg5ZLqhvL1WJKhltk4Vf8ZrBsMJhcuqFbt5E3zQLyVAviK-OQB5QZ07v484A5YzvuVXoD4PcoezjVSCplLthH4r-mOXUF5ElDi_REuhvyKdPHhQyrVNHmUz6LT0p5/s1600-h/image22%5B2%5D.png"><img alt="Dicas Blogger" border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDPyq-8n31S_uMyrJrTtMNCjALKCUGlXnvHPOkoCJfFCRf7duQA5G0uUU9v2hLnYyJ7tCHPnCKkS7T7WJ9rHe0X9HKBspVErGLU05a_OvpbDSUi3QQgO2ZvAnhhTYd1q0sbrjYloRPMek4/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="Dicas Blogger" width="265" /></a></td> </tr> </tbody></table> <strong>Como configurar e instalar o widget</strong><br /> Copie o código abaixo, cole no gadget HTML/javascript do Blogger e faça as seguintes substituições (preste bastante atenção agora):<br /> Onde estiver escrito <strong>SEUBLOG, </strong>substitua pela parte final da url do Feed do blog.<br /> Exemplo: http://feeds.feedburner.com/<strong>dicasblogger</strong> (dicasblogger é a parte final)<br /> Escolha uma imagem com fundo transparente, em formato .PNG e  de 120 x 120 px. Faça o upload da imagem no Picasa e cole a url dela em <strong>URL DA IMAGEM</strong>.<br /> <ul> <li><a href="http://www.dicasblogger.com.br/2010/07/como-hospedar-imagens-no-picasa.html">Como hospedar imagens no Picasa</a> </li> </ul> Recomendo o site  <a href="http://findicons.com/search/rss-feed" target="_blank" title="http://findicons.com/">Findicons</a> para encontrar o ícone dos Feeds.<br /> <blockquote> <table cellpadding="2" cellspacing="2" style="border: 1px solid rgb(236, 236, 236); background:transparent;text-align: left; width: 100%;"> <br />  <tbody><tr><td align="undefined" <br />valign="undefined"><a <br />href="http://feeds.feedburner.com/<strong><span style="color: #008040;">SEUBLOG</span></strong>"><img <br />alt="RSS" title="Assine os feeds" <br />src="<strong><span style="color: red;">URL DA IMAGEM</span></strong>" <br />border="0" height="120" width="120"></a></td><td <br />align="undefined" valign="undefined"><form <br />style="padding: 3px; text-align: center;" <br />action="http://feedburner.google.com/fb/a/mailverify" <br />method="post" target="popupwindow" <br />onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<strong><span style="color: #008040;">SEUBLOG</span></strong>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Receba os posts por email:</p><p><input style="width: 140px;" <br />name="email" type="text"></p><input <br />value="<strong><span style="color: green;">SEUBLOG</span></strong>" name="uri" type="hidden"><input <br />name="loc" value="pt_BR" type="hidden"><input <br />value="Assinar" type="submit"><p>Delivered by <a <br />href="http://feedburner.google.com/" target="_blank">FeedBurner</a></p></form> <br /><p align="center"><a <br />href="http://feeds.feedburner.com/<strong><span style="color: #008040;">SEUBLOG</span></strong>"><img <br />src="http://feeds.feedburner.com/%7Efc/<strong><span style="color: green;">SEUBLOG</span></strong>?<span style="color: #008040;">bg=FF9900</span>&amp;<span style="color: #0080ff;">fg=0000000</span>&amp;anim=1&amp;label=leitores" <br />style="border: 0pt none ;" alt="" height="26" <br />width="88"></a></p></td></tr></tbody></table><div style="text-align: center;"> Widget by <a  href="http://www.dicasblogger.com.br/2010/09/widget-assine-os-feeds.html”>Dicas Blogger </a> </div></blockquote> Se você quiser mudar as cores do contador, altere os números que aparecem em verde e azul, onde <strong>bg</strong> é o background (plano de fundo do contador) e <strong>fg</strong> é a cor do texto. <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm" target="_blank">Veja aqui</a> uma tabela de correspondência de cores. <br /> Para mudar a cor da borda do widget, substitua os números deste trecho:<br /> <blockquote> border: 1px solid rgb(236, 236, 236); <br /> <strong>Exemplo:</strong> border: 1px solid rgb(255, 255, 255); </blockquote> Depois de fazer todas as modificações, clique em <strong>SALVAR</strong>.<br /> As alterações também podem ser feitas no WordPad do Windows e depois coladas no gadget <strong>HTML/javascript</strong> do Blogger. <br /> A exibição dos créditos (nome e link do Dicas Blogger), é opcional. <br /> Recomendo que o título do gadget seja algo do tipo “Assine os feeds” :)<br /> </span>

Widget “assine os feeds”

Uma forma legal de aumentar o número de assinantes de feeds, é oferecendo várias formas de assinatura aos visitantes. Muita gente nem imagin...

Continue Lendo >>

Como mudar o template do Blogger

Como agora existem várias opções de templates para o Blogger, também existem várias formas de trocarmos esses templates. Antes de prosseguir, leia atentamente o artigo anterior, onde expliquei cada um dos modelos disponíveis atualmente: <br /> <span id="fullpost"> </span><br /> <ul><span id="fullpost"> <li><a href="http://www.dicasblogger.com.br/2010/09/opcoes-de-templates-para-blogger.html">Opções de templates para Blogger</a> </li> </span></ul> <span id="fullpost"> <strong>Designer do modelo</strong><br /> <ol> <li>entre no painel do Blogger e clique no link <strong>design</strong>; </li> <li>dentro de design, clique em <strong>designer do modelo</strong>; </li> <li>escolha um dos modelos disponíveis; </li> <li>acesse as colunas plano de fundo e layout e configure; </li> </ol> Neste post você encontrará todos os detalhes:<br /> <ul> <li><a href="http://www.dicasblogger.com.br/2010/03/como-criar-um-template-para-blogger.html">Como criar um template para Blogger / Blogspot</a> </li> </ul> <strong>Modelos de layout lançados em 2006</strong><br /> <ol> <li>entre no painel do Blogger e clique no link <strong>design;</strong> </li> <li>dentro de design, clique na aba <strong>editar HTML</strong>; </li> <li>no final da página, clique em <strong>Selecionar modelo de layout</strong>; </li> <li>Escolha um dos modelos disponíveis. </li> </ol> Para maiores detalhes, acesse este post:<br /> <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> <strong>Modelos Clássicos</strong><br /> <ol> <li>entre no painel do Blogger e clique no link <strong>design</strong>; </li> <li>dentro de design, clique na aba <strong>editar HTML</strong>; </li> <li>Lá no final da página, clique em <strong>Voltar ao modelo clássico</strong>. </li> </ol> <strong>Templates criados pelos usuários</strong><br /> A maioria dos blogs que disponibilizam templates gratuitos para download, costumam colocar um link para exibição de uma versão de demonstração. Clique neste link - demonstração, demo ou live demo - para visualizar o template.<br /> Depois, faça  o <strong>download</strong> do arquivo e salve em seu computador.<br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYBdKMA0Zn2Sl2crlftvdQQ5A57bDf_N7ckLlMAjg80fvCPTitHbOFQvCg5xZZ3MBCWUlPxYtmqQ0XfuCbKVLw3is6dSMhXEpWwoe762IoG1DNuvYvgEvo4q9swFJ13kIydfLJrpOA-Gil/s1600-h/download%5B6%5D.jpg"><img alt="download do template" border="0" height="255" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7mO6y1Ol5oXvcBnW30lUdv31Dnudv-qCvNx_-kSaBIBH2Y5a6jcr9yh2eUyH8wb7ctLhgya-yMqUoL7zUZMgrw1lc3Fc5o1fw8L1yC0SMWXfUBrBOwXkAOsK7XF9qiyhfg-nNDOEmjAwX/?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="download do template" width="452" /></a><br /> O arquivo pode estar nos formatos .XML, .ZIP ou .RAR. O .XML já está pronto para a instalação. Os outros dois vão precisar ser descompactados:<br /> <ul> <li>.ZIP – clique com o botão direito do mouse e escolha a opção <strong>abrir </strong></li> <li>.RAR – instale um aplicativo (minha sugestão: <a href="http://www.jzip.com/" target="_blank">JZip</a>), clique com o botão direito  do mouse e escolha <strong>extract here</strong> </li> </ul> Procure pelo arquivo .XML dentro da pasta que você acabou de descompactar.<br /> Entre no painel do Blogger, clique em <strong>design</strong> e depois em <strong>editar HTML.</strong><br /> Por precaução, salve seu antigo template clicando em <strong>baixar modelo completo</strong>.<br /> Os gadgets são salvos pelo Blogger, mas como o <em>seguro morreu de velho</em>, abra um por um e copie cada código, salvando–os no bloco de notas ou no WordPad.<br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT5l2M-enP8xPgtYk37oNRLnH5j43drD-FEr_w3YWeCY4ZI9DKgvMQ9ZEwvMkwuW2Et5VE5Q_j6L6dVln4AoGAV8Mqk-4wdMgeqI4LEa72vdlzYATDfVT8rxriLz76fGLKjPi9UDhedzrJ/s1600-h/gadgets%5B7%5D.png"><img alt="Salvando os gadgets" border="0" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLAO1wRnhu0F5QqkNM9UFTA2KWdrk9QKVJcP3Uu2fg73MuL1suUVH3iQtB_Rw9wPp5qIoCkdz7m1weomlcIzsSOYC8pw6HxDrkvUpUZwoJaET_3VcdfZuDPxnBSvKbOBUhA12YAF1RCcW9/?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="Salvando os gadgets" width="502" /></a><br /> Clique agora em <strong>selecionar arquivo</strong> (1) e procure pelo arquivo .XML (2)<br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpLZD5iS64o-jSbIV5ylb7VGFju3ueNP0Ntg71boIXLpo6k17-WhgwOiM9D0cKBcB8UT0A-FoBQDv09CIorvq07xxnrbEPrvUDMRmgQkJw7MtUw__h1hJtzGhnnQOAnL_Xu4DlStnjLdFg/s1600-h/layout%5B6%5D.png"><img alt="upload do novo template" border="0" height="269" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfOuRb1-pdAQtqRP29ktRC3O68PBboOwY89sj279Pf03oxE0G3MJNz5TG3sxTExl-DooamPkPUWXP88dxxlqbY14yj2Nd2vjL3pyXYV4V2HGFCnj2c58bdEJ4pibkVY8vQH1HGQ8c8Uzeg/?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="upload do novo template" width="502" /></a> <br /> Clique em <strong>abrir</strong> para selecionar o template (3) e, depois, clique em<strong> fazer upload</strong> (4)<br /> Se no seu blog existiam vários gadgets, será perguntado se você deseja mantê-los ou excluí-los. Faça sua escolha e o novo template será instalado.<br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TBMafzWmNXk_rXXpHRnnG9p2RfCWI1lxAWrS2Pm34fLbP_NrYQM7WM3Xuks_LXxrb6ossFRpsgl4LLe34AzGs9cHSlAvWOdPW4Xyh1uLFlcyvl_rUfGtSytiTLwVzwkZCLT1hVo7uOap/s1600-h/image%5B24%5D.png"><img alt="Manter ou excluir widgets" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT77Sg-7ybjmh6fBhrAusj6k33dSYjNA7ebFYulzS72Qmw3xoCWQUz0rkxUgwK-Lyzceag6Gji4kdfwLo6tyzJWfrmDXZCztF5LCC7-i3x_IHQo9jyT0vY8nBR0uWXqH4xfsZkZCgjnVIF/?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="Manter ou excluir widgets" width="512" /></a><br /> Caso fique faltando algum gadget, abra o arquivo que você salvou no bloco de notas e vá colando cada código em seus respectivos compartimentos.<br /> <strong>Detalhes importantes:</strong> <br /> No Blogger, gadget e widget são sinônimos.<br /> Se você está usando um template do <strong>designer do modelo</strong> e pretende trocar por um personalizado, saiba que o <strong>gadget atribuition</strong> será tranferido para o novo template e não será possível excluí-lo. Para resolver tal problema, antes de trocar o template, coloque o Mínima, vá nos elementos de página e exclua o gadget atribuition.<br /> </span>

Como mudar o template do Blogger

Como agora existem várias opções de templates para o Blogger, também existem várias formas de trocarmos esses templates. Antes de prosseguir...

Continue Lendo >>

Opções de templates para Blogger

O template é uma das partes mais importantes de um blog. Eu já escrevi sobre isso em outros posts, mas repetir nunca é demais. <br /> O template – para quem não sabe – é o desenho do blog, também chamado de tema ou modelo. É onde iremos escrever e colocar novos recursos.<br /> <span id="fullpost"> </span><br /> <blockquote> <span id="fullpost"><strong>Template </strong>(ou "modelo de documento") é um documento sem conteúdo, com apenas a apresentação visual (apenas cabeçalhos por exemplo) e instruções sobre onde e qual tipo de conteúdo deve entrar a cada parcela da apresentação — por exemplo conteúdos que podem aparecer no início e conteúdos que só podem aparecer no final.</span><br /> <span id="fullpost"><strong>Web templates</strong> (ou "modelos de página") são instrumentos utilizados para separar a apresentação do conteúdo em <a href="http://pt.wikipedia.org/wiki/Web_design">web design</a>, e para a produção massiva de documentos web. Os templates são interpretados por um "sistema de template". <strong>Fonte:</strong> <a href="http://pt.wikipedia.org/wiki/Template" target="_blank">Wikipedia</a></span></blockquote> <span id="fullpost"> Além da questão estética, um template otimizado pode influenciar positivamente na indexação pelos mecanismos de busca e fazer com que as páginas de um blog abram com maior velocidade e estabilidade. Possuindo boa navegabilidade, auxilia na fidelização dos leitores e no número de exibições de páginas, entre outras coisas.<br /> <ul> <li><a href="http://www.dicasblogger.com.br/2010/03/cuidados-com-o-layout-do-seu-blog.html">Cuidados com o layout do seu blog</a> </li> <li><a href="http://www.dicasblogger.com.br/2010/02/auto-paginacao-no-blogger.html">auto-paginação do Blogger</a> </li> <li><a href="http://www.google.com/support/webmasters/bin/answer.py?hl=br&answer=158541">Desempenho do site - Ajuda do Ferramentas do Google para webmasters</a> </li> <li><a href="http://thenextweb.com/google/2010/04/09/google-site-speed-search-ranking-factor/">Google Now Using Site Speed As A Search Ranking Factor</a> </li> </ul> Hoje em dia temos 4 opções de templates para o Blogger:<br /> <ol> <li>Designer do Modelo </li> <li>Modelos de layout (lançados em 2006) </li> <li>Modelos clássicos </li> <li>Templates criados pelos usuários </li> </ol> Todas estas opções usam em seu código-fonte HTML e CSS:<br /> <blockquote> <strong>HTML</strong> (acrônimo para a <a href="http://pt.wikipedia.org/wiki/L%C3%ADngua_inglesa">expressão inglesa</a> HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma <a href="http://pt.wikipedia.org/wiki/Linguagem_de_marca%C3%A7%C3%A3o">linguagem de marcação</a> utilizada para produzir <a href="http://pt.wikipedia.org/wiki/P%C3%A1gina_web">páginas na Web</a>.Fonte: <a href="http://pt.wikipedia.org/wiki/HTML" target="_blank">Wikipedia</a><br /> <strong>Cascading Style Sheets</strong> (ou simplesmente CSS) é uma <a href="http://pt.wikipedia.org/w/index.php?title=Linguagem_de_estilo&action=edit&redlink=1">linguagem de estilo</a> utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como <a href="http://pt.wikipedia.org/wiki/HTML">HTML</a> ou <a href="http://pt.wikipedia.org/wiki/XML">XML</a>. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.<strong>Fonte:</strong> <a href="http://pt.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank">Wikipedia</a></blockquote> <strong>Designer do Modelo</strong><br /> Lançados em março deste ano, estes são os novos modelos fornecidos pelo Blogger. São mais modernos, com várias opções  de plano de fundo e de colunas (sidebar) e são relativamente fáceis de usar, mas são pouco personalizáveis quanto às cores, fontes e instalação de hacks e de novos recursos via HTML - visto que o código é muito diferente dos modelos mais antigos.<br /> <ul> <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/03/designer-do-modelo-tutorial-em-video.html">Designer do modelo – tutorial em vídeo</a> </li> <li><a href="http://www.dicasblogger.com.br/2010/04/designer-de-modelo-correcoes-e-novos.html">Designer de Modelo – correções e novos temas</a> </li> <li><a href="http://www.dicasblogger.com.br/2010/03/como-criar-um-template-para-blogger.html">Como criar um template para Blogger / Blogspot</a> </li> </ul> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgevpj4nKWXKJ3XLpZCLcRLx22WPS-DiETFc_ZbCVmk5dS3u97EDArA9p6K1FKfjlsi4BOY0lPy7_PsJjqO9ogvm1roF-qpUS3R8Akwl7l0ZjaBdIwB5eLJoYu4l_Z9Ao7r45jAlVsKve5f/s1600-h/image%5B8%5D.png"><img alt="Designer do Modelo" border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtGKxsaynrnN74fRc9pv5HfvvJatVnEkRncojmfTMFoOXY6wtfO4H_DzvLSsL5sW9Y7JM9l7VLnm8vqHb4R4ZxIn-hg0mULmur8uOqQXXcGNKDcTLK7AfWj385S7PXBfn2_O81zgHPerqg/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin-left: 0px; margin-right: 0px;" title="Designer do Modelo" width="526" /></a><br /> <strong>Modelos de layout lançados em 2006</strong><br /> Quando o Google adquiriu o Blogger, a plataforma passou a se chamar <strong>Novo Blogger</strong> e seus templates passaram a ser em formato .XML. O mais famoso desta época é o <strong>Mínima</strong> – de onde partiu muitos dos modelos criados pelos usuários<br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipckiKCne40vZwdivczylre1DLQ3zCM7in09pya5BRVAOlv_g-2nma0Jr7iyUn33dKYsgHN3yMBZ3vp9ddzbbxHMXbWu-mCYAA557sM3K-0zo8y2S80IJ_MFR5XmE63t2rHoIUWV6ESIHW/s1600-h/image%5B30%5D.png"><img alt="Layouts de 2006" border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5mkPyt0C-0poELOV8zwG-2q4g0ozQzsxvacxYCo1uBkVi0g4pycKFCx42qMcW71JeSqaeVsjGjRso4bBNSnMkiNagqOQlGOsgL0AtkQKLH45NlTBYBOwAscUhQxOlM7qxop3IZVcxfDxT/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="Layouts de 2006" width="518" /></a><br /> <strong>Modelos Clássicos</strong><br /> Estes eu não cheguei a usar, mas pelo que eu vi só existe um modelo e é o usuário que deve customizá-lo através de HTML e CSS.<br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfEkUDFuk66LO7Kfdvpa0k3ELaFZp35FAqGFS6QJwgGz14oC5QqUHw83M1WWOEwyFf3zPNQssTRKH7c3Ln3pS-pVjcbs5KqBr0922C28zb-RiDnlYxxpqXzo6ww2h4Jb1hIJ0v7qOsEZfE/s1600-h/image%5B31%5D.png"><img alt="Modelos clássicos" border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisA7aBgS7TJCa6aL5k9F_h8wkWh7Ru9J27_4T_r2IvEyERc89orRfVBLJrHQMVs_qWND4-BSZ7TE3eBRks19nam86dvx-IZ19Knlrc9Es-EtYHd1tdrJVfXn7QVRA0g2cCY_m2a-zI3740/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="Modelos clássicos" width="518" /></a><br /> <strong>Templates criados pelos usuários</strong><br /> Estes são templates, geralmente baseados no Mínima, customizados e disponibilizados para download pelos próprios usuários do Blogger.<br /> Existem algumas modelos mais fáceis de usar - com fontes e cores personalizáveis - e outros que já vem “prontos” e que para alterá-los é preciso ter conhecimento em HTML e CSS. Os primeiros são os mais indicados para os novatos.<br /> <ul> <li><a href="http://www.templates.dicasblogger.com.br/" target="_blank">DB templates</a> </li> <li><a href="http://www.dicasblogger.com.br/2010/02/templates-para-blogger-blogspot.html">Templates para Blogger Blogspot</a> </li> </ul> <a href="http://www.templates.dicasblogger.com.br/" target="_blank"><img alt="DB templates" border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG4zixBH5Ux7StZfkdUXcnOFiswTBGv6sBAuW0C8Mihndc1E9LEqhjbB4N-DF6jIWwHEvx6SAwrPQ7h6Oh-EjMaGVy4zjYpMf4AEaUAhnuu43tsCUc_s3sXcZOjqzpQD9tx6UaWqU4sOvI/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="DB templates" width="518" /></a><br /> Se você, caro leitor, tem ambições maiores com o seu blog, é essencial entender CSS, HTML e SEO para  poder otimizar o template do seu blog e posicioná-lo melhor frente aos mecanismos de busca. Ou então, contratar alguém que possa fazer isso para você, pois já vi casos de blogs muito bons em matéria de conteúdo, com um número grande de posts no ar e mal indexados porquê os códigos e a apresentação visual do template não estavam organizados adequadamente.<br /> <ul> <li><a href="http://www.pt-br.html.net/tutorials/html/" target="_blank">Curso básico de HTML</a> – HTML.net </li> <li><a href="http://www.pt-br.html.net/tutorials/css/" target="_blank">Curso básico de CSS</a> – HTML.net </li> <li><a href="http://www.icebreaker.com.br/search/label/Blogger%20SEO?max-results=60" target="_blank">Blogger SEO</a> – Icebreaker </li> <li><a href="http://www.dicasblogger.com.br/search/label/SEO" target="_blank">DB SEO</a> – Dicas Blogger </li> <li><a href="http://www.ferramentasblog.com/search/label/SEO?max-results=10" target="_blank">FB SEO</a> – Ferramentas Blog</li> <li><a href="http://www.dicasblogger.com.br/2009/08/produtos-e-servicos.html" target="_blank">DB – produtos e serviços</a> </li> </ul> No próximo post vou explicar, detalhadamente, como trocar os templates do Blogger.<br /> </span>

Opções de templates para Blogger

O template é uma das partes mais importantes de um blog. Eu já escrevi sobre isso em outros posts, mas repetir nunca é demais. O template –...

Continue Lendo >>