Slideshow personalizado para blogs

Eu já ensinei diversas formas de colocar apresentação de slides no Blogger, tanto em posts, quanto em gadgets, bem como usando o Flickr e o Picasa Web

• Como colocar slides em blogs do Blogger/Blogspot (Picasa) 
• Slideshow no Blogger (Gadget)
• Apresentação de slides dentro do post (Flickr)
• Slideshow em cima dos posts do Blogger (Gadget)

Todas as formas acima são bacanas, mas nenhuma delas nos permite uma personalização mais detalhada.
Ontem passei horas procurando uma forma de colocar uma apresentação de slides, na qual eu pudesse escolher fontes, cores, planos de fundo, tipo de transição e etc, como fazemos no Power Point, por exemplo.
Entre idas e vindas, acabei descobrindo o site Kizoa,  que oferece um serviço gratuito para armazenamento e edição de imagens,bem como um prático gerador de slideshow.

Para criar a apresentação de imagens, é preciso criar uma conta (é rapidinho). Depois, você deve clicar em launch kizoa, para começar a diversão.

Para subir suas imagens, clique em upload. Para começar a criar o slideshow,clique em slideshow maker. Arraste as imagens que farão parte da apresentação, para o local indicado na imagem abaixo (drag your photo here):

Acima das fotos tem um menu com as transições, efeitos especiais, texto, animações e até música. Brinque à vontade. Depois que o slideshow estiver ponto, clique em save. Dê um título a sua obra de arte e clique em save novamente.
Para gerenciar os slideshows, acesse my slideshows. Clique em add to my blog para colocar o slideshow em seu blog. Também é possível enviar por email, ao Facebook, Twitter ou então gravar em CD/DVD, editar novamente ou apagar.

Ao clicar em add to my blog, abrirá uma nova janela. Escolha o tamanho da apresentação – que não deve ultrapasar a largura do local onde você irá inseri-la em seu blog – e copie o código HTML, conforme indicado abaixo:

Para colocar a apresentação em um gadget, escolha o tipo HTML/Javascript.
Para colocar dentro de um post, clique na aba editar HTML do editor de postagens e cole o código do slideshow. Visualize e clique em publicar.
Vejam como ficou o meu portifólio de templates, usando o slideshow maker:

Portifolio - Free Slideshow Maker

Aproveito para informar que o template DB 4.0 está disponível no pacote Blog Fácil.

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/

Personalizando o gadget Postagens Populares

Um dos vários recursos recém lançados pelo Blogger, foi o gadget Postagens Populares, que exibe os posts mais acessados, baseando-se no serviço de estatísticas nativo.
No post Novo gadget – Postagens populares, ensinei como colocar o gadget na barra lateral (sidebar) do blog.
O problema é que em alguns templates – e os nosso estão incluídos – o gadget aparece desconfigurado. Vejam um exemplo na imagem abaixo:

Perceberam que as setinhas aparecem em cima do texto? Para consertar isso, segui este tutorial do Mundo Blogger -  Instalar e personalizar o Gadget de Postagens Mais Populares do Blogger e fiz as alterações necessárias para o meu template.
Acredito que o código deve variar de template para template, mas vamos lá.
Entrem em design>editar HTML. Antes de ]]></b:skin>, colem o código abaixo:

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

A parte padding-left, se refere à distância que deve existir entre a imagem e o texto. Já padding-top, se refere à altura da imagem. Façam os ajustes nesses dois elementos e vá visualizando até ficar do modo correto e daí salve o template.

Além de acertar  a distância entre o texto e a imagem,  podemos aplicar estilos, usando  CSS. Para exemplificar, colocarei borda e plano de fundo no gadget:

#PopularPosts1 li{
padding-left: 15px;
padding-top: 3px;
}
#PopularPosts1 .widget-content{
border: 1px solid #ccc;
background: #efefef;
}

Para mudar a cor do resumo dos posts, acrescente este trecho:

.item-content{
color: #1d85dd;
}

Mude as cores a seu gosto. Se não sabe os códigos , acesse uma tabela de cores
O CSS final seria este, com as devidas modificações de acordo com cada template:

#PopularPosts1 li{ /*Estilo para acertar a imagem*/
padding-left: 15px;
padding-top: 3px;
}
#PopularPosts1 .widget-content{ /*Estilo para o conteúdo*/
border: 1px solid #ccc;
background: #efefef;
}
.item-content{ /*Estilo para o resumo dos posts*/
color: #1d85dd;
}

ATUALIZAÇÃO: Para retirar o ícone que vem antes do texto, substitua:

#PopularPosts1 li{ /*Estilo para acertar a imagem*/
padding-left: 15px;
padding-top: 3px;
}

por este outro código:

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

Este post foi criado à pedido de querida leitora Lucy – Amor e Paz Sem Fronteiras
Créditos de parte do código CSS ao Mundo Blogger, um dos meus blogs favoritos

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.

Personalizando os links de navegação do Blogger

Os links de navegação, são aqueles 3 links que aparecem no final de cada página dos blogs do Blogger. Eles servem para auxiliar o visitante a “navegar” pelo arquivo do blog, avançando e retrocedendo as postagens do arquivo.


Considero obrigatório, o uso dos links de navegação, já que sem eles ficaria muito complicado ter acesso a todos os posts que não se encontram na página inicial.

• Como recuperar os links de navegação do Blogger

Muito bem. Com um pouco de CSS e com algumas mudanças no código original do Blogger, podemos fazer maravilhas com os links de navegação.

Primeiramente, irei ensinar como mudar o código original. Antes de começar, faça um backup completo do template ou use um blog de testes.

Entre em design>editar HTML, marque a caixa expandir modelos de widgets  e, usando o comando Crtl+F do teclado, procure por:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Substitua tudo por:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='posts mais recentes'>&#171; página anterior</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='posts mais antigos'>próxima página &#187;</a>
</span>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Salve o template.
Agora iremos aplicar o CSS.  Procure por este trecho:

#blog-pager-newer-link {  
float: $startSide;
}

#blog-pager-older-link {
  float: $endSide;
}

#blog-pager {
  text-align: center;
}

**Para blogs com template do Designer do modelo, o trecho é este:

.blog-pager { 
background: $(paging.background);
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
  background-color: $(content.background.color);
  padding: 5px;
}

Substitua tudo por:

#blog-pager a {
font-family: Arial;
color: #333; /*Cor da letra*/ font-size: 13px; /*tamanho da letra*/
padding: 5px;
text-decoration: none;
background: #e6e6e6; /* cor do fundo*/ border: solid #ccc 1px; /*cor da borda*/ }
#blog-pager a:hover {
color:#fff;  /*Cor da letra ao passar o mouse*/ background-color:#0071bb;  /*Cor da fundo ao passar o mouse*/ }
.blog-pager-older-link {
float: right;
}
.blog-pager-newer-link {
float: right;
}

Os ítens em vermelho, podem ser modificados livremente. Veja a tabela de cores.
Para colocar numeração nos links, vá até o Mundo Blogger: Numerar Páginas no Blog

Resultado do sorteio–livro Google Analytics

O sorteio valendo 1 exemplar do livro Google Analytics, oferecimento na @novateceditora, foi realizado às 13:59, através do site Sorteie.me e o grande vencedor foi Silvio Reis (@o_silvio).
Para ver o resultado, acessem: http://sorteie.me/1tC2
Confesso que fiquei impressionada com o alcance dessa promoção. Foram 766 RTs, 6.366 cliques e 561 RTs únicos em 72 horas.

fonte: http://kingo.to/mjG+

Deixo os meus parabéns ao Sílvio e um agradecimento a todos que participaram!
Lembro ainda que, para comprar o livro Google Analytics com 25 % de desconto, é só clicar aqui e informar o código promocional dicasblogger (válido até 30/11)

Novas fontes no Designer do Modelo

O blog oficial do Blogger in Draft (página de testes do Blogger), anunciou a chegada de 40 novas fontes para os templates do Designer do Modelo - More Fonts Means More Choice.
As fontes ou fontes tipográficas, nada mais são do que o tipo de letra que usamos em nossos blogs.
Para acessar as novas fontes, entre no painel do Blogger in Draft, procure por design>designer do modelo> avançado.
Na guia avançado, encontre a área do layout onde a nova fonte será aplicada.
No exemplo abaixo, escolhi mudar a fonte da guia (também conhecida como  linkbar).

ATENÇÃO! Este recurso ainda não está disponível na página padrão do Blogger.

Blogger já está disponível para usuários do Google Apps

O Blogger Buzz anunciou há pouco que o Blogger agora está disponível para usuários do Google Apps. Essa adição a suíte de aplicativos já havia sido anunciado há alguns meses.

O Google Apps permite a administradores de domínios usarem produtos da Google em seus próprios domínios, melhorando a qualidade de seus setores de TI substituindo aplicativos próprios como servidores de e-mail, agenda, servidores e compartilhadores de documentos por aplicativos da Google que oferecem alta performance e baixo custo.

Os administradores que já tinham acesso a produtos consagrados do Google como o Gmail, Google Docs e Calendar poderão contar agora com a praticidade do Blogger como ferramenta de publicação de blogs. Esta noticia é boa para quem é usuário do Google Apps ou pretende adquirir os serviços e também é boa para os usuários do serviço gratuito, pois sinaliza o interesse do Google em melhorar e adicionar mais recursos ao Blogger para garantir a qualidade dos serviços prestados aos usuários empresariais.

Se você é usuário do Google Apps e ainda não conhece o Blogger recomendo que visite a página da Visita Guiada e a página dos Recursos do Blogger para aprender sobre a ferramenta.

Sorteio! Livro completo sobre o Google Analytics

A editora Novatec está lançando o livro Google Analytics,  onde o autor - Justin Cutroni - desvenda os segredos de um dos melhores e mais usados serviços para monitoramento de dados de navegação, o Google Analytics.
“Justin é um dos mais inteligentes gurus do Google Analytics que você pode encontrar. Já vi até mesmo clientes mais exigentes se impressionarem com o conhecimento e os insights oferecidos por ele”

—Phil Mui, gerente sênior, Google Analytics

Nós blogueiros adoramos estatísticas, não é verdade? Agora imagine você, caro leitor, obtendo o máximo proveito do Google Analytics? A editora Novatec ofereceu um (1) exemplar desse livro para sortearmos entre os nossos seguidores do Twitter e mais 25% de desconto pra quem quiser comprá-lo. Que tal?
Regulamento: Para participar do sorteio, é obrigatório ser seguidor do @dicas blogger e tuitar ou retuitar a seguinte frase:

Dê RT e concorra ao sorteio do livro Google Analytics: http://kingo.to/mjG

O link é obrigatório e não pode ser modificado, pois será através dele que faremos o sorteio no site Sortei.me. O resultado será divulgado no dia 25/11.

* Descubra exatamente como o sistema do Google Analytics funciona.
* Aprenda como configurar esse sistema para medir dados mais relevantes aos objetivos de seu negócio.
* Monitore ações de marketing on-line, incluindo campanhas de performance, e-mail e campanhas internas.
* Monitore eventos nos sites, com recursos como mapas, vídeo incorporado e widgets.
* Configure o Google Analytics para monitorar dados de negócio, incluindo domínios múltiplos.
* Use técnicas avançadas como variáveis personalizadas e integração com um sistema CRM.

Para comprar o livro Google Analytics com 25 % de desconto, clique aqui e informe o código promocional dicasblogger, conforme aparece na imagem abaixo:

Atenção! O código promocional é válido até o dia 30 de novembro. Corram!
Para quem leva seu site/blog a sério,  a leitura deste livro é altamente recomendada.
ATUALIZAÇÃO: O resultado do sorteio será divulgado no Twitter, em 25/11, às 14h.

Saiba quem está online no Twitter

Neste mês surgiu um serviço bem interessante para Twitter, o ONTW, que te permite saber quais são os seus amigos online no microblog no momento.
Informação muito útil caso você queria saber se certo amigo seu está online para enviar uma DM, ou até mesmo para inicar uma conversa, por exemplo.
Para utilizar o serviço é bem simples, basta acessar www.ontw.com.br e clicar em "Logar-ser via Twitter". Após logado, em alguns segundos uma lista com os seus amigos online (em verde) e ausentes (em vermelho) aparecerá na tela. Vale ressaltar que não necessariamente os usuários ausentes são offline, apenas quer dizer que os mesmos estão inativos à algum tempo na rede social.
O site foi criado por mim, em parceria com o @iSenna. 
Qualquer dúvida ou pergunta será respondida nos comentários.

---

Este é um guest-post do @OficialJoao – desenvolvedor do ONTW.

João Pedro Carvalho Motta  
Editor de conteúdo | Zuugy Networks www.webdicas.info | www.zuugy.com.br

---

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.

Destacar mensagens nos posts

Eu já expliquei uma vez como colocar uma mensagem no rodapé dos posts, convidando os leitores a assinarem os feeds -  Widget "Assine o Feed" no rodapé dos posts
Agora que fiquei mais espertinha em CSS e abandonei as tabelas (né, Cidão?), fiz um código novo que pode ser usado para destacar qualquer mensagem dentro dos posts.
Vejam um exemplo, na imagem abaixo. É um convite pra assinar os feeds:

O código é simples, mas requer que vocês façam algumas substituições:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align: left; color: #7b7c7d; font-size: 110%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'>
<img alt='' src='URL DA IMAGEM' style='width: 32px; height: 32px;float:left;'/>
<b>TÍTULO:</b> TEXTO 1<br/>
      <a href='LINK'>Clique
aqui </a>TEXTO 2.
</div>
</b:if>

Escolha uma imagem de 32 x 32px, faça o upload para o Picasa ou outro site de sua preferência e copie a ULR. Abra o código acima no bloco de notas e substitua URL DA IMAGEM pela URL da imagem que você vai usar; em TÍTULO, coloque um título pra mensagem; em TEXTO 1, escreva o primeiro paráfrafo e em TEXTO 2, o segundo.
Você ainda pode alterar a cores de fundo em “background” , a borda em “border” e a cor da fonte em “color”. Se necessário, ajuste o tamanho da fonte em “font-size: 110%”, a largura em “width” e a margem superior em “margin-top”.
Para usar imagens maiores, altere: width: 32px; height: 32px
Vejam estes exemplos:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align: left; color: #7b7c7d; font-size: 110%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'>
<img alt='' src='http://lh6.ggpht.com/_mcq01yDJ2uY/TOP-Je99_AI/AAAAAAAAD98/s24k47t_TmU/rss_file.png' style='width: 32px; height: 32px;float:left;'/>
<b>RSS/Feed:</b> Receba automaticamente todas os artigos deste blog!<br/>
      <a href='LINK DO FEED'>Clique
aqui </a> para assinar nosso feed. O serviço é totalmente gratuito
</div>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align: left; color: #7b7c7d; font-size: 90%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'>
<img alt='' src='http://png-4.findicons.com/files/icons/2152/snowish/32/dialog_warning.png' style='width: 32px; height: 32px;float:left;'/>
<b>Alerta!</b> É terminantemente proibido copiar os artigos deste blog.<br/>
      <a href='LINK'>Clique
aqui </a> e veja nossa licença. Plágio é crime previsto no Código Penal.
</div>
</b:if>

Use sua imaginação! As opções são várias: feed, plágio, twitter, facebook e etc.
Locais para inserir a mensagem
Embaixo do título do post
Para encontrar os trechos que citarei, use o comando Ctrl+F do teclado.
Entre em design>editar HTML. Marque a caixa “expandir modelos de widgets” e cole o código antes da linha  <div class='post-body'>
No final do post
Entre em design>editar HTML. Marque a caixa “expandir modelos de widgets” e cole o código antes da linha <div class='post-footer'>
No rodapé dos posts
Entre em design>editar HTML. Marque a caixa “expandir modelos de widgets” e cole o código antes da linha <p class='post-footer-line post-footer-line-3'> 

Para que a mensagem apareça também na home, apague o que está em vermelho:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align: left; color: #7b7c7d; font-size: 110%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'>
<img alt='' src='URL DA IMAGEM' style='width: 32px; height: 32px;float:left;'/>
<b>TÍTULO:</b> TEXTO 1<br/>
      <a href='LINK'>Clique
aqui </a>TEXTO 2.
</div>
</b:if>

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>