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 todas as postagens. Esse problema já é antigo e, infelizmente, ainda não foi resolvido.
No lugar do gadget “caixa de pesquisa”, é possível usarmos outras opções de caixa de busca do Google:

1. Caixa de busca do Google Adsense;
2. Caixa de busca personalizada do Google;

Como colocar a busca do Google AdSense

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. 

1. Clique na aba “configurações do AdSense”
2. Escolha a opção “AdSense para pesquisas”
3. Em “tipo de pesquisa”, escolha “apenas os sites que eu selecionar”
4. Em “sites selecionados”, digite o endereço do seu blog
5. Clique em “continuar” e configure o tamanho da caixa
6. Clique em “continuar” e copie o código
7. No Blogger, cole no gadget HTML/Javascript

Como colocar a busca personalizada do Google

A caixa de busca personalizada do Google também é muito boa.

1. Acesse http://www.google.com/cse/
2. Faça login com sua senha do Google
3. Clique em “criar mecanismo de busca personalizado”
4. Preencha todos os campos
5. Em “site a pesquisar”, digite o endereço do seu blog
6. Clique em avançar e escolha um modelo
7. Copie o código
8. No Blogger, cole no gadget HTML/Javascript

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, Facebook e a assinarem os feeds do blog. 
Pra ajudá-los, criei dois gadgets baseados em CSS, super simples de serem implementados no Blogger.
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.

• Como hospedar imagens no Picasa
• Backup no Picasa de imagens contidas nos templates

Widget 1 – Twitter, Feeds e Facebook

Vá no HTML do template, dê um Crtl+F com o teclado e procure por ]]></b:skin> .
Cole antes dessa tag o seguinte código:

/* SOCIAL MEDIA
----------------------------------------------- */
#socialmedia{background:#F6F8F8;border:1px solid #DBE2E0;padding:10px 5px 15px 10px; margin: 5px;}
#socialmedia:hover{border:1px solid #90C2D7;}
#socialmedia a{color:#666666;text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif}
#socialmedia a:hover{color:#3c88b2;text-decoration:underline}
#socialmedia img{vertical-align:middle;margin-right:5px;}

Salve o template. Vá nos elementos de página e clique em adicionar gadget. Escolha HTML/javascript e cole este outro código:

<div id='socialmedia'><img alt='' src='https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BEKq7aTI/AAAAAAAAEUw/Lb9JMwUAiZ8/socialconnecttwitter.png' style='width: 32px; height: 32px; float:left;'/>
<a href='URL DO TWITTER'>Siga no Twitter</a>
</div>
<div id='socialmedia'><img alt='' src='https://lh5.googleusercontent.com/_mcq01yDJ2uY/TW630L9WcaI/AAAAAAAAEUM/iLypEEa1b5Y/socialconnectrss.png' style='width: 32px; height: 32px; float:left;'/>
<a href='URL DOS FEEDS'>Assine os feeds</a>
</div>
<div id='socialmedia'><img alt='' src='https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BI34MoHI/AAAAAAAAEU0/GuFjmmcm87w/socialconnectfacebook.png' style='width: 32px; height: 32px; float:left;'/>
<a href='URL DO FACEBOOK'>Curta no Facebook</a>
</div>

• Em URL DO TWITTER, escreva o endereço do seu Twitter
• Em URL DO FEED, coloque o endereço dos feeds do blog
• Em URL DO FACEBOOK, coloque o endereço do seu perfil ou da página de fãs

Widegt 2 - Feeds, Twitter, YouTube, Orkut e Facebook
   
No painel do Blogger, clique em design > adicionar gadget>HTML/javascript.
Cole o código abaixo, fazendo as respectivas alterações (em vermelho)

<div style="margin: 5px; padding: 10px;"><a
href="ENDEREÇO DO FEED"><img
style="border: 0px solid ; width: 48px; height: 48px; float: left;"
alt=""
src="http://lh5.ggpht.com/_dAGEULh1_1g/THwD-xP5n9I/AAAAAAAAEBk/1DE1CA0UtCA/rss.png"></a><a
href="ENDEREÇO DO TWITTER"><img
style="border: 0px solid ; padding-left: 5px; width: 48px; height: 48px;"
alt=""
src="http://lh4.ggpht.com/_dAGEULh1_1g/THwD-5SoTTI/AAAAAAAAEBo/Yh2jRrtkOeo/twitter.png"></a><a
href="ENDEREÇO DO YOUTUBE"><img
style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"
alt=""
src="http://lh3.ggpht.com/_dAGEULh1_1g/THwD-4XjHKI/AAAAAAAAEBs/waG0ImvEsQI/youtube.png"></a><a
href="ENDEREÇO DO ORKUT"><img
style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"
alt=""
src="http://lh4.ggpht.com/_dAGEULh1_1g/THwD-3vEZVI/AAAAAAAAEBg/jq-RSB5gXBc/orkut.png"></a><a
href="ENDEREÇO DO FACEBOOK"><img
style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"
alt=""
src="http://lh6.ggpht.com/_dAGEULh1_1g/THwD-vZ7bDI/AAAAAAAAEBc/4fHoPnWmq8M/facebook.png"></a><br></div>
 

Neste template de testes, é possível ver os dois gadgets em ação. Clique para ampliar.

Atualização em 03/03/2011
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.

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 pop-up 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.

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 Box Flutuante Assinar Feed via Email.  Fiz algumas modificações - com a autorização dela -  e vou ensiná-los como colocar a janela pop-up em seus blogs.

pop-up assine os feeds

Copie o código abaixo e cole no gadget “HTML/javascript” Antes de salvar , substitua NOMEDOFEED ( que aparece 3 vezes), pela parte final do endereço do feed do blog.

Exemplo: http://feeds.feedburner.com/dicasblogger

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.

Peço, encarecidamente, que não retirem os créditos do Mundo Blogger.

Atenção! 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.

<style type="text/css">
#topbar
{
padding: 5px 5px 5px 5px;
visibility: hidden;
border: black 1px solid;
width: 340px;
font-family: Tahoma;
position: absolute;
background-color: white
}
</style>
<script type="text/javascript">
var persistclose = 0
var startX = 5
var startY = 5
var verticalpos = "frombottom"

function iecompattest()
{
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name)
{
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0)
{
offset = document.cookie.indexOf(search)
if (offset != -1)
{
 offset += search.length
 end = document.cookie.indexOf(";", offset);
 if (end == -1) end = document.cookie.length;
 returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar()
{
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar()
{
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id)
{
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
 el.y = startY;
else
{
 el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
 el.y -= startY;
}
return el;
}

window.stayTopLeft=function()
{
if (verticalpos=="fromtop")
{
 var pY = ns ? pageYOffset : iecompattest().scrollTop;
 ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else
{
 var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
 ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div id="topbar">


<a href="javascript:closebar();"><img border="0" style="float: right;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUG1dDzvvjwaMe-f9XcqKPryaHWE7e6gL0hdJy02rOgTzfHotnIWIfkQNzuwOA6j5K65r2ul04WWwbilzn7u5KjPxVC226jqi9OYgnEoHIsdloMlS72M5ZPuFnZfpAUEdnshVtNPRk8RhS/" rel="nofollow" title="Fechar janela" /></a>
<a target="_blank" href="http://feeds.feedburner.com/nomedofeed"><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>Fique sempre atualizado!<br />Receba artigos por email!</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=nomedofeed&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="nomedofeed" /><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>

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 gratuitas. Sendo assim, venho recomendar o 123 Contact Form, que não é tão completo, mas que cumpre o que promete.
 
Para criar um formulário de contato, basta fazer um cadastro rápido, clicando em sign up for free. Escolha a conta gratuita (Free), conforme mostra a imagem abaixo:

A seguir, preencha os dados solicitados no formulário e clique em create account.
Uma vez criada a conta, faça o login a fim de ter acesso ao painel de gerenciamento.
Clique em new form para criar um novo formulário ou em my forms para editá-los.

Como criar o formulário de contato com o 123 contact form

1. clique em New form;
2. dê um nome ao formulário e clique em save;
3. escolha os campos que serão adicionados ao formulário e clique em next;
4. escolha as cores do cabeçalho e plano de fundo;
5. configure a forma de resposta e pronto

Para que os campos fiquem em português, no passo 3 substitua os títulos em inglês

Como colocar o formulário dentro de um post do Blogger
Copie o código embed que aparece em “Options 2a.”

Abra uma nova postagem no Blogger, clique na aba editar HTML e cole o código.

Clique em visualizar e se tudo estiver correto, publique como post ou como página.

Outras opções de divulgação do formulário de contato
As opções 1a. e 1b. disponibilizam uma série de banners para colocar na sidebar

Para acessar todas as opções de códigos, vá ao painel e clique em “HTML CODE”.
Atualização às 16:10 – para contas antigas, o Wufoo continua gratuito.
Atualização em 20/02/2011 – o Wufoo voltou a ser gratuito

Como colocar previsão de tempo no blog

Que tal colocar um gadget com a previsão do tempo em seu blog do Blogger? Um gadget que eu achei super legal, foi o do site Climatempo.  Acesse este link  e escolha um dos modelos disponíveis: previsão de tempo de até 5 cidades, previsão do tempo das capitais, ondas ou regiões do Brasil.

Selecione uma skin (tipo um plano de fundo) e clique em clique aqui. Preencha os campos em branco e depois clique em ver código. Copie o código e cole no gadget HTML/javascript do seu blog (design>elementos de página)

Estilos para o gadget Postagens Populares

Resolvi brincar um pouco mais com o CSS e acabei decobrindo outros estilos que podem ser aplicados ao gadget Postagens Populares, criando assim uma continuação do  post Personalizando o gadget Postagens Populares.
Pelo que pude notar, as miniaturas de imagens só funcionam em posts que começam com uma imagem. Se a imagem estiver no meio do post, por exemplo, sua miniatura não vai aparecer no gadget. Como eu quase não usava imagens no topo dos meus posts, precisei pegar o blog do meu irmão “emprestado”, para realizar os testes.
Sabendo que a maioria  não tem intimidade com CSS, criei alguns estilos pra vocês usarem em seus blogs. Não se esqueçam que é preciso modificar as cores, a fim de que o gadget fique em harmonia com o template que vocês usam.
Estilo 1 – conteúdo com fundo transparente e sem borda
Neste modelo, usei um fundo transparente (para combinar com qualquer template), coloquei borda nas miniaturas e personalizei a cor do título e do resumo das postagens.

#PopularPosts1 .widget-content{  /*estilo para o conteúdo*/ padding: 3px;
}
#PopularPosts1 a {  /*cor do título*/ color: #ff0000;
}
#PopularPosts1 a:visited {  /*cor do título visitado*/ color: #ff0000;
}
#PopularPosts1 a:hover { /*cor do título ao passar o mouse*/ color: #333;
text-decoration: underline;
}
#PopularPosts1 img{  /*borda e espaçamento da miniatura*/ border: 1px dotted #ccc;
padding: 5px;
margin: 2px 3px -7px;
}
.item-content{ /*estilo para o resumo dos posts*/ color: #333;
font-size: 90%;
padding-right: 5px;
}
.item-title { /*estilo da fonte do título*/
font-weight: bold;
font-size: 15px;
}

Estilo 2– conteúdo com fundo transparente e com borda
Neste outro modelo, mantive o estilo anterior, mas acrescentei uma borda ao gadget.

#PopularPosts1 .widget-content{  /*Estilo para o conteúdo*/
padding: 3px;
border: 1px solid #ccc;
}
#PopularPosts1 a {   /*cor do título*/
color: #ff0000;
}
#PopularPosts1 a:visited {  /*cor do título visitado*/
color: #ff0000;
}
#PopularPosts1 a:hover { /*cor do título ao passar o mouse*/
color: #333;
text-decoration: underline;
}
#PopularPosts1 img{  /*borda e espaçamento da miniatura*/
border: 1px dotted #ccc;
padding: 5px;
margin: 2px 3px -7px;
}
.item-content{ /*estilo para o resumo dos posts*/
color: #333;
font-size: 90%;
padding-right: 5px;
}
.item-title { /*estilo a fonte do título*/
font-weight: bold;
font-size: 15px;
}

Estilo 3 – conteúdo com fundo preto e borda cinza
No estilo 3, coloquei cor no plano de fundo e mudei a cor do resumo dos posts.

#PopularPosts1 .widget-content{  /*Estilo para o conteúdo*/
padding: 3px;
border: 1px solid #ccc;
background: #333;
}
#PopularPosts1 a {   /*cor do título*/
color: #ff0000;
}
#PopularPosts1 a:visited {  /*cor do título visitado*/
color: #ff0000;
}
#PopularPosts1 a:hover { /*cor do título ao passar o mouse*/
color: #333;
text-decoration: underline;
}
#PopularPosts1 img{  /*borda e espaçamento da miniatura*/
border: 1px dotted #ccc;
padding: 5px;
margin: 2px 3px -7px;
}
.item-content{ /*estilo para o resumo dos posts*/
color: #fff; font-size: 90%;
padding-right: 5px;
}
.item-title { /*estilo a fonte do título*/
font-weight: bold;
font-size: 15px;
}

Para adequar ao template de vocês, mudem as cores em color e background. Talvez seja necessário mexer nas margens (margin) e preenchimentos (padding).
Em alguns templates, existem pequenos ícones (bolinhas, setas e etc), que antecedem o texto do gadget. Para retirar o ícone, acrescente este código:

#PopularPosts1 li{ /*Estilo para retirar o ícone*/
background-image:none;
}

Para manter o ícone e acertar o espaçamento com o texto, acrescente:

#PopularPosts1 li{
padding-left: 15px;
padding-top: 3px;
}

Mais completo que isto, impossível, né? Usem a criatividade e boa diversão o/

Menu Horizontal no Designer do Modelo

O menu horizontal ou linkbar, é aquela barra que aparece, geralmente, embaixo do cabeçalho do blog, onde colocamos links para destacar posts e páginas importantes. 
Os modelos mais antigos do Blogger (tipo o Mínima), não vinham com esse recurso; então, nós usuários é que tínhamos que implementá-lo em nossos blogs, através de HTML e CSS, como é o caso dos templates do Dicas Blogger.
Relembrando, atualmente contamos com três opções de templates para Blogger/Blogspot. Vejam detalhes em Opções de templates para Blogger
Se você usa um modelo customizado que possui linkbar, já deve saber como  colocar os links em destaque, certo? Se não sabe, acesse: Como inserir links na linkbar
No Designer do Modelo, o menu horizontal ou linkbar, recebeu o nome de guia. Para quem está começando a usar o Blogger agora, pode ser um pouco complicado  colocar os links nessas guias. Existem 2 formas pra fazer isso:

1. através do gadget páginas
2. através do gadget lista de links

O gadget páginas exibe o título de cada página criada no blog, em diversas áreas do template e ainda permite que o usuário escolha quais os links que serão exibidos.
Inserindo links através do gadget páginas
Antes de mais nada, é preciso criar as páginas que vão compor a guia:

• Páginas estáticas no Blogger/Blogspot

Entre em design>elementos de página. No  espaço que fica logo embaixo do título do blog, clique em adicionar gadget e escolha o gadget páginas.

Marque as páginas que deverão aparecer na guia horizontal e clique em salvar.


Inserindo links através do gadget lista de links
Siga o mesmo procedimento anterior, mas escolha o gadget lista de links.
Coloque a URL no local indicado, dê um nome e clique em adicionar link.
Repita esse passo para cada novo link que você quiser adicionar na guia, movimente-os de acordo com a sequência que deseja exibi-los e salve.
Apesar da praticidade do gadget páginas, eu prefiro usar a lista de links, pois com ela eu posso colocar, além das páginas, links de posts e até links de outros sites.

Como colocar share buttons do Blogger

Este é um post que estou devendo há tempos, já que o recurso foi lançado em junho. Trata-se de como ativar os botões de compartilhamento ou share buttons oficiais do Blogger.
Esses botões servem para enviar os posts por email e/ou para o Twitter, Facebook e Google Buzz, com apenas 1 clique.
Como ativar os share buttons nos templates do Designer do Modelo
Entre em design>elementos de página. Em postagens do blog, clique em editar

Irá abrir uma janela pop-up. Marque a caixa Mostrar botões de compartilhamento

Clique em salvar e pronto! Os botões de compartilhamento serão ativados.

Os botões aparecem com fundo cinza e, ao passar o mouse, ficam coloridos.
Como ativar os share buttons em templates personalizados
Entre em design>editar HTML. Marque a caixa expandir modelos de widgets.
Cole este código de acordo com o local onde você quer exibir os botões:

<div class='post-share-buttons'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div>

Embaixo do título do post
Colar antes de <div class='post-body'> ou de <div class='post-body entry-content'>
No final do post
Colar antes da linha <div class='post-footer'>
No rodapé dos posts
Colar antes de <p class='post-footer-line post-footer-line-3'> ou de <div class='post-footer-line post-footer-line-3'>
Clique no botão visualizar e se tudo estiver ok, salve o template.

Como colocar Skype e MSN no blog

Que tal colocar em seu blog um botão ou widget do Skype ou do MSN, para mostrar seu status (online ou offline) e ainda conversar com seus leitores em tempo real?
Os dois comunicadores instantâneos oferecem várias opções de botões e o método para colocar em blogs do Blogger é relativamente simples.

Para colocar um botão do Skype, clique aqui. Coloque seu nome de usuário em enter your skype name, escolha um dos botões disponíveis e copie o código fornecido, conforme consta nas imagens abaixo.



Entre no Blogger, clique em design>elementos de página> adicionar gadget. Escolha o gadget HTML/javascript, cole o código do Skype e salve.
Atenção! Em alguns testes que fiz, o botão do Skype causou um pequeno desajuste nos templates. Nesse caso, elimine a parte do código que assinalei em vermelho:

<!--
Skype 'My status' button http://www.skype.com/go/skypebuttons
-->
<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
<a href="skype:nomedeusuario?call"><img src="http://mystatus.skype.com/bigclassic/nomedeusuario" style="border: none;" width="182" height="44" alt="My status" /></a>

Para colocar um botão do MSN ou um mini-chat, clique aqui e faça login no Windows Live. Em página inicial, marque a caixa que aparece. Depois, clique em criar HTML. Escolha uma das opções e copie o código.


Entre no Blogger, clique em design>elementos de página> adicionar gadget. Escolha o gadget HTML/javascript, cole o código do Skype e salve.

Whos–o melhor contador online para seu blog

Já que o assunto do último post foi estatísticas de acesso, hoje vou falar do excelente Whos Amung,  o melhor contador online do momento.
Com o Whos, é possível acompanhar o número de usuários online em tempo real, de onde eles estão vindo e para quais páginas do blog. O serviço fornece várias opções de botões, é gratuito e não precisa nem fazer cadastro.
Para colocar um botão de visitantes online em seu blog, acesse o site, escolha um dos widgets e copie o código. Entre no Blogger, clique em design> adicionar gadget. Escolha o gadget HTML/Javascript e cole o código do Whos aí.
Opções de Widgets
A primeira opção é colocar um botão suspenso em várias áreas do blog. Você pode configurar onde o botão vai ficar, mexendo nas 3 colunas que aparecem na imagem abaixo (esquerdo, fundo e direito). O código está logo em cima.

Logo abaixo, aparecerá mais widgets interessantes. Clique em demonstração para ver mais cinco opções de botões pra colocar em seu blog.

O primeiro botão tem o fundo preto e mostra o número de usuários online.
O segundo, mostra a mesma coisa, mas permite configurar as cores do fundo e fonte.
O terceiro mostra um mapa e também permite escolher cores e temas.
O quarto é um plugin para o  Firefox, que coloca um ícone na statusbar.


Pra configurar,clique em ferramentas> complementos>opções. Em simple, coloque seu ID do Whos. Para pegar a ID, copie o link do seu gadget e cole a última linha:

whos.amung.us/stats/XXXXXXX/

E o último é o mais discreto, com fundo preto e o número de visitas online.
Para acompanhar as estatísticas em tempo real, clique sobre o gadget que está em seu blog. Aparecerá esta janela, mostrando o número de visitas nas últimas 24h.

Logo abaixo, dá pra ver em quais páginas do blog os visitantes estão. Show, né?
ATUALIZAÇÃO Pra quem deseja acompanhar o número de visitas online, mas não quer exibi-las no blog, o @OficialJoao nos eu esta dica:

<div style="display:none;"> CODIGO DO WHOS </div>

Como colocar um mapa do Google Maps em seu blog

É muito comum vermos em sites e blogs de empresas - especialmente de hotéis, lojas, restaurantes e serviços comerciais em geral – uma página com um mapa dinâmico, explicando ao internauta como chegar naquele determinado local.
Além de ser gentil e elegante, a página “como chegar” facilita futuros negócios.
Mesmo que você não tenha um blog corporativo, mas trabalhe com eventos ou com qualquer outra atividade onde seja necessário mostrar localizações aos seus visitantes, saiba que é muito simples exibir um mapa em seu blog do Blogger.
Para colocar um mapa em seu blog, entre no Google Maps, digite o endereço na caixa de busca (1), clique em link (2)  e copie o código HTML (3).

Depois, abra uma nova página, escreva algo como, por exemplo, o endereço do local que será mostrado, clique na aba editar html e cole o código do mapa.

Se for necessário, ajuste a largura (width) e a altura (height) do mapa para que fique harmônico com o post e com o tamanho da área de postagem do seu template.
Clique no botão visualizar e, se gostar do resultado final, publique a página.

Você pode configurar a página para não permitir comentários e para não exibir o rodapé do post, deixando-a com um aspecto muito profissional.

• Dicas Blogger: Páginas estáticas no Blogger/Blogspot
• Dicas Blogger: Páginas estáticas com CSS

Esta dica não serve somente para criação de páginas estáticas. Ela pode ser aplicada em posts ou mesmo na sidebar, através do gadget HTML/javascript. Divirta-se ;)