Dicas Blogger: Gadgets

Home » Categories: Gadgets

Mostrando postagens com marcador Gadgets. Mostrar todas as postagens

Translator Widget - um novo tradutor para blogs

<div>
Desde que comecei a divulgar meus templates em sites estrangeiros, passei a receber muitos emails em outros idiomas. Já fazia um bom tempo que eu procurava um widget com um tradutor do Google  para facilitar a vida dos meu leitores gringos, porém não conseguia encontrar nada que me agradasse.</div>
<div align="justify">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMb3zr_mPgybC9V4dXKWuXz2-2SkhsjrODTUn4f7_eglI1KZA9ys_Ya2AcLQMDHJLtPF0h9ydrD5eTNrtQRPsY_rzUMKaWzy7U3akBDv3pMcM2PU8RGX2XqfD_ifpvnfXxaSrrIVTHQ0fi/s1600/agencia-de-traduccion.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="339" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMb3zr_mPgybC9V4dXKWuXz2-2SkhsjrODTUn4f7_eglI1KZA9ys_Ya2AcLQMDHJLtPF0h9ydrD5eTNrtQRPsY_rzUMKaWzy7U3akBDv3pMcM2PU8RGX2XqfD_ifpvnfXxaSrrIVTHQ0fi/s640/agencia-de-traduccion.jpg" width="640" /></a></div>
Depois de muita pesquisa na web, reuni vários códigos e acabei criando um widget do meu gosto, cujo resultado pode ser visto na nossa primeira sidebar.</div>
<span id="fullpost">    </span><br />
<div align="justify">
<span id="fullpost">Ao comentar no Twitter, vários leitores se mostraram interessados em utilizar o widget em seus blogs; sendo assim, resolvi disponibilizá-lo para todos \o/.</span></div><div align="justify"><br /></div><div align="justify">Recomendação: <a href="https://guiadacompra.com/melhor-notebook/" target="_blank">Melhor Notebook</a><br />
<br /></div>
<span id="fullpost">
</span>
<br />
<div align="justify">
<span id="fullpost"><b>TRANSLATOR WIDGET COM BORDA E PLANO DE FUNDO (personalizável)</b></span><br />
<span id="fullpost"><b><br /></b></span></div>
<span id="fullpost">
</span>
<br />
<div align="justify">
<span id="fullpost"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPN-v3IfOmPkXs611tjTbUZ-zn8E-FAdCS6KPDaNWvdoAQ9i2Q07OpbN4VTSXRMck0aw7JVqlVetv_H3nndn_gO65njPyfyabEZmAwzLWV6ucrexjDf5ov9OeK3W7NPHp6QufQZG-c-rxx/s1600-h/image%5B11%5D.png"><img alt="Tradutor com fundo e borda" border="0" height="96" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjueizXxJO9RtTy8HCCQhXLoe5qrhntaFb7wHwtDD2toWPwHq1Re2hqR9CgZi9TDgZM05iU8Pxq-JglxQxLe-6SY8lHHo5FrQA5Vp2GNxF61wGEufz6k_kFzUqL8xFQlYMpdAur8i3Y0_nd/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Tradutor com fundo e borda" width="452" /></a> </span></div>
<span id="fullpost">
<br />
</span><br />
<blockquote>
<div align="center">
<span id="fullpost"> <a href="http://docs.google.com/Doc?id=df9875tg_4drr7ncgv" target="_blank">Código do translator widget com fundo personalizável</a> </span></div>
</blockquote>
<span id="fullpost">
</span>
<br />
<div align="justify">
<span id="fullpost">Clique no link acima e copie todo o código. Entre no painel do Blogger e clique em <b>Layout</b>. Na aba onde você pretende inserir o tradutor clique em<b> adicionar gadget (1)</b> e <b>escolha html/javascript (2)</b>. Cole o código do tradutor e salve.</span><br />
<span id="fullpost"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<span id="fullpost"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpgg1c-TJAAufPIDndjtg__PhiwCbmbrICmUhKvJZDMYWVFVKmUNG7jQExS11cVsesexgjANXa8CwwiQWNYnMZU8de-CF-PfN5Mv5YFNtpvNVFIKtk3psqrRIim9IJCycawGLagsTyfMp_/s1600/Adicionar+Gadget+HTML+Javascript.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpgg1c-TJAAufPIDndjtg__PhiwCbmbrICmUhKvJZDMYWVFVKmUNG7jQExS11cVsesexgjANXa8CwwiQWNYnMZU8de-CF-PfN5Mv5YFNtpvNVFIKtk3psqrRIim9IJCycawGLagsTyfMp_/s400/Adicionar+Gadget+HTML+Javascript.jpg" width="400" /></a></span></div>
<span id="fullpost"><br /></span></div>
<span id="fullpost">
</span>
<div align="justify">
</div>
<span id="fullpost">
<div align="justify">
O tradutor já vem com borda cinza escuro e com o fundo cinza claro. Para mudar as cores, altere as seguintes partes do código (vermelho=borda ; verde=plano de fundo)</div>
<blockquote>
<div align="left">
<div style="<span style="color: #400040;">border</span>:1px solid #<span style="color: red;">ccc</span>;padding:10px 4px 3px 4px;text-align:center;background-color:#<span style="color: green;">efefef</span>;"></div>
</blockquote>
<div align="justify">
Se você não sabe o número da cor que deseja usar, veja na <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm" target="_blank">tabela de cores web</a>.</div>
<div align="justify">
Se você preferir, temos o translator widget com o fundo transparente.<br />
<br /></div>
<div align="justify">
<b>TRANSLATOR WIDGET SEM BORDA E COM FUNDO TRANSPARENTE</b><br />
<b><br /></b></div>
<div align="justify">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7GdbA4_4_BohKWUBi3CWi8kidIDJE_ULgGG39VuAKkkhLstQcfF5MdXwP0rLWSh_mobmYBJ1WeuVyYad9jIBKNs8bBIYpQGwpnwIqt3SnXaFgl4yVSYNiFqfHoRJh2ff94b5paxlbI8__/s1600-h/image%5B18%5D.png"><img alt="Tradutor com fundo transparente" border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaaM0sPwbHu_jrWHsWXbIYF4Yfk05865uL-IvNUSJ2hu4-uvtxPTSo9hfLqq1y0WanmAE0PIkPIAJfAAITZL8nR6eefd9bnuYfrQ6iGNbqE-MFlhlANK6FH00fQ5zx1FkeVl4H7SBhY3ZV/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Tradutor com fundo transparente" width="452" /></a></div>
<blockquote>
<div align="center">
 <a href="http://docs.google.com/View?id=df9875tg_15fkg8rhhd" target="_blank">Translator Widget com fundo transparente</a></div>
</blockquote>
<div align="justify">
Si quieres traducir del español a otros idiomas, visite esta entrada del blog Vagabundia - <a href="http://vagabundia.blogspot.com/2010/04/widget-traductor-usando-google.html">Widget traductor usando Google Translate</a>.<br />
<div style="text-align: right;">
<i><span style="font-size: xx-small;">Atualizado em 04/08/2016 por Priscila Fago</span></i></div>
</div>
</span>

Translator Widget - um novo tradutor para blogs

Desde que comecei a divulgar meus templates em sites estrangeiros, passei a receber muitos emails em outros idiomas. Já fazia um bom tempo ...

Continue Lendo >>

16:19

Novo gadget Postagem em destaque no Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl5PNSIEKUBnSXkQYjSQ7bbcvNYTTfvYMn3SnbN_d-mUSzn76lT-B__4iCAoTascglQTmy2MrMpJM0m-qYQPTSLHYmmH8CC2W7bgdINJsxKTaPvCraXqzTBWS2_bnBb46gempK56RVDrE/s1600/novo_gadget_postagem_em_destaque_dicas_blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="novidade no blogger, novo gadget blogger, postagem em destaque blogger, dicas blogger, paulo guilherme, novidade blogger" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl5PNSIEKUBnSXkQYjSQ7bbcvNYTTfvYMn3SnbN_d-mUSzn76lT-B__4iCAoTascglQTmy2MrMpJM0m-qYQPTSLHYmmH8CC2W7bgdINJsxKTaPvCraXqzTBWS2_bnBb46gempK56RVDrE/s320/novo_gadget_postagem_em_destaque_dicas_blogger.png" title="Novo gadget Postagem em destaque no Blogger" width="320" /></a></div>
<br />
Recentemente nós publicamos aqui no Dicas Blogger, que <a href="http://www.dicasblogger.com.br/2015/10/o-blogger-continua-evoluindo.html" target="_blank">o Blogger continua evoluindo</a>, e nos últimos dias, o lançamento do gadget <b>Postagem em destaque</b> só reforçou nossa certeza de que o Google ainda está olhando para o Blogger.<br />
<br />
A novidade que foi lançada há alguns dias atrás, permite que você escolha uma postagem entre suas postagens, para que tenha relevância na área onde você escolher.<br />
<br />
Embora seja uma ferramenta simples, pode ser bastante útil para quem quer destacar um comunicado importante no blog ou até mesmo mostrar seu <i>look</i> favorito do mês para seus leitores.<br />
<br />
Para adicionar o novo gadget, basta acessar o seu blog no painel do Blogger (<a href="http://www.blogger.com/" rel="nofollow" target="_blank">www.blogger.com</a>), ir na guia <b>Layout</b> do seu blog, clicar em <b>Adicionar um gadget</b> e adicionar <b>Postagem em destaque</b>. É importante frisar que você pode colocar apenas uma postagem em destaque. Caso você queira inserir mais de uma postagem, não será possível.<br />
<br />
E então, o que você achou da pequena novidade? :)

Novo gadget Postagem em destaque no Blogger

Recentemente nós publicamos aqui no Dicas Blogger, que o Blogger continua evoluindo , e nos últimos dias, o lançamento do gadget Postagem...

Continue Lendo >>

21:28

Adicionar gadget Fanpage do Facebook no Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmJYEQc9XbwjAiUOCVQI9VgD76YsvhEn52O7vrBZpU933CMFwU1BoaIChyphenhyphenGkKsEgcaggmIZll5vnMgbyvhgvWklR6Vbz6s9t8G21YBavrOI4r1nEulyfE1c-CSKLMv8tRM4-k3qRHb_hCP/s1600/Facebook_like_thumb.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="273" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmJYEQc9XbwjAiUOCVQI9VgD76YsvhEn52O7vrBZpU933CMFwU1BoaIChyphenhyphenGkKsEgcaggmIZll5vnMgbyvhgvWklR6Vbz6s9t8G21YBavrOI4r1nEulyfE1c-CSKLMv8tRM4-k3qRHb_hCP/s320/Facebook_like_thumb.png" width="320" /></a></div>
Em 2010 eu já havia publicado um tutorial ensinando a colocar o gadget "curtir página" do Facebook no Blogger, mas de lá para cá o código mudou então estamos atualizando a postagem.<br />
<br />
Primeiramente é preciso criar uma página de seu blog no Facebook. Para adicionar o gadget vá em "layout", clique em "adicionar gadget" e escolha "HTML/javascript". Cole o seguinte código:<br />
<br />
<blockquote class="tr_bq">
<div id="fb-root"></div><br />
<script>(function(d, s, id) {<br />
  var js, fjs = d.getElementsByTagName(s)[0];<br />
  if (d.getElementById(id)) return;<br />
  js = d.createElement(s); js.id = id;<br />
  js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.0";<br />
  fjs.parentNode.insertBefore(js, fjs);<br />
}(document, 'script', 'facebook-jssdk'));</script><br />
<br />
<div class="fb-like-box" data-href="https://www.facebook.com/<span style="color: #cc0000;"><b>URL DA SUA PÁGINA</b></span>" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div></blockquote>
Substitua <b>URL DA SUA PÁGINA</b> pelo endereço da sua página no Face e salve. <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX78wwAanmHdo8RhCSOhnmZkbn-1vS5iMyMpYZK7cIvehWAYuz2NVBcVz93UryyaSv5iPvG5_Z0R_iMpQ8Lj484jjyB9srY3KqZnDNneCO-y2iAMOZMKT8MVrZ6NwUEztliKGTxfZFUMRX/s1600/gadget-facebook.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX78wwAanmHdo8RhCSOhnmZkbn-1vS5iMyMpYZK7cIvehWAYuz2NVBcVz93UryyaSv5iPvG5_Z0R_iMpQ8Lj484jjyB9srY3KqZnDNneCO-y2iAMOZMKT8MVrZ6NwUEztliKGTxfZFUMRX/s1600/gadget-facebook.png" /></a></div>
Para saber a URL do seu blog, acesse sua página no Facebook e copie o endereço que aparece no navegador. Veja abaixo o exemplo da URL do Dicas Blogger:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB5Iek5rfa6rJo8Nsp4zBn5Ul2ly-Cv6WzqlGKPiJN0nQTsONkJbd3uBdfqnsBKK2-LamQvtaxgx7uc-XZXFlt0Js2fiFACkjs6_C6To7idZvO2-_EJ3g0WGNSTKLZYx5QgLku4kOsLMEt/s1600/facebook-url.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB5Iek5rfa6rJo8Nsp4zBn5Ul2ly-Cv6WzqlGKPiJN0nQTsONkJbd3uBdfqnsBKK2-LamQvtaxgx7uc-XZXFlt0Js2fiFACkjs6_C6To7idZvO2-_EJ3g0WGNSTKLZYx5QgLku4kOsLMEt/s1600/facebook-url.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
Caso você queira personalizar este gadget do seu gosto, entre na<a href="https://developers.facebook.com/docs/plugins/page-plugin" target="_blank"> página de plugins do Facebook.</a><br />
<br />
Abraços, Juliana <br />
<br />

Adicionar gadget Fanpage do Facebook no Blogger

Em 2010 eu já havia publicado um tutorial ensinando a colocar o gadget "curtir página" do Facebook no Blogger, mas de lá para cá...

Continue Lendo >>

08:27

Widget do Instagram para seu blog

Esta dica certamente vai ser útil para muitas blogueiras (e blogueiros também) que adoram postar fotos em seu perfil do Instagram. Isso se torna mais legal ainda, quando você tem um blog, e quer mostrar aos seus leitores o que você andou fotografando por aí.<br />
<br />
Na verdade, não existe um método oficial e específico dos desenvolvedores do Instagram para fazer isso, porém, existem alguns serviços de terceiros, que conseguem exibir suas fotos em seus servidores, e fazê-las aparecer em seu blog como miniaturas. É o que você irá aprender logo abaixo :)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMOn9hs4h0sApcbAEUKixRFnXAeLbyQZxPNPRzM7vnZ5M6CNLOitDv7EFvaufI_D7neOnFKnTl0MPzoyNR4icqNtnAcMI8AKl5sx5Bb8EfiA2ICzh7eyRCtw4IAB2qKWbX8H_wcwsWdSY/s1600/como_adicionar_fotos_do_instagram_no_blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Widget do Instagram para seu blog" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMOn9hs4h0sApcbAEUKixRFnXAeLbyQZxPNPRzM7vnZ5M6CNLOitDv7EFvaufI_D7neOnFKnTl0MPzoyNR4icqNtnAcMI8AKl5sx5Bb8EfiA2ICzh7eyRCtw4IAB2qKWbX8H_wcwsWdSY/s1600/como_adicionar_fotos_do_instagram_no_blogger.png" title="Widget do Instagram para seu blog" width="200" /></a></div>
<br />
O primeiro passo, é acessar o site SnapWidget (<a href="http://snapwidget.com/" target="_blank">snapwidget.com</a>). É lá que você vai criar seu widget do Instagram.<br />
<br />
Clique no botão <b>Get Your Free Widget</b>:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxmReCdG-mLEB2fbN7HtVY_4kJT0XtnvFyCVVB5KV4PTxzjDqoUK731Rz7vZO0Hz049Oi6O6UNnEBspNPd8eVosy3CLwdK4JI1pxRkSyeV5ssPsB7BJmRDJMwQzUcwBgPd7vRKZztfiMw/s1600/Screen+Shot2015-02-26+17_36_34.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxmReCdG-mLEB2fbN7HtVY_4kJT0XtnvFyCVVB5KV4PTxzjDqoUK731Rz7vZO0Hz049Oi6O6UNnEBspNPd8eVosy3CLwdK4JI1pxRkSyeV5ssPsB7BJmRDJMwQzUcwBgPd7vRKZztfiMw/s1600/Screen+Shot2015-02-26+17_36_34.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
Na próxima tela, configure do modo que desejar, com cores, tamanhos, efeitos, etc. Clique em <b>Get Widget</b>:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjcg0uYDLDplzqQDG5yol0J2iUcdSTyRXihWpmtf4USJOEXbnYTe3eiPO2RYKEXY-mwK7c5xXyphT4FV3sn8i3EklBcGvvUPAj0sr50n0rgVq-6Jc3CG73nQVgXVyOWb6xIE3yQziJ15s/s1600/Screen+Shot2015-02-26+17_41_02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="372" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjcg0uYDLDplzqQDG5yol0J2iUcdSTyRXihWpmtf4USJOEXbnYTe3eiPO2RYKEXY-mwK7c5xXyphT4FV3sn8i3EklBcGvvUPAj0sr50n0rgVq-6Jc3CG73nQVgXVyOWb6xIE3yQziJ15s/s1600/Screen+Shot2015-02-26+17_41_02.png" width="400" /></a></div>
<br />
Copie o código que irá aparecer, e vá em seu blog (<a href="http://www.blogger.com/" target="_blank">www.blogger.com</a>) > <b>Layout</b> > <b>Adicionar um gadget</b> > <b>HTML/JavaScript</b> e colar o código:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhylpN5w9pO_dV9_GOFBXos9LiIrPfueeEY0Shjrn3y993j8n3zFOKHz9xxwo__-8Imd3np32vFMCIx5gHRE18NsA_QZjk75ABFGZVmhT-Wn7VXoHlBkATp7PvOIIkExCJWKj3at62QogI/s1600/Screen+Shot2015-02-26+17_54_41.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="263" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhylpN5w9pO_dV9_GOFBXos9LiIrPfueeEY0Shjrn3y993j8n3zFOKHz9xxwo__-8Imd3np32vFMCIx5gHRE18NsA_QZjk75ABFGZVmhT-Wn7VXoHlBkATp7PvOIIkExCJWKj3at62QogI/s1600/Screen+Shot2015-02-26+17_54_41.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Prontinho. Seu widget do Instagram será exibido no seu blog :) Lembre-se de ajustar as larguras, caso as fotos fiquem muito grandes.</div>

Widget do Instagram para seu blog

Esta dica certamente vai ser útil para muitas blogueiras (e blogueiros também) que adoram postar fotos em seu perfil do Instagram. Isso se t...

Continue Lendo >>

18:02

Como personalizar a caixa de pesquisa do Blogger

<div class="separator" style="clear: both; text-align: center;">
</div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiplgbJ0s9a7xzotJ2KxphfvlHr39DBnlyLm1W0gtR6B0fCtjIqnvvAGivBZqAGP8RWwcADkZsbxvwaIHmP9zmQQSgNl6o7xgBp3rvdXiimJ25SYfM6Df-TIsyd0wmpG0vTKtYRY_zcKuWm/s120/Search-icon.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiplgbJ0s9a7xzotJ2KxphfvlHr39DBnlyLm1W0gtR6B0fCtjIqnvvAGivBZqAGP8RWwcADkZsbxvwaIHmP9zmQQSgNl6o7xgBp3rvdXiimJ25SYfM6Df-TIsyd0wmpG0vTKtYRY_zcKuWm/s120/Search-icon.png" /></a>A caixa de pesquisa ( ou caixa de busca) é um dos recursos mais importantes em um blog. É através dela que o leitor irá procurar por outros posts mais antigos e de maior interesse dele. É muito útil também para o dono do blog encontrar seus próprios artigos.<br />
<br />
<br />
<br />
<span style="font-size: large;"><span style="color: orange;"><b>Como colocar a caixa de busca do Blogger </b></span></span><br />
<br />
O Blogger já disponibiliza um gadget nativo e bastante funcional. Para adicionar em seu blog, siga estes passos:<br />
<ol>
<li>Entre em layout</li>
<li>Clique em adicionar um gadget</li>
<li>Escolha "caixa de pesquisa" e clique no ícone "+"</li>
<li>Marque as opções que você desejar e salve</li>
</ol>
Por padrão, o título deste gadget será "pesquisar este blog". Para mudar o título, é só clicar na caixa "título" e escrever um do seu gosto.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKzvwNJ0xGlM9dZHgzlHns9ILO8Np1I5pWsgq1Poj5wiNf63Lxp4bQVQwT_6uLIkkgZM_Z8MctxHEhuxGvA0JJnpB7_pbkS6x5HYa2wFBFOBziBGs7e8QcHUBiCFzGUMwbnnjwSAfgizDL/s550/busca-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKzvwNJ0xGlM9dZHgzlHns9ILO8Np1I5pWsgq1Poj5wiNf63Lxp4bQVQwT_6uLIkkgZM_Z8MctxHEhuxGvA0JJnpB7_pbkS6x5HYa2wFBFOBziBGs7e8QcHUBiCFzGUMwbnnjwSAfgizDL/s1600/busca-blogger.png" /></a></div>
<span style="font-size: large;"> <span style="color: orange;"><b>Como personalizar a caixa de busca do Blogger</b></span></span><br />
<br />
A Caixa de busca nativa do Blogger possui o seguinte modelo:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHRP7DFWxBfUyB3aRQIhyHI0Jq1YeA-voGCIXTXD-ZyXaozJ4rBX7IGNXVsHm4orEjiV8SOH0EuL3tzG5CuCl6eGkWxFxoB6DeLTbJbPpm0jmnclxkW15Hh-YXBC0AvVDm0iz6SlPq7nat/s337/modelo-pesquisa-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHRP7DFWxBfUyB3aRQIhyHI0Jq1YeA-voGCIXTXD-ZyXaozJ4rBX7IGNXVsHm4orEjiV8SOH0EuL3tzG5CuCl6eGkWxFxoB6DeLTbJbPpm0jmnclxkW15Hh-YXBC0AvVDm0iz6SlPq7nat/s1600/modelo-pesquisa-blogger.png" /></a></div>
<br />
Para personalizar a caixa de pesquisa e deixá-la com um visual que combine melhor com o template do blog, será preciso incluir um código no HTML do template.<br />
<br />
Entre em "modelo" e clique em "editar HTML". Clique em qualquer lugar dentro do HTML, dê um Crtl+F com o teclado e na caixa "search" escreva (ou cole)  <b></b:skin></b>. Clique em "enter" para encontrar esta tag<b> </b>dentro do HTML do seu template.<b><br /></b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyvxBaB6BHxvIu0soiiSc_bci3ZmEZuwQniqqv8Syw66xFbevkJt0NFfGO2Xmuph6LmPcLZOmLYEgHNNqaPm9Ry860gK6YNz9_vV4X_XqWwIcZlFK8FJKhRb3_LhrWI5mR8KqwhtNQirdr/s550/procurando-tag.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyvxBaB6BHxvIu0soiiSc_bci3ZmEZuwQniqqv8Syw66xFbevkJt0NFfGO2Xmuph6LmPcLZOmLYEgHNNqaPm9Ry860gK6YNz9_vV4X_XqWwIcZlFK8FJKhRb3_LhrWI5mR8KqwhtNQirdr/s1600/procurando-tag.png" /></a></div>
Agora copie o código abaixo e cole <b>ANTES</b> da tag <b></b:skin>:</b><br />
<br />
<blockquote class="tr_bq">
/* BUSCA<br />----------------------------------------------- */<br /><br />td.gsc-input input {<br />background: #fff; <span style="color: red;">/*Cor de fundo do campo de texto*/ </span><br />border: 1px solid #ddd;<span style="color: red;"> /*Estilo e cor da borda do campo de texto*/ </span><br />color: #666; <span style="color: red;">/*Cor do texto do campo de texto*/ </span><br />font-size: 11px; <span style="color: red;">/*Tamanho do texto do campo de texto*/</span><br />height: 15px;<br />padding: 4px; <br />}<br /><br />td.gsc-input input:hover {<br />border: 1px solid #999; <span style="color: red;">/*Estilo e cor da borda quando o mouse estiver em cima do campo de texto*/</span><br />}<br />input.gsc-search-button {<br />padding:4px;<br />background: #eee;<span style="color: red;"> /*Cor de fundo do botão*/ </span><br />border: solid 1px #ddd;<span style="color: red;"> /*Estilo e cor da borda do botão*/ </span><br />font-size: 12px;<span style="color: red;"> /*Tamanho do texto do botão*/ </span><br />text-shadow: #fff 1px 1px 0px; <br />}<br /><br />input.gsc-search-button: hover {<br />border:1px solid #999; <span style="color: red;">/*Estilo e cor da borda quando o mouse estiver em cima do botão de pesquisa*/</span><br />background:#ddd;<span style="color: red;"> /*Cor de fundo quando o mouse estiver em cima do botão de pesquisa*/</span><br />color:#000; <span style="color: red;">/*Cor do texto quando o mouse estiver em cima do botão de pesquisa*/</span><br />}</blockquote>
As partes assinaladas em vermelho é onde aplicamos os estilos em CSS. Para mudar as cores, veja <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm" target="_blank">esta tabela de correspondência em CSS </a><br />
<br />
Clique em "visualizar modelo" e se tudo estiver certo, clique em "salvar modelo". Este será o resultado final:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbsllqHIX2LYbYAHNrEpi0_Bh9jAZFkgOfOZq8VOixRzg0j_CMiFfy9dn3MfqI731EPotqeLQ3l0WnrR9eBrc3VLYQo0Sl79_iPFptwpIPulowUiHwHnvfTObMyN1JihUQVscA6fEMNcWv/s355/busca-final.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbsllqHIX2LYbYAHNrEpi0_Bh9jAZFkgOfOZq8VOixRzg0j_CMiFfy9dn3MfqI731EPotqeLQ3l0WnrR9eBrc3VLYQo0Sl79_iPFptwpIPulowUiHwHnvfTObMyN1JihUQVscA6fEMNcWv/s1600/busca-final.png" /></a></div>
<br />
<span style="color: orange;"><span style="font-size: large;"><b>Como retirar o título da caixa de pesquisa</b></span></span><br />
<br />
Para não mostrar nenhum título, não basta deixar a caixa "título" em branco. É preciso fazer uma outra alteração no HTML. Clique em "ir para um widget" e procure por "custom search".<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd5U7Qb3k5WH0XOkMXztj9maJosH7l5nw7GMXUFxSAqaIvXqP_GLdU7fUTqi9v2X9bvnd_E5LggT_XhjKqjP7x3RSXJnZjqLTakSQA7fbSrhYkorlLdhgV7gdAZyoXe79wyL5e6iPn9oyO/s550/custom-search.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd5U7Qb3k5WH0XOkMXztj9maJosH7l5nw7GMXUFxSAqaIvXqP_GLdU7fUTqi9v2X9bvnd_E5LggT_XhjKqjP7x3RSXJnZjqLTakSQA7fbSrhYkorlLdhgV7gdAZyoXe79wyL5e6iPn9oyO/s1600/custom-search.png" /></a></div>
<br />Clique em duas setinhas para expandir o código e apague o seguinte trecho:<br />
<blockquote class="tr_bq">
<br />    <b:if cond='data:title != &quot;&quot;'><br />      <h2 class='title'><data:title/></h2><br />    </b:if></blockquote>
Visualize e salve. Pronto! Sua caixa de pesquisa já está personalizada! <br />
<br />
<b>Fonte do código CSS original:</b> <a href="http://templateseacessorios.blogspot.com.br/2013/03/personalizar-caixa-de-pesquisa-nativa.html" target="_blank">Templates e Acessórios</a> <br />

Como personalizar a caixa de pesquisa do Blogger

A caixa de pesquisa ( ou caixa de busca) é um dos recursos mais importantes em um blog. É através dela que o leitor irá procurar por outro...

Continue Lendo >>

09:52

Novo gadget! Formulário de contato

Ontem foi anunciado <a href="https://plus.google.com/+Blogger/posts/GurXjR1sjTB" target="_blank">na página do Blogger no Google +</a> um novo gadget. Trata-se de um formulário de contato. O gadget é simples, não é configurável e segue as cores predominantes do template. As mensagens serão encaminhadas para o email que foi cadastrado na conta do Blogger.<br />
<br />
Para adicionar o formulário de contato em seu blog, vá em<b> layout</b> e clique em <b>adicionar gadget</b>. Escolha <b>mais gadgets</b> e clique em <b>formulário de contato</b>. Clique em salvar.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMQWBQbbwfNsKU2HOYrAV2U3HYbx6ppUELs8jF7LJWU8EtqCrzoyM4qLPdvhcfk-kE89e-HGeWslid2wk0szdQvJWgmDLSU0j6_4rqd2jyQf3YM048OjwqjEr0hEq3cU79eKcJqEMB6aoH/s1600/gadget-contato.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMQWBQbbwfNsKU2HOYrAV2U3HYbx6ppUELs8jF7LJWU8EtqCrzoyM4qLPdvhcfk-kE89e-HGeWslid2wk0szdQvJWgmDLSU0j6_4rqd2jyQf3YM048OjwqjEr0hEq3cU79eKcJqEMB6aoH/s1600/gadget-contato.png" /></a></div>
O novo<b> gadget formulário de contato</b> ficará assim, variando a cor de acordo com o template: <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAgVIaZoIoi1YmeweX73XILAIST_IzUKVktAsYel4iGvXPR8Oy5o6K9ousCygWzK3tchTgi98mELEnJMscs6Z5ymU8Bd21COvW06qzB5yLa7-wenAZ_GVvu-ouXUh2s6DMjB_Vu6yIoAf6/s1600/formulario-de-contato.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAgVIaZoIoi1YmeweX73XILAIST_IzUKVktAsYel4iGvXPR8Oy5o6K9ousCygWzK3tchTgi98mELEnJMscs6Z5ymU8Bd21COvW06qzB5yLa7-wenAZ_GVvu-ouXUh2s6DMjB_Vu6yIoAf6/s1600/formulario-de-contato.png" /></a></div>
Para quem deseja um formulário de contato mais robusto, recomendo o <a href="http://www.dicasblogger.com.br/2009/02/wufoo-formulario-de-contato-blogger.html" target="_blank">Wufoo</a>. Muito bom!

Novo gadget! Formulário de contato

Ontem foi anunciado na página do Blogger no Google + um novo gadget. Trata-se de um formulário de contato. O gadget é simples, não é config...

Continue Lendo >>

20:44

Como parar de seguir um blog

Em 2012 fizemos um artigo ensinando <a href="http://www.dicasblogger.com.br/2010/02/como-usar-o-gadget-seguidores.html" target="_blank">Como usar o gadget seguidores</a>, porém com a mudança da interface do Blogger o artigo ficou obsoleto e vejo no <a href="http://www.google.pl/support/forum/p/blogger?hl=pt-BR" target="_blank">Fórum do Blogger</a> muitos leitores questionando como se faz para deixar de seguir um blog. O procedimento é relativamente simples.<br />
<br />
Entre no <b>painel do Blogger</b> e procure pela "Lista de Leitura". Clique no ícone de configuração, confome demostrado na figura abaixo:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2YDuiYpQGtjpGhhjwerIwPAIVgqITxP-HJYkmvLoRmu4bFtkkKaBgK1YOueWQZc0kqfXYQZxzRYuwtCSet05PnipM63F7Cr2V8XDkn4x67g1p841qWTRe39KZ_BeqAGOsGRyV5dfKcZxO/s1600/seguidores.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2YDuiYpQGtjpGhhjwerIwPAIVgqITxP-HJYkmvLoRmu4bFtkkKaBgK1YOueWQZc0kqfXYQZxzRYuwtCSet05PnipM63F7Cr2V8XDkn4x67g1p841qWTRe39KZ_BeqAGOsGRyV5dfKcZxO/s1600/seguidores.jpg" /></a></div>
Escolha o blog que você deseja parar de seguir e clique em "configurações". Escolha a opção "parar de seguir este site" e depois confirme clicando em OK.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFvV-v008SwTbqGFpOBffz_f8oKqfHQQXRn2k_RTgG_JZAG4LN1I2Ccz_CTRNPhS2R0afL5J_C-euA7jxXZDiq7bECmTmKxvrECpOz_hXMxyeXOIdeBqmuBDxnLqJLPX3dC_AEwa-M2KXF/s1600/configura%C3%A7%C3%B5es.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFvV-v008SwTbqGFpOBffz_f8oKqfHQQXRn2k_RTgG_JZAG4LN1I2Ccz_CTRNPhS2R0afL5J_C-euA7jxXZDiq7bECmTmKxvrECpOz_hXMxyeXOIdeBqmuBDxnLqJLPX3dC_AEwa-M2KXF/s1600/configura%C3%A7%C3%B5es.jpg" /></a></div>
<br />

Como parar de seguir um blog

Em 2012 fizemos um artigo ensinando Como usar o gadget seguidores , porém com a mudança da interface do Blogger o artigo ficou obsoleto e ve...

Continue Lendo >>

11:22

Novidade! Gadget seguidores integrado ao G+

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ8LCk854MWrIii1EUhjPqi4EuP1b2_EcxR5E8dYG85lZ3VYqdqJBvkWNUDqmDK_sZNXJsBeVoiPRkWAntxsvAJIkNjYzPu-Q0AUsiaTrBGjMjjz8PInAftZ1NmyZuBCp1-DSWQfh-1YsR/s1600/gadget-seguidores-g+.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ8LCk854MWrIii1EUhjPqi4EuP1b2_EcxR5E8dYG85lZ3VYqdqJBvkWNUDqmDK_sZNXJsBeVoiPRkWAntxsvAJIkNjYzPu-Q0AUsiaTrBGjMjjz8PInAftZ1NmyZuBCp1-DSWQfh-1YsR/s200/gadget-seguidores-g+.png" width="200" /></a></div>
A equipe do Blogger <a href="http://buzz.blogger.com/2012/11/grow-your-audience-with-google.html" target="_blank">acaba de lançar </a>um novo gadget muito interessante. Trata-se do <b>gadget Seguidores do G+</b>.<br />
<br />
Para utilizar o novo gadget, é preciso ter uma conta no G+ ou <a href="http://www.dicasblogger.com.br/2012/06/associar-perfil-do-blogger-ao-google.html" target="_blank">migrar a atual conta do Blogger para um perfil no G+</a>. Entre no painel do seu blog, acesse "layout" e clique em "adicionar gadget". Escolha o gadget "seguidores do G+" e siga as instruções.<br />
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaWIm-f_4wzH71SzZeD1URQVVj4iuiL3Nx1jYPcMPNJAYO4A18a-oLl9bepYm5dav_H2-Ezlg9oj9_ExSpMjimLzol1g3Z0qTUVGmUzNtmYhJXpbR5UWUyuQWGOCsB9UAze7AVO8jcV-TO/s1600/seguidores.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaWIm-f_4wzH71SzZeD1URQVVj4iuiL3Nx1jYPcMPNJAYO4A18a-oLl9bepYm5dav_H2-Ezlg9oj9_ExSpMjimLzol1g3Z0qTUVGmUzNtmYhJXpbR5UWUyuQWGOCsB9UAze7AVO8jcV-TO/s1600/seguidores.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Como adicionar o gadget</td></tr>
</tbody></table>
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix-0B8WIvn_tvEHF8Q0zErHXtts-O1L7BdeB5ezSs77n5y91oRhyvfeLIRRE8rTlo3g-JxqdAQtazUmJAgrHtohCEpAslPxBHYsDDzyM1WgVA5uXeLfUhBrOvbn_H9iwyRK4XktX8iBi5h/s1600/google-plus.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix-0B8WIvn_tvEHF8Q0zErHXtts-O1L7BdeB5ezSs77n5y91oRhyvfeLIRRE8rTlo3g-JxqdAQtazUmJAgrHtohCEpAslPxBHYsDDzyM1WgVA5uXeLfUhBrOvbn_H9iwyRK4XktX8iBi5h/s1600/google-plus.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gadget instalado</td></tr>
</tbody></table>
<br />
Maiores informações no <a href="http://buzz.blogger.com/2012/11/grow-your-audience-with-google.html" target="_blank">Blogger Buzz</a> e na <a href="http://support.google.com/blogger/bin/answer.py?hl=en&topic=2387000&answer=2846874" target="_blank">Ajuda do Blogger.</a>

Novidade! Gadget seguidores integrado ao G+

A equipe do Blogger acaba de lançar um novo gadget muito interessante. Trata-se do gadget Seguidores do G+ . Para utilizar o novo gadget...

Continue Lendo >>

09:59

Exibir frases aleatórias no Blogger

Um gadget que eu acho muito bacana, é aquele que permite-nos exibir frases aleatórias nas páginas de nossos blogs. Isso significa que a cada vez que as páginas forem carregadas, uma nova frase será mostrada ao visitante.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIA3nQSG3G5QpZMP12XNxO9G2Ph_W5RjqbDOHW3EYkCXFQRh2OJLp5zL99i0f0kFp67JCZLwMN8Vo33fJ5zI-dzgmqSqMwQ6_hSHVr_uPnmhRHFz3hV2rehlXBTVK5X6ru-47ya6p4f0rO/s1600/outdoor1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIA3nQSG3G5QpZMP12XNxO9G2Ph_W5RjqbDOHW3EYkCXFQRh2OJLp5zL99i0f0kFp67JCZLwMN8Vo33fJ5zI-dzgmqSqMwQ6_hSHVr_uPnmhRHFz3hV2rehlXBTVK5X6ru-47ya6p4f0rO/s1600/outdoor1.png" title=" " /></a></div>
<br />
<br />
Para colocar esse gadget, é super simples. Entre em "layout"  e clique em "adicionar gadget". Escolha o gadget "html/javascript" e cole o código abaixo:<br />
<br />
<blockquote class="tr_bq">
<div style="border-left: 5px solid #ccc; padding:6px; font-style: italic; "><br />
<script language="JavaScript"><br />
citas = new Array(4)<br />
citas[0] = "FRASE 0 "<br />
citas[1] = "FRASE 1"<br />
citas[2] = "FRASE 2"<br />
citas[3] = "FRASE 3"<br />
citas[4] = "FRASE 4"<br />
aleatorio = Math.random() * (citas.length)<br />
aleatorio = Math.floor(aleatorio)<br />
document.write(citas[aleatorio])<br />
</script></div></blockquote>
Onde está escrito FRASE, substitua pelas frases que você deseja exibir em seu blog. É possível colocar quantas frases quiser; para tanto repita a seguinte linha:<br />
<blockquote class="tr_bq">
citas[0] = "FRASE 0 " </blockquote>
Substitua [0] pelo número subsequente, ou seja, 4, 5, 6 e assim sucessivamente. <br />
Para mudar a o tipo de borda, cor de fundo e etc, é só alterar o CSS desta outra parte:<br />
<blockquote class="tr_bq">
border-left: 5px solid #ccc; padding:6px; font-style: italic; </blockquote>
Vejam um exemplo que encontra-se em um outro blog meu:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiafiU9Wtejo5iep_qn6vW8ibrLbjTGwu8aPyqxsH18ia4CczEcof2XdXZQtDB1yawyPh9y6oIemhs_XqFwWhszgt5A-SxgQywiH-VQdfmaFDRiCZVxmvnXviYkUYyqG0fppqR6FR0XV4NO/s1600/frase.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiafiU9Wtejo5iep_qn6vW8ibrLbjTGwu8aPyqxsH18ia4CczEcof2XdXZQtDB1yawyPh9y6oIemhs_XqFwWhszgt5A-SxgQywiH-VQdfmaFDRiCZVxmvnXviYkUYyqG0fppqR6FR0XV4NO/s1600/frase.png" /></a></div>
 Para colocar a borda em todo o espaço, use o código assim:<br />
<blockquote class="tr_bq">
 <div style="border: <span style="color: blue;">5px</span> solid <span style="color: #cc0000;">#ccc</span>; padding:6px; font-style: italic; "><br />
<script language="JavaScript"><br />
citas = new Array(4)<br />
citas[0] = "FRASE 0 "<br />
citas[1] = "FRASE 1"<br />
citas[2] = "FRASE 2"<br />
citas[3] = "FRASE 3"<br />
citas[4] = "FRASE 4"<br />
aleatorio = Math.random() * (citas.length)<br />
aleatorio = Math.floor(aleatorio)<br />
document.write(citas[aleatorio])<br />
</script></div></blockquote>
 A parte que assinalei em vermelho é a da cor. Para trocá-la é só usar uma<a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm" target="_blank"> tabela de cores</a>. A parte assinalada em azul se refere à espessura da borda.

Exibir frases aleatórias no Blogger

Um gadget que eu acho muito bacana, é aquele que permite-nos exibir frases aleatórias nas páginas de nossos blogs. Isso significa que a cada...

Continue Lendo >>

10:30

Como colocar gadget selo do Google+ no Blogger

A rede social do Google, chamada de Google Plus, Google+ ou simplesmente G+, acaba de atingir a marca de 170 milhões de usuários, tornado-se assim mais uma ótima fonte para divulgação de blogs e para interação com nossos leitores.<br />
Nós criamos, recentemente, uma página para o Dicas Blogger, onde divulgaremos nossos artigos, promoções e links que sejam interessantes para vocês.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNIPbSDH2WalkVBAnJpRhAV0xNQ-plXjJBzMz7AzQhT7mgx5zaxkkKZ0yOsNkMcMjxWl0UVvuDzHArVx-0dhWsRBKmOFxCM_ui7Vhv3uIu3NPeId96hheJku7VAa5B0IPxLYpSEz5eVGL8/s1600/Google-plus.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Google Plus" border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNIPbSDH2WalkVBAnJpRhAV0xNQ-plXjJBzMz7AzQhT7mgx5zaxkkKZ0yOsNkMcMjxWl0UVvuDzHArVx-0dhWsRBKmOFxCM_ui7Vhv3uIu3NPeId96hheJku7VAa5B0IPxLYpSEz5eVGL8/s400/Google-plus.jpg" title="google-plus" width="400" /></a></div>
<div style="text-align: center;">
<a href="https://plus.google.com/118113041588182046931" target="_blank">Clique aqui e nos siga no Google Plus</a></div>
<br />
Para divulgar a página de seu blog que encontra-se no G+, é interessante colocar um gadget no estilo "selo" a fim de convidar os visitantes a segui-la.<br />
<br />
O Blogger já fornece dois gadgets para o Google Plus: um botão e um selo<br />
<br />
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiehuiHVC2QoSDBcOAcN4iLxxGQQhQA0Vn0ACDcEJvGHWGpVJ9GtUSuFcO8YKTGUnxstwzkMhx4p4wwCw0Ne5XRhgBS10OpSTVDNZP8_8K5_7lCgNafdEoj4e0xE_bPUTtzV1r35gC2Cyn5/s1600/gadget-googleplus.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiehuiHVC2QoSDBcOAcN4iLxxGQQhQA0Vn0ACDcEJvGHWGpVJ9GtUSuFcO8YKTGUnxstwzkMhx4p4wwCw0Ne5XRhgBS10OpSTVDNZP8_8K5_7lCgNafdEoj4e0xE_bPUTtzV1r35gC2Cyn5/s1600/gadget-googleplus.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
O botão +1, permite que os visitantes recomendem o blog no Google Plus e o selo permite que eles sigam a página do blog.<br />
Para adicionar, entre em <b>layout</b>, clique em <b>adicionar gadget</b> e escolha um dos dois.<br />
<b>Para o selo</b>, é necessário usar um número de identificação da página do blog, que você encontra no endereço da página na barra do seu navegador. Para exemplificar, vou usar o do Dicas Blogger (assinalado em azul)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5mePmKxacY4y2UeD9NjbX2wM2LLpqxCDIH9IjMTw37KQnF2U9YENlfx8PE7dHMWE2vx-Mc3eSNpEj2jaAIKxBYmLfp49f6O2dftaX9WCT72V6rv94wgYyCrjcttRXLFKIdbo5xJjRYK0M/s1600/id-googleplus.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5mePmKxacY4y2UeD9NjbX2wM2LLpqxCDIH9IjMTw37KQnF2U9YENlfx8PE7dHMWE2vx-Mc3eSNpEj2jaAIKxBYmLfp49f6O2dftaX9WCT72V6rv94wgYyCrjcttRXLFKIdbo5xJjRYK0M/s1600/id-googleplus.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
 Copie o número que corresponde a página do seu blog e cole no local indicado na figura abaixo. Escolha a cor e dê um nome ao gadget:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnM8a0NlAV-JRUdLqmD4k_GXtZ1hwaT6fJMaaCEIZSZOykwuitM5dDmkz3NLoYc911fHknsJz3qMb7RooQ3DJfCVsoMWJd7JvbQTM83TKbcwDgqIooQLecBK3ksIB864v6Uj2MPXrRNfy0/s1600/badge-googleplus.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnM8a0NlAV-JRUdLqmD4k_GXtZ1hwaT6fJMaaCEIZSZOykwuitM5dDmkz3NLoYc911fHknsJz3qMb7RooQ3DJfCVsoMWJd7JvbQTM83TKbcwDgqIooQLecBK3ksIB864v6Uj2MPXrRNfy0/s1600/badge-googleplus.png" /></a></div>
O selo irá aparecer da seguinte forma:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_5lVDQWHwiLAW_h7Ce8rdCHjHHJtG63aR7HNaIgyypERCg2BvGG7UInpRtfDF5IBoJFceYU7C-_c_b9lsDihQJZ7X0MAfMhqqAoO7Lhv4IaFJdMRuwlcF3os6yK0b5eLnpnnpWkRaXG3X/s1600/selo-google-plus.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_5lVDQWHwiLAW_h7Ce8rdCHjHHJtG63aR7HNaIgyypERCg2BvGG7UInpRtfDF5IBoJFceYU7C-_c_b9lsDihQJZ7X0MAfMhqqAoO7Lhv4IaFJdMRuwlcF3os6yK0b5eLnpnnpWkRaXG3X/s1600/selo-google-plus.png" /></a></div>
Existe um outro selo mais incrementado, que mostra quantos seguidores a página tem no Google Plus, bem como a foto de 5 seguidores:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVxCDlPp02269OmG35g0GNHob9t6i1NiSQKDjTSmxiyIB3owyFUQIfK3ZZwwr0fvw95BWDfFeCBbvu_GCe7N4gFsHOn3jgzzBzdrlrn_vxMUdkDDQx0E3UcaLfj-k70pSwEHmNLNhyKzMK/s1600/gadget2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVxCDlPp02269OmG35g0GNHob9t6i1NiSQKDjTSmxiyIB3owyFUQIfK3ZZwwr0fvw95BWDfFeCBbvu_GCe7N4gFsHOn3jgzzBzdrlrn_vxMUdkDDQx0E3UcaLfj-k70pSwEHmNLNhyKzMK/s320/gadget2.png" width="320" /></a></div>
Entre em <a href="https://developers.google.com/+/plugins/badge/config">https://developers.google.com/+/plugins/badge/config  </a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilhDxfBzNyXE4qfiCO1hV3MUKQZLNy9jeOtfIhxLmHpYSXxp8hm_xvBpkM9YIxv4smmUxGEJP9ZkhoN7dkxa5fZDGhd7JAea9cSKDHEyf7Htom3GGf6V6ZIsR2W2mzsjLzdX8modH-zzwJ/s1600/gadget-googleplus3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilhDxfBzNyXE4qfiCO1hV3MUKQZLNy9jeOtfIhxLmHpYSXxp8hm_xvBpkM9YIxv4smmUxGEJP9ZkhoN7dkxa5fZDGhd7JAea9cSKDHEyf7Htom3GGf6V6ZIsR2W2mzsjLzdX8modH-zzwJ/s1600/gadget-googleplus3.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
O site está em inglês. Em<b> link to this Google+ page</b>, coloque o número de identificação da página do seu blog. Depois, vá customizando o selo e visualizando-o até ficar do seu gosto. A seguir, copie o código que está em <b>get the code</b> e cole no gadget HTML/javascritp do Blogger.

Como colocar gadget selo do Google+ no Blogger

A rede social do Google, chamada de Google Plus, Google+ ou simplesmente G+, acaba de atingir a marca de 170 milhões de usuários, tornado-se...

Continue Lendo >>

17:50

Como colocar busca do Google no Blogger

<img align="right" alt="gtk_find_and_replace" border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraMEeXDBp-V1UorvL5l-vhdrlcn5c9oQG38DcbuhH059javgpZFSC_j0qA3dZMRr5DpJIPihGxNNpitHGUymgbpF5Q2R7eCJ6fpWyRMmazILnU0NtEv5qi8dqHE9fAO7oVLKtzok_a9Ch/?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="gtk_find_and_replace" width="128" />Muitos usuários do Blogger vêm se queixando que a caixa de busca padrão – gadget “caixa de pesquisa” – não é eficiente, pois não mostra todas as postagens. Esse problema já é antigo e, infelizmente, ainda não foi resolvido.  <br />
No lugar do gadget “caixa de pesquisa”, é possível usarmos outras opções de caixa de busca do Google:<br />
<ol>
<li>Caixa de busca do <a href="https://www.google.com/adsense/" target="_blank">Google Adsense</a>;  </li>
<li><a href="http://www.google.com/cse/" target="_blank">Caixa de busca personalizada do Google</a>; </li>
</ol>
<br />
<strong><span style="color: red; font-size: small;">Como colocar a busca do Google AdSense</span></strong><br />
<img alt="busca-adsense" border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEireHj1C77y87DL9LTSz8ydEdLAOsvJdXuqTjULdaOMXvDMeDe5vanDc2SoSNuCu-3tzoqGbTD-nQsbFcBGaeT1ulo455BOf9-U18I0WnOnw5kZC50VReOTs1MKx_UFxOK4FY_THNSxYKDL/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Busca do AdSense" width="315" /><br />
A caixa de busca do AdSense é, de longe, a mais eficiente e ainda pode render uma graninha. Para colocá-la em seu blog, é preciso ser um editor cadastrado.  <br />
<ol>
<li>Clique na aba “configurações do AdSense”  </li>
<li>Escolha a opção “AdSense para pesquisas”  </li>
<li>Em “tipo de pesquisa”, escolha “apenas os sites que eu selecionar”  </li>
<li>Em “sites selecionados”, digite o endereço do seu blog  </li>
<li>Clique em “continuar” e configure o tamanho da caixa  </li>
<li>Clique em “continuar” e copie o código  </li>
<li>No Blogger, cole no gadget HTML/Javascript</li>
</ol>
<strong><span style="color: red; font-size: small;">Como colocar a busca personalizada do Google</span></strong><br />
<img alt="image" border="0" height="89" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0jZT_Z1AssstBHZA5y8H0a8fbo_ru8nyaHH8tZPsvWSPUgoceifTc11PZH_jIPNhONYusGeWYE11NIT6wf8lOjAAgau9gAteN0O_-b-3ovhCGMOZUTYotXWBSJdkAJ6ZpQq1YGKfsWJ9F/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="image" width="332" /><br />
A caixa de busca personalizada do Google também é muito boa.<br />
<ol>
<li>Acesse <a href="http://www.google.com/cse/" title="http://www.google.com/cse/">http://www.google.com/cse/</a>  </li>
<li>Faça login com sua senha do Google  </li>
<li>Clique em “criar mecanismo de busca personalizado”  </li>
<li>Preencha todos os campos  </li>
<li>Em “site a pesquisar”, digite o endereço do seu blog  </li>
<li>Clique em avançar e escolha um modelo  </li>
<li>Copie o código  </li>
<li>No Blogger, cole no gadget HTML/Javascript </li>
</ol>

Como colocar busca do Google no Blogger

Muitos usuários do Blogger vêm se queixando que a caixa de busca padrão – gadget “caixa de pesquisa” – não é eficiente, pois não mostra toda...

Continue Lendo >>

16:34

Widgets com ícones para redes sociais

<img align="right" alt="image" border="0" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuez0oiPIJCl9UT0XXNLG_PpNgTNoRt91Q02lvIZy97EKTnfx-_w0L3ctcfSDjYTZEVkevfuZ1JL7-_YZiZV7_3Gj6e75_E_3BFIWxs_4R0ao_esGlVP-j3MhJux1B-XHmcjrYbxGyr9N_/?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="Redes Sociais" width="147" />A última moda em blogs, são os ícones para as redes sociais. O principal objetivo é incentivar os visitantes a seguirem no Twitter, Orkut, Facebook e a assinarem os feeds do blog.  <br />
Pra ajudá-los, criei dois gadgets baseados em CSS, super simples de serem implementados no Blogger.<br />
Recomendo fortemente que as imagens dos ícones sejam enviadas para a conta do Picasa de vocês e que as URLs dessas imagens sejam substituídas.<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/2008/09/backup-no-picasa-de-imagens-contidas.html">Backup no Picasa de imagens contidas nos templates</a></li>
</ul>
<strong><span style="color: red; font-size: small;">Widget 1 – Twitter, Feeds e Facebook</span></strong><br />
<img alt="socialmedia-icons" border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGCATXGaNc68VsdancpnWlHyVY2dlw4qavP1Iah6zEgjYGPjf834_ttUhPRi_4KbCmiU5KhkRT-495diMoBkP5EEQr92KydpuT9S73Zs2QdOU_6FJAbeCyl7BjgW0Jayg798iJFhXWCq5x/?imgmax=800" style="align: center; 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 0px 0px 55px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Icones para redes sociais" width="340" /><br />
Vá no HTML do template, dê um Crtl+F com o teclado e procure por <strong>]]></b:skin></strong> . <br />
Cole antes dessa tag o seguinte código:<br />
<blockquote>
/* SOCIAL MEDIA <br />
----------------------------------------------- */ <br />
#socialmedia{background:#F6F8F8;border:1px solid #DBE2E0;padding:10px 5px 15px 10px; margin: 5px;} <br />
#socialmedia:hover{border:1px solid #90C2D7;} <br />
#socialmedia a{color:#666666;text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif} <br />
#socialmedia a:hover{color:#3c88b2;text-decoration:underline} <br />
#socialmedia img{vertical-align:middle;margin-right:5px;}</blockquote>
Salve o template. Vá nos elementos de página e clique em adicionar gadget. Escolha HTML/javascript e cole este outro código: <br />
<blockquote>
<div id='socialmedia'><img alt='' src='<a href="https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BEKq7aTI/AAAAAAAAEUw/Lb9JMwUAiZ8/socialconnecttwitter.png">https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BEKq7aTI/AAAAAAAAEUw/Lb9JMwUAiZ8/socialconnecttwitter.png</a>' style='width: 32px; height: 32px; float:left;'/> <br />
<a href='URL DO TWITTER'>Siga no Twitter</a> <br />
</div> <br />
<div id='socialmedia'><img alt='' src='<a href="https://lh5.googleusercontent.com/_mcq01yDJ2uY/TW630L9WcaI/AAAAAAAAEUM/iLypEEa1b5Y/socialconnectrss.png">https://lh5.googleusercontent.com/_mcq01yDJ2uY/TW630L9WcaI/AAAAAAAAEUM/iLypEEa1b5Y/socialconnectrss.png</a>' style='width: 32px; height: 32px; float:left;'/> <br />
<a href='URL DOS FEEDS'>Assine os feeds</a> <br />
</div> <br />
<div id='socialmedia'><img alt='' src='<a href="https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BI34MoHI/AAAAAAAAEU0/GuFjmmcm87w/socialconnectfacebook.png">https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BI34MoHI/AAAAAAAAEU0/GuFjmmcm87w/socialconnectfacebook.png</a>' style='width: 32px; height: 32px; float:left;'/> <br />
<a href='URL DO FACEBOOK'>Curta no Facebook</a> <br />
</div></blockquote>
<ul>
<li>Em URL DO TWITTER, escreva o endereço do seu Twitter  </li>
<li>Em URL DO FEED, coloque o endereço dos feeds do blog  </li>
<li>Em URL DO FACEBOOK, coloque o endereço do seu perfil ou da página de fãs</li>
</ul>
<strong><span style="color: red; font-size: small;">Widegt 2 - Feeds, Twitter, YouTube, Orkut e Facebook</span></strong><br />
    <img alt="socialmedia icons" border="0" height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ5V990KP6YeqjEkZvruxptTRheAbW4-SAwGCFq-mNE8LVY-XodDpT4UzvuIncfweCCVtUlfL57yY5La4M_v5gr1sYcG9DQwHi-EcvJvZcyS37-mhNH3MKQK8rla5koPGUR3qgGMOjoPVD/?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 0px 0px 82px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Icones para redes sociais" width="293" /><br />
No painel do Blogger, clique em design > adicionar gadget>HTML/javascript.<br />
Cole o código abaixo, fazendo as respectivas alterações (em vermelho)<br />
<blockquote>
<div style="margin: 5px; padding: 10px;"><a<br />href="<span style="color: red;">ENDEREÇO DO FEED</span>"><img<br />style="border: 0px solid ; width: 48px; height: 48px; float: left;"<br />alt=""<br />src="<a href="http://lh5.ggpht.com/_dAGEULh1_1g/THwD-xP5n9I/AAAAAAAAEBk/1DE1CA0UtCA/rss.png%22">http://lh5.ggpht.com/_dAGEULh1_1g/THwD-xP5n9I/AAAAAAAAEBk/1DE1CA0UtCA/rss.png"</a>></a><a<br />href="<span style="color: red;">ENDEREÇO DO TWITTER</span>"><img<br />style="border: 0px solid ; padding-left: 5px; width: 48px; height: 48px;"<br />alt=""<br />src="<a href="http://lh4.ggpht.com/_dAGEULh1_1g/THwD-5SoTTI/AAAAAAAAEBo/Yh2jRrtkOeo/twitter.png%22">http://lh4.ggpht.com/_dAGEULh1_1g/THwD-5SoTTI/AAAAAAAAEBo/Yh2jRrtkOeo/twitter.png"</a>></a><a<br />href="<span style="color: red;">ENDEREÇO DO YOUTUBE</span>"><img<br />style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"<br />alt=""<br />src="<a href="http://lh3.ggpht.com/_dAGEULh1_1g/THwD-4XjHKI/AAAAAAAAEBs/waG0ImvEsQI/youtube.png%22">http://lh3.ggpht.com/_dAGEULh1_1g/THwD-4XjHKI/AAAAAAAAEBs/waG0ImvEsQI/youtube.png"</a>></a><a<br />href="<span style="color: red;">ENDEREÇO DO ORKUT</span>"><img<br />style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"<br />alt=""<br />src="<a href="http://lh4.ggpht.com/_dAGEULh1_1g/THwD-3vEZVI/AAAAAAAAEBg/jq-RSB5gXBc/orkut.png%22">http://lh4.ggpht.com/_dAGEULh1_1g/THwD-3vEZVI/AAAAAAAAEBg/jq-RSB5gXBc/orkut.png"</a>></a><a<br />href="<span style="color: red;">ENDEREÇO DO FACEBOOK</span>"><img<br />style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"<br />alt=""<br />src="<a href="http://lh6.ggpht.com/_dAGEULh1_1g/THwD-vZ7bDI/AAAAAAAAEBc/4fHoPnWmq8M/facebook.png%22">http://lh6.ggpht.com/_dAGEULh1_1g/THwD-vZ7bDI/AAAAAAAAEBc/4fHoPnWmq8M/facebook.png"</a>></a><br></div><br /> </blockquote>
Neste template de testes, é possível ver os dois gadgets em ação. Clique para ampliar.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6-RBX42hKZTNIYlVmaLikAHI8U1usGMFzKHCS0wFQE8VNSB6_2pUhfRt1HqfyoH8xzadXSFoxIcHQ4kqYiYrF6SA9yKErAfD4RGCpzPSFDfzG7-fUJPnD-TRiRtaNXUeZacMpqpYnty6D/s1600-h/image%5B77%5D.png"><img alt="image" border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuAN-HyuOQGKF2kamAX6FcP_dbFSIj2QAxSvGW6xRbZoi5-zJwhJgoU9vrPYVnpABrcHH0EDKV_OI0vBDBTsM7iUyAfktndA6ojT6j4ypfUCkqQmYgmKqIGBSzK1wi39t41audJfshRBkY/?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="Teste" width="452" /></a><br />
<strong>Atualização em 03/03/2011</strong><br />
Tem coisas no Blogger que são simplesmente inexplicáveis. Até outro dia, bastava colar a URL da imagem no local indicado e pronto. Atualmente, notei que as imagens hospedadas no Picasa Web não estavam aparecendo mais. Depois de muita investigação, descobri que – sabe-se lá porque – o Blogger estava mudando as URLs por conta própria. A solução é ainda mais bizarra rs Depois de colar o código no gadget HTML/Javascrip, é preciso clicar em “Formato Rich Text” para que as imagens funcionem. Prefiro nem comentar.

Widgets com ícones para redes sociais

A última moda em blogs, são os ícones para as redes sociais. O principal objetivo é incentivar os visitantes a seguirem no Twitter, Orkut, F...

Continue Lendo >>

19:47

Pop-up assinar feeds

<img align="right" alt="rss" border="0" height="94" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMI6uJ9YiEn6PA2INW_zjAMr0_dOkJKIKNsqSIoS_be59_KLq96aoO4fVc6wfuzvjxGyzF86L4k_OWqRW-S5FxdRF8VE9txVZ5KGTuDFZEpX9fSfuan6I4YU-3zvqLQhhkZ68fZIXBWD_d/?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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2gqADfpo7t8ybrBTPa_tcvFZxHuAzhGeeZ7FX60czReBR63k0Rwy2J2Ujl5kwvgb7yo4CAnouUd9XH-F32qbZKYhaed8Ww3267wG8ZmirzlCfH7o0Lqk3wHsPZR21Pg5R_sjlHTIYKIsk/s1600/pop-up-feed.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2gqADfpo7t8ybrBTPa_tcvFZxHuAzhGeeZ7FX60czReBR63k0Rwy2J2Ujl5kwvgb7yo4CAnouUd9XH-F32qbZKYhaed8Ww3267wG8ZmirzlCfH7o0Lqk3wHsPZR21Pg5R_sjlHTIYKIsk/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 closebar()
{
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4j77321niKjcz7fPm86RR_2ZtOjjlvtr6xn20wIGNjzzxSM9qOrHMCxNFRGt0o_37EE-zoNe6s1reRxTdso7RRhTaZizxXj5F_JTIBiNX4K1is9NDKYOcQjRDCCeHV4cXtIWC62-NuHVc/" 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 >>

11:24

Formulário de contato para Blogger

<img align="left" alt="box_2" border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijHHXLxAsPaZM7_l4AN_ndmH90hyNtnP1ytrosbyYryESLPJMG7jx2kQ-r7BpBsVb5CQ5zugBpAFMn-0QQUGGPIddBT5KxL6lXC_Ro1SQHkPLQi7kWuZ8_FVJ76HmVY5qRONcFVAOhwkDq/?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 2px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="box_2" width="113" /> Fui avisada por vários usuários, que o <a href="http://www.dicasblogger.com.br/2009/02/wufoo-formulario-de-contato-blogger.html">Wufoo</a> – serviço para criação de formulários de contato – não está mais disponibilizando contas gratuitas. Sendo assim, venho recomendar o <a href="http://www.123contactform.com/">123 Contact Form</a>, que não é tão completo, mas que cumpre o que promete.<br />
  <br />
Para criar um formulário de contato, basta fazer um cadastro rápido, clicando em <strong>sign up for free.</strong> Escolha a conta gratuita (Free), conforme mostra a imagem abaixo:<br />
<img alt="123contactform" border="0" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxB9VpdZKOK2xfQHJ8WzuLzmUODsc4sc5fZEt093VjKE7rF3ZZS54rCrZwU8VX8T9RwXSB-LF1y-c4T6SdSYAOv2U0yCc1y54rj4QjChH1LkPSL_vH0FsmXSVenzCQhsY3VJGmP0m1sCxU/?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="Conta gratuita" width="452" /><br />
A seguir, preencha os dados solicitados no formulário e clique em <strong>create account</strong>.<br />
Uma vez criada a conta, faça o login a fim de ter acesso ao painel de gerenciamento.<br />
Clique em <strong>new form</strong> para criar um novo formulário ou em <strong>my forms</strong> para editá-los.<br />
<img alt="123contactform" border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicnfNj1DEYBiVVP4hfAUx-Jknx3EpbbcSy9FHpLa3l3ZHbsLb7kTuzTVk1wRSc7x6AkdLPg87LEcm5a_W9wp9oJlnZfhUuAdgPgw5WCf4k6yp2i-Hgq9d3TLPTalaFSyVDQrGNJV3sPs8S/?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="Painel de Gerenciamento" width="452" /><br />
<span style="font-size: small;"><strong>Como criar o formulário de contato com o 123 contact form</strong></span><br />
<ol>
<li>clique em <strong>New form</strong>;  </li>
<li>dê um nome ao formulário e clique em <strong>save</strong>;  </li>
<li>escolha os campos que serão adicionados ao formulário e clique em <strong>next</strong>;  </li>
<li>escolha as cores do cabeçalho e plano de fundo;  </li>
<li>configure a forma de resposta e pronto </li>
</ol>
Para que os campos fiquem em português, no passo 3 substitua os títulos em inglês<br />
<img alt="123contactform" border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNOS4bJHz3MhQDwUjSufnfm57Q3PguUTygRAlBKaYIT8PexUMV9kFuA0Cq426QQ-XNHMuQNzbZ0dEHzUTDFQIfvB77JGywg7LaJiXtODnfcTL0KxQdxBdhwrCsZ8k5m9vua-w7B8iXVQen/?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="Campos em português" width="452" /><br />
<strong><span style="font-size: small;">Como colocar o formulário dentro de um post do Blogger</span></strong><br />
Copie o código embed que aparece em “Options 2a.”<br />
<img alt="123contactform" border="0" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwgxcCu50-ZxIUyYF5aIHvOGQsbcd_f2N8BKdgpn4698i0eQIE2zkurgn3-B1lxU6dHMvQO20-lZj9Cvs0AVdiv3mztEWv4IeGZMv-oGCLqFsG5Ba-ggZAX8F4GWlJBxMlBANy2Cj0alhG/?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="Copiando o código" width="452" /><br />
Abra uma nova postagem no Blogger, clique na aba <strong>editar HTML</strong> e cole o código. <br />
<img alt="123contactform-blogger" border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNdAiaW6QrR1W1M0JWb_hM67f31uFiFy4fHFw1lIk8f7RU8V0l0FDmUMSfrsaht8zDcm7hoBm9WgRrTQxgAndNsYROUJowXYu7Gzc1twy10l0rh8_WaeU-nCzNPBN8Yz1nB5AwvCDNJVce/?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="Colando o código em um post ou página" width="452" /><br />
Clique em visualizar e se tudo estiver correto, publique como post ou como página.<br />
<img alt="formulario-de-contato-blogger" border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Id4QLif20x9_AgL2FdJrXCAnWurxIfZaoctVhQX-tZgHh9Ly8fSC9VbDDP3I66DiIjhWD0je2Zj2teHMuaw1KcPqFG5pfXo8N1K9xCsOkCIgRXGXDW3ZT4N875VhBUrjwZQplwLlbpyg/?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="Formulário dentro de uma página" width="452" /><br />
<strong><span style="font-size: small;">Outras opções de divulgação do formulário de contato</span></strong><br />
As opções 1a. e 1b. disponibilizam uma série de banners para colocar na sidebar<br />
<img alt="123contactform-blogger" border="0" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg07nOqO4YJo18-ItXhy2jJ9hBR4q_VKw6eDk6PE8ATmzATBpf0VvsUSOzZNgVdkmUHkZvlhN_MOfR0OgfjeAUWpSgCc4sGQkmL7g8K0c8vKNWq2U1P7Hty5wJxSCeXcRBye_CVy0DHl7TP/?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="Banners" width="452" /><br />
Para acessar todas as opções de códigos, vá ao painel e clique em “HTML CODE”.<br />
<strong><em>Atualização às 16:10</em></strong> – para contas antigas, o Wufoo continua gratuito.<br />
<strong><em>Atualização em 20/02/2011</em></strong> – o Wufoo voltou a ser gratuito

Formulário de contato para Blogger

Fui avisada por vários usuários, que o Wufoo – serviço para criação de formulários de contato – não está mais disponibilizando contas grat...

Continue Lendo >>

13:11