Caixinha link-me para blog

Este gadget exibe o banner do seu blog junto com o código html de incorporação para que outras pessoas possam linkar seu blog e assim ajudar na sua divulgação através de parcerias e etc... O método de instalação é bem simples, sem falar que o gadget é super fácil de configurar, pois não exige nenhum conhecimento em códigos html. A instalação deste widget é feita diretamente pelo próprio Blogger, acompanhe o tutorial.

Antes de iniciar o tutorial você deverá já ter criado o banner do seu blog, que deve estar preferencialmente no tamanho 120x60 pixels. Tendo feito isto, deve hospedar a imagem do seu banner em algum lugar público da web. caso não saiba como hospedar imagens na internet, leia este artigo.

Tutorial

Na Nova Interface do Blogger, vá em Layout e clique em "Adicionar um Gadget".
na janela que se abriu, clique em "Adicionar seu próprio" como se vê na imagem abaixo.

No campo onde está escrito http:// cole a seguinte URL:

http://gadgets-lab.googlecode.com/files/gadget_linkme_1.0.xml

Em seguida, clique em Adicionar por URL.
Você será redirecionado para esta outra janela.

Nesta tela que aparece, você poderá configurar o gadget com as suas preferências.
Preencha os seguintes campos!

Titulo - Titulo de exibição do gadget.
Altura - (não é necessário alterar nada)
Nome do Blog - Troque o padrão pelo nome do seu blog.
URL do Blog - Coloque o link do seu blog, no lugar do link que aparece.
URL da Imagem que será usada - Altere o link padrão pelo link do seu banner que deve estar hospedado na web.

Centralizar o gadget - Deixe marcado para que o gadget fique centralizado, ou desmarque para que ele fique alinhado á esquerda.
Exibir Créditos (Opcional) - Deixe marcado para exibir um link discreto para este blog logo abaixo do gadget.

Após preencher todos os campos, clique em Salvar.
Pronto!

O resultado final você pode conferir neste link.

Leia mais ›

Colocar icones das redes sociais no blog (Atualizado)

E ae pessoal, blz?
Hoje trago à vocês leitores uma novidade na qual estive trabalhando nos ultimos dias, que é um gadget personalizável com icones das principais redes sociais conhecidas.
A instalação deste gadget é super simples, pois você não precisará Editar HTML, ou coisas do tipo. Acompanhe!

Tutorial

Na nova Interface do Blogger, vá em: Layout

Clique em Adicionar um Gadget, em seguida clique em Adicionar seu próprio.

Aparecerá esta tela.

Insira a seguinte URL (link) no campo que aparece.

http://gadgets-lab.googlecode.com/files/icones-sociais-3.xml

e clique em "Adicionar por URL".

Você será direcionado para uma página de configuração do gadget.

Nesta página vc pode definir:
- Um "Titulo" para exibição de seu gadget.
- A "Altura" do widget que deve estar em pixels.
- Quais icones serão exibidos no gadget, sendo que para isto, basta marcar ou desmarcar a opção com o nome da rede social.

Logo abaixo de cada opção de rede social, há um campo para você colocar o link do seu respectivo perfil. Altere este campo!
Desssa forma, quando alguém clicar em um icone de rede social, será direcionado para o link do perfil social que você definiu.
Caso você não defina um link, será exibido um link padrão.

Por fim, você tem a opção de exibir ou não os créditos do gadget, que foi criado por mim.
Caso opte por exibir os créditos será exibido um pequeno link para este blog, logo abaixo do gadget. Mas como eu disse, isso é opcional. :D

Após fazer as alterações, clique em Salvar.
Pronto, seu gadget irá aparecer no seu blog.

Obs: É possivel que apareça uma barra de rolagem no gadget, dependendo de quantos icones você escolher exibir, para ocultar a barra de rolagem, basta clicar em editar o gadget e ir aumentando em pixels a sua altura.

Leia mais ›

Mostrar postagens recentes por categoria no blog

Através deste tutorial você aprenderá como exibir os posts mais recentes de uma determinada categoria em seu blog.
Em outro post aqui do blog já havia ensinado como exibir os posts mais recentes do blog, porém eles não eram divididos por categoria como neste caso.
O processo é bem simples. Acompanhe!
Tutorial

Na nova interface do Blogger, vá em Layout e clique em Adicionar um Gadget .
Escolha o gadget Feed.
(clique nas imagens para ampliar)

Em URL do feed cole o seguinte código:

http://seublog.blogspot.com/feeds/posts/default/-/CATEGORIA?orderby=updated&max-results=1000 

Altere o trecho seublog pelo endereço (URL) do seu blog.
Modifique também o trecho CATEGORIA pelo nome de exibição da categoria que desejar.

Obs: o nome deve ser igual ao que está na URL da categoria.
Ex:
Categoria: Dicas para blogs
URL: http://www.blogandofacil.com.br/search/label/Dicas%20para%20blogs

Note que existem uns caracteres estranhos entre as palavras Dicas para blogs na URL da categoria. Estes caracteres caso existam nas categorias do seu blog, devem ser mantidos na hora de alterar o código acima.

Ex:
http://www.blogandofacil.com.br/feeds/posts/default/-/Dicas%20para%20blogs?orderby=updated&max-results=1000

Após colar o código em URL do feed e alterar os trechos necessários, clique em Continuar.
Irá aparecer a seguinte tela.

Em Titulo, coloque o nome que quiser. Pode ser por exemplo o nome da categoria.
Em Exibir você pode definir a quantidade de posts que seão exibidos (no máximo 5 posts).

Após fazer as alterações no gadget, clique em Salvar e arraste o gadget para o local que quiser em seu blog. O resultado pode ser visto nesta página de testes:
http://novotestebf.blogspot.com/ 

Pronto!

Leia mais ›

Meta tag Keywords diferente em cada post

Tempos atrás mostrei em um tutorial como colocar Meta tag de descrição diferente em cada post. Na ocasião a leitora Renata Fraia me perguntou se poderia usar o mesmo exemplo citado no post, porém com a meta tag de keywords (palavras-chave).
Como o método é um pouco diferente, resolvi criar este post para tirar a duvida da Renata e de outras pessoas.
Hoje ensinarei como colocar meta tag de keywords diferente em cada post de forma automática. Acompanhe!

- Inserindo meta tag de keywords diferente em cada post

Na Nova Interface do Blogger, vá na opção Modelo / Editar HTML.
Irá aparecer uma caixa com uma mensagem, clique em 'Prosseguir'.

Caso ainda esteja usando a interface antiga, vá em Design / Editar HTML.

Utilizando as teclas Ctrl+F do seu teclado, procure pelo seguinte trecho:

<b:skin><![CDATA[/*
Cole logo acima deste trecho o seguinte código:

 <b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' name='Keywords'/>
</b:if>
Caso não tenha encontrado o trecho citado acima, cole em qualquer lugar entre <head> e </head> .
Salve o modelo!
Pronto, agora as meta tags de keywords irão ser geradas de forma automatica, ficando diferentes em cada post.

Lembrando que a tag de keywords só irá aparecer nos posts individuais, e não na página inicial.


- Inserindo meta tag de keywords somente na página inicial

Caso queira colocar meta tag com keywords exclusivas na pagina inicial, use este outro código:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<meta content='palavras chave separadas por virgula' name='Keywords'/>
</b:if>

O modo e lugar para inserir o código é o mesmo usado acima.
Não esqueça de trocar o trecho em vermelho pelas palavras que queira usar como palavras-chave.

Obs: O Google deixa bem claro que não usa meta tag de keywords para definição de page rank, ou seja, colocar um site a frente nos resultados de busca, porém você pode usar esta meta tag para que seja detectada por outros motores de busca. Use com moderação! 

Imagens: www.google.com.br

Leia mais ›

Efeito mostrar e ocultar os comentários do blog com botão

Depois de ficar um tempo sem postar, hoje trago uma dica que encontrei no blog do Maujor, onde ele usa um efeito chamado 'Box Toggle' para esconder e mostrar objetos.
Adaptei o código que ele postou em seu tutorial para ser usado para exibir e esconder os comentários dos posts do Blogger apenas clicando em um botão (link). Ver exemplo
Confira o tutorial.

Obs: Para este tutorial usaremos o plugin da Bliblioteca JQuery 1.3.1, portanto caso tenha ela ou uma versão posterior da mesma já adicionada em seu blog não será necessário adicioná-la novamente.

Antes de fazer qualquer alteração, faça um Backup do seu template.  

Na Nova Interface do Blogger, vá na opção Modelo / Editar HTML.
Irá aparecer uma caixa com uma mensagem, clique em 'Prosseguir'.

Caso ainda esteja usando a interface antiga, vá em Design / Editar HTML.

Utilizando as teclas Ctrl+F do seu teclado, procure pelo seguinte trecho:

</head>
Cole logo acima o seguinte código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<style>
#box-toggle span{font:bold 15px Arial;color:#282828; display:block; cursor:pointer;}
</style>
<script type='text/javascript'>

/*
 * Tutorial original:
 * http://www.maujor.com/blog/2009/06/22/efeito-jquery-toggle-para-revelar-e-esconder
 *
 * Créditos do plugin:
 * http://mattkruse.com
 *
 * Adaptado para Blogger por:
 * http://www.blogandofacil.com.br
 *
 * Mantenha os Créditos
 */

jQuery.fn.toggleText = function(a,b) {
return   this.html(this.html().replace(new RegExp(&quot;(&quot;+a+&quot;|&quot;+b+&quot;)&quot;),function(x){return(x==a)?b:a;}));
}

$(document).ready(function(){
    $(&#39;.tgl&#39;).before(&#39;<span>Mostrar depoimentos</span>&#39;);
    $(&#39;.tgl&#39;).css(&#39;display&#39;, &#39;none&#39;)
    $(&#39;span&#39;, &#39;#box-toggle&#39;).click(function() {
        $(this).next().slideToggle(&#39;slow&#39;)
        .siblings(&#39;.tgl:visible&#39;).slideToggle(&#39;fast&#39;);
  
        $(this).toggleText(&#39;Mostrar&#39;,&#39;Ocultar&#39;)
        .siblings(&#39;span&#39;).next(&#39;.tgl:visible&#39;).prev()
        .toggleText(&#39;Mostrar&#39;,&#39;Ocultar&#39;)
    });
})
</script>
Salve o Modelo!

Agora marque a opção 'Expandir Modelos de Widgets' e procure por este trecho:

<div class='comments' id='comments'>
Logo acima do trecho cole estas duas linhas:

<div id='box-toggle'>
<div class='tgl'>
Não tente salvar ainda ou dará erro!
Procure também pelo trecho:

<div id='backlinks-container'>
Logo acima cole estas outras duas linhas:

</div>
</div>
Agora sim... Salve o Modelo!

Se você fez tudo certinho como descrito no tutorial, ao entrar em uma postagem, não aparecerá o corpo dos comentários, mas sim um link escrito 'Mostrar Depoimentos'.
Clique neste link para exibir ou ocultar os comentários.

Pronto!

Obs: Se quiser pode substituir a palavra 'depoimentos' que está destacada em vermelho dentro do código pela palavra 'comentários'.

Créditos da imagem: http://psdstyle.net/2011/01/17/comments-icon-free-icon-template/

Leia mais ›

Colocar nome do autor e data abaixo do titulo do post

Neste tutorial ensinarei como colocar o nome do autor e a data abaixo do titulo do post , o que torna mais fácil aos leitores saber por quem e quando o artigo foi escrito logo no início das postagens. Acompanhe!

Tutorial

Acesse o painel do blogger.
Vá em Design / Editar HTML e marque a opção Expandir modelos de widgets.
Utilizando as teclas CTRL+F procure pelo seguinte trecho:

Modelos novos do Blogger

<!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> <span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
      </span>
ou em Modelos antigos do Blogger

<span class='post-author vcard'>

                <b:if cond='data:top.showAuthor'>
                  <data:top.authorLabel/>
                  <span class='fn'><data:post.author/></span>
                </b:if>
              </span>
Selecione e apague todo o trecho em vermelho. Salve o modelo!

Novamente vá em Editar HTML, clique em Expandir modelos de widgets e procure pelo trecho:

Modelos novos do Blogger

<b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
ou em Modelos antigos do Blogger

        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
Selecione e apague o trecho destacado em vermelho. Salve o modelo novamente!

No ultimo passo, ainda na opção Editar HTML marque a opção Expandir modelos de widgets e procure pelo trecho:

    <div class='post-header'>
    <div class='post-header-line-1'/>
    </div>

    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    <b:if cond='data:post.hasJumpLink'>
Logo abaixo da seguinte linha...

   <div class='post-header'>
Cole todo este código:

<!--Autor e data-->
<div style='display:inline;width:auto;color:#999;font:normal 10px Arial;'>
<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
      </span>
<b:if cond='data:post.dateHeader'>-
<data:post.dateHeader/>
        </b:if>
</div><p/>
<!--Fim -->
Salve o modelo e pronto!

Leia mais ›

Melhores sites para baixar templates grátis para Blogger

Segue uma lista com alguns dos melhores sites (que eu conheço) que oferecem excelentes templates para blogspot totalmente de graça.
É só acessar, baixar o template, instalar e curtir. Confiram!
(Post Atualizado 29/06/2012)

http://btemplates.com/

http://www.deluxetemplates.net/category/blogger-template

http://ufotemplates.com/cms/blogger-template

http://www.raytemplates.com/category/blogger/

http://www.premiumbloggertemplates.com/

http://blogandweb.com/templates-blogger/

http://www.bloggerthemes.net/

http://www.bloggerstyles.com/

http://www.bloggertemplatesfree.com/

http://www.templatesgratis.org/

Leia mais ›

Mostrar texto ou descrição do link ao passar o mouse

Seguindo o assunto do último post, o assunto "Links"... Estarei ensinando como fazer aparecer uma descrição sobre o link quando você passar o cursor(seta) do mouse sobre o mesmo. Acompanhe!

Antes de Prosseguir neste tutorial, não deixe de conferir nosso mais recente post:
Colocar Identificador de IP, Navegador e S.O no Blog

Tutorial
Para exibir a descrição sobre um link, você deverá usar o atributo title junto ao código de um link simples:

title="seu texto descritivo".
O código completo do link deverá ficar assim:

<a href= "http://blogandofacil.blogspot.com" target="blank" title="Dicas e Ferramentas para Blogs"> Blogando Fácil </a>
Na prática será visto assim (passe o cursor do mouse sobre o link):

Blogando Fácil

Pronto!

Leia mais ›

Como fazer um link abrir em uma nova janela

Para fazer um link abrir em uma nova janela, devemos acrescentar ao código básico de um link, o atributo target, que pode ser target="new" ou target="blank". Este atributo é responsável pelo comportamento das janelas.

Obs: Caso não saiba como criar um link, leia este post antes:
http://www.blogandofacil.com.br/2011/04/criando-link-em-html.html

Deverá ficar assim:

<a href="http://blogandofacil.blogspot.com" target="new">Blogando Fácil</a> 

Obs: se usarmos os atributos target="new" ou target="blank" os links irão abrir em uma nova janela, porém se com a janela ainda aberta você clicar em outro link, este mesmo link irá abrir na primeira janela que foi aberta.
Exemplo:

Blogando Fácil
Blogando Fácil 2

Se porém usarmos o atributo target="blank1", acrescentando um número sequencial ao lado de new ou blank, cada link irá abrir em uma janela nova sem sobrepor o conteúdo da outra. O código deverá estar assim:

<a href= "http://blogandofacil.blogspot.com" target="blank1"> Blogando Fácil </a>
<a href= "http://blogandofacil.blogspot.com" target="blank2"> Blogando Fácil </a>

Blogando Fácil
Blogando Fácil

ou...


<a href= "http://blogandofacil.blogspot.com" target="new1"> Blogando Fácil </a>
<a href= "http://blogandofacil.blogspot.com" target="new2"> Blogando Fácil </a>

Blogando Fácil
Blogando Fácil 

Simples né? :D

Leia mais ›

O que é QR Code? Pra que serve...

Você sabe o que é um QR Code?
QR Code é o diminutivo de  Quick Response Code ou traduzido Código de Resposta Rápida, que nada mais é do que uma imagem que contém linhas multidirecionais e quadrados preto e branco localizados dentro de um quadrado maior.

Mas pra que serve realmente o QR Code?
O QR Code é utilizado para armazenar informações como textos, numeros e url's (links) de forma a facilitar a vida de quem usa celulares avançados com suporte á esta tecnologia.
É semelhante ao Código de Barras encontrado em produtos á venda no mercado, que armazena os digitos (numeros) de referência do produto no formato de linhas verticais.

Ex: Vamos supor que uma empresa de publicidade deseja alcançar um determinado publico com informações extras sobre alguma promoção ou campanha. Então a empresa gera um QR Code com as informações sobre a promoção e estampa em um banner ou outdor. Quem tiver um celular com uma câmera fotografica e suporte á leitura do código QR poderá fotografar, e ver o que está por trás do QR Code.

A utilidade deste sistema vai da criatividade de cada um, porém seu uso é um pouco limitado no que diz respeito á quantidade de caracteres suportados.

Capacidades suportadas:

• Numérica - Max. 7.089 caracteres
• Alfanumerica - Max. 4.296 caracteres
• Binário (8 bits) - Max. 2.953 bytes
• Kanji/Kana - Max. 1.817 caracteres

Para gerar o código QR com o link do seu blog por exemplo, ou qualquer outra informação que queira acesse: http://qrcode.kaywa.com/

Para decodificar (ler) o conteúdo do QR Code acesse:
http://www.onlinebarcodereader.com/

Pronto!

Referências:
http://pt.wikipedia.org/wiki/Código_QR
http://www.profissionaisti.com.br/2011/07/gerando-e-lendo-qr-code-quick-response-code/
http://schiratodesk.blogspot.com/2009/03/qr-code-para-que-serve.html

Leia mais ›

Colocar somente a barra do player do YouTube no blog

Hoje ensinarei como incorporar somente a barra do player do youtube no seu blog, ocultando a parte do video. Bem útil caso você queira deixar somente a musica rolando no blog. Confira!

Leia mais ›

Colocar navbar no rodapé do blog

Hoje estava navegando pela web como de cotume e achei uma dica super legal que há muito vinha procurando, que é... Como colocar a navbar no final da página do blog.
Já havia visto em muitos blogs a navbar na parte de baixo da página e não em cima como normalmente é usada, porém nunca havia visto um tutorial que ensinasse isso.
Pois bem...estarei ensinando neste tutorial como mudar a navbar de lugar. Confiram!

Tutorial
Vá no Painel do Blogger e entre na opção:
Design / Editar HTML (Interface Blogger antiga) ou
entre na opção: Modelo / Editar Modelo (Nova Interface Blogger)

Utilizando as teclas Ctrl + F procure pelo seguinte trecho: ]]></b:skin>
Cole logo acima deste trecho o seguinte código:


#navbar-iframe {
position: fixed;
z-index:999;
right: 0px;
bottom: 0px;
left: 0px;
}
Visualize e se tudo estiver ok, Salve o Modelo.
Pronto!

Referência: http://blogger-passo-a-passo.blogspot.com

Leia mais ›

Nova interface do Blogger liberada - Saiba o que mudou

Finalmente foi liberado para uso de todos o novo visual do Blogger, que agora está mais limpo e bonito. As mudanças não foram somente estéticas, mas também algumas funcionalidades ganharam novos nomes como o caso do editor de HTML que antes ficava na guia Design / Editar HTML e agora encontra-se na guia Modelo / Editar Modelo.

Leia mais ›

Blogger poderá mudar de nome...

Hoje enquanto navegava pela web li no site oglobo.globo.com a notícia de que o nome do Blogger poderá ser mudado para Google Blogs... Essa mudança provavelmente acontecerá em breve tendo em vista que a Empresa Google está reformulando o visual e identidade de algumas marcas e produtos.

Leia mais ›

Cursor animado para Blogger

Coloque um cursor animado diretamente em seu blog, e dê um visual mais personalizado ás sua páginas.
São vários os modelos e cores, que vão desde cursores  com os temas: games, anime, celebrity (celebridades), comics (heróis), cartoons (desenhos), sports, smiles, enfim... uma porção de tipos.

Leia mais ›

Botões das redes sociais e de adicionar aos favoritos no blog

Coloque uma barra com os principais botões das redes sociais e também com um botão de adicionar aos favoritos automaticamente direto em seu blog, e que funciona nos navegadores (Mozilla Firefox e Internet Explorer).

Para adicionar a barra com os botões vá em:
Painel do Blogger / Design / Elementos de página e clique em 'Adicionar um gadget'.
Escolha o gadget 'HTML / Javascript'.

Cole o seguinte código:

<div style='height:32px; padding:1px; text-align:center; float:center;'>
<a href='http://seulink' target='blank'><img title='perfil no facebook' src="https://lh4.googleusercontent.com/-RPDg5MmzPwQ/TgEFzYTZquI/AAAAAAAAEBc/-fyxZqscwOg/facebook.png"/></a>
<a href='http://seulink' target='blank'><img title='perfil no orkut' src="https://lh5.googleusercontent.com/-c_7ZQf9GThQ/TgEFzpMtcmI/AAAAAAAAEBs/YK35SWe3VHo/orkut.png" width='31px' height='31px'/></a>
<a href='http://seulink' target='blank'><img title='perfil no dihitt' src="https://lh4.googleusercontent.com/-up942_fX94U/TgEFzhSQ9sI/AAAAAAAAEBo/BwxHT4aQ7OM/icone_dihitt.png" /></a>
<a href='http://seulink' target='blank'><img title='perfil no twitter' src="https://lh5.googleusercontent.com/-iQrUqe8XdaM/TgEFzuzBFoI/AAAAAAAAEBw/G8AUzCOW2_Q/twitter.png"/></a>
<a href='http://seulink' target='blank'><img title='nosso feed' src="https://lh6.googleusercontent.com/-fy3icNUN2-k/TgEFzfFnoOI/AAAAAAAAEBg/FUOff7CmIEU/feed.png"/></a>
<script language="JavaScript">
function addFav(){
    var url      = "http://seublog.blogspot.com";
    var title    = "Titulo do seu blog";
    if (window.sidebar) window.sidebar.addPanel(title, url,"");
    else if(window.opera && window.print){
        var mbm = document.createElement('a');
        mbm.setAttribute('rel','sidebar');
        mbm.setAttribute('href',url);
        mbm.setAttribute('title',title);
        mbm.click();
    }
    else if(document.all){window.external.AddFavorite(url, title);}
}
</script>
<a href="javascript:addFav()" title="Adicionar aos Favoritos"><img src="https://lh3.googleusercontent.com/-71Yr9g5keSY/TgEFzZ0gagI/AAAAAAAAECk/wUzmHy6n65I/favoritos.png"/></a></div>
Substitua todos os trechos onde está escrito: 'http://seublog.blogspot.com' pelo link do seu blog.
Troque os trechos: http://seulink pelo link do perfil da rede social.
Substitua também o trecho: 'Titulo do seu blog' pelo nome do seu blog.

Caso não queira usar algum dos botões, é só excluir as linhas referentes ao código do botão.
Cada linha começa em ...<a href='... e termina em ...</a>.
Cuidado para não apagar a linha errada.
Salve e arraste o gadget para onde quiser.

Sugestão: Um bom lugar para se colocar a barra de botões sociais é logo no topo da coluna lateral do blog (sidebar)

Leia mais ›

Colocar contagem regressiva no blog

Adicione um relógio com contagem regressiva para um evento importante que queira lembrar aos leitores do seu blog.
Esse contador é totalmente customizável. Você pode alterar a cor de fundo, bordas, cor do texto, colocar uma imagem de fundo,
alterar o evento que quer exibir e a data em que será realizado.
Veja como adicionar o Gadget (widget) de Contagem regressiva em 3 passos simples.

Tutorial

1º Passo - Adicionando o gadget
Para adicionar o gadget vá em:Design / Elementos de página e clique em 'Adicionar um gadget'.
Escolha o gadget HTML / Javascript e cole o seguinte código.

<div style="color:#444444;
font-size:14px;
background:#ffffff url() no-repeat center;
border:1px solid #444444;
max-height:185px;
max-width:250px;
padding:10px;
-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px">

<script type="text/javascript">
document.write("<span id='pageinval35' style='font-family:arial, helvetica, sans-serif; font-weight:bold;';></span>");

function countdown_load99(){var the_event="SÓ FALTAM";

var on_event="EVENTO"; //Mensagem no dia do evento
var event="EVENTO"; //Nome do evento
var yr=2011;
var mo=12;
var da=25;
var hr=00;
var min=00;
var sec=0;
var month='';
var month=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");var bottom_event="";var now_d=new Date();
var now_year=now_d.getYear();if (now_year < 1000)now_year+=1900;var now_month=now_d.getMonth();
var now_day=now_d.getDate();
var now_hour=now_d.getHours();
var now_min=now_d.getMinutes();
var now_sec=now_d.getSeconds();
var now_val=month[now_month]+" "+now_day+", "+now_year+" "+now_hour+":"+now_min+":"+now_sec;event_val=month[mo-1]+" "+da+", "+yr+" "+hr+":"+min+":"+sec;difference=Date.parse(event_val)-Date.parse(now_val);differenceday=Math.floor(difference/(60*60*1000*24)*1);differencehour=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);differencemin=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);differencesec=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);if(document.getElementById('pageinval35')){if(differenceday<=0&&differencehour<=0&&differencemin<=0&&differencesec<=1&&now_day==da){document.getElementById('pageinval35').innerHTML=on_event;}else if (differenceday<=-1){document.getElementById('pageinval35').innerHTML="Evento : "+on_event+" ... já passou";}else {document.getElementById('pageinval35').innerHTML="<center><font size='4'>"+the_event+"</font><br/> "+differenceday+" dias<br/> "+differencehour+" horas<br/> "+differencemin+" minutos<br/> "+differencesec+" segundos "+bottom_event+" para... <p/> <font size='4'><b>"+event;}
}setTimeout("countdown_load99()",1000);}countdown_load99();

// distribuição: http://www.blogandofacil.com.br
</script>
</div>

2º Passo - Personalizando o gadget
Altere os seguintes campos para personalizar o gadget: 

font-size:14px; // aqui você define o tamanho da fonte do texto
background:#fff url(url de imagem) no-repeat center; // aqui você define a cor e imagem de fundo do gadget. A imagem deve ter a largura e altura iguais ás do gadget
border:1px solid #444444; // aqui você define largura, estilo e cor da borda do gadget.
max-height:185px; // altura máxima do gadget
max-width:250px; // largura máxima do gadget

3º Passo - Definindo a data e o nome do evento (configurando)
Altere os seguintes campos como desejar.

var on_event="EVENTO"; // Substitua EVENTO pelo nome do evento
var event="EVENTO"; // Repita o nome do evento
var yr=2011; // Ano em que será realizado
var mo=12; // Mês
var da=25; // Dia
var hr=00; // Hora
var min=00; // Minutos

Clique em Salvar.
Se quiser você pode arrastar o gadget para qualquer canto do seu blog. Pronto! :D

Leia mais ›

Centralizar o titulo do post no blog

Neste tutorial estarei ensinando como centralizar o titulo das suas postagens no Blogger.
Veja como fazer isso de maneira bem fácil!

Atenção! Antes de fazer qualquer alteração, faça um Backup do seu template. 

Tutorial
Entre no Painel do Blogger e vá em: Design / Editar HTML e utilizando as teclas Ctrl+F procure a seguinte linha:

/* Posts
----------------------------------------------- */

Logo abaixo cole o seguinte trecho (em modelos novos do Blogger)

h3.post-title {
text-align:center;
}
Ou... use o seguinte trecho: (em modelos antigos do Blogger)

.post h3 {
text-align:center;
}
Visualize e se estiver ok, Salve o modelo!
Pronto!

Obs: Este método foi testado somente em modelos próprios do Blogger. Sua eficácia não é garantida em modelos de terceiros.

Leia mais ›

Painel de Configurações do Blogger sumiu?

Hoje ao acessar o blog como de costume, tive uma surpresa quando procurei a opção das configurações do Blogger. Simplesmente a guia de configurações havia sumido.
Fiquei preocupado e pensei até em acionar o Fórum de ajuda do Blogger, porém quando resolvi analisar com mais cuidado o que havia ocorrido,

Leia mais ›

Meta tag de descrição diferente em cada post

Neste tutorial estarei ensinando dois métodos que lhe ajudarão à melhorar a descrição do seu blog nos resultados de pesquisa do Google. O primeiro método será para adicionar a descrição do seu blog somente na página inicial, e o segundo será para adicionar uma descrição diferente para cada post. Confira!

Recomendamos que você leia antes... O que são meta tags e como utilizá-las 

- Meta tag de descrição somente na página inicial

O problema de se usar a meta tag de descrição incondicionalmente é que, se incluirmos ela de forma simples no HTML do blog, a mesma descrição irá aparecer em todas as postagens e páginas do blog.

Para resolver este problema e incluir a descrição do seu blog somente na página inicial, você deverá usar o seguinte código entre as tags <head> e </head>:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<meta content='Descrição' name='description'/></b:if>
Referência do código HTML - www.icebreaker.com.br

- Meta tags diferentes para cada post de forma automatica! 

Usando o código acima, a descrição irá aparecer nos resultados de busca somente para a página inicial, porém as demais páginas e posts irão receber uma descrição qualquer que será definida pelo google de forma aleatória.

Para contornar este outro problema e colocar uma descrição diferente para cada página ou post diferente, inclua este outro código entre as tags <head> e </head>:

<b:if cond='data:blog.pageName'>
<meta expr:content='&quot;Confira: &quot; +data:blog.pageName+ &quot;. Veja também... Descrição completa do seu blog aqui &quot;' name='Description'/></b:if>
Obs: Altere o trecho em vermelho pela descrição do seu blog.
Utilize somente letras na descrição, não use símbolos ou números.

Usando a meta tag acima, a descrição de cada post irá aparecer de forma diferente nos resultados nos sites de busca.Ex:

Titulo do Post
data do post... Confira: 'Titulo do Post irá aparecer aqui.' Veja também... 'Descrição completa do seu blog irá aparecer aqui.'
seublog.blogspot.com/.../titulo do post.html - Em cache - Similares

Pronto!

Leia mais ›