Adicionando o efeito "Shadowbox" em blogs do Blogger

Olá queridos leitores! Hoje venho trazendo um efeito muito legal para blogs da plataforma Blogger, é o efeito Shadowbox. Muitos utilizam ele para colocar imagens, vídeos, posts, páginas da web, arquivos em flash e muito mais! Esse efeito abre o que eu descrevi acima na mesma janela sem sair da aba, legal né? Quer saber como coloca-lo em seu blog? Então vamos agora!

Como instalar?

A instalação é bem simples, preste atenção nos pontos abaixo e tudo sairá bem!

1. Abra a página de download do site do Shadowbox, clicando aqui.

2. Em seguida, escolha os formatos de arquivos você quer que ele abra. Basta ir marcando as caixas e escolha seu idioma(no caso, português-Brasil).

3. Role um pouco abaixo e escolha o formato que você quer fazer o download. Eu recomendo o ZIP, salve-o no seu computador.

4. Extraia todo o arquivo com um programa, por exemplo, o Winrar ou qualquer outro de sua preferência.

5. Hospede os arquivos no seu servidor de hospedagem. Lembre-se de hospedar somente os arquivos: "close.png", “loading.gif”, “next.png”, “pause.png”, “play.png”, “previous.png” e “shadowbox.js”.

Informação: Eu gosto de utilizar o Webs. Caso você tenha outro site de preferência você também pode hospedar. Mas certifique-se que ele pode ser utilizado por usuários não logados neste site.(Exemplo: O DropBox só seria possível acessar o efeito se o usuário estiver logado no site!

6. Após a hospedagem. Abra o arquivo "shadowbox.css" em um bloco de notas e substitua os links das imagens pelas que você hospedou.

7. Depois disso, salve o arquivo e hospede-o no mesmo local onde você hospedou os demais.

8. Faça o login no Blogger e clique na guia Modelo e logo depois no botão Restaurar/Fazer backup, faça uma cópia segura clicando em Fazer download do modelo completo. Feche a janela de Restaurar e Fazer backup e clique no botão Editar HTML.

9. Pressione Ctrl+F do seu teclado para abrir o Localizador de seu navegador e procure a tag:

</head>

10. Logo acima desta tag, cole o código abaixo:

<!-- Script do Shadowbox -->

<link href="url-do-arquivo-shadowbox.css" rel="stylesheet" type="text/css"/>

<script src="url-do-arquivo-shadowbox.js" type="text/javascript"/>

<script type="text/javascript">

Shadowbox.init({

    handleOversize: &quot;drag&quot;,

    modal: true

});

</script>

<!-- Fim do script do Shadowbox -->

Você deve substituir os links destacados de vermelho,  pelos links que você hospedou(shadowbox.css e shadowbox.js).

11. Clique em Visualizar e se estiver tudo correto, clique em Salvar.

Colocando o efeito nas imagens

Agora que o efeito Shadowbox está instalado em seu blog. Vá para o editor de posts e clique na aba Editar HTML da postagem. E adicione algum dos códigos abaixo em qualquer lugar que você queira a imagem:

1. Imagem com miniaturas nos artigos:

Para utilizar as imagens em miniaturas, uma imagem pequena e uma maior teremos que utilizar:

<a href="URL-DA-IMAGEM-EM-TAMANHO-ORIGINAL" rel="shadowbox" title="TÍTULO-DA-IMAGEM"><img src="URL-DA-IMAGEM-EM-TAMANHO-MENOR" border="0" alt=""/></a>

Substitua as partes destacadas em vermelho, pelos links das imagens. O de azul, o nome da imagem.

2. Utilizando uma galeria de imagens:

Para utilizar uma galeria, ou seja, um conjunto de imagens é possível. Basta utilizar o código abaixo:

<a href="LINK-DA-IMAGEM-1-EM-TAMANHO-ORIGINAL" rel="shadowbox[gallery]" title="TÍTULO-DA-IMAGEM-1"><img src="LINK-DA-IMAGEM-1-EM-TAMANHO-ORIGINAL" border="0" alt="" width="100"/></a>

<a href="LINK-DA-IMAGEM-2-EM-TAMANHO-ORIGINAL" rel="shadowbox[gallery]" title="TÍTULO-DA-IMAGEM-2"><img src="LINK-DA-IMAGEM-2-EM-TAMANHO-ORIGINAL" border="0" alt="" width="100"/></a>

<a href="LINK-DA-IMAGEM-3-EM-TAMANHO-ORIGINAL" rel="shadowbox[gallery]" title="TÍTULO-DA-IMAGEM-3"><img src="LINK-DA-IMAGEM-3-EM-TAMANHO-ORIGINAL" border="0" alt="" width="100"/></a>

<a href="LINK-DA-IMAGEM-4-EM-TAMANHO-ORIGINAL" rel="shadowbox[gallery]" title="TÍTULO-DA-IMAGEM-4"><img src="LINK-DA-IMAGEM-4-EM-TAMANHO-ORIGINAL" border="0" alt="" width="100"/></a>

Colocando o efeito em vídeos:

Para abrir os vídeos no Shadowbox utiliza-se quase o mesmo processo que os da imagens, mas, ao invés de utilizar links de imagens, utilizaremos o link do vídeos fornecido pela incorporação, escolha o vídeo que quiser e clique em Compartilhar · Incorporar e copie o URL:

1. Clique em Compartilhar 2. Clique em Incorporar

A sua url deve ser parecida com esta:

<iframe width="560" height="349" src="http://www.youtube.com/embed/KsxSxF3JKeU" frameborder="0" allowfullscreen></iframe>

A parte destacada de vermelho, corresponde o url que você deve copiar.

1. Vídeo com miniatura:

Para colocar uma imagem e assim que clicada aparece o vídeo no box do Shadowbox, utilize este código:

<a href="LINK-DO-VÍDEO-DO-YOUTUBE" rel="shadowbox;height=386;width=515" title="TÍTULO-DO-VÍDEO"><img src="LINK-DA-IMAGEM-MINIATURA-DO-VÍDEO" border="0" alt=""/></a>

Substitua a parte vermelha pelo link como mostrei acima e o azul pelo título e o verde pela a imagem que servirá como miniatura do vídeo.

2. Galaria de vídeos:

Caso queira uma galeria de vídeos, utilize o código abaixo:

<a href="LINK-DO-VÍDEO-1" rel="shadowbox[divertido];height=386;width=515" title="TÍTULO-DO-VÍDEO"><img src="LINK-DA-IMAGEM-MINIATURA-DO-VÍDEO-1" border="0" alt=""/></a>

<a href="LINK-DO-VÍDEO-2" rel="shadowbox[divertido];height=386;width=515" title="TÍTULO-DO-VÍDEO"><img src="LINK-DA-IMAGEM-MINIATURA-DO-VÍDEO-2" border="0" alt=""/></a>

<a href="LINK-DO-VÍDEO-3" rel="shadowbox[divertido];height=386;width=515" title="TÍTULO-DO-VÍDEO"><img src="LINK-DA-IMAGEM-MINIATURA-DO-VÍDEO-3" border="0" alt=""/></a>

Substitua as partes destacadas de vermelho os links dos vídeos, o rosa pelo nome da galeria, o azul o nome do vídeo e o verde a imagem que servirá como miniatura do vídeo.

Informação: Você pode repetir o código das galerias, assim, você poderá adicionar mais de 4 ou 10 imagens ou vídeos no formato de galeria!

Colocando efeito nos links:

Os links não ficam de fora! Eles também são incluídos no Shadowbox! Veja como utilizar usando um simples código:

1. Imagem simples em link:

<a href="LINK-DA-IMAGEM-EM-TAMANHO-ORIGINAL" rel="shadowbox" title="TÍTULO-DA-IMAGEM">CLIQUE AQUI PARA VER A IMAGEM</a>

Substitua o link destacado de vermelho pelo link da imagem, o azul substitua para o nome de sua imagem e o rosa, pelo nome do link. Veja um exemplo abaixo:

CLIQUE AQUI PARA VER A IMAGEM

2. Galeria de imagem em link:

<a href="LINK-DA-IMAGEM-1-EM-TAMANHO-ORIGINAL" rel="shadowbox[gallery]" title="TÍTULO-DA-IMAGEM-1">CLIQUE AQUI PARA VER AS IMAGENS</a>

<div style="visibility:hidden;display:none;height:0px;">

<a href="LINK-DA-IMAGEM-2-EM-TAMANHO-ORIGINAL" rel="shadowbox[gallery]" title="TÍTULO-DA-IMAGEM-2"> </a>

<a href="LINK-DA-IMAGEM-3-EM-TAMANHO-ORIGINAL" rel="shadowbox[gallery]" title="TÍTULO-DA-IMAGEM-3"> </a>

</div>

Substitua os links destacados de vermelho pelos links das imagens, o azul substitua para os nomes de suas imagens e o rosa, pelo nome do link.

3. Vídeo simples em link:

<a href="LINK-DO-VÍDEO-DO-YOUTUBE" rel="shadowbox;height=386;width=515" title="TÍTULO-DO-VÍDEO">CLIQUE AQUI PARA VER O VÍDEO</a>

4. Galeria de vídeos em links:

<a href="LINK-DO-VÍDEO-1-DO-YOUTUBE" rel="shadowbox[divertido];height=386;width=515" title="TÍTULO-DO-VÍDEO">CLIQUE AQUI PARA VER OS VÍDEOS</a>

<div style="visibility:hidden;display:none;height:0px;">

<a href="LINK-DO-VÍDEO-2-DO-YOUTUBE" rel="shadowbox[divertido];height=386;width=515" title="TÍTULO-DO-VÍDEO"> </a>

<a href="LINK-DO-VÍDEO-3-DO-YOUTUBE" rel="shadowbox[divertido];height=386;width=515" title="TÍTULO-DO-VÍDEO"> </a>

</div>

Substitua as partes destacadas de vermelho, pelo link do vídeo, as de azul, pelo nome do vídeo, rosa pelo nome das galerias e verde o nome do link.

Pronto, publique sua postagem e veja como ficou. E você ainda pode centralizar, alinhar a esquerda ou direita as sua imagens ou vídeos e links! Qualquer problema, dúvidas entre outras sobre o mesmo, deixe seu comentário!