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.

Botões Web 2.0

Pack com 23 botões estilo web 2.0, no formato PSD para você personalizar seu blog.

Personalize os links Postagens mais recentes, Postagens mais antigas e Início

Podemos mudar os links que ficam no rodapé do blogger, para as Postagens mais recentes, Postagens mais antigas e Início. Para fazer isso, vá em "Modelo", "Editar HTML" e marque a caixa "Expandir modelo de widgets". Agora vamos localizar o seguinte bloco:

<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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>

Agora vamos as explicações:

• <data:newerPageTitle/> - Corresponde ao link “Postagens mais recentes”
• <data:olderPageTitle/> - Corresponde ao link “Postagens mais antigas ”
• <data:homeMsg/> - Corresponde ao link “Início”

Se você quiser mudar o texto, basta substituir o código pelo texto que você quiser, por exemplo substitua o código <data:newerPageTitle/> por Posts Novos .

Se você quiser colocar uma imagem em vez dos textos basta substituir o código pelo código da imagem <img src="url"/>

Se você quiser personalizar os links, mudar a cor, tamanho, estilo do link etc você pode personalizar as classes:

• #blog-pager-newer-link - Para “Postagens mais recentes”
• #blog-pager-older-link - Para “Postagens mais antigas ”
• #home-link - Para “Início”