Dicas Blogger

Home » All

Páginas estáticas com CSS

<div align="justify">
No final do mês passado, o Blogger lançou um recurso há muito tempo esperado por seus usuários – as <a href="http://www.dicasblogger.com.br/2010/01/paginas-estaticas-no-bloggerblogspot.html" target="_blank">páginas estáticas</a>. Muita gente comemorou o lançamento, tal como aconteceu quando disponibilizaram o <a href="http://www.dicasblogger.com.br/2009/09/jump-break-o-leia-mais-do-blogger.html" target="_blank">Jump Break</a>. Até então, nós nos virávamos utilizando os hacks, também chamados de gambiarras, alterando os códigos html e css dos templates para obter essas e outras funções que não eram nativas do Blogger.</div>
<div align="justify">
O problema é que tanto o Jump Break quanto as páginas estáticas, se mostraram incompatíveis com os templates que são criados pelos próprios usuários, sendo necessário a inclusão de mais códigos no html. Mesmo assim, muitos ainda se queixam que a sidebar foi parar embaixo do posts (no caso do jump break) ou que algum dos hacks para colocar o resumo das postagens não funcionam com as páginas estáticas.</div>
<span id="fullpost"> </span><br />
<div align="justify">
<span id="fullpost">Eu, particularmente, jamais deixaria de usar um template personalizado por causa das deficiências do Blogger; afinal, os templates padronizados são…digamos…simples demais. O jeito é continuarmos com nossas gambiarras, já que não existe suporte para templates personalizados – o que é altamente compreensível, pois seria impossível auxiliar cada um que aparece lá no fórum do Blogger para pedir ajuda para um determinado modelo.</span></div>
<span id="fullpost"> <div align="justify">
Eu não uso o Jump Break e não vou usar as páginas estáticas; prefiro os hacks. Para colocar resumo de postagens, já ensinei dois tipos de hacks neste post - <a href="http://www.dicasblogger.com.br/2009/11/como-colocar-o-leia-mais-no-blogger.html">Como colocar o hack “Leia Mais” no Blogger</a> – e hoje vou explicar como criar páginas estáticas usando CSS.</div>
<blockquote>
<div align="justify">
<strong>CSS</strong> é a abreviatura para Cascading Style Sheets. — Folha de Estilos em Cascata. CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. <strong>HTML</strong> pode ser (in)devidamente usado para definir o layout de websites. Contudo CSS proporciona mais opções e é mais preciso e sofisticado. CSS é suportado por todos os navegadores atuais. <strong>Fonte:</strong> <a href="http://pt-br.html.net/tutorials/CSS/lesson1.asp" target="_blank">HTML.net</a></div>
</blockquote>
<div align="justify">
Não sou  <em>expert</em> no assunto.Confesso que tenho dificuldades para usar CSS e que demorei para fazer este post justamente porquê sei que  irão surgir muitas dúvidas e que eu não saberei responder à todas elas, mas, por outro lado,  não seria correto da minha parte privá-los de algo tão interessante e funcional. Portanto, tenham calma :)</div>
<div align="justify">
Bem, o que não deve aparecer em uma página estática? Data, hora, comentários, nome do autor, anúncios publicitários, convites para assinar os feeds e etc. Na página estática deve aparecer somente o título e o texto do post. Vejam estes exemplos: </div>
<blockquote>
<div align="center">
<a href="http://www.dicasblogger.com.br/2008/01/diretrizes-para-os-usuarios-do-dicas.html"><strong><span style="font-size: x-small;">Termos de Uso</span></strong></a><strong><span style="font-size: x-small;"> I </span></strong><a href="http://www.dicasblogger.com.br/2008/06/licenca.html"><strong><span style="font-size: x-small;">Licença</span></strong></a><strong><span style="font-size: x-small;"> I </span></strong><a href="http://www.dicasblogger.com.br/2007/08/sobre.html"><strong><span style="font-size: x-small;">Sobre nós</span></strong></a><strong><span style="font-size: x-small;"> I </span></strong><a href="http://www.dicasblogger.com.br/2009/10/midia-kit.html"><strong><span style="font-size: x-small;">Midia Kit</span></strong></a><strong><span style="font-size: x-small;"> I </span></strong><a href="http://www.dicasblogger.com.br/2008/01/assine-os-feeds-do-dicas-blogger.html"><strong><span style="font-size: x-small;">Rss/Feed</span></strong></a></div>
</blockquote>
<div align="justify">
Podemos também retirar a sidebar ou colocar só meia sidebar. Eu faço isso quando o post é menor do que o comprimento da sidebar, para ficar esteticamente mais adequado.</div>
Chega de conversa e vamos logo para o tutorial, pois o post já está ficando enooooorme.<br />
 <blockquote>
<span style="font-family: 'Arial Narrow'; font-size: small;"><strong>ATENÇÃO:</strong>  Os códigos abaixo  funcionam perfeitamente nos </span><a href="http://www.dicasblogger.com.br/2008/09/templates-do-dicas-blogger.html" target="_blank"><span style="font-family: 'Arial Narrow'; font-size: small;">templates do Dicas Blogger</span></a><span style="font-family: 'Arial Narrow'; font-size: small;">, mas não posso garantir que funcionarão em outros modelos.</span></blockquote>
<div align="justify">
Por que tal advertência? Porque os códigos de cada template variam muito então sugiro que vocês façam testes para adaptar este tutorial ao template de vocês.</div>
<div align="justify">
Antes de mais nada, apliquem o hack fornecido neste post - <a href="http://www.dicasblogger.com.br/2009/01/paginas-estaticas-no-blogger-sem-data.html">Páginas estáticas no Blogger sem data</a> - para retirar a data da futura página estática e lembrem-se de desabilitar os comentários também, para que tudo funcione satisfatoriamente.</div>
Criei o post (1) que dará origem à página estática, desabilite os comentários (2), escolha uma data mais antiga (3), clique em “editar html” e ao final  cole um dos códigos abaixo (4).<br />
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2m0m1Nr59YCeCfIdCshRe6QRsmKEYuGaTG24v9VbQeo6hUyGrjT5519IfoDmbQY53w2BKe9JVYuRLQ77UwAVQP6tVhWEGynGCf2NR_Cy67fSfWFRU8XQg4ufYjOew2_rlUJwWcxtpe9lM/s1600-h/Sem%20T%C3%ADtulo-1%5B17%5D.jpg"><img alt="" border="0" height="311" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFl-Zeg5jf8OgLMqC5cRN80tuhS__xhbYu9m1w5c_UUp-PEQ124XltSm6X7yuFT8M94cMjJ1A5VcIqzIvCPjI-QvFiZyHPNTaVb_U4iGxgCze2nSHZvNE1SLlXqApjKVCFozaUS0_mqNVA/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="" width="450" /></a> <br />
 <strong>Páginas estáticas com sidebar</strong> <br />
 <blockquote>
<style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;} #comments {display:none} .post-header{display: none;}</style> </blockquote>
<strong>Páginas estáticas sem sidebar</strong><br />
 <blockquote>
<style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;}#side-wrapper{display: none;}.post-footer {display:none}  #comments {display:none} .post-header{display: none;} </style></blockquote>
<strong>Páginas estáticas com meia sidebar</strong><br />
 <blockquote>
<style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;}#sidebar-wrapper{display: none;}  #comments {display:none} .post-header{display: none;}</style></blockquote>
Se você usa <a href="http://www.dicasblogger.com.br/2008/05/anuncios-nas-postagens-do-blogger.html" target="_blank">anúncios dentro dos posts</a> ou <a href="http://www.dicasblogger.com.br/2010/01/mensagens-no-rodape-dos-posts.html" target="_blank">um convite para assinar os feeds</a>, basta criar uma div para eles e depois colocar no código da página estática. Por exemplo:<br />
 <blockquote>
<div align="center">
<strong>Esta parte vai no html do template =></strong> <div id='anuncio'> (código do anúncio) </div></div>
</blockquote>
<blockquote>
<strong>Esta parte vai na página estática =></strong> <style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;}#side-wrapper{display: none;}.post-footer {display:none}  #comments {display:none} .post-header{display: none;} <strong><span style="color: red;">#anuncios{display:none}</span></strong> </style></blockquote>
<div align="justify">
Cada parte do código CSS se refere à parte correspondente que não deve aparecer na página estática. Então temos: #comments = comentários / .post-footer = rodapé do post / #side-wrapper = sidebar/ .post-header = cabeçalho do post e assim por diante. </div>
<div align="justify">
Acredito que irá aparecer algum aspirante a metablogger dizendo “ah eu faço diferente” Ótimo. Publique lá no seu blog, mande o link pro meu Twitter e darei RT :D</div>
<div align="justify">
Pessoal, é isso. Espero que vocês tenham conseguido entender. Não consegui fazer um post menor, já que é um assunto novo aqui no DB e foi necessário uma boa introdução.</div>
</span>

Páginas estáticas com CSS

No final do mês passado, o Blogger lançou um recurso há muito tempo esperado por seus usuários – as páginas estáticas . Muita gente comemor...

Continue Lendo >>

21:37

Diferenças entre Blogger e Wordpress

<div align="justify">
Quando pensarmos em criar um blog devermos analisar as plataformas disponíveis para o mesmo. Em meu primeiro post apresentei algumas <a href="http://www.dicasblogger.com.br/2010/01/as-duas-versoes-do-wordpress.html" target="_blank" title="Diferença entre os dois Wordpress">diferenças entre o Wordpress.com e Wordpress.org</a>. Hoje pretendo mostrar para você, caro leitor do Dicas Blogger, as diferenças entre o Blogger e o Wordpress.</div>
<span id="fullpost">   </span><br />
<div align="center">
<span id="fullpost"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQiQRutVh_OWu8Xp8p4Npjlam3I8Poe9UewgsDevYpeIKn0BdQaT5Txy1DNHs_FxyNdsKW33YIFcHlsMk_L_TmAx5W98l_JtdF7M6Zdq4oxlhlA6BFd5EJxVCMYt9mQu2cdOijKsPxQlXM/s1600-h/bloggerwordpress%5B5%5D.png"><img alt="bloggerwordpress" border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYdIvjDZp9Y3Jf_yJn7xl_H7I6cxN0dc0sdDsGv3ih3TnGT73ZZ-qjtlZZ0q-M39n8xa61PW9GBIdcDuaDmhNrq8XwPOCqAcuxP6D0ElxZy2tDXZLu4c3OiYxe80iiUjtEFWsQkkFItnuJ/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="bloggerwordpress" width="395" /></a>      <br /><small><em>Crédito: </em><a href="http://friends2.wordpress.com/2008/09/30/wordpress-vs-blogger-blogspot-qual-sera-o-melhor-site-de-criacao-de-blogs/" rel="nofollow" target="_blank"><em>Friends</em></a></small></span></div>
<span id="fullpost">    <div align="justify">
Ambos são gratuitos, ambos são populares. Entretanto existem várias ferramentas que deixam um melhor que o outro. Diziam que com o Blogger não havia possibilidade de criar um blog <em>profissional</em>, o <a href="http://usuariocompulsivo.blogspot.com/" target="_blank" title="UC">Usuário Compulsivo</a> fez questão de mostrar o contrário: é possível sim, criar um blog <em>profissional</em> com o Blogger (<strong>Chupa Wordpress™</strong>).</div>
<div align="center">
<em>Este post expressará minha opinião e minhas experiências.</em></div>
<h4>
As plataformas:</h4>
<div align="justify">
Utilizei por um bom tempo o Blogger antes de migrar para o <a href="http://br.wordpress.org/" target="_blank" title="Wordpress">Wordpress.org</a>, achei o código HTML do Blogger mais difícil e “sujo” de se mexer comparado ao Wordpress.org. Não nego que a facilidade de personalização e configuração do Blogger seja grande, mas o Wordpress.org disponibiliza muito mais (tanto com ou sem os plugins). Acompanhe o seguimento do post e analise todas as informações.</div>
<h4>
Wordpress:</h4>
<div align="justify">
O Wordpress.org é uma ferramenta gratuita. Entretanto para que possamos utilizá-la é preciso investir e comprar um domínio e hospedagem. A plataforma, como um todo, produzido em “partes”. Cada área do site é uma página diferente. Isso mesmo. O cabeçalho (header), a lateral (sidebar), os comentários (comments), o rodapé (footer), os estilos (style), os posts únicos (single), as páginas (page) e várias outras são formadas por páginas independentes que, quando unidas, formam o seu site e seu conteúdo.</div>
<div align="justify">
Embora seja um pouco complicado de entender, toda essa “<strong>organização</strong>” do Wordpress.org faz com que, na hora da edição de determinada página, o trabalho seja mais rápido, fácil e, como dito acima, limpo. Você (que já utilizou o Wordpress em servidor próprio) pode não concordar comigo, mas eu acho os códigos dele muito mais limpos e fáceis que os do Blogger.</div>
<div align="justify">
Além dessa diferença, o Wordpress.org disponibiliza a opção de <strong>personalização das URL’s</strong>. Você pode adicionar o ano, o mês e o dia no link dos posts (também pode retirá-los, se preferir). Assim como poderá adicionar as categorias e, se preferir, uma terminação como “<em>.html</em>”. Se você entrar nas postagens do <a href="http://www.sempreceito.com/" target="_blank" title="Sem Preceito">Sem Preceito</a>, poderá perceber o que estou falando: após o domínio (<em>sempreceito.com</em>), será exibido o ano da publicação (exemplo <em>2010</em>) e o mês (exemplo <em>02</em>); depois da data estará o título do post (exemplo <em>titulo-do-post</em>) e por fim, uma terminação (exemplo <em>.html</em>). O resultado será este: <em>sempreceito.com/2010/02/titulo-do-post.html</em></div>
<div align="justify">
Estes links são completamente personalizáveis que, no decorrer dos meus posts para o Dicas Blogger, estarei explicando melhor.</div>
<div align="justify">
O Wordpress disponibiliza uma ferramenta inusitada para os links das postagens. Quando editamos o link de uma mensagem publicada no Blogger, o link anterior se torna inacessível e dessa forma você perderá aquele visitante. Entretanto no Wordpress isso é diferente: quando alteramos e acessamos o link velho, ele direciona o visitante para o link novo, assim você não perderá visitante algum.</div>
<div align="justify">
Um trunfo do Wordpress é a <strong>edição dos comentários</strong>. Acho que é uma das ferramentas que chama bastante a atenção dos usuários. Além disso, para mim, o Wordpress é mais <strong>“amigável” para os buscadores</strong>, embora que, se o Blogger estiver bem configurado ele não ficará para trás, nesse quesito ambos estão lado a lado.</div>
<div align="justify">
Os <strong>avatares nos comentários</strong> tanto no Wordpress.org quanto no Wordpress.com depende-se da utilização do “Gravatar”, qualquer e-mail cadastrado e utilizado para comentar irá exibir o avatar. O Blogger disponibiliza várias formas de comentar, enquanto o Wordpress disponibiliza uma única que eu acho ideal. Por trás dos comentários do Wordpress você saberá o IP daqueles que comentaram em seu blog, considero essa ferramenta ótima que traz uma certa segurança para nós, blogueiros.</div>
<div align="justify">
Uma outra coisa que posso destacar no Wordpress é a página de criação das postagens. Ele traz várias ferramentas de formatação de texto, traz a possibilidade de criar um resumo (que será exibido após uma mudança pequena no código ou alteração nas opções do seu template – aprenderemos sobre isso mais adiante). Além das ferramentas, a forma de visualização das postagens (enquanto ainda são produzidas) é muito além do que o Blogger disponibiliza.</div>
<h4>
Blogger:</h4>
A facilidade de configuração do Blogger é muito grande. Sabendo pouco você conseguirá fazer muito: trocar o nome do blog, a descrição, mudar as cores, mover os widgets/gadgets, entre outros.<br />
    Nas postagens do Blogger quando não prestamos atenção corremos o risco de que nossas URL’s saiam faltando letras. Isso acontece pelo fato de que o Blogger não interpreta que “á” é a mesma coisa que “a”, dessa forma a letra é excluída (também acontece com todos os acentos e “ç”).<br />
    <div align="justify">
Para exibir os avatares no Blogger deve-se comentar com a conta do Google, o que limite a utilização para um grupo específico de visitantes (os cadastrados no Google).</div>
<div align="justify">
A moderação de comentários do Blogger é incompleta e não se compara ao do Wordpress. As vezes sofre diversos erros, que dificulta mais ainda a utilização do serviço.</div>
<div align="justify">
Veja abaixo uma tabela rápida, comparando os dois Wordpress’s e o Blogger:</div>
<table border="1" cellpadding="0" cellspacing="0" style="width: 413px;"><tbody>
<tr>         <th valign="top" width="259"><strong>Algumas opções:</strong></th>          <th valign="top" width="42"><strong>.ORG</strong></th>          <th valign="top" width="46"><strong>.COM</strong></th>          <th valign="top" width="56"><strong>Blogger</strong></th>       </tr>
<tr>         <td colspan="4" valign="top"></td>       </tr>
<tr>         <td valign="top" width="259">Instalação de novas ferramentas (ou plugins)</td>          <td align="center" valign="middle" width="42">X</td>          <td align="center" valign="middle" width="46">-</td>          <td align="center" valign="middle" width="56">-</td>       </tr>
<tr>         <td valign="top" width="259">Instalação de templates e personalização</td>          <td align="center" valign="middle" width="42">X</td>          <td align="center" valign="middle" width="46">-</td>          <td align="center" valign="middle" width="56">X</td>       </tr>
<tr>         <td valign="top" width="259">Personalização dos links das postagens, tags e categorias</td>          <td align="center" valign="middle" width="42">X</td>          <td align="center" valign="middle" width="46">-</td>          <td align="center" valign="middle" width="56">-</td>       </tr>
<tr>         <td valign="top" width="259">Moderação e edição de comentários</td>          <td align="center" valign="middle" width="42">X</td>          <td align="center" valign="middle" width="46">X</td>          <td align="center" valign="middle" width="56">-</td>       </tr>
<tr>         <td valign="top" width="259">Utilização de domínio próprio (sem pagar hospedagem)</td>          <td align="center" valign="middle" width="42">-</td>          <td align="center" valign="middle" width="46">X</td>          <td align="center" valign="middle" width="56">X</td>       </tr>
<tr>         <td valign="top" width="259">Criação de páginas estáticas</td>          <td align="center" valign="middle" width="42">X</td>          <td align="center" valign="middle" width="46">X</td>          <td align="center" valign="middle" width="56">X</td>       </tr>
<tr>         <td valign="top" width="259">Possibilidade de publicar por e-mail</td>          <td align="center" valign="middle" width="42">X</td>          <td align="center" valign="middle" width="46">X</td>          <td align="center" valign="middle" width="56">X</td>       </tr>
<tr>         <td valign="top" width="259">Exibição de Avatar nos comentários </td>          <td align="center" valign="middle" width="42">X</td>          <td align="center" valign="middle" width="46">X</td>          <td align="center" valign="middle" width="56">X</td>       </tr>
<tr>         <td valign="top">Adicionar novos usuários como leitores, administradores, etc...</td>          <td align="center" valign="middle">X</td>          <td align="center" valign="middle">X</td>          <td align="center" valign="middle">X</td>       </tr>
<tr>         <td valign="top">Bloqueando acesso dos buscadores por um clique</td>          <td align="center" valign="middle">X</td>          <td align="center" valign="middle">X</td>          <td align="center" valign="middle">X</td>       </tr>
<tr>         <td valign="top">Fazer backups fácilmente</td>          <td align="center" valign="middle">X</td>          <td align="center" valign="middle">X</td>          <td align="center" valign="middle">X</td>       </tr>
</tbody></table>
Apresentei algumas diferenças básicas que farão grande diferença na hora de blogar. Espero que tenha gostado, dúvidas ou sugestões? Comente. </span>

Diferenças entre Blogger e Wordpress

Quando pensarmos em criar um blog devermos analisar as plataformas disponíveis para o mesmo. Em meu primeiro post apresentei algumas difere...

Continue Lendo >>

11:10

Como usar e configurar o TweetDeck

<div align="justify">
No post anterior, expliquei <a href="http://www.dicasblogger.com.br/2010/02/como-instalar-o-tweetdeck.html" target="_blank">como instalar o TweetDeck no Windows</a>. Agora tentarei mostrar suas principais configurações e como tirar o máximo proveito de tantas funções interessantes.</div>
<ul>
<li> <div align="justify">
Rt em duas versões ( a do Twitter e a editável)</div>
</li>
<li> <div align="justify">
Encurtamento de url automático</div>
</li>
<li> <div align="justify">
Criação de grupos</div>
</li>
<li> <div align="justify">
Follow, unfollow e block diretamente do aplicativo</div>
</li>
<li> <div align="justify">
busca de perfis, com follow automático</div>
</li>
<li> <div align="justify">
gerenciamento de listas</div>
</li>
<li> <div align="justify">
visualização de fotos e pré-visualização de links</div>
</li>
<li> <div align="justify">
colunas para separar os tweets por grupos ou por tópicos</div>
</li>
<li> <div align="justify">
compartilhamento de vídeos</div>
</li>
<li> <div align="justify">
integração com Facebook, MySpace e Linkedin</div>
</li>
</ul>
<strong>Para configurar o TweetDeck</strong>, clique em <strong>settings</strong> (veja a localização, na imagem abaixo)<br />
<span id="fullpost"> </span><br />
<span id="fullpost"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbDplWE1H-WkpizqZquEaQYAFSrlwINbI-dCkZu9EZ9RJF96qNrnZ3zhFJLTneQY7qPa89q7FTTLvEtXzK9q04bbjHbNGzvrBOERFIAYw6Nu92Ne9x4YfVCrbazxXlteRwrEy7cWnHE1tZ/s1600-h/tweetdeck_settings%5B6%5D.jpg"><img alt="tweetdeck_settings" border="0" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh70ukLCZ2YX35-GQy92-IWj-pejRnc3kK44_-6yOUUl69QDXAHsJ_E5kMZmHQrGtuOo6CEHLGoJFqLMff6qYocCRj2Sv_Pxuv6Gzn8udUbfH-PLW1j_YqKsPhjfhHdFY_jlZRM_c40SO0U/?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="tweetdeck_settings" width="450" /></a></span><br />
<span id="fullpost"> Aqui está a janela com as principais configurações oferecidas pelo TweetDeck<br />
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU07MxhdLzu7juXgrZpnBTXG43xAkOY6-FCjABCXzwJsk0HRc592sImdYbKNeROnxCOgGABvh7x3JWSLbas7e_6xxvv0O90nHu-xitwqHfgMQpanGvPH1MQuVwRy3_J_6CFdAtNy5nxMuh/s1600-h/image%5B59%5D.png"><img alt="Settings" border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEZxg9m6-ZLZ3LTlvpmkpYBm2zXdOPnissr8ffoSbfuv5kPGf77rhqlkQr-cIhXa6uRRmPbJGfa4egCT2us6bDy8QOQiLFwg2bTa-4-HWW5PO8zuZjulagrUg1kONA0q9S1hMa3iL0Tfja/?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="Settings" width="450" /></a><br />
 <div align="justify">
Descrever uma a uma tornaria o post longo e cansativo, portante me concentrarei nas mais importantes. Faça seus próprios  testes e vá configurando conforme suas necessidades.</div>
<div align="justify">
<strong>Twitter –</strong> Aqui iremos configurar o tempo de recebimento dos tweets, replies e DMs. Recomendo que deixem como está, para não coorer o risco de extrapolar a quantia máxima. Para configurar o tipo de RT (retweet), clique em <strong>retweet button should:</strong></div>
<div align="justify">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsf-DqdSaYgZCMBbrnPoVYxTH22D4Aiz6QUK1tjDqOBVe9G5XrLxxJDTJ3-72A_m0ig_fYC_sw3FR1hbY5breQxAX8oZKTt64I66updWD5IFH5-qgnbIImYoOZhRdl8Eew-ukNAI3I5yp8/s1600-h/image%5B60%5D.png"><img alt="Botão de RT" border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRMP32BA1IwOcmJTtRZPCym9PxasvtECqfODv_zBOPBTsqruEnwsCKGzSdHrbGi4TGk5IgxA8RVuAbjBDOHxwJH2Zt2HYJz5-bgeKZx7ixs_3sQhpusCJmqd6C2wJtertope6fZ-CRkREZ/?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="Botão de RT" width="450" /></a> </div>
<div align="justify">
<strong>Notifications –</strong> Serve para escolher o tipo de notificações quando recebermos tweets, DMs e replies. Clique em advanced e configure à gosto.</div>
<div align="justify">
<strong>Colors/Fonts –</strong> O TweetDeck oferece a possibilidade de alteração de seu fundo preto, mas não do aumento da fonte – o que considero seu único defeito atualmente.</div>
<div align="justify">
<strong>Services –</strong> Use para escolher quais serviços você deseja usar para encurtamento de urls e para o envio de imagens. Dá para colocar também dados do TwitterCount.</div>
<div align="justify">
<strong>Accounts –</strong> Adicionar ou excluir  contas do Twitter, Facebook, MySpace e Linkdin</div>
<div align="justify">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqhVR15Uv4t3kW4VxtTFkBqp2TB2KJgmn5IkmMz4hmKn14J75xu_sU49vrIK0w8yI4yClOqgw-6JOtggvn-pJTkiA5LGEfNTKHaNjhbqR24LMKTo92PlY9GTcyKVUZM2dvfRAaKUFDynui/s1600-h/Sem%20T%C3%ADtulo-1%5B6%5D.jpg"><img alt="Accounts Tweetdeck" border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSfLz24e4BNnqrbwwSZ3NODuFOOMCC14X0Ck2_0SOccKSbPkf5nqsuG2eUebiqHdXGvPOmrDAhgrhUMBvlkGY4jEXbUNlT3CnKXt6c2MkbArMbbbc7z-O8Woc4IMJKTfhNvgykMSZWzjjJ/?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="Accounts Tweetdeck" width="450" /></a></div>
<strong>Como mover , excluir e adicionar colunas</strong><br />
 Um dos principais diferenciais do TweetDeck é que ele divide os tweets, replies, DMs, TTs, grupos e etc por colunas. Para <strong>excluir uma coluna</strong>, clique sobre o título dela e depois no ícone <strong>X. Para movimentar uma coluna,</strong> vá até o final dela e clique no ícone => ou <=.<br />
 <table border="0" cellpadding="2" cellspacing="0" style="width: 550px;"> <tbody>
<tr> <td valign="top" width="248"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW06N8zmQVqhFNSNBOZSaAVKoInbEOFC9MqSjlzlEfBvWidKqvFQVz2QHLa_pHU7CQmb_iDriYJ5aiR2jIx3ANgF-bVWZ_tiPoFBqX3w0xRI3H0fp0SxUWs16S3nlQrjxUmhRTkJM5nO5A/s1600-h/excluir_coluna%5B9%5D.jpg"><img alt="Excluir coluna" border="0" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiORXB4W3TavDeok5VMelREnhYC96yywMx85oO4ezaeI-BdaLQ3M-I2lFY6WDna6XAH-i_YwyQJNGMCHLSnlknbE0lOD9t3Tdr3IiWD5rdO9xUH8f974-WvxjlOrySmOU7sTij28Lj7OPHS/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="Excluir coluna" width="224" /></a> </td> <td valign="top" width="302"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxnCnmZMNNUH-ZcdytGcEt1gpAxFyzk5I0mgjRfTtXFQkOYARJfEgue7-Yzi2A8fxhxudGoSysdQLXHGbUg9yW1hQFZ8Zx8BAGipx1kSoDIjVUXzC1GUs-q-ZwSwNtyFNxR4pZC1sW6z3o/s1600-h/mover_coluna_tweetdeck%5B7%5D.jpg"><img alt="Mover coluna" border="0" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwg2CEMaAvO7EbfZ47QYsAvoYWgllPzC-zSo7rnj15kfXvbzfcQUVjEd0WyutGWj2KLQ4sgHPceL-b8YpFlPHXCEM4F8gN4y2IXVExLl7znEat2wjtu0-1V_ACTmUXmDvE65DpynvVGxzA/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="Mover coluna" width="257" /></a> </td></tr>
</tbody></table>
Para adicionar uma nova coluna, clique no ícone  “+”,  lá no alto do TweetDeck<br />
 <table border="0" cellpadding="2" cellspacing="0" style="width: 550px;"> <tbody>
<tr> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHPDNTDnEuV_X3pP9d9NsHj56_jrOjRIoLwu9__ptKlkxd3-LyEXphxGJS8hS0w0KAByeTK5gs41EC8I-80bPob9W9Y8RuFzKDWNsoT1azVUzMwuwCTwgQiF10wl1vA0IJCIWHdaet_w14/s1600-h/image%5B23%5D.png"><img alt="Adicionar coluna" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghIFvPZ8BF4STI-N_0ajnE6SYmvkxavBb5hXs8KM3kvZlCSZx8O7WPjToiSpfeDBM2uVI06b0lH4mOt_uCckyYnmAw9imSaHQLYvk1NOhaWsWVb9iTRtza2RmWyPNkzQMzpFmw0nszHDNn/?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="Adicionar coluna" width="247" /></a></td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiioq_NJ_4LWQeojEEkCwtRdH2EjMaAiubLXRWkYbob1xmI96mgbqtal9fW4hKc5Z7nRvTV7pDC2QzRJFsp3CYRfn0KPhyphenhyphenJ8OWpJp8ew4UQ5pCf8Fp3N4UWGhUMIjzNWSbQFpCh0dmbHWLY/s1600-h/image%5B21%5D.png"><img alt="Escolher coluna" border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZccKa5MleWZfBcanKSemvBjcuA-BvUrrlJF4LKsHUzSPLTHpN_XgUdWsBCXGfQ85RulaDkQCLFvKnu3YUfQnrCu2Iwt3sRsmKDraNgwcyuqD5Cq3BtMOM3CsHyj5QRuosdZ95YfDTe5Jv/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="Escolher coluna" width="240" /></a> </td></tr>
</tbody></table>
<strong>Como enviar tweets, RTs, replies e DMs</strong><br />
 Para enviar um tweet, clique no ícone específico (veja a imagem), escreva e aperte <strong>enter</strong>. Para enviar <strong>RTs, DMs e replies</strong> passe o mouse no avatar do seu amigo e escolha  entre as opções que irão aparecer em quadradinhos (veja a imagem)<br />
 <table border="0" cellpadding="2" cellspacing="0" style="width: 550px;"> <tbody>
<tr> <td valign="top" width="275"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBIVtqvgH7ev7CkYP0Vwu2RBRhiShLkmuY87zvfaDx8KpiqOPVHUHLOpBB_P6Iizm_6TS6Dr7xGKtdERwI_P_dX26sHXyiwUjldzpOQ_E__fP9DPAj8FX1jciT9ZECyppz3_knp-ncXQmx/s1600-h/image%5B48%5D.png"><img alt="Enviar tweets" border="0" height="57" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNcLcrLhzVRqbAHger6ncGiCPjyEQ7vZCq0R61dFJhKfnSGf2TpQPVMauiZkxGaZOQJRd3s00HaR213QbCD_SVBK3X7VXI5mjjSUqhAxXUf01yBt2bF0xtjuH7zdS_TSzwJhA2SHpNKhKN/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="Enviar tweets" width="220" /></a> </td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhoj_gG4zhjtvUzn-yXKa-PWY3en0uKehueLgrUig5Aa7r_NgfJzgDb_T80npXzz0IEkqAycYD7VCeg7mfxtdtsG5V1tZc02MomPCYoNB4xEaiGQu1kq0imea7HeUQzLkctp53Hdqlg4f5/s1600-h/image%5B49%5D.png"><img alt="Enviar replies, RTs e DMs" border="0" height="56" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzXBQr1BmiuMMGajQ2ozVKkFCG8iX1uJI1dVD8L42ufvd3688IvJ-pnFcwXe58SYd-Cs6DTKUTY4nhdTXWNxgnUaRDQmP36G5CreMx0Z3tj794k-C0EYOvtPgMd1huySeMnLKWHbkT4RrM/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="Enviar replies, RTs e DMs" width="220" /></a></td></tr>
</tbody></table>
<strong>Como encurtar urls</strong><br />
 Basta colar a url na caixa de texto, pois o TweetDeck encurta automaticamente<br />
 <strong>Como enviar imagens</strong><br />
 Clique sobre o ícone “upload images”e encontre a imagem no seu computador<br />
 <div align="justify">
<strong>Como criar grupos</strong></div>
<div align="justify">
Clique no avatar do seu amigo e em “other actions>user>add to group or list. Você pode criar novos grupos ou usar suas listas do Twitter e, depois, adicionar em uma nova coluna.</div>
<div align="justify">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbKlETCr7jsnFxVljrxXMLUtlP1QVpOf5Ndufn8AAOg6ErayGMmTfPp-5ey36bFrPK05Czn6UVOOWQhkghTRgldv-U_kVyRL9WfG3viHCiLqDOP3ZuGMop8sh3HY8XarVx1rd3jn0R9gMv/s1600-h/image%5B7%5D.png"><img alt="tweetdeck groups" border="0" height="154" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK577P84qjMWR9GIPHzJ2Pg-MvplzclhVfIzehf2KzP6pkd_ewHYIlchiCQfc4e-ussFiYWFXR1hYC8wfdXmrMf-t57U2gKO1Ae1EMQc_iaRcJtC8wlU1AUsRf_EV4IKE5a_KEeKM_5SHz/?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="tweetdeck groups" width="450" /></a><strong>DICA:</strong> é possível isolar os tuiteiros que você <strong>não deseja</strong> mais acompanhar, sem precisar dar unfollow. Crie uma lista ou grupo e não coloque  em nenhuma coluna do TweetDeck.</div>
<strong>Outras configurações do TweetDeck</strong><br />
 <div align="justify">
<strong>Para visualizar um perfil</strong>, clique no link que fica embaixo do avatar. O perfil irá aparecer no canto direito da tela, com vários detalhes, incluindo  botão para follow/unfollow e grupos.</div>
<table border="0" cellpadding="2" cellspacing="0" style="width: 550px;"> <tbody>
<tr> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm4OsUd05XJJvIIbyQ3Oiuq2jlWHL4AQ5snFwieIGV7_XaNQ4NO6VvLa3g6ezE0_t08BgJADDbYjw6ybdhhhTT8MmZBSZiFUqfNMbyr2IF17LglSTQCjeW0g38mW8AEf_C118lIZk3k9G5/s1600-h/image%5B20%5D.png"><img alt="Link para visualizar perfil" border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu70zcbW0kq-Yc4puVBoxuxkoAz8xKqWZBlVFfYli64nmrIC163Pn9A6UtC-nElNz5C69kNRu4GJrOe4JEP7oDVDoqjp-8fapCZPivKnMxfea3ra3oy5NWmZaocXSIZPAERc8fjEPe3zkt/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="Link para visualizar perfil" width="238" /></a> </td> <td valign="top" width="275"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwdfNdkooN8Oj4cpnWWwvbKDjlck_Q75fDpLmDZlv3Yc1rtw8fwyPDM0ASxNIufO0peEscDjVp_04DWaKersjlYdOuEgwcxe8TtaJ8eOG1okUYvARb6jwP7rnzJ6OvkUwY4nhLoasXI7_p/s1600-h/image%5B21%5D.png"><img alt="Visualização do perfil" border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkwY7Rc5noh6iPebk-lEdWDrVFtAyH3dSob4Od1M2S6BDRUyhxYNFaXvG58Mo1608WJxcneFuy2aMbrQXlHOCiN-IVfHa03spppRzJwyQXBGtVED5srsCq2gixeiNViDrmjxLG5htvm6qT/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="Visualização do perfil" width="266" /></a> </td></tr>
</tbody></table>
<strong>Para seguir ou parar de seguir um perfil</strong><br />
 Faça o mesmo procedimento anterior e clique no botão Follow ou Unfollow<br />
 <strong>Para bloquear um perfil</strong><br />
 Passe o mouse no avatar do futuro bloqueado e escolha “other actions>user>block”<br />
 <strong>Para apagar tweets, DMs e replies</strong><br />
 Passe o mouse no seu avatar e clique em “other actions>tweet>delete”<br />
 <strong>Para responder a vários usuários</strong><br />
 Passe o mouse sobre o avatar e clique em “other actions>tweet>reply all”<br />
 <strong>Para visualizar imagens e links</strong><br />
 Clique sobre a url da imagem ou do link<br />
 <strong>Para encontrar alguém</strong><br />
 Clique no ícone <strong>quick profile</strong>, que fica ao lado do ícone para enviar tweets<br />
 <strong>Para enviar um tweet para vários amigos</strong><br />
 <div align="justify">
Escreva o símbolo arroba (@) dentro da caixa de texto; todas as pessoas que você segue, aparecerão em nova janela. Daí é só escolher.</div>
<div align="justify">
Acho que é só :) Se vocês se lembrarem de mais alguma função, por favor, enviem pelos comentários para que eu possa incluir no post.</div>
<strong>Outros links para enriquecer a experiência com o Twitter:</strong><br />
 <ul>
<li><a href="http://www.dicasblogger.com.br/2009/11/como-criar-listas-no-twitter.html">Como criar listas no Twitter</a>  </li>
<li><a href="http://www.dicasblogger.com.br/2009/09/as-hashtags-e-linguagem-twitter.html">As # hashtags e a linguagem no Twitter</a>  </li>
<li><a href="http://www.dicasblogger.com.br/2009/07/como-usar-o-twitter.html">O que é e como usar o Twitter</a>  </li>
<li><a href="http://www.dicasblogger.com.br/2009/06/o-que-e-o-rt-do-twitter.html">Afinal o que é o RT do Twitter e pra que serve?</a></li>
</ul>
</span>

Como usar e configurar o TweetDeck

No post anterior, expliquei como instalar o TweetDeck no Windows . Agora tentarei mostrar suas principais configurações e como tirar o máxi...

Continue Lendo >>

11:37

Como instalar o TweetDeck

<div align="justify">
O Twitter continua sendo um sucesso, mas sua interface web mantém-se limitada. Não dá suporte a encurtamento de urls, nem a fotos e vídeos e o RT não é editável – o que atrapalha na hora de fazer um comentário sobre o que se está retuitando. Para driblar essas limitações, existem diversos aplicativos para desktop, para celulares e complementos para Firefox.</div>
<ul>
<li><a href="http://www.dicasblogger.com.br/2009/08/aplicativos-para-usar-o-twitter.html">Dicas Blogger: Aplicativos para usar o Twitter</a>  </li>
<li><a href="http://www.dicasblogger.com.br/2009/02/twhirl-um-otimo-aplicativo-para-twitter.html">Dicas Blogger: Twhirl – um ótimo aplicativo para Twitter</a></li>
</ul>
<div align="justify">
Um dos melhores aplicativos para desktop é o <strong>TweetDeck, </strong>entretanto configurá-lo e fazer uso de suas principais funcionalidades, não é lá muito simples, por isso resolvi fazer uma série de tutoriais para auxiliá-los a tirar o máximo proveito do Twitter através do TweetDeck.</div>
<span id="fullpost"> </span><br />
<div align="justify">
<span id="fullpost"><strong>Instalação do Tweetdeck</strong></span></div>
<span id="fullpost"> <div align="justify">
Antes de mais nada, é preciso instalar o <a href="http://get.adobe.com/air" target="_blank">Adobe Air</a> no seu computador. Depois, entre em <a href="http://www.tweetdeck.com/" title="http://www.tweetdeck.com/">http://www.tweetdeck.com/</a> e clique em <strong>download now.It’s free.</strong></div>
<div align="justify">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5NpSz__W3La7qp930DXjvvFdvf10nVVzRvPt0MmiVLU6pXNpqiYHE9A06ud_Hda_yotTuj-SQYAGENenneB908V88Fp6sC9MKsk91hJ1DyLDCc7zY9pZrGCIwtc5bPyqz24WT6WZShHT4/s1600-h/tweetdeck_install%5B6%5D.jpg"><img alt="" border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxJqVIJLhaa8fyvqBfHgwOP5y18tHe8415GiZAmCX1NW80htMDTAYbjKouAdIqRGFNeoSdiwzcZd_rLs71XTC_i9JuLYnDmm_Pbi28l70oDAymTQMfURMKFPLFKMSA2wCLPfeePMNb43ZH/?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="Instalação" width="450" /></a></div>
Irá aparecer uma pequena janela de integração com o Abode Air. Clique em <strong>abrir</strong>.<br />
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiINxhgZ8llk_0_Uy-H2p60wV0JETKT4LWG3m9eeOSwViVP1cKvm6UbceeCB1QkySycxTztekTmQmGajBqIjxSPqujwMjVFicYM5GUD4oiGmC_V8ezOktoocAOSs51hnPrNlXxQZiUjNCDl/s1600-h/image%5B31%5D.png"><img alt="" border="0" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim9tDfjpnbjuyyzpbTYQiECH5ifTXWmUlj4NDBaYBam3gpkFGwVo3bnffcMBkrCFxGEgr-NlpyU7DvUQb056PlMQLkNvIyS2udfsfUgy6MOYljkzz6CJCGy40jOsPCk6DQdaRKfu2D1Tf8/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="" width="450" /></a><br />
 Tem certeza que deseja instalar este aplicativo no seu computador? Clique em <strong>instalar</strong>.<br />
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz3zWieqVdzuj2PDA3e9IYcbXTabQwDHlPuQau6QngpkYI1CBThiRBaokvLdD0ujXjMXSC1ZwaSVM8IEyAFmRPRYqZIg76kokFVrekFkFsBi9uqmC5cJprFvrVuzLJRwVn-RQ7ol-t1Yh3/s1600-h/image%5B32%5D.png"><img alt="" border="0" height="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvkTZoyLR0SVkcgXvgdSUOWHyfdNc802EcpJEso3U6_aCyoIB0g8SJuV3EFzpNHFrkM2JV8AXtWG3kZJ0UroAjWvqtP7tKD516vP0Nbme2FIjpfuQ-RojVev3_QEVY8FDm5UIDYPlHUOeG/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="" width="450" /></a><br />
 Aguarde o término da instalação e insira seu login e senha do Twitter.<br />
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqenttMFxqZ2hGnXlLPteuIQvMwQUBSNNScf3COAObyheR0ra4kR1-J1mHAj8rcNHaqa3SWaFk9UGPZY6HH8Z9D0mcdvJ3NiDQtaSaamNkQhIB0iVv7rJMMTbTNfqvkpqM4kPZdX3LxFrK/s1600-h/image%5B33%5D.png"><img alt="" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin_lx9d6-sln8vJHgulQHLQ3rQV-xv3JRUb2xtlDdjwzzZ_vtn4eBZPaSLXMkzNlXFAxCjLahZOye6HoyrJfFbdmuz8_K8xtDhLid-6DmvQN9OikdTAwu1Y3C7g_LUyupsg2XNgyweBA9V/?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="início" width="450" /></a><br />
 No próximo post, irei mostrar as principais configurações e como usar o TweetDeck.</span>

Como instalar o TweetDeck

O Twitter continua sendo um sucesso, mas sua interface web mantém-se limitada. Não dá suporte a encurtamento de urls, nem a fotos e vídeos ...

Continue Lendo >>

10:07

Widget - assinantes de feeds e followers do Twitter

<div align="justify">
Hoje eu não irei diponibilizar nenhum tutorial e sim divulgar o excelente trabalho  desenvolvido pelo  metablogger <a href="http://twitter.com/pauloestevao" target="_blank">@pauloestevao</a> do <strong>Códigos Blog</strong>, com o auxílio do jovem <a href="http://www.twitter.com/blogueirosnaweb" target="_blank">Fernando</a> do blog <a href="http://www.blogueirosnaweb.com/" target="_blank">Blogueiros na Web</a>. Graças a eles, nós usuários do Blogger já podemos usar um widget que só existia para Wordpress e que mostra o número de assinantes de feeds e de seguidores no Twitter juntos e em forma de texto. (Como assim, Bial? <strong>#bbbfeelings</strong>)</div>
<div align="justify">
Explico. Já faz um bom tempo que o recurso foi adotado por blogueiros que usam Wordpress e, além de bonito, é super funcional. Coloca-se um ícone de Twitter, outro de Feeds e o número de followers e de assinantes, respectivamente, na frente de cada ícone. Complicou?</div>
<span id="fullpost"> </span><br />
<div align="justify">
<span id="fullpost"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTm9gOTuQE7bCYb8UjVG9cld-g627uJWm9FE56-Z8HRVKAOx8XnuhQjdFEyojdP0C27Onk8EIcQ3Nx0fH-xg6F41g4czfVXmx_Y224P0i1wasG9qLzzCBlRGvCDj6VEJa_3N8xTOQjQZht/s1600-h/Sem%20T%C3%ADtulo-1%5B5%5D.jpg"><img alt="widget_feeds_twitter" border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT_rj4YWmKbYIoybqwc6Qf49nh1S3LK4Kq-NE7gMmKMw1jSyW1oy8v18j7ElYDOC663-flSw7MmrR69ZNR8lrPLV4o5C4OnG8FJCxiPb_JtLb0KbCk-aNGJfjawxX4obSrLC8kzqCYTNZe/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="" width="450" /></a></span></div>
<span id="fullpost"> <div align="center">
<span style="font-size: xx-small;">Uma imagem fala mais do que mil palavras</span></div>
<div align="justify">
Lindo, não? O código para implementar o widget, já está à disposição de todos! Corram!</div>
<blockquote>
<div align="center">
<span style="font-size: small;"><strong>  </strong></span><a href="http://www.codigosblog.com.br/2010/02/widget-contador-de-assinantes-feed-e.html"><span style="font-size: small;"><strong>Widget contador de assinantes feed e seguidores do Twitter</strong></span></a> </div>
</blockquote>
<div align="justify">
Além do widget duplo (feeds + twitter), o Paulo Estevão disponibilizou também um outro que mostra somente os assinantes de feeds - <a href="http://www.codigosblog.com.br/2010/01/contador-de-assinantes-feed-em-forma-de.html">Contador de assinantes feed em forma de texto</a>. </div>
Se vocês quiserem mudar os ícones do widget, acessem  <a href="http://www.dicasblogger.com.br/2009/11/15-sites-para-busca-de-icones-web.html">15 sites para busca de ícones web</a>.<br />
 <div align="justify">
Bom, esse foi o resultado de uma parceria entre dois metabloggers, certo? Pois bem. Depois chegou o <a href="http://twitter.com/hordones" target="_blank">@hordones</a>, do Ferramentas Blog e desenvolveu um terceiro widget, que mostra assinantes de feeds, seguidores no Twitter, número de comentários e de posts - <a href="http://www.ferramentasblog.com/2010/02/menu-com-icones-e-contadores-de-artigos.html">Menu com ícones e contadores de artigos, feed, Twitter e comentários para Blogger</a>.</div>
<div align="justify">
E pra quem ainda acredita na tolice que existe rivalidade entre nós, meu sincero <strong>LOL .</strong></div>
</span>

Widget - assinantes de feeds e followers do Twitter

Hoje eu não irei diponibilizar nenhum tutorial e sim divulgar o excelente trabalho desenvolvido pelo metablogger @pauloestevao do Código...

Continue Lendo >>

18:15

TweetMeme- Inserindo botão de Retweet no Blogger

<p align="justify">A nova febre é o botão de RT do site <a href="http://tweetmeme.com/" target="_blank">TweetMeme</a>. Muitos bloggers já adotaram esse recurso, que mostra todos os retweets de um determinado post. Por insistência do <a href="http://www.twitter.com/luanfr" target="_blank">@luanfr</a>, acabei aderindo também e não é que ficou bonitinho? Além de mostrar os Rts, o botão ainda possibilita que os leitores enviem nossos posts diretamente para a página do Twitter. E é simples de instalar.</p>  <p><strong>Para colocar o botão embaixo dos posts:</strong></p>  <p>Entre no html do template (layout>editar html), marque a caixa “expandir modelos de widgets” e procure (Ctrl+F) por:</p> <span id="fullpost">   <blockquote>     <p><div class='post-footer'> </p>   </blockquote>    <p>Cole logo <strong>acima</strong> o seguinte código:</p>    <blockquote>     <p><span style="color:#008000;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span></p>      <p><span style="color:#ff0000;"><script type="text/javascript">         <br />tweetmeme_source = <strong>'NOME NO TWITTER'</strong>;          <br /></script>          <br /><script type="text/javascript" src="</span><a href="http://tweetmeme.com/i/scripts/button.js%22"><span style="color:#ff0000;">http://tweetmeme.com/i/scripts/button.js"</span></a><span style="color:#ff0000;">></script></span></p>      <p><span style="color:#008000;"></b:if></span></p>   </blockquote>    <p>Substitua NOME NO TWITTER pelo seu nome de usuário e salve. </p>    <p>A parte em <span style="color:#ff0000;">vermelho</span> é referente ao <strong>código do TweetMeme</strong> e a parte em <span style="color:#008000;">verde</span> é referente às condicionais para que o botão só apareça nos posts e não na página inicial do blog.</p>    <p><strong>Para colocar o botão entre o título e o post</strong>, encontre:</p>    <blockquote>     <p><div class='post-header-line-1'/></p>   </blockquote>    <p>Cole o código anterior <strong>embaixo</strong> dessa linha e salve. </p>    <p align="justify">Você pode integrar o botão de RT com um anúncio, do tipo banner ou meio banner (Isso vai depender do tamanho da área de postagem do seu blog). Basta usar o seguinte código:</p>    <blockquote>     <p><b:if cond='data:blog.pageType == &quot;item&quot;'></p>      <p><table </p>      <p>style="border: 1px solid rgb(255, 255, 255); background:rgb(255, 255, 255);text-align: left; width: 100%;" cellpadding="2" cellspacing="2 "> </p>      <p><tbody> </p>      <p><tr> </p>      <p><td valign="undefined" align="left"><strong>CÓDIGO DO TWEET MEME </strong></td> </p>      <p><td valign="undefined" align="undefined"> <strong>CÓDIGO DO ANÚNCIO </strong></td> </p>      <p></tr> </p>      <p></tbody> </p>      <p></table> </b:if> </p>   </blockquote>    <p>Aí está o resultado que eu obtive no meu blog de testes, usando um banner:</p>    <p align="justify"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy_YshA_Xohen2DlUqGpATiMD8Q7VdWbIfs9y_wGce8nBFVub4xBeZMNpjyZNPlMs_uPhWcZBVCwzE3cbPVHiKCjIrLfKb58VzJ3W6nb1VTpB3pEnALa3ae7I3jkYyLYK_CLRcWS7WaT54/s1600-h/image%5B15%5D.png"><img alt="image" border="0" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpvEfI4sT7Hx0k2MFu0rhsftKcWmkyHqgDVrJG7eskuEtytjZQcUv9T7qToZ_ze7FhaXBAdy0b0UpKTXSISDC1rPrMHwvEfrM_eB3M7d6-D9XmlZiJNQ6kEq2SKlONhhFrPqbf-rXG1-U8/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="image" width="450" /></a></p>    <p align="justify">Lembrando que o código do AdSense tem que ser convertido. Use o site <a href="http://blogcrowds.com/resources/parse_html.php" target="_blank">Blogcrowd</a>.</p>    <ul>     <li><a href="http://www.dicasblogger.com.br/2008/05/anuncios-nas-postagens-do-blogger.html">Anúncios nas postagens do Blogger</a> </li>   </ul>    <p align="justify">Caso você não use publicidade no seu blog, coloque um mensagem para os seus leitores. E se quiser ir mais além, use o programa NVU portable para construir o seu próprio código:</p>    <ul>     <li>       <div align="justify"><a href="http://www.dicasblogger.com.br/2010/01/mensagens-no-rodape-dos-posts.html">Mensagens no rodapé dos posts</a></div>     </li>      <li>       <div align="justify"><a href="http://www.dicasblogger.com.br/2009/07/aprendendo-criar-tabelas-em-html.html">Aprendendo a criar tabelas em HTML</a></div>     </li>   </ul>    <p align="justify">Exemplo de uma mensagem legal:</p>    <blockquote>     <p><b:if cond='data:blog.pageType == &quot;item&quot;'></p>      <p><table </p>      <p>style="border: 1px solid rgb(255, 255, 255); background:rgb(255, 255, 255);text-align: left; width: 100%;" cellpadding="2" cellspacing="2 "> </p>      <p><tbody> </p>      <p><tr> </p>      <p><td valign="undefined" align="left"><strong>CÓDIGO DO TWEET MEME</strong> </td> </p>      <p><td valign="undefined" align="undefined"> </p>      <p><b>Siga este blog no  <a href='<strong>http://LINK DO SEU TWITTER</strong>'>Twitter </a> e fique por dentro das novidades!</b> </p>      <p></td> </p>      <p></tr> </p>      <p></tbody> </p>      <p></table> </b:if></p>   </blockquote>    <p align="justify">Recomendo que essas alterações sejam feitas, primeiramente, em um blog de testes.</p>    <p align="justify"></p>    <p><strong>ATUALIZAÇÃO EM 27/08/2010</strong></p>    <p>Para que o botão fique à direita do anúncio, inverta os códigos:</p>    <blockquote>     <p><b:if cond='data:blog.pageType == &quot;item&quot;'></p>      <p><table </p>      <p>style="border: 1px solid rgb(255, 255, 255); background:rgb(255, 255, 255);text-align: left; width: 100%;" cellpadding="2" cellspacing="2 "> </p>      <p><tbody> </p>      <p><tr> </p>      <p><td valign="undefined" align="left"><strong>CÓDIGO DO ANÚNCIO</strong></td> </p>      <p><td valign="undefined" align="undefined"> <strong>CÓDIGO DO TWEETMEME </strong></td> </p>      <p></tr> </p>      <p></tbody> </p>      <p></table> </b:if> </p>   </blockquote>    <p>Caso você não use anúncios, siga esta dica do <a href="http://www.ferramentasblog.com/2010/08/widget-tweet-button-oficial-do-twitter.html" target="_blank">Ferramentas Blog</a>:</p>    <blockquote>     <p><b:if cond='data:blog.pageType == &quot;item&quot;'>       <br /><p style='display: inline; float: right; margin-left: 5px'></p>      <p>Adicione aqui o código do botão </p>      <p></p>       <br /></b:if></p>   </blockquote>    <p></p> </span>

TweetMeme- Inserindo botão de Retweet no Blogger

A nova febre é o botão de RT do site TweetMeme . Muitos bloggers já adotaram esse recurso, que mostra todos os retweets de um determinado po...

Continue Lendo >>

19:07