Varias pessoas me têm perguntado como se faz para visualizar fotos e videos do modo que uso no meu blog Pensamento pró fundo.
O efeito chama-se Shadowbox e neste artigo vou explicar e fornecer os códigos necessários para o poderem usar.
Para começar é necessário ter um local para alojar os ficheiros a usar pelo Shadowbox porque ele não funciona com ficheiros alojados directamente no Blogger.
No meu caso, para alojar fotos, uso o Photobucket mas existem muitos outros locais (como por exemplo o ImageShack).
As alterações no blog são bastante simples e é necessário apenas inserir alguns scripts.
Entramos no código fonte do blog (ver foto abaixo),
e procuramos a tag <head>.
Imediatamente acima colamos os seguintes scripts:
<script src='http://vicio.do.sapo.pt/shadow/jquery.js' type='text/javascript'/>
Depois disto, guardamos as alterações.
<script src='http://vicio.do.sapo.pt/shadow/shadowbox-jquery.js' type='text/javascript'/>
<script src='http://vicio.do.sapo.pt/shadow/interface.js' type='text/javascript'/>
<!--[if lt IE 7]> <style type="text/css"> .dock img { behavior: url(http://vicio.do.sapo.pt/shadow/iepngfix.htc) } </style> <![endif]-->
<script src='http://vicio.do.sapo.pt/shadow/shadowbox.js' type='text/javascript'/>
<script src='http://vicio.do.sapo.pt/shadow/skin.js' type='text/javascript'/>
<link href='http://vicio.do.sapo.pt/shadow/skin.css' rel='stylesheet' type='text/css'/>
<script src='http://vicio.do.sapo.pt/shadow/shadowbox-en.js' type='text/javascript'/>
<script src='http://vicio.do.sapo.pt/shadow/shadowbox-img.js' type='text/javascript'/>
<script src='http://vicio.do.sapo.pt/shadow/shadowbox-swf.js' type='text/javascript'/>
<script src='http://vicio.do.sapo.pt/shadow/shadowbox-html.js' type='text/javascript'/>
<script src='http://vicio.do.sapo.pt/shadow/shadowbox-iframe.js' type='text/javascript'/>
<script src='http://vicio.do.sapo.pt/shadow/shadowbox-wmp.js' type='text/javascript'/>
<script src='http://vicio.do.sapo.pt/shadow/shadowbox-flv.js' type='text/javascript'/>
<script type='text/javascript'>
window.onload = Shadowbox.init;
</script>
Passando para a publicação,vamos criar um novo artigo e carregamos a imagem desejada clicando no icone como na imagem
Na janela que se vai abri escolhemos o carregamento da imagem por URL,
e ela vai mudar para esta,
onde vamos inserir o endereço da imagem que já deve estar alojada no site que falei no inicio.
Depois muda-se para a parte de Editar HTML na janela de edição do artigo e no código da imagem vamos adicionar o código
rel="shadowbox"
ficando algo deste tipo:
Gravamos o artigo e está pronto a ser visualizado no blog.
NOTA: A parte a roxo, no código acima, pode ser substituída por texto. É o que vai aparecer no corpo do artigo e vai servir como link.
Exemplo de imagem clicavel:
Exemplo de texto clicavel:
No próximo artigo irei explicar como publicar vídeos com este metodo.
Tutorial shadowbox - parte I
<div class="separator" style="clear: both; text-align: center;">
<a href="1º ENDEREÇO DA IMAGEM" rel="shadowbox" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="2º ENDEREÇO DA IMAGEM" /></a></div>
Subscrever:
Enviar feedback (Atom)
2 comentários:
Sugestão: Podias compilar uma lista de links interessantes de sites com templates para o blogger... eu adorava! ;;)
Legalzin o efeito, mas demora muito pra carregar o blog
Enviar um comentário
Para esclarecimento de duvidas podem deixar um comentário ou enviar um email para o endereço que está no meu perfil.
Vou tentar responder a todos.
É aconselhável deixar endereço de correio