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 < e > por >
segunda-feira, 11 de fevereiro de 2008
quarta-feira, 6 de fevereiro de 2008
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" />
<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>
<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.
Postado por FiascoNegro em 2/06/2008 02:39:00 PM 5 Comentaram
sexta-feira, 1 de fevereiro de 2008
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>
<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”
Postado por FiascoNegro em 2/01/2008 03:12:00 PM 4 Comentaram
Assinar:
Postagens (Atom)