Google privilegia conteúdo original e de qualidade

<img align="right" alt="google" border="0" height="120" src="http://lh3.ggpht.com/_EttevOw0KeE/TUS7EwYHq4I/AAAAAAAALvY/_cCWP8HK_Wo/google%5B10%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: right; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="google" width="120" />Ontem, vários sites noticiaram uma importante mudança no algoritmo do Google, que irá priorizar páginas com conteúdo original nos resultados de busca. <br /> Essa informação foi confirmada por Matt Cutts, engenheiro-chefe do Google, em seu blog pessoal e no blog oficial do Google. <br /> <ul> <li><a href="http://www.mattcutts.com/blog/algorithm-change-launched/" target="_blank">Algorithm change launched</a> </li> <li><a href="http://googleblog.blogspot.com/2011/01/google-search-and-search-engine-spam.html">Google search and search engine spam</a></li> </ul> Segundo o <a href="http://tecnologia.ig.com.br/noticia/2011/01/28/google+ajusta+algoritmo+para+priorizar+conteudo+original+na+busca+10355690.html" target="_blank">IG Tecnologia</a>:<br /> <blockquote> "Como o spam na web diminuiu ao longo do tempo, a atenção agora está em sites com conteúdo superficial ou que copiam outros", diz Matt Cutts, engenheiro-chefe do Google.</blockquote> Já no <a href="http://oglobo.globo.com/tecnologia/mat/2011/01/28/google-lanca-mudancas-no-algoritmo-de-busca-923637170.asp" target="_blank">O Globo</a> online, encontrei:<br /> <blockquote> A Google lançou uma alteração em seu algoritmo de buscas na web cujo efeito será elevar a classificação de sites que publiquem conteúdo original em detrimento de outros que simplesmente copiem esse conteúdo. <br /> Com isso, esses sites originais aparecerão antes nos resultados de busca, para benefício dos internautas, que certamente preferem obter informações direto da fonte. </blockquote> Isso quer dizer que sites que copiam e publicam artigos de outros ou mesmo os que possuem um conteúdo superficial e de baixa qualidade, sofrerão quedas no ranking de resultados em buscas feitas através do Google.<br /> Explicando mais claramente, será o fim dos kibadores ;)<br /> <ol> <li><a href="http://oglobo.globo.com/tecnologia/mat/2011/01/28/google-lanca-mudancas-no-algoritmo-de-busca-923637170.asp" target="_blank">Google lança mudanças no algoritmo de busca</a> – Digital e Mídia </li> <li><a href="http://tecnologia.ig.com.br/noticia/2011/01/28/google+ajusta+algoritmo+para+priorizar+conteudo+original+na+busca+10355690.html" target="_blank">Google ajusta algoritmo para priorizar conteúdo original na busca</a> – IG Tecnologia </li> <li><a href="http://www.seroundtable.com/google-content-spam-rollout-12872.html" target="_blank">Confirmed: Google's Content Farm Algorithm Live! Sites Are Dropping!</a> – Search Engine </li> <li><a href="http://www.mattcutts.com/blog/algorithm-change-launched/" target="_blank">Algorithm change launched</a> -  Matt Cutts</li> </ol> Acredito que essa mudança,  só vem confirmar a preocupação da gigante de Mountain View em oferecer o que há de melhor na internet. E, para quem - como eu - já lutou muito contra o plágio na Blogosfera, traz alívio e a gratificante sensação de justiça.

Google privilegia conteúdo original e de qualidade

Ontem, vários sites noticiaram uma importante mudança no algoritmo do Google, que irá priorizar páginas com conteúdo original nos resultados...

Continue Lendo >>

Como colocar o contador Histats no Blogger

<img align="right" alt="histats-counter" border="0" height="167" src="http://lh4.ggpht.com/_EttevOw0KeE/TUKxLcqUAVI/AAAAAAAALuc/j__tPQh0Oxc/image%5B12%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: right; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Contador do Histats" width="201" />Após fazer um post sobre o Histats - <a href="http://www.dicasblogger.com.br/2011/01/histats-web-analytics-em-tempo-real.html">Histats - web analytics em tempo real</a> - notei que vários leitores tiveram dificuldade para instalar o código de rastreamento. Sendo assim, resolvi fazer um tutorial explicando, passo-a-passo, como configurar o Histats.<br /> <strong><span style="color: red; font-size: small;">Como se registrar no Histats</span></strong><br /> <ol> <li>Para fazer o cadastro, <a href="http://www.histats.com/viewstats/?cnt=p_reg" target="_blank">clique aqui</a>. Preencha todos os campos solicitados. </li> <li>Na página seguinte, coloque os seus dados e configure o fuso horário. </li> <li>Leia e aceite os termos de uso </li> <li>Aguarde um email de confirmação do registro </li> <li>Caso você não receba o email, verifique a caixa de spam </li> <li>Clique no link de confirmação, volte ao site e faça login</li> </ol> <strong><span style="color: red; font-size: small;">Como adicionar um site ou blog</span></strong><br /> <ol> <li>Clique em <strong>add a website </strong>e preencha os campos com os dados do blog </li> <li>Ajuste o fuso horário e os demais dados. </li> <li>Em <strong>Stats visibility</strong>, escolha se as estatísticas ficarão visíveis aos visitantes </li> <li>Aparecerá então o painel de controle. Clique sobre o endereço do blog</li> </ol> <strong><span style="color: red; font-size: small;">Como colocar o contador do Histats no blog</span></strong><br /> Para que o Histats consiga medir os dados de acesso do seu blog, será preciso usar um código de rastreamento. Ao clicar no endereço do blog, aparecerá um sumário. Clique na aba “counter code” para configurar o contador de acessos.<br /> <img alt="histats-code" border="0" height="236" src="http://lh4.ggpht.com/_EttevOw0KeE/TUKxPG6B_II/AAAAAAAALvE/ZiWx39n854M/c%C3%B3digo%5B6%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="código de rastreamento" width="452" /><br /> Na janela seguinte, clique em “add new counter” O Histats oferece muitos modelos de contadores. Escolha um deles, clicando sobre o modelo desejado. Depois, configure o que deverá ser mostrado no display do contador e clique em “save”<br /> <img alt="histats-counter" border="0" height="192" src="http://lh3.ggpht.com/_EttevOw0KeE/TUKxP4GFo4I/AAAAAAAALu4/U_DrTv88zmI/image%5B39%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Configurações do contator" width="452" /><br /> Na próxima página, clique sobre o número do contador e copie o código de rastreamento, que aparecerá logo abaixo.<br /> No Blogger, entre em “design” e clique em “adicionar gadget”. Escolha o gadget “html/javascript”, cole o código do Histats e salve.<br /> <strong><span style="color: red; font-size: small;">Como usar um contador invisível</span></strong><br /> <ol> <li>Clique na aba “counter code”>add new counter. </li> <li>Procure pela aba “hidden” </li> <li>Clique sobre “invisible counter” </li> <li>Clique em “save” </li> <li>Clique sobre o número do contador e copie o código </li> <li>Cole no Blogger</li> </ol> <strong><span style="color: red; font-size: small;">As principais ferramentas do Histats</span></strong><br /> Para verificar as estatísticas, basta navegar pela barra lateral esquerda.<br /> <img alt="histats-panel-control" border="0" height="232" src="http://lh4.ggpht.com/_EttevOw0KeE/TULAg7JaorI/AAAAAAAALvA/eoQb2MIf9Tc/comandos%5B2%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Barra de ferramentas" width="452" /><br /> Vou explicar o que quer dizer cada link da barra de ferramentas do Histats:<br /> <ol> <li>Summary – mostra um resumos das estatísticas </li> <li>Users online – mostra os usuários online em tempo real </li> <li>Dayly stats – estatísticas do dia, em tempo real </li> <li>Monthly by day/month – estatísticas mês a mês </li> <li>Last 120 days – estatísticas dos últimos 120 dias </li> <li>Sources Overview – resumos das fontes de referência </li> <li>Referring Sites – sites que mais enviaram visitantes </li> <li>Search Engines – motores de busca e palavras-chave </li> <li>browsers / os / lang / – tipo de navegador, sistema operacional e idioma dos visitantes </li> <li>Geolocation – localização geográfica dos visitantes  </li> <li>Traffic by Url – tráfego por uRL </li> <li>Traffic by Title – tráfego por título </li> <li>Click count  - cliques no contador</li> </ol> Em <strong>usuários online</strong>, dá para descobrir muita coisa importante. Notem que existe um ícone com play e pause para controle das visualizações.<br /> Em <strong>search engine</strong>, aparecem as palavras-chaves que foram usadas pelos visitantes - através dos motores de busca - para chegarem até o blog. É aí que vocês devem prestar muita atenção, a fim de saberem como o visitante se comporta. <br /> <img alt="search-engine" border="0" height="160" src="http://lh6.ggpht.com/_EttevOw0KeE/TUL_inyJ_oI/AAAAAAAALvU/8MlVkdLlKKg/image%5B6%5D.png?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="search engine" width="450" /><br /> Basicamente é isso. Mexam no Histats, façam testes e descubram o quanto esta ferramente pode ser útil para potencializar seu blog.<br /> <table border="0" cellpadding="2" cellspacing="4" style="width: 560px;"> <tbody> <tr> <td valign="top" width="266"><a href="http://twitter.com/dicas_blogger/status/30714911701082113" target="_blank"><img alt="RT" border="0" height="94" src="http://lh4.ggpht.com/_EttevOw0KeE/TULF-cwUwII/AAAAAAAALvM/UdAflwwaS0A/image%5B28%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="RT @deflima" width="287" /></a></td> <td valign="top" width="294"><a href="http://twitter.com/Mrs_In/status/30762942249041920" target="_blank"><img alt="image" border="0" height="140" src="http://lh3.ggpht.com/_EttevOw0KeE/TULF_R-Pg1I/AAAAAAAALvQ/F2BH8SCcDcI/image%5B27%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Tweet do @Mrs_In" width="278" /></a></td></tr> </tbody></table>

Como colocar o contador Histats no Blogger

Após fazer um post sobre o Histats - Histats - web analytics em tempo real - notei que vários leitores tiveram dificuldade para instalar o ...

Continue Lendo >>

Histats - web analytics em tempo real

<img align="right" alt="web-analytics" border="0" height="176" src="http://lh3.ggpht.com/_EttevOw0KeE/TUG2XgjDU4I/AAAAAAAALuI/OFFcKtRVLVA/image%5B19%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: right; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="web-analytics" width="200" />Eu gosto tanto de testar serviços do tipo contador de estatísticas, que aqui no blog tem até um <a href="http://www.dicasblogger.com.br/search/label/Contadores" target="_blank">marcador</a> somente para posts com esse tema. <br /> Para quem não sabe, <em><strong>web analytics</strong> é o processo de medição, coleta, análise e a produção de relatórios de dados de navegação e interação com o objetivo de entender e otimizar o uso dos sites e páginas na Internet (<a href="http://pt.wikipedia.org/wiki/Web_analytics" target="_blank">Wikipedia</a>)</em><br /> Parte da boa indexação deste blog, aconteceu graças à análise sistemática dos dados de navegação, especialmente através do que os visitantes digitavam nos mecanismos de busca (Google, Bing e etc) para chegarem até aqui.<br /> O mais famoso e respeitado serviço de web analytics continua sendo o <strong>Google Analytics</strong>, mas ele tem uma limitação que muito me incomoda: não é possível saber exatamente a frase digitada pelo visitante e nem o posicionamento do post no ranking do Google. (se alguém souber como fazer isso, por favor, me avise)<br /> Por causa disso, sempre tive um segundo contador. Usei por um bom tempo o <strong>Histats</strong>, mas ele também tinha limitações. Depois passei para o inesquecível <strong>Woopra</strong>, só que ele passou a ser pago e muito caro. Experimentei comprar uma licença do <strong>GetClicky</strong>, mas depois de quase 1 ano, notei uma discrepância de valores ( para menos) se comparado ao Analytics. Não renovei a licença e fiquei órfã.<br /> <ul> <li><a href="http://www.dicasblogger.com.br/2009/12/um-poderoso-contador-para-seu-blog.html">GetClicky - um poderoso contador para seu blog</a> </li> <li><a href="http://www.dicasblogger.com.br/2009/12/um-poderoso-contador-para-seu-blog.html">GetClicky - um poderoso contador para seu blog</a> </li> <li><a href="http://www.dicasblogger.com.br/2010/02/como-colocar-o-analytics-no-blog.html">Como colocar o Google Analytics no Blogger</a></li> </ul> Ontem resolvi visitar novamente o <a href="http://www.histats.com/" target="_blank">Histats</a> e qual não foi minha surpresa ao descobrir que o site melhorou muito e que agora apresenta as estatísticas em tempo real, além de mostrar exatamente o que foi digitado e como os posts aparecem no Google.<br /> Vejam no exemplo abaixo, os dados de acesso via Histats. <br /> <img alt="histats" border="0" height="161" src="http://lh4.ggpht.com/_EttevOw0KeE/TUG6tNq6vXI/AAAAAAAALuM/vNRz1mi58bk/image%5B28%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="palavras-chave" width="452" /><br /> Percebam que ao lado da palavra-chave, existe uma setinha. Clicando nela, chego em:<br /> <img alt="histats" border="0" height="226" src="http://lh3.ggpht.com/_EttevOw0KeE/TUG6uksLjDI/AAAAAAAALuQ/diRqVJKBZTo/image%5B37%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="resultados" width="452" /><br /> Ou seja, sei exatamente o que o visitante escreveu e qual a posição do blog.<br /> Além disso, ainda podemos verificar o número de usuários online, de onde eles vieram, quanto tempo ficaram no blog, se clicaram em outros links e etc, em tempo real:<br /> <img alt="histats" border="0" height="209" src="http://lh5.ggpht.com/_EttevOw0KeE/TUG6vwpAbGI/AAAAAAAALuU/I4_NHZE0dJI/image%5B54%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="usuários online" width="452" /><br /> E tudo isso é oferecido GRATUITAMENTE – completely free!<br /> <img alt="histats" border="0" height="49" src="http://lh4.ggpht.com/_EttevOw0KeE/TUG6whikHKI/AAAAAAAALuY/hrxJaVsUNuM/image%5B63%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="completely free" width="452" /><br /> Saber o comportamento dos visitantes, os posts mais acessados, o rank de indexação e etc, é obrigatório para quem deseja profissionalizar seu blog e/ou monetizá-lo. Não tem como escapar disso. Mãos à obra! Para fazer o registro,  <a href="http://www.histats.com/viewstats/?cnt=p_reg" target="_blank">clique aqui</a> e para aprender a usa´-lo com o Blogger, acesse <a href="http://www.dicasblogger.com.br/2011/01/colocar-contador-histats-no-blogger.html">Como colocar o contador Histats no Blogger</a>

Histats - web analytics em tempo real

Eu gosto tanto de testar serviços do tipo contador de estatísticas, que aqui no blog tem até um marcador somente para posts com esse tema. ...

Continue Lendo >>

Palestra sobre profissionalização de blogs

<div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="http://2.bp.blogspot.com/_EttevOw0KeE/TUCOIZuCfhI/AAAAAAAALuE/emk_hymbBTE/s1600/blog_compose.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://2.bp.blogspot.com/_EttevOw0KeE/TUCOIZuCfhI/AAAAAAAALuE/emk_hymbBTE/s1600/blog_compose.png" /></a></div> Durante a Campus Party 4, aconteceu uma palestra muito interessante sobre profissionalização de blogs,  ministrada pelo Thiago Mobilon (@<a href="http://twitter.com/mobilon" target="_blank">mobilon</a>), fundador e editor-chefe do <a href="http://tecnoblog.net/" target="_blank">Tecnoblog</a> – um dos blogs de tecnologia mais importantes do Brasil.<br /> <br /> Pra nossa sorte, a palestra foi gravada  em vídeo e disponibilizada no site Ustream.<br /> <br /> Thiago compartilha suas experiências como blogueiro, apontando os caminhos para a profissionalização. Dentre as várias dicas de estruturação, ele fala sobre a importância de um  design harmônico e organizado, com identidade visual exclusiva.<br /> <br /> Não deixem de conferir, pois trata-se de um blogueiro que pode falar com propriedade sobre o tema e que tem muito para ensinar. #ficadica<br /> <br /> <div class="wlWriterEditableSmartContent" id="scid:5737277B-5D6D-4f48-ABFC-DD9C333F4C5D:c553bf8c-7987-434a-99b5-3f1333245b65" style="display: block; float: none; margin: 0px auto; padding: 0px; width: 480px;"> <div> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="296" width="480"> <param name="flashvars" value="vid=12152271&autoplay=false" /> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.ustream.tv/flash/viewer.swf" /> <embed flashvars="vid=12152271&autoplay=false" width="480" height="296" allowfullscreen="true" allowscriptaccess="always" src="http://www.ustream.tv/flash/viewer.swf" type="application/x-shockwave-flash"></embed> </object></div> <div style="clear: both; font-size: 0.8em; text-align: center; width: 480px;"> Profissionalização de blogs, por Thiago Mobilon - Campus Party 2011 PARTE 1</div> </div> <div class="wlWriterEditableSmartContent" id="scid:5737277B-5D6D-4f48-ABFC-DD9C333F4C5D:c9e4cebe-b132-46fe-8804-338835bb75f4" style="display: block; float: none; margin: 0px auto; padding: 0px; width: 480px;"> <div> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="386" width="480"> <param name="flashvars" value="vid=12152753&autoplay=false" /> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.ustream.tv/flash/viewer.swf" /> <embed flashvars="vid=12152753&autoplay=false" width="480" height="386" allowfullscreen="true" allowscriptaccess="always" src="http://www.ustream.tv/flash/viewer.swf" type="application/x-shockwave-flash"></embed> </object></div> <div style="clear: both; font-size: 0.8em; text-align: center; width: 480px;"> Profissionalização de blogs, por Thiago Mobilon - Campus Party 2011 PARTE 2</div> </div> <div align="center"> <b></b></div> <div align="center"> <b>Fontes:</b> <a href="http://www.codigosblog.com.br/2011/01/como-profissionalizar-o-seu-blog-por.html" target="_blank">Códigos Blog</a> e <a href="http://www.ustream.tv/user/RCastrezana" target="_blank">RCastrezana</a> (Ustream)</div>

Palestra sobre profissionalização de blogs

Durante a Campus Party 4, aconteceu uma palestra muito interessante sobre profissionalização de blogs,  ministrada pelo Thiago Mobilon...

Continue Lendo >>

Como colocar recursos nos posts via HTML

<img align="left" alt="filetype_html" border="0" height="97" src="http://lh5.ggpht.com/_EttevOw0KeE/TUBOWXI_RsI/AAAAAAAALtY/L1b0bXdUWpU/filetype_html%5B6%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: left; margin: 0px 5px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="filetype_html" width="97" />Antes de mais nada, quero adiantar que este post é mais voltado a usuários que já possuem alguma noção sobre HTML e CSS. A idéia é auxiliá-los a colocar novos recursos em seus templates, mostrando onde ficam alguns códigos essenciais e exclusivos do Blogger.<br /> Abordaremos os códigos que são responsáveis pela área de postagem, através das “divs”, que são tags HTML que delimitam espaços dentro de um layout.<br /> <br /> <h2 style="text-align: center;"> <b><span style="color: red; font-size: large;"><a href="http://www.dicasblogger.com.br/2013/04/novidades-novo-editor-html-no-blogger_10.html" target="_blank">Saiba tudo sobre o novo editor HTML do Blogger</a></span></b></h2> <div style="text-align: center;"> <b><a href="http://www.dicasblogger.com.br/2013/04/novidades-novo-editor-html-no-blogger_10.html" target="_blank">clique aqui</a></b></div> <blockquote> Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id. <strong>Fonte:</strong> <a href="http://pt-br.html.net/tutorials/css/lesson8.php" target="_blank">HTML.net</a></blockquote> Para incluir anúncios, mensagens, botões do Twitter  ou quaisquer outros códigos/recursos nas áreas que englobam os posts, deve-se seguir estes critérios:<br /> <blockquote> <strong><span style="color: red;">NA PRIMEIRA LINHA DO RODAPÉ DOS POSTS</span></strong><br /> <div class='post-footer-line post-footer-line-1'><br /> <span style="background-color: yellow;">Código</span><br /> </div><br /> <strong><span style="color: red;">NA SEGUNDA LINHA DO RODAPÉ DOS POSTS</span></strong><br /> <div class='post-footer-line post-footer-line-2'><br /> <span style="background-color: yellow;">Código</span><br /> </div><br /> <strong><span style="color: red;">ABAIXO DO TÍTULO</span></strong><br /> <span style="background-color: yellow;">Código</span><br /> <div class='post-header-line-1'><br /> <strong><span style="color: red;">ENTRE O TÍTULO E OS POST</span></strong><br /> <div class='post-header-line-1'><br /> <span style="background-color: yellow;">Código</span><br /> <strong><span style="color: red;">NO FINAL DO POST</span></strong><br /> <span style="background-color: yellow;">Código</span><br /> <div class='post-footer'></blockquote> Isso significa que, por exemplo, se eu quiser colocar um anúncio entre o título do post e o texto, eu devo procurar dentro do HTML do template por:<br /> <blockquote> <div class='post-header-line-1'></blockquote> E colocar o código do anúncio logo embaixo dessa linha. Vejam estas imagens:<br /> <img alt="código-anuncios" border="0" height="201" src="http://lh6.ggpht.com/_EttevOw0KeE/TUBREtTfd1I/AAAAAAAALto/nGjg7nN_FAo/c%C3%B3digo-anuncios%5B2%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Inserindo o código" width="452" /><br /> <img alt="anuncios" border="0" height="296" src="http://lh4.ggpht.com/_EttevOw0KeE/TUBOY0NoUWI/AAAAAAAALtg/4_tH6TPW6QY/anuncios%5B3%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Resultado" width="452" /><br /> Percebam que o código do anúncios foi inserido entre o título e o post, ou seja, logo embaixo de <div class='post-header-line-1'><br /> Para encontrar as divs dentro do HTML, é preciso marcar a caixa “expandir modelos de widgets” e usar o Ctrl+F do teclado.<br /> <img alt="procurando-as-divs" border="0" height="226" src="http://lh4.ggpht.com/_EttevOw0KeE/TUBOaCRzacI/AAAAAAAALtk/XKnxrUZ-aog/procurando-as-divs%5B5%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Procurando as DIVs" width="452" /><br /> Passemos agora para uma outra imagem, também aqui do Dicas Blogger:<br /> <img alt="classes" border="0" height="228" src="http://lh6.ggpht.com/_EttevOw0KeE/TUBRGA35UVI/AAAAAAAALts/DlRH_C6XL10/classes%5B10%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="<spans>" width="452" /><br /> A área onde aparecem o meu nome, data e marcadores corresponde a <em><div class='post-header-line-1'></em> e fica logo embaixo do título da postagem. Nesse caso, ao contrário do anterior, o código foi inserido ANTES da linha 'post-header-line-1'.<br /> Já a área onde aparecem os ícones de compartilhamento e os comentários, correpondem a <div class='post-footer-line post-footer-line-1'>, que é a primeira linha do rodapé dos posts, também chamado de <strong>post-footer</strong>.<br /> Para modificar a disposição do nome do autor, marcadores, data e link para os comentários, basta ir movendo os códigos correspondentes, dentro das divs.<br /> <blockquote> <strong><span style="color: red;">AUTOR DOS POSTS</span></strong><br /> <span class='post-author'> <br />           <b:if cond='data:top.showAuthor'> <br />             <data:top.authorLabel/> <data:post.author/> <br />           </b:if> <br />         </span>    <br /> <strong><span style="color: red;">MARCADORES</span></strong><br /> <span class='post-labels'> <br />           <b:if cond='data:post.labels'> <br />             <data:postLabelsLabel/> <br />             <b:loop values='data:post.labels' var='label'> <br />               <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if> <br />             <b:if cond='data:blog.pageType == &quot;item&quot;'> <br /> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name +  &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/> <br /> </b:if></b:loop> <br />           </b:if> <br />         </span><br /> <strong><span style="color: red;">A DATA</span></strong><br /> <b:if cond='data:post.dateHeader'><br /> <span class='date-header'>em <data:post.dateHeader/></span><br /> </b:if><br /> <span style="color: red;"><strong>COMENTÁRIOS</strong></span><br /> <span class='post-comment-link'> <br />     <b:if cond='data:blog.pageType != &quot;item&quot;'> <br />     <b:if cond='data:post.allowComments'> <br />     <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <br />     <b:if cond='data:post.numComments == 1'>1 Comentário <br />     <b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> </b:if> </a> <br />     </b:if> <br />     </b:if> <br />     </span></blockquote> Vamos para um exemplo prático. Supondo que eu queira colocar os marcadores logo abaixo do título das postagens. Nesse caso, eu irei deslocar o código dos marcadores, para cima da div <div class='post-header-line-1'> <br /> <img alt="exemplo" border="0" height="258" src="http://lh3.ggpht.com/_EttevOw0KeE/TUBWt1dXGwI/AAAAAAAALtw/LLSyRyvKILU/exemplo%5B3%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="exemplo" width="452" /><br /> Para aplicar estilos em CSS, é só encontrar o seletor de cada um deles. Exemplo:<br /> <blockquote> <span class='post-comment-link'></blockquote> correspondente:<br /> <blockquote> .comment-link</blockquote> Claro que tudo isso irá variar de template para template. O segredo é, usando o Crtl+F, procurar a linha de códigos que mais se aproxima das que postei aqui e testar SEMPRE em um blog de testes, para evitar de fazer bobagem no blog principal.<br /> Acessem os artigos abaixo, que mostrarm ótimos recursos que podem ser empregados, usando o tutorial de hoje:<br /> <ul> <li><a href="http://www.dicasblogger.com.br/2010/02/tweetmeme-botao-de-retweet-blogger.html">TweetMeme- Inserindo botão de Retweet no Blogger</a> </li> <li><a href="http://www.dicasblogger.com.br/2010/09/como-colocar-o-botao-do-facebook-no.html">Como colocar o botão do Facebook no Blogger</a> </li> <li><a href="http://www.dicasblogger.com.br/2010/03/topsy-outro-botao-de-rt-para-o-seu-blog.html">Topsy – outro botão de RT para o seu blog</a> </li> <li><a href="http://www.dicasblogger.com.br/2010/01/mensagens-no-rodape-dos-posts.html">Mensagens no rodapé dos posts</a> </li> <li><a href="http://www.dicasblogger.com.br/2008/05/anuncios-nas-postagens-do-blogger.html">Anúncios nas postagens do Blogger</a> </li> <li><a href="http://www.dicasblogger.com.br/2010/04/botao-share-this-compartilhe-redes.html">Botões para compartilhar posts nas redes sociais</a> </li> </ul>

Como colocar recursos nos posts via HTML

Antes de mais nada, quero adiantar que este post é mais voltado a usuários que já possuem alguma noção sobre HTML e CSS. A idéia é auxiliá-l...

Continue Lendo >>

Bitw.in Sorteios – Twitter e Google Buzz

<img align="left" alt="bitw.in" border="0" height="90" src="http://lh3.ggpht.com/_EttevOw0KeE/TT4MkwoJTjI/AAAAAAAALtE/QKM20qM96TA/LOGO%5B12%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: left; margin: 3px 18px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="bitw.in" width="87" />Recentemente, foi lançado o <a href="http://bitw.in/sorteios/" target="_blank">Bitw.in Sorteios</a>. Um site com uma função muito simples e objetiva: Realizar sorteios poderosos no twitter e no Google Buzz, permitindo a você ter mais controle sobre quem pode participar do seu Sorteio de forma simples e prática. <br /> Para utilizar o <a href="http://bitw.in/sorteios/" target="_blank">Bitw.in Sorteios</a>, entre na página inicial e clique em <b>Criar Sorteio</b>, faça login através de sua conta no Bitw.in, Twitter, Google Buzz ou Facebook e defina um titulo para o seu sorteio, a quantidade de sorteados, o que o participante deve fazer para participar do seu sorteio e as demais opções, que são completamente opcionais, como agendar um sorteio, ignorar determinados usuários do sorteio e postar uma mensagem logo após a completa realização do sorteio. <br /> Vale ressaltar que, por usar novas tecnologias, ao preencher o formulário e clicar no ‘Criar Sorteio’, deve-se aguardar alguns instantes enquanto o sistema processa o Sorteio, terminando após o redirecionamento para a página de resultados.<br /> <img alt="bitw.in" border="0" height="229" src="http://lh6.ggpht.com/_EttevOw0KeE/TT4MmRqCimI/AAAAAAAALtI/eUKqqsLFJBA/image%5B8%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="bitw.in-sorteios" width="452" /><br /> Se você quiser ainda mais personalização, pode usá-lo junto ao <a href="http://bitw.in/dominios/" target="_blank">Bitw.in Dominios</a>, que permite que você tenha um encurtador de urls em endereço personalizado, como no caso do Encurtador pessoal <a href="http://fjmota.tk/">http://fjmota.tk</a> .<br /> O Sistema foi criado por mim, e quaisquer dúvidas serão respondidas nos Comentários.<br /> <div style="background: #efefef; border-bottom: #ccc 1px solid; border-left: #ccc 1px solid; border-right: #ccc 1px solid; border-top: #ccc 1px solid; color: #7b7c7d; font-family: arial; font-size: 100%; margin-top: 4px; padding-bottom: 2px; padding-left: 5px; padding-right: 2px; padding-top: 2px; text-align: left; width: 99%;"> <strong>Sobre o autor:</strong> Fernando Jorge Mota (@<a href="http://twitter.com/#!/fjorgemota" target="_blank">fjorgemota</a>) tem 15 anos, é estudante, programador, editor do <a href="http://www.blogueirosnaweb.com/" target="_blank">Blogueiros na Web</a> e criador do encurtador de URLs <a href="http://bitw.in/" target="_blank">Bitw.in</a> </div>

Bitw.in Sorteios – Twitter e Google Buzz

Recentemente, foi lançado o Bitw.in Sorteios . Um site com uma função muito simples e objetiva: Realizar sorteios poderosos no twitter e no ...

Continue Lendo >>

Aprenda a mexer em códigos facilmente

<img align="right" alt="notepad" border="0" height="100" src="http://lh4.ggpht.com/_EttevOw0KeE/TTxa2rItqaI/AAAAAAAALsk/QfFwRU6igk8/notepad%5B6%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: right; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="notepad" width="100" />Hoje eu vou dar uma dica de ouro pra quem gosta de mexer com códigos em geral, seja HTML, CSS, javascript e etc, mas que também serve para quem precisa apenas fazer edições nos códigos dos gadgets <br /> Trata-se do aplicativo <strong><span style="color: red;">Notepad++</span></strong>, um editor de textos cheio de recursos e que trabalha com diversas linguagens de programação.<br /> <blockquote> <em>Notepad++ é um editor de texto e códigos fonte completo que suporta as mais diversas linguagens de programação e, sendo assim, uma ótima alternativa ao bloco de notas. <br />Dessa forma, com uma ferramenta mais avançada e versátil que outros editores de texto, você tem suporte às linguagens C, C++, Java, C#, XML, HTML, PHP, Javascript, ASCII art, doxygen, ASP, VB/VBS, SQL, Objective-C, CSS, Pascal, Perl, Python, Lua, TeX, TCL, Assembler, Ruby, Lisp, Scheme, Properties, Diff, Smalltalk, Postscript, VHDL, Ada, Caml, AutoIt, KiXtart, Matlab, Verilog, Haskell e InnoSetup. Fonte: <a href="http://www.baixaki.com.br/download/notepad-.htm" target="_blank">Baixaki</a></em></blockquote> Um dos recursos que pode ser muito útil para qualquer blogueiro, independente do nível de conhecimento, é o de substituir trechos dos códigos de forma automática.<br /> Vamos para um exemplo. No post anterior - <a href="http://www.dicasblogger.com.br/2011/01/pop-up-assine-os-feeds.html">Pop-up assinar feeds</a> – divulguei um código javascript para colocar uma janela pop-up, incentivando os visitantes a assinarem os feeds do blog. Nesse código, é preciso substituir a frase “nomedofeed” três vezes. Experimente encontrar tal frase no meio daquele código imenso, quando já foi colado no gadget HTML/javascript. Complicado, né?<br /> Pra quem não tem o Notepad, um Crtl+F do teclado ajuda, mas mesmo assim é necessário digitar o nome do feed 3 vezes. Quando forem 20, 30 substituições – como em um template, por exemplo -  o gasto de tempo pode ser grande.<br /> Agora vejam na imagem abaixo o que o Notepad++ é capaz de fazer.<br /> <img alt="notepad-substituir" border="0" height="330" src="http://lh4.ggpht.com/_EttevOw0KeE/TTxYOTImkRI/AAAAAAAALsg/91m3OimZmjg/notepad-substituir%5B3%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="notepad-substituir" width="502" /><br /> Sim, com poucos cliques ele substitui trechos de códigos de uma só vez. No exemplo acima, escolhi substituir “nomedofeed”, pela URL final do feed do Dicas Blogger.<br /> Para fazer substituições de trechos dos códigos, siga estes passos:<br /> <ol> <li>Instale o Notepad++ </li> <li>Abra o aplicativo e cole o código que será modificado </li> <li>Dê um Crtl+F com o teclado </li> <li>Clique na guia “substituir” </li> <li>Em “localizar” escreva o trecho que deverá ser substituído </li> <li>Em “substitua por”, escreva o novo trecho </li> <li>Clique em “Substituir todos” </li> </ol> Depois, é só copiar o código já modificado e colar no gadget HTML/javascript.<br /> Para baixar o Notepad++, acesse um dos links abaixo:<br /> <ol> <li>Notepad++ – <a href="http://notepad-plus-plus.org/release/5.8.6" target="_blank">site do desenvolvedor</a> </li> <li>Notepad++ – <a href="http://www.baixaki.com.br/download/notepad-.htm" target="_blank">Baixaki</a> </li> <li>Notepad++ portable – <a href="http://www.baixaki.com.br/download/notepad-portable.htm" target="_blank">Baixaki</a> </li> </ol> Para editar templates, é só colar o código HTML inteiro no Notepad++, fazer as alterações e salvar no formato .XML; mas para isso eu ainda prefiro o próprio editor do Blogger que me permite ir editando e visualizando as mudanças ;)

Aprenda a mexer em códigos facilmente

Hoje eu vou dar uma dica de ouro pra quem gosta de mexer com códigos em geral, seja HTML, CSS, javascript e etc, mas que também serve para q...

Continue Lendo >>

Pop-up assinar feeds

<img align="right" alt="rss" border="0" height="94" src="http://lh6.ggpht.com/_EttevOw0KeE/TTrY_hmt01I/AAAAAAAALsM/zQ1nB0vb9m8/rss%5B10%5D.png?imgmax=800" style="background-image: none; border-width: 0px; display: inline; float: right; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="rss" width="105" />Depois que escrevi o post <a href="http://www.dicasblogger.com.br/2011/01/como-ter-mais-assinantes-de-feeds.html">Como conseguir mais assinantes de feeds</a>, vários leitores se mostraram interessados em colocar uma janela do tipo <a href="http://pt.wikipedia.org/wiki/Pop-up" title="O que é pop-up">pop-up</a> em seus blogs, com o objetivo de convidar os visitantes a assinarem os feeds. Como eu disse no outro post, não gosto e sou contra, mas consegui encontrar um pop-up discretíssimo.<br /> <br /> Trata-se de mais uma das artes da Clau, do Mundo Blogger. No script original da Clau, o pop-up aparece com um ícone preto. Para copiar o código, acesse <a href="http://www.mundoblogger.com.br/2010/03/box-flutuante-assinar-feed-via-email.html">Box Flutuante Assinar Feed via Email</a>.  Fiz algumas modificações - com a autorização dela -  e vou ensiná-los como colocar a janela pop-up em seus blogs.<br /> <div class="separator" style="clear: both; text-align: center;"> </div> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/_EttevOw0KeE/TTv_LtaAKCI/AAAAAAAALsc/ngB3D-lRqm4/s1600/pop-up-feed.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://4.bp.blogspot.com/_EttevOw0KeE/TTv_LtaAKCI/AAAAAAAALsc/ngB3D-lRqm4/s1600/pop-up-feed.png" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">pop-up assine os feeds</td></tr> </tbody></table> <br /> Copie o código abaixo e cole no gadget “HTML/javascript” Antes de salvar , substitua <span style="color: red;">NOMEDOFEED </span>( que aparece 3 vezes), pela parte final do endereço do feed do blog.<br /> <br /> Exemplo: <a href="http://feeds.feedburner.com/dicasblogger" title="http://feeds.feedburner.com/dicasblogger">http://feeds.feedburner.com/<span style="background-color: yellow;">dicasblogger</span></a><br /> <br /> A parte em verde, corresponde à frase que aparece na janela pop-up e pode ser modificada, respeitando o número de caracteres para não desconfigurar o gadget.<br /> <br /> Peço, encarecidamente, que não retirem os créditos do <a href="http://www.mundoblogger.com.br/">Mundo Blogger.</a><br /> <br /> <b><span style="color: red;">Atenção!</span></b> Nos meus templates, o script só funcionou corretamente quando inserido no rodapé (lowerbar). Isso pode mudar de blog para blog, então façam testes, movendo o código dentro dos elementos de página do Blogger.<br /> <br /> <pre><code> <style type="text/css"> #topbar { padding: 5px 5px 5px 5px; visibility: hidden; border: black 1px solid; width: 340px; font-family: Tahoma; position: absolute; background-color: white } </style> <script type="text/javascript"> var persistclose = 0 var startX = 5 var startY = 5 var verticalpos = "frombottom" function iecompattest() { return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function closebar() { if (persistclose) document.cookie="remainclosed=1" document.getElementById("topbar").style.visibility="hidden" } function staticbar() { barheight=document.getElementById("topbar").offsetHeight var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera; var d = document; function ml(id) { var el=d.getElementById(id); if (!persistclose || persistclose && get_cookie("remainclosed")=="") el.style.visibility="visible" if(d.layers)el.style=el; el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";}; el.x = startX; if (verticalpos=="fromtop") el.y = startY; else { el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight; el.y -= startY; } return el; } window.stayTopLeft=function() { if (verticalpos=="fromtop") { var pY = ns ? pageYOffset : iecompattest().scrollTop; ftlObj.y += (pY + startY - ftlObj.y)/8; } else { var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight; ftlObj.y += (pY - startY - ftlObj.y)/8; } ftlObj.sP(ftlObj.x, ftlObj.y); setTimeout("stayTopLeft()", 10); } ftlObj = ml("topbar"); stayTopLeft(); } if (window.addEventListener) window.addEventListener("load", staticbar, false) else if (window.attachEvent) window.attachEvent("onload", staticbar) else if (document.getElementById) window.onload=staticbar </script> <div id="topbar"> <a href="javascript:closebar();"><img border="0" style="float: right;" src="http://lh4.ggpht.com/_UCfxgWHzU98/S21DcwKbx9I/AAAAAAAAByU/XVXEvhvu7rA/closeicon.gif" rel="nofollow" title="Fechar janela" /></a> <a target="_blank" href="http://feeds.feedburner.com/<span style="color: red;">nomedofeed</span>"><img border="0" vspace="4" align="left" title="Assine nosso Feed" height="42" src="http://lh4.ggpht.com/_mcq01yDJ2uY/TTrS-VdEadI/AAAAAAAAERQ/PnKkAu8Mg5U/rss_2.png" hspace="4" width="48" /></a> <center><font color="#000000"><b><span style="color: #38761d;">Fique sempre atualizado!</span><br /><span style="color: #38761d;">Receba artigos por email!</span></b> </font><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: red;">nomedofeed</span>&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' ><input name="email" style="WIDTH: 250px" /><input name="uri" type="hidden" value="<span style="color: red;">nomedofeed</span>" /><input name="loc" type="hidden" value="pt_BR" /><input type="submit" value="Assinar" /></form> </center> <div style="text-align: center;"><span style="font-size: 65%; color: rgb(0, 0, 0); text-align: center;">Widget by MundoBlogger<a target="_blank" href="http://www.mundoblogger.com.br/2010/03/box-flutuante-assinar-feed-via-email.html"><font color="#000000"> Instale este widget</font ></a> <br /> <div class='clear'></div></span ></div></div></code></pre>

Pop-up assinar feeds

Depois que escrevi o post Como conseguir mais assinantes de feeds , vários leitores se mostraram interessados em colocar uma janela do tipo ...

Continue Lendo >>

Problema com imagem do cabeçalho

<img align="right" alt="bug_buddy" border="0" height="128" src="http://lh5.ggpht.com/_EttevOw0KeE/TToyqPCyYnI/AAAAAAAALr0/oI1BJ_SI5os/bug_buddy%5B5%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: right; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="bug_buddy" width="128" />Eu estava aqui, criando meus templates sob encomenda, quando me deparei com um bug muito chato. <br /> Em condições normais, ao fazermos o upload de uma imagem do computador para o cabeçalho do blog, o Blogger mantém a imagem com seu tamanho original. Hoje, elas estão sendo reduzidas automaticamente – o que deixa o layout horrível. <br /> Fiz testes em diversos templates e notei que o problema era comum a todos. Daí, fui olhar no fórum oficial e constatei que o bug está afetando vários usuários.<br /> <img alt="forum" border="0" height="171" src="http://lh5.ggpht.com/_EttevOw0KeE/TToyqxPDAvI/AAAAAAAALr4/vMelInEci60/forum%5B3%5D.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Fórum do Blogger" width="452" /><br /> Vejam, na imagen abaixo, como ficou um cabeçalho que usei em um blog de teste:<a href="http://lh3.ggpht.com/_EttevOw0KeE/TToysXJHGtI/AAAAAAAALr8/PK2KOP38R4E/s1600-h/av-head%5B3%5D.png"><img alt="av-head" border="0" height="201" src="http://lh3.ggpht.com/_EttevOw0KeE/TToyteKr5zI/AAAAAAAALsA/g7hckmbWZfw/av-head_thumb.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Imagem reduzida" width="452" /></a><br /> Percebam que a letra está fosca (clique para ampliar), pois a imagem que, originalmente, tem 978 px de largura, foi reduzida para 400 px.<br /> Já reportei o problema à equipe do Blogger. Até resolverem, façam o upload da imagem para o Picasa. Lá no Picasa, clique sobre a imagem e depois, clique em <strong>tela inteira</strong> Com o botão direito do mouse, clique em “copiar endereço da imagem”<br /> <img alt="image" border="0" height="136" src="http://lh6.ggpht.com/_EttevOw0KeE/TTo1rfzuTWI/AAAAAAAALsI/FiD30I8lkVU/image%5B12%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Picasa" width="541" /><br /> Volte para a configuração do cabeçalho e cole o endereço no local indicado abaixo:<br /> <img alt="header-bug" border="0" height="235" src="http://lh3.ggpht.com/_EttevOw0KeE/TToyurKu8MI/AAAAAAAALsE/nP1jCVDJ0EA/header-bug%5B2%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="alternativa" width="442" /><br /> Caso a imagem não carregue, coloque um ponto no final do endereço e aperte o “enter” do teclado. É estranho, mas funciona rs. Coisas de Blogger ;)<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> <li><a href="http://www.dicasblogger.com.br/2010/07/imagem-para-o-cabecalho-do-blogger.html">Imagem para o cabeçalho do Blogger com Photoshop</a> </li> </ul> ATUALIZAÇÃO em 25/01 – A equipe do Blogger já está ciente do problema<br /> <blockquote> Some users have reported that header images have degraded in quality after uploading. We're investigating this and will report back as soon as we have more information to share. <br /> <a href="http://knownissues.blogspot.com/2011/01/some-users-have-reported-that-header.html" target="_blank">Known Issues for Blogger</a></blockquote>

Problema com imagem do cabeçalho

Eu estava aqui, criando meus templates sob encomenda, quando me deparei com um bug muito chato. Em condições normais, ao fazermos o uploa...

Continue Lendo >>

Como conseguir mais assinantes de feeds

<img align="right" alt="rss2_6_02" border="0" height="128" src="http://lh3.ggpht.com/_EttevOw0KeE/TThuqa1ZYlI/AAAAAAAALrs/5dFr6Lj1A1U/rss2_6_02%5B5%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: right; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="rss" width="128" />Atualmente, tenho visto muitos blogs usando táticas duvidosas para atrair mais assinantes de RSS/Feed e até de seguidores no Twitter. Penso que uma assinatura de feed deve ser, antes de mais nada, legítima e baseada em interesse pelo conteúdo. <br /> Do que me adianta números expressivos no contador, se as pessoas não forem ler meus posts? Brindes, pop-ups e afins podem até engordar o contador e o ego do blogueiro, mas na prática podem não representar absolutamente nada.<br /> Da mesma forma que sites indexadores - como o falecido BlogBlogs e o Technorati - perderam credibilidade quando usuários começaram a usar técnicas desleais para aumentar posicionamento nos rankings, logo,logo a métrica de assinantes de feeds não será mais últil para aferir a popularidade de um blog.<br /> O mesmo problema se repete no Twitter, com o uso de scripts e de <a href="https://hakunamatatabrindes.com.br/" target="_blank">brindes </a>em troca de mais seguidores. Tais comportamentos – quando analisados por quem realmente entende de mídia social – pode depor contra a reputação do próprio blogueiro.<br /> <img alt="alt" border="0" height="274" src="http://lh6.ggpht.com/_EttevOw0KeE/TThyBCrx4nI/AAAAAAAALrw/qxwTxmEEcfg/image%5B14%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="socialmedia" width="440" /><br /> Eu prefiro ter leitores e seguidores que apreciem o meu trabalho, que interajam comigo a outros que possam ter aparecido apenas por causa de um sorteio, por exemplo.<br /> Por outro lado, existem algumas táticas “do bem”, que podem ser usadas livremente, contanto que o bom-senso venha em primeiro plano.<br /> <strong><span style="color: red; font-size: small;">Conteúdo</span></strong><br /> O conteúdo continua sendo o rei, o carro-chefe. Se o conteúdo do blog for original e interessante para o leitor, despertará no mesmo a vontade de receber aqueles posts sempre. E se o leitor não souber o que é um feed?<br /> <strong><span style="color: red; font-size: small;">Gadgets</span></strong><br /> É aqui que entram as táticas que falei anteriormente. Explique ao seu leitor o que é um feed e mostre a ela quais as vantagens de se usar tal ferramenta. Isso pode ser feito através de gadgets e/ou através do recurso “páginas” no Blogger.<br /> Os gadgets que trazem um melhor retorno são:<br /> <span style="font-size: x-small;">**clique sobre os links para acessar os respectivos posts</span><br /> <ol> <li><a href="http://www.dicasblogger.com.br/2010/02/como-usar-o-gadget-seguidores.html">Seguidores</a> –  é intuitivo e simples de usar, até mesmo por iniciantes </li> <li><a href="http://www.dicasblogger.com.br/2009/10/usar-e-configurar-feedburner.html">Email Subscriptions</a> - trata-se de um gadget  fornecido pelo FeedBurner, super simples de ser instalado e que já vem até com o botão para assinar o feed </li> <li><a href="http://www.dicasblogger.com.br/2010/01/mensagens-no-rodape-dos-posts.html">Mensagem nos posts</a> – tais mensagens podem ficar na parte superior ou inferior dos posts, convidando o visitante a fazer a assisnatura do feed. </li> <li><a href="http://www.dicasblogger.com.br/2010/09/widget-assine-os-feeds.html">Widgets personalizados</a> – nesses widgets, podemos colocar um ícone que identifique que é ali que está o endereço do feed e ainda inserimos os códigos do FeedBurner com contador e para fazer a assinatura por email. É muito prático. </li> </ol> Outro gadget interessante, é aquele que mostra o número de assinantes de feeds e de seguidores no Twitter - <a href="http://www.dicasblogger.com.br/2010/04/widget-contador-feeds-e-twitter.html">Widget – feeds, seguidores, posts e comentários</a>.<br /> <strong><span style="color: red; font-size: small;">Páginas</span></strong><br /> Usando o recurso “páginas”, podemos criar um post explicando o que é um feed, as formas de assinar os posts e suas vantagens. Vejam um exemplo aqui mesmo no DB - <a href="http://www.dicasblogger.com.br/p/feeds.html">Feeds - receba os posts automaticamente!</a> Mas, lembrem-se que é proibido copiar qualquer post do Dicas Blogger. Usem a criatividade de vocês.<br /> <strong><span style="color: red; font-size: small;">Pop-Ups</span></strong><br /> Não pode ser considerada uma tática ruim, mas é incômoda. Eu, particularmente, jamais retorno em blogs com aqueles pop-ups imensos, implorando a minha assinatura. Se mesmo assim, vocês quiserem usar um pop-up, acessem:<br /> <ul> <li><a href="http://comofazerweb.com/2009/09/pop-up-assinar-feed-via-email-no-blogger.html">Pop-Up Assinar feed via email no Blogger</a> (Como fazer web) </li> <li><a href="http://www.blogueirosnaweb.com/2010/04/como-adicionar-um-menu-pop-up-ao-blog.html">Como Adicionar um Menu Pop-Up ao Blog</a> ( Blogueiros na web)</li> <li><a href="http://www.mundoblogger.com.br/2010/03/box-flutuante-assinar-feed-via-email.html">Box Flutuante Assinar Feed via Email</a> (Mundo Blogger)</li> </ul> <strong><span style="color: red; font-size: small;">Opções de assinatura</span></strong><br /> Outro detalhe importante é oferecer opções ao visitante. Forneça feeds completos, parciais e por email e deixe a escolha para o leitor.<br /> <ol> <li><a href="http://www.dicasblogger.com.br/2008/05/vai-de-feed-completo-ou-parcial.html">Vai de feed completo ou parcial?</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> </ol> Basicamente é isso. Quanto ao DB, atualmente eu uso o gadget seguidores, uma mensagem no rodapé dos posts, o contador de estatísticas e uma página explicativa.

Como conseguir mais assinantes de feeds

Atualmente, tenho visto muitos blogs usando táticas duvidosas para atrair mais assinantes de RSS/Feed e até de seguidores no Twitter. Penso ...

Continue Lendo >>

CSS – aplicando estilos às bordas

<img align="right" alt="z_file_css" border="0" height="128" src="http://lh5.ggpht.com/_EttevOw0KeE/TThFxJxwm5I/AAAAAAAALro/o9MBBLtNeeE/z_file_css%5B5%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: right; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="z_file_css" width="128" />Hoje irei explicar como aplicar estilos às bordas, usando CSS. <br /> O atalho chama-se “border” e suas propriedades são:<br /> <ol> <li>border-top ( borda superior) </li> <li>border-right (borda direita) </li> <li>border-bottom (borda inferior) </li> <li>border-left ( borda esquerda) </li> </ol> Para aplicar o mesmo estilo para todos os lados, usamos apenas o atalho “border”.<br /> A sintaxe para aplicar estilos às bordas é:<br /> <blockquote> seletor { border: largura estilo cor;}</blockquote> Exemplo:<br /> <blockquote> #linkbar a { color:#e6e6e6; text-transform:none; <span style="background-color: yellow;">border-right:1px solid #808080</span>; }</blockquote> O seletor, em CSS, é o que vem sempre precedido por # (jogo da velha). “border-right” se refere ao lado da borda que receberá o estilo. “1px” é a largura, “solid” é o desenho e “#808080” é a cor da borda.<br /> No exemplo acima, apliquei um estilo`apenas à borda direita da linkbar.<br /> <blockquote> #busca { <span style="background-color: yellow;">border: 1px solid #FFF;</span> padding: 6px; } </blockquote> Nesse outro exemplo, apliquei o mesmo estilo para os 4 lados da borda da busca.<br /> Como vocês já devem ter notado, podemos aplicar estilos ao desenho da borda:<br /> <ul> <li>none: sem estilos </li> <li>dotted: borda desenhada com pontos </li> <li>dashed: borda desenhada com pequenas linhas </li> <li>solid: borda desenhada com uma linha contínua </li> <li>outset: borda em 3D </li> <li>double: borda dupla </li> </ul> Vamos para outros exemplos, mostrando os desenhos das bordas:<br /> <div style="border-bottom: #ff0000 1px solid; border-left: #ff0000 1px solid; border-right: #ff0000 1px solid; border-top: #ff0000 1px solid;"> border: 1px solid #FF0000; </div> <div> </div> <div style="border-bottom: #ff0000 1px dotted; border-left: #ff0000 1px dashed; border-right: #ff0000 1px solid; border-top: #ff0000 1px double;"> border-bottom: #ff0000 1px dotted; border-left: #ff0000 1px dashed; border-top: #ff0000 1px double; border-right: #ff0000 1px solid</div> Assim como nos demais posts, recomendo que vocês façam as modificações em um blog de testes e que visualizem até encontrarem um resultado satisfatório.

CSS – aplicando estilos às bordas

Hoje irei explicar como aplicar estilos às bordas, usando CSS. O atalho chama-se “border” e suas propriedades são: border-top ( borda s...

Continue Lendo >>

Formatando texto com CSS

<img align="left" alt="image" border="0" height="87" src="http://lh6.ggpht.com/_EttevOw0KeE/TTefJiF0P2I/AAAAAAAALrg/j6cxppqhEt0/image%5B7%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: left; margin: 0px 6px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="letras" width="116" />Outra coisa importante para melhorar um site, é a personalização dos textos. O CSS permite que façamos muitas coisas interessantes, como escolher o tipo de fonte, tamanho, cor, se maiúscula, normal ou minúscula e etc<br /> <strong>As fontes</strong><br /> Uma fonte é um conjunto de grifos. A grosso modo, é a letra que usamos para escrever um texto. A propriedade “font” é o atalho para estilos de fontes no CSS:<br /> <ul> <li><strong>font-style:</strong> aplica-se um estilo à fonte </li> <li><strong>font-weight:</strong> define a espessura da fonte </li> <li><strong>font-size:</strong> define o tamanho da fonte </li> <li><strong>font-family:</strong> define o tipo da fonte </li> </ul> Os atributos mais usados são:<br /> <ul> <li>font-style: <em>italic</em> ou normal </li> <li>font-weight: <strong>bold </strong>ou normal </li> <li>font-size: 30px; </li> <li>font-family: arial, sans-serif; (veja outros exemplos, <a href="http://maujor.com/w3ctuto/fonts.html">clicando aqui)</a> </li> </ul> <strong>O texto</strong><br /> Define a aparência e a apresentação do conteúdo textual.<br /> <ul> <li>text-align: right; ( alinhado à direita) </li> <li>text-align: center; (alinhado no centro) </li> <li>text-align: justify; (justificado) </li> <li>text-decoration: underline; (linha embaixo) </li> <li>text-decoration: overline; (linha em cima) </li> <li>text-decoration: line-through; (linha no centro do texto) </li> <li>text-transform :uppercase; ( letras maiúsculas) </li> <li>text-transform: capitalize; ( a primeira letra fica maiúscula) </li> <li>text-transform:lowercase; (todas as letras minúsculas) </li> <li>text-transform : none; ( não aplica estilos) </li> </ul> <strong>Cor do texto</strong><br /> A cor pode ser modificada usando as propriedades hexadecimais ou rgb.<br /> <ul> <li>color: #FF0000; ( cor vermelha, em hexadecimal) </li> <li>color: rgb(255, 0, 0); ( cor vermelha, em RGB) </li> </ul> Veja <a href="http://cores.gratuita.com.br/">aqui</a> uma tabela de equivalência de cores para web.<br /> Nos templates para o Blogger, geralmente usamos as variáveis, que permitem que façamos as edições das fontes e das cores através do painel  do designer do modelo.<br /> <img alt="image" border="0" height="232" src="http://lh5.ggpht.com/_EttevOw0KeE/TTeicFp1nWI/AAAAAAAALrk/dzLeuA9_ceQ/image%5B16%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="As variáveis do Blogger" width="452" /><br /> Para cada tipo de fonte, tamanho e cor, é preciso ter uma variável correspondente.<br /> <blockquote> #header h1 { <br />color:$<span style="color: red;">blogTitleColor; </span>font:$blogTitleFont; <br />font-variant:small-caps; <br />margin:0; <br />padding:10px 20px 0; <br />}</blockquote> Variável que fica logo no começo do CSS:<br /> <blockquote> <Variable name="<span style="color: red;">blogTitleColor</span>" description="Blog Title Color" <br />type="color" default="#800040" value="#ffffff"> </blockquote> A variável é sempre precedida do símbolo “$”. Para criar variáveis, basta seguir o modelo acima. Como exemplo, vou criar uma variável para o título da barra lateral:<br /> <blockquote> <Variable name="<span style="color: red;">sidebarTitleColor</span>" description="Sidebar Title Color" <br />type="color" default="#800040" value="#ffffff"></blockquote> <blockquote> #sidebar h1 { <br />color:$<span style="color: red;">sidebarTitleColor; </span>font:$sidebarTitleFont;  <br />font-weight: <strong>bold;</strong> <br />margin:0; <br />padding:10px 20px 0; <br />}</blockquote> Percebam que a grafia da variável tem que ser idêntica. A primeira parte deve ser colocada com as demais variáveis – que ficam logo no começo do CSS. Já a segunda parte, deve seguir a sequência de cascata dos seletores CSS.

Formatando texto com CSS

Outra coisa importante para melhorar um site, é a personalização dos textos. O CSS permite que façamos muitas coisas interessantes, como esc...

Continue Lendo >>

As propriedades margin e padding do CSS

<img align="left" alt="CSSEditLogo" border="0" height="94" src="http://lh4.ggpht.com/_EttevOw0KeE/TTdhGqvOPJI/AAAAAAAALrY/V9eH2yx4GMI/CSSEditLogo%5B9%5D.png?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: inline; float: left; margin: 0px 8px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="CSS" width="94" />Duas importantes propriedades do CSS, se chamam <strong>margin</strong> (margem) e <strong>padding</strong> (preenchimento). São elas que definem os espaçamentos entre os elementos do layout. <br /> A <strong>margem</strong> é o que separa um elemento de outro e o <strong>preenchimento</strong> é o espaço entre o conteúdo e a borda desse conteúdo.<br /> Para fazer o controle dos espaços, usamos um código com valores que podem ser em pixels (px), em porcentagem (%) ou em “em”. A palavra “em” vem da tipografia impressa e se refere ao tamanho da letra M maiúscula para uma determinada fonte.<br /> Para este tutorial, vou usar as medidas em px (pixels).<br /> Antes, é importante que vocês saibam o que quer dizer cada valor:<br /> <ul> <li>0 – estamos dizendo ao navegador que é para usar um espaço padrão </li> <li>0px – estamos dizendo ao navegador para não colocar espaço </li> <li>5px – estamos dizendo ao navegador para colocar 5 pixels de espaço </li> </ul> Vamos ver um exemplo do código para configurar as margens:<br /> <blockquote> margin-top: 100px;<br /> margin-right: 40px;<br /> margin-bottom: 10px;<br /> margin-left: 70px;</blockquote> ou, simplicando:<br /> <blockquote> margin: 100px 40px 10px 70px;</blockquote> O mesmo código se aplica ao preenchimento:<br /> <blockquote> padding-top: 100px;<br /> padding-right: 40px;<br /> padding-bottom: 10px;<br /> padding-left: 70px;</blockquote> Os valores são apenas ilustrativos, onde:<br /> <ol> <li>top: espaço entre o conteúdo e a parte superior </li> <li>right: espaço entre o conteúdo e a direita </li> <li>bottom: espaço entre o conteúdo e a parte inferior </li> <li>left: espaço entre o conteúdo e o lado esquerdo </li> </ol> A ordem deve sempre ser esta: top, right, bottom e left.<br /> Também podemos usar um código ainda mais simples, quando os valores são iguais para todos os lados:<br /> <blockquote> margin: 3px; ( equivale a 3 px em top, right, bottom e left)<br /> padding: 4px; ( equivale a 5 px em top, right, bottom e left)</blockquote> Se o valor for o mesmo para as partes superior e inferior e outro para direita e esquerda, usamos:<br /> <blockquote> margin: 3px 5px ( superior e inferior=3px e direita e esquerda=5px)</blockquote> Agora vou mostrar uma imagem, usado o template do Dicas de Informática<br /> <a href="http://lh4.ggpht.com/_EttevOw0KeE/TTdhI1RB0KI/AAAAAAAALrI/wL0mVQQ6i6E/s1600-h/padding%5B3%5D.png"><img alt="padding" border="0" height="226" src="http://lh5.ggpht.com/_EttevOw0KeE/TTdhKAMRjcI/AAAAAAAALrM/O-TzQLX7Lxs/padding_thumb.png?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="padding" width="452" /></a><br /> Clique na imagem para ampliar. Veja que o CSS do header (cabeçalho) é:<br /> <blockquote> /* HEADER <br />----------------------------------------------- */ <br />#header-wrapper { <br />width:970px; <br />background:transparent; <br />border:1px solid transparent; <br />margin:0; <br />padding:4px; <br />}</blockquote> A margem foi definida em zero e o preenchimento é de 4px em todos os lados.<br /> Na imagem abaixo, vemos o conceito de box model do CSS<br /> <img alt="css-box-model" border="0" height="241" src="http://lh4.ggpht.com/_EttevOw0KeE/TTdhLHW45oI/AAAAAAAALrU/wLD1Q6TuHL0/image%5B12%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="css box model" width="435" /><br /> <div align="center"> Fonte: <a href="http://www.w3.org/TR/CSS21/box.html">W3.org</a></div> <div align="justify"> Pode parecer complicado ( e é), mas para modificar templates do Blogger, basta saber o código para controlar os espaços, ir testando valores e ir visualizando até encontrar o efeito desejado. Use um blog de testes e nao tenha medo de errar ;)</div>

As propriedades margin e padding do CSS

Duas importantes propriedades do CSS, se chamam margin (margem) e padding (preenchimento). São elas que definem os espaçamentos entre os e...

Continue Lendo >>

Blogger - Criar e publicar posts no iPad

<a href="http://lh4.ggpht.com/_c1Bv1rmLa6M/TS-h8jtmlvI/AAAAAAAAHNQ/QUw3LqgqNFg/s1600-h/ipad%20e%20blogger%5B5%5D.png"><img align="left" alt="ipad e blogger" border="0" height="126" src="http://lh6.ggpht.com/_c1Bv1rmLa6M/TS-h9uwADnI/AAAAAAAAHNU/w_1vsu5VV4o/ipad%20e%20blogger_thumb%5B3%5D.png?imgmax=800" style="border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: inline; margin-left: 0px; margin-right: 0px;" title="ipad e blogger" width="100" /></a><br /> Dispositivos móveis como o iPad são maravilhosos quando se trata de consumir conteúdo: visitar blogs e sites, gerir email, ver filmes e acessar redes sociais, como o Twitter e Facebook. Quando se fala de produzir conteúdo, a coisa já não é tão fácil. O Blogger lançou recentemente a <a href="http://www.dicasblogger.com.br/2010/12/versao-mobile-oficial-no-blogger-in.html">versão mobile para os blogs</a>, mas ainda é inviável escrever posts direto pela interface web. Para isto, é necessário recorrer à aplicações externas. <br /> <br /> <strong>BlogPress – aplicação para criar posts no iPad</strong><br /> A aplicação <strong>BlogPress</strong>, que já foi descrita em pormenor aqui: <a href="http://www.dicasblogger.com.br/2010/09/blogger-no-iphone-como-escrever-e.html" target="_blank">Blogger no iPhone – Como escrever e publicar posts</a> ganhou uma nova interface para o iPad e algumas novas funções. Atualmente é a melhor aplicação para escrever e publicar posts, não só no Blogger mas também no Wordpress e outras plataformas.<br /> <br /> <b>Configurações:</b><br /> Nas configurações, podemos alterar algumas coisas, como o local onde as imagens irão ficar alojadas (por default ficam no BlogPress, mas pode ser alterado para o Picasa junto com as outras imagens do blog). Esta opção é bastante útil para quem utiliza outras plataformas além do Blogger, sendo possível alojar as imagens direto num servidor próprio. Também é possível configurar para que os posts sejam publicados automaticamente no Twitter e Facebook (quem utiliza o método de <a href="http://www.dicasblogger.com.br/2010/09/blogger-no-iphone-como-escrever-e.html" target="_blank">publicar o feed do blog no Facebook</a> deve desmarcar esta opção). A assinatura do post também pode ser alterada, assim como a fonte das letras e tamanho das imagens:<br /> <a href="http://lh5.ggpht.com/_c1Bv1rmLa6M/TS-dfj67zhI/AAAAAAAAHMs/6oD3ROdDMlI/s1600-h/ipad%20blogger%5B4%5D.png"><img alt="ipad blogger" border="0" height="453" src="http://lh6.ggpht.com/_c1Bv1rmLa6M/TS-dghb0uII/AAAAAAAAHM0/hEw_POT3vtc/ipad%20blogger_thumb%5B2%5D.png?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="ipad blogger" width="340" /></a> <br /> <strong>Escrever posts</strong><br /> É bastante confortável escrever textos longos no iPad (e se você tiver um teclado bluetooth, a tarefa pode ser ainda mais fácil). Com alguns atalhos em HTML podemos inserir links, formatar a forma da letras, o tamanho e a cor. É possível também inserir negrito, itálico e algumas outras funções:<a href="http://lh3.ggpht.com/_c1Bv1rmLa6M/TS-dhLbrYhI/AAAAAAAAHM4/WfcHjuwU5u8/s1600-h/blogger%20ipad%5B5%5D.png"><img alt="blogger ipad" border="0" height="455" src="http://lh4.ggpht.com/_c1Bv1rmLa6M/TS-diBaE3lI/AAAAAAAAHM8/Gn0UppCBifk/blogger%20ipad_thumb%5B3%5D.png?imgmax=800" style="border-bottom-color: initial; border-bottom-style: initial; border-bottom-width: 0px; border-left-color: initial; border-left-style: initial; border-left-width: 0px; border-right-color: initial; border-right-style: initial; border-right-width: 0px; border-top-color: initial; border-top-style: initial; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="blogger ipad" width="342" /></a> <br /> Inserir imagens também é bastante fácil, basta clicar no ícone da camera fotográfica e escolher no álbum do iPad. Clicando na imagem fica habilitado a edição da mesma, onde é possível alterar o tamanho e alinhamento. Também é possível adicionar um link à imagem escolhida (clique para ver maior):<br /> <div align="center"> <a href="http://lh6.ggpht.com/_c1Bv1rmLa6M/TS-dilVEm_I/AAAAAAAAHNA/ZFK0RJTXdi4/s1600-h/imagem%20ipad%201%5B5%5D.png"><img alt="imagem ipad 1" border="0" height="322" src="http://lh4.ggpht.com/_c1Bv1rmLa6M/TS-djSvvLpI/AAAAAAAAHNE/ajdVrF_Q8M4/imagem%20ipad%201_thumb%5B3%5D.png?imgmax=800" style="border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: inline;" title="imagem ipad 1" width="242" /></a>      <a href="http://lh5.ggpht.com/_c1Bv1rmLa6M/TS-dkL6lIRI/AAAAAAAAHNI/BCWb_GRjfyQ/s1600-h/imagem%20ipad%202%5B5%5D.png"><img alt="imagem ipad 2" border="0" height="322" src="http://lh4.ggpht.com/_c1Bv1rmLa6M/TS-dkpxiLqI/AAAAAAAAHNM/9kPlmjjKgxY/imagem%20ipad%202_thumb%5B3%5D.png?imgmax=800" style="border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: inline;" title="imagem ipad 2" width="242" /></a> </div> Após o texto estar completo, aparecem as seguintes opções: publicar, salvar localmente e salvar online. Também é possível salvar e ver como irá ficar o post. Ao ser escrito, o post fica sempre na versão HTML, esta nova opção permite ter uma idéia clara de como irá ficar a formatação (Save and Preview):<br /> <a href="http://lh6.ggpht.com/_c1Bv1rmLa6M/TS-h-DQKceI/AAAAAAAAHNY/vDfTIvhwb7A/s1600-h/ipad%5B3%5D.png"><img alt="ipad" border="0" height="240" src="http://lh4.ggpht.com/_c1Bv1rmLa6M/TS-h-64pEYI/AAAAAAAAHNc/BazMdAXhyWE/ipad_thumb%5B1%5D.png?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="ipad" width="219" /></a><br /> O <strong>BlogPress</strong>, que pode ser adquirido na <a href="http://itunes.apple.com/pt/app/blogpress/id317799861?mt=8#ls=1" target="_blank">AppleStore por 4.99 dólares</a>, com certeza supre as necessidades da maior parte dos utilizadores que querem utilizar o iPad para escrever posts no Blogger e em outras plataformas.

Blogger - Criar e publicar posts no iPad

Dispositivos móveis como o iPad são maravilhosos quando se trata de consumir conteúdo: visitar blogs e sites, gerir email, ver filmes e ace...

Continue Lendo >>

Como apagar todas as mensagens no Twitter

<img align="right" alt="twitter" border="0" height="100" src="http://lh5.ggpht.com/_EttevOw0KeE/TSt9COhlzzI/AAAAAAAALqs/bBX5d6JSXyI/twitter%5B11%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: right; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="twitter" width="136" />Quem nunca fofocou por DM (direct message) no Twitter? Eu fofoco e muito, por isso apago-as sempre :)  <br /> Como eu já disse anteriormente, seria um deus-nos-acuda se as DMs viessem à tona da noite pro dia. O Twitter ainda apresenta bugs e instabilidades e uma pane como essa pode realmente acontecer. A fim de evitar tal tragédia, eu já ensinei como eliminar todas as DMs de uma vez só, em outros dois posts:<br /> <ul> <li><a href="http://www.dicasblogger.com.br/2010/05/como-apagar-todas-dms-twitter.html">Como apagar todas as DMs no Twitter</a> </li> <li><a href="http://www.dicasblogger.com.br/2010/10/apague-dms-do-twitter-dmcleaner.html">Apague DMs do Twitter com DMCleaner</a> </li> </ul> O problema é que - até o término deste post - nenhum dos dois métodos anteriores estavam funcionando. A boa notícia é que o <a href="http://twitter.com/#!/fjorgemota">@fjorgemota</a>, programador e autor do <a href="http://www.blogueirosnaweb.com/">Blogueiros na Web</a>, criou o <a href="http://www.blogueirosnaweb.com/2011/01/dm-eliminator-uma-nova-forma-de-apagar-dms-no-twitter.html">DM Eliminator</a>. Trata-se um um bookmarklet, totalmente compatível com o novo Twitter.<br /> Para usar o DM Eliminator, arraste para a barra de favoritos do seu navegador, o link que encontra-se no <a href="http://www.blogueirosnaweb.com/2011/01/dm-eliminator-uma-nova-forma-de-apagar-dms-no-twitter.html">post do Fernando</a>. Depois, entre nas aba “messages” da sua conta do Twitter e clique no link do <strong>DM Eliminator</strong><br /> <img alt="dm-eliminator" border="0" height="232" src="http://lh4.ggpht.com/_EttevOw0KeE/TSt9DO40pEI/AAAAAAAALqw/vhCLqwe3LRk/dm-eliminator%5B4%5D.png?imgmax=800" style="background-image: none; 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; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="dm-eliminator" width="374" /><br /> Será perguntado se você deseja mesmo apagar todas as DMs. Clique em OK, aguarde o término do processo e vá dormir tranquilo (a) ;)

Como apagar todas as mensagens no Twitter

Quem nunca fofocou por DM (direct message) no Twitter? Eu fofoco e muito, por isso apago-as sempre :)  Como eu já disse anteriormente, seri...

Continue Lendo >>

TechTudo – um novo site de tecnologia

<img alt="" border="0" height="76" src="http://lh5.ggpht.com/_EttevOw0KeE/TR8fCIblnOI/AAAAAAAALjs/tf0G1rkQvSE/image%5B11%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="497" /><br /> Lançado recentemente, o <a href="http://www.techtudo.com.br/">TechTudo</a> é o site de tecnologia da Globo.com, que surgiu com a proposta de (realmente) descomplicar a tecnologia. Para atingir tal objetivo, reuniu-se uma equipe de colunistas de primeira linha e de colaboradores - na maior parte blogueiros - com experiência em escrever artigos sobre tecnologia.<br /> Comandado pelo geek  <a href="http://twitter.com/nickellis">Nick Ellis</a> – conhecido na web por seus blogs <a href="http://digitaldrops.com.br/">Digital Drops</a> e <a href="http://appstoreblog.com.br/">App Store Blog</a> e por sua paixão por tecnologia – o TechTudo fornece  dicas e tutoriais de aplicativos,  gadgets, sistemas operacionais e muito mais!  Além disso, conta com  reviews que auxiliam o usuário na hora de comprar novos dispositivos eletrônicos.<br /> <img alt="techtudo" border="0" height="219" src="http://lh6.ggpht.com/_EttevOw0KeE/TR8fD0KXPfI/AAAAAAAALj4/--Mhrvl4hSE/image%5B32%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Página Inicial" width="452" /><br /> Acesse o TechTudo e confira o  <a href="http://www.techtudo.com.br/blogs/">time de colunistas</a>, bem como as diversas categorias de artigos: reviews, dicas & tutoriais, jogos, blogs, fórum e downloads.<br /> <img alt="techtudo" border="0" height="200" src="http://lh3.ggpht.com/_EttevOw0KeE/TR8fFi-1JVI/AAAAAAAALkA/FDalDjkWtNo/image%5B33%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Colunistas" width="452" /><br /> Vocês podem acompanhar o artigos do TechTudo também no <a href="http://twitter.com/techtudo">Twitter</a> e no <a href="http://www.facebook.com/techtudo">Facebook</a>.<br /> Eu tive a honra de ser convidada pelo Nick para colaborar com o TechTudo, onde pretendo publicar artigos sobre informática em geral -  sistemas operacionais, aplicativos diversos para Windows e iPhone, segurança digital, navegadores e etc - bem como  compartilhar minha experiência com blogs. Nos vemos lá ;)

TechTudo – um novo site de tecnologia

Lançado recentemente, o TechTudo é o site de tecnologia da Globo.com, que surgiu com a proposta de (realmente) descomplicar a tecnologia. ...

Continue Lendo >>