Tutorial Shadowbox Parte I
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>
Antes da TAG referida anteriormente colocamos os seguintes scripts:
<script src='http://shadowbox.no.sapo.pt/shadowbox-base.js' type='text/javascript'/>
<script src='http://shadowbox.no.sapo.pt/shadowbox.js' type='text/javascript'/>
<script src='http://shadowbox.no.sapo.pt/skin/skin.js' type='text/javascript'/>
<link href='http://shadowbox.no.sapo.pt/skin/skin.css' rel='stylesheet' type='text/css'/>
<script src='http://shadowbox.no.sapo.pt/lang/shadowbox-pt-PT.js' type='text/javascript'/>
<script src='http://shadowbox.no.sapo.pt/players/shadowbox-img.js' type='text/javascript'/>
<script src='http://shadowbox.no.sapo.pt/players/shadowbox-swf.js' type='text/javascript'/>
<script src='http://shadowbox.no.sapo.pt/players/shadowbox-html.js' type='text/javascript'/>
<script src='http://shadowbox.no.sapo.pt/players/shadowbox-iframe.js' type='text/javascript'/>
<script src='http://shadowbox.no.sapo.pt/players/shadowbox-wmp.js' type='text/javascript'/>
<script src='http://shadowbox.no.sapo.pt/players/shadowbox-flv.js' type='text/javascript'/>
<script src='http://shadowbox.no.sapo.pt/players/shadowbox-qt.js' type='text/javascript'/>
<script type='text/javascript'>
window.onload = Shadowbox.init;
</script>
Depois disto, guardamos as alterações.
Passando para a publicação,vamos criar um novo artigo e carregamos a imagem desejada clicando no ícone 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:
<div class="separator" style="clear: both; text-align: center;"><a href="ENDEREÇO DA IMAGEM" rel="shadowbox" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="ENDEREÇO DA IMAGEM" /></a></div>
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 clicável:
Exemplo de texto clicável:
CLIQUE AQUI PARA VER A IMAGEM
Category: Blogger
maravilhoso
Muito obrigado!!!
seu site e dicas estão de parabéns
Mano, adorei sei blog, eu ainda estou fazendo o design do meu site, e ja estou colocando as configuração de luxo, essa foi a 4ª.tirei 2 delas do seu blog, valeu mesmo.
Suas dicas são ótimas, estava procurando um álbum desse estilo, que a imagem se expandisse e escurecesse em volta...
Mas como faço para as imagens que aparecem antes de clicar, ficarem pequenas???
Como se fosse um preview ...
Suas dicas são ótimas, estava procurando um álbum desse estilo, que a imagem se expandisse e escurecesse em volta...
Mas como faço para as imagens que aparecem antes de clicar, ficarem pequenas???
Como se fosse um preview ...