A Cheats’ Guide to Customizing Blogger Templates

Um ótimo ebook escrito por Amanda do Blogger Buster, descrevendo como personalizar seu blogger. São 53 páginas de conteúdo (em inglês).

Código HTML no Blogger

Essa é uma dica simples, mas que muita gente não conhece, eu mesmo bati muito a cabeça até descobrir como publicar os códigos, porque blogger reconhece os sinais < (menor) e > (maior), como o início de um código e não publica os caracteres. Para resolver o problema basta substituir o < por &lt; e > por &gt;

Lightbox 2

O hack Lightbox 2, é uma maneira interessante de visualizar imagens, sem sair do seu blog ou carregar uma nova página e além disso de forma visualmente agradável, com efeitos em javascript, que lembram muito as animações em flash. Para visualizar o efeito clique na imagem abaixo.

Para implementar o Lightbox 2, vamos por a mão na massa, ou no código.

1 - Vá em "Modelo", "Editar HTML" e marque a caixa "Expandir modelo de widgets". Agora vamos localizar o seguinte bloco:

]]></b:skin>

2 - Logo abaixo copie e cole o seguinte código:

<script src='http://blog.hackblogger.googlepages.com/prototype.js' type='text/javascript'></script>
<script src='http://blog.hackblogger.googlepages.com/effects.js' type='text/javascript'></script>
<script src='http://blog.hackblogger.googlepages.com/scriptaculous.js' type='text/javascript'></script>
<script src='http://blog.hackblogger.googlepages.com/lightbox.js' type='text/javascript'></script>

<link rel="stylesheet" href="http://blog.hackblogger.googlepages.com/lightbox.css" type="text/css" media="screen" />

3 - Agora toda vez que você quiser que uma imagem seja aberta pelo lightbox, basta colocar o seguinte código:

<a title="Aqui vai a descrição que aparace no Lightbox" href="endereço da imagem que vai ser carregada" rel="lightbox"><img src="endereço do thumb"/></a>

Colocando a descrição e os endereços da thumb e da imagem.

4 - Você também pode abrir varias imagens, como se fosse um slideshow, basta colocar o seguinte código:

<a title="Aqui vai a descrição que aparace no Lightbox-1" href="endereço da imagem que vai ser carregada-1" rel="lightbox[roadtrip]"><img src="endereço do thumb-1"/></a>
<a title="Aqui vai a descrição que aparace no Lightbox-2" href="endereço da imagem que vai ser carregada-2" rel="lightbox[roadtrip]"><img src="endereço do thumb-2"/></a>
<a title="Aqui vai a descrição que aparace no Lightbox-3" href="endereço da imagem que vai ser carregada-3" rel="lightbox[roadtrip]"><img src="endereço do thumb-3"/></a>

Veja abaixo o efeito:

O original deste hack pode ser encontrado, clicando aqui.