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