Lightbox no blog - Efeito Lightbox com Shadowbox

40 comentários
shadowbox

Lightbox com Shadowbox


Neste artigo, vamos mostrar um sensacional efeito Lightbox com o Shadowbox para inserir nas imagens, páginas, formulários, links, vídeos e mapas em seu blog.

A importância de se aplicar um efeito Lightbox nas imagens é muito grande, pois confere ao blog um ar de profissionalismo e, também, um destaque especial nas imagens que você quer mostrar.

O Blogger, por padrão, libera o efeito através do menu → configurações postagenscomentáriosativar efeito lightbox. Após ativar esse efeito, basta inserir as imagens, que já estará disponível.

Existem duas maneiras de liberar o efeito nas suas postagens. A primeira é puxando a imagem do computador direto para a área de postagem, usando a ferramenta inserir imagem na barra superior do editor de texto da postagem. A segunda maneira é ir no modo HTML da postagem e acrescentar rel="lightbox" logo após a url da imagem junto com um comando, como este mostrado abaixo:

<a href="link da imagem" rel="lightbox">
<img src="link da imagem" border="0" alt="" width="400px"/></a>

Este exemplo, acima, se refere ao lightbox padrão do Blogger, mas o tutorial de hoje é referente a algo mais sofisticado. Podemos até dizer que está entre os melhores efeitos lightbox da atualidade, podendo abrir não só imagens, como páginas inteiras em html, vídeos do Youtube, Vimeo, vídeos do Google, etc...

Vamos falar do shadowbox, um efeito pop up com caixa de sombra que destaca o item especificado do resto da página, com um estilo que faz com que o conteúdo oculto a ser aberto ganhe um destaque especial.

O efeito lightbox com shadowbox pode ser aplicado em qualquer blog, independente da plataforma ou do template, e é relativamente simples de se aplicar.

Antes, vamos esclarecer algumas coisas:
É possível aplicar o efeito lightbox através do shadowbox em imagens, vídeos, formulários ou páginas inteiras em html.
É possível colocar este efeito nas postagens, menus, Gadgets, Widgets, ou mesmo direto no código fonte do seu blog.

Tutorial

Primeiro, você deve ir até o painel do seu blog, e em seguida, no menu, clique em modelo, e depois clique em editar html. Dentro da caixa com o código fonte do seu blog, aperte ctrl+f e na caixa de pesquisa que se abriu, procure pela tag </head> Acima desta tag, cole o código da caixa de auto seleção, abaixo:



Após colar o código antes da tag </head> vamos aplicar o efeito lightbox com o shadowbox no blog.
Primeiro, veja as possibilidades que este conjunto de códigos proporciona ao blogueiro:

1º Efeito - abrir vídeos

É possível abrir vídeos do Google, do Youtube, ou Vimeo através de um link ou uma imagem miniaturizada.
Veja o exemplo:



Agora, veja o mesmo efeito aplicado a um link:

2º - Efeito abrir imagens

Este efeito lightbox com o shadowbox é aplicável em imagens. Além de dar um aspecto profissional, também é muito elegante.
Veja o exemplo abaixo:

3º Efeito - abrir uma página da web ou um formulário de contato

Esse modo é muito aplicado em sites, e na opinião do BG, é a maneira mais elegante de criar um canal de ouvidoria com o leitor.
Primeiro, você precisa ter um formulário de contato em uma postagem, página, ou em um determinado endereço da web.

Após criar seu formulário de contato e hospedá-lo, você irá usar o link do local onde ele foi hospedado, para conseguir o efeito, como este exemplo abaixo:



É possível aplicá-lo em um menu, Gadgets, Widgets, links externos, etc... Tudo o que a criatividade mandar!

4º Efeito - colocar um mapa do Google

Este efeito também é bem dinâmico, e pode ter lightbox com shadowbox.

Veja o exemplo abaixo:

conheça a localização do BG

Agora que você viu as demostrações, vamos às explicações!

Todo código mostrado aqui pode ser aplicado em Gadgets, Widgets, postagens, páginas estáticas, menus ou links externos e internos.

Não podemos passar uma explicação complexa de cada item, pois esta postagem ficaria muito grande. Por isso, aconselhamos fazer testes em cada um dos item descritos nesta explicação final, inserindo os códigos que seguem abaixo para a função que queira aplicar.

Para inserir a url do vídeo, você precisa do código embed do vídeo.
Para abrir um vídeo através de uma imagem, você usará o seguinte comando:

<a href="URL-DO-VIDEO" rel="shadowbox;width=480;height=385" title="TITULO-AQUI"><img alt="" border="0" height="150" src="URL-DA-IMAGEM" style="border-width: 0px; display: inline;" title="SEU-TITULO-AQUI" width="150" /></a>

Para abrir um vídeo através de um link, você usará o código abaixo:
<a rel="shadowbox;width=853;height=507;" title="NOME DO VÍDEO" href="URL_DO_VIDEO&amp;rel=0&amp;autoplay=1">YouTube</a>


Para abrir uma imagem, você usará o comando abaixo:

<a href="URL-DA-IMAGEM-GRANDE" rel="shadowbox" title="NOME IMAGEM"><img alt="" border="0" src="URL-DA-IMAGEM-PEQUENA" /></a>

Para abrir uma página da web ou um formulário de contato ou qualquer outro link em HTML, CSS ou javascript que esteja hospedado em qualquer lugar, você usará o seguinte código:

<a rel="shadowbox;width=853;height=507" title="NOME PAGINA WEB" href="URL_PAGINA_WEB">Página web</a>
Para abrir um mapa é necessário que se tenha o código embed do mapa do Google.

O código necessário para se colocar um mapa do Google é este:
<a rel="shadowbox;width=425;height=350" title="NOME DO MAPA" href="URL-DO-MAPA">TITULO DO LINK</a>

E, então, o que achou?

40 comentários :

  1. Meu amor, vim lhe parabenizar pelo sucesso crescente do Blog! Tenho acompanhado ele desde bebê, e em poucos meses você já conquistou tanto! Continue assim com essa criatividade e vontade de ajudar outros blogueiros, e claro, sempre pode contar com a sua Redatora-Chefe aqui! rs.. Te amo!

    ResponderExcluir
    Respostas
    1. E sempre um prazer ter os comentários da minha esposa e redatora do BG.

      Excluir
  2. Ola, Bloggerrenciado gosteei muito do site mais primeiramente gostaria de saber aonde vai esses codigos para conseguir ter efeito url foto eu testei pego mais ficou com umas miniaturinhas fotos pequininas entao so isso

    ResponderExcluir
    Respostas
    1. Olá Gabriel, precisamos saber exatamente qual é o ponto referente ao poste, que lhe esta causando duvidas. Para que possamos lhe ajudar, torne a postar um comentário aqui, com especificações do seu problema. Abraço Andrew Silva do BG

      Excluir
  3. Respostas
    1. Olá Victor, funciona perfeitamente, em todas as plataformas, basta seguir as especificações do post. Qualquer duvida entre em contato conosco que teremos a maior prazer em lhe ajudar. Abraços Andrew silva do BG

      Excluir
  4. Olá amigo parabéns e obrigado pela dica! fiz e funcionou legal no chrome, mas não no firefox e IE (abrem uma janela em tela cheia do vídeo). Engraçado que seus exemplos funcionam no IE e firefox em popup normalmente... vc fez alguma correção?

    ResponderExcluir
    Respostas
    1. Olá Kasys, na realidade os exemplos aplicados no post são feitos da mesma mesma forma que é descrito. talvez possa estar dando conflito com algum script em seu blog referente aos outros navegadores. Para lhe ajudar melhor seria necessário ter acesso ao seu blog. Entre em contato conosco através do menu BG. Abraços Andrew Silva do BG

      Excluir
  5. Cara parabéns!

    Uma sugestão, invista no layout e comece a trazer mais conteúdo do tipo, é bem útil para quem está construindo blog.

    ResponderExcluir
    Respostas
    1. Olá, agradecemos o contato e o elogio quanto a sua observação agradecemos.
      Apesar do BG ter passado por um período sem atualizações. Voltamos com tudo para postar todas as novidades que esta girando na blogosfera. Abraços Andrew silva do BG.

      Excluir
  6. Muito interessante. Preciso de uma ajuda. Estou criando uma página no Blogger e preciso deste efeito e um vídeo. Mas da seguinte maneira: Quando o usuário entrar na página, a primeira coisa que ela verá é o vídeo com o light box falando sobre o site em si. Só depois ela entraria no site, esperando o vídeo terminar, mas o importante é que de assim que ela entre na página o vídeo já carregue automaticamente com o efeito light box. Poderia me ajudar nesta questão? Desde já agradeço!!

    ResponderExcluir
    Respostas
    1. Olá Du Pessoa, podemos ajudar sim, o que você precisa é de um plug com javascript para abertura de uma janela popup inicial. Estamos criando um post que será lançado no ar em breve, mas podemos fazer este serviço em site ou blog através do serviço BG. Visite a página no menu do blog. e entre em contato conosco. Abraços Andrew silva do BG

      Excluir
  7. Boa, tem a do auto popup?
    http://lojahost.net

    ResponderExcluir
    Respostas
    1. OLá Williams, temos sim porem como comentei acima, iremos criar um post com popup de abertura inicial na página, para inserir imagens, videos, banners, etc...
      Porem para fazer este serviço em específico para um blog ou site é necessário que acesse a página serviços BG.
      Abraços Andrew Silva BG.

      Excluir
  8. Parabéns amigo , gostaria de saber como eu faço para colocar mais que uma opção no vídeo .

    Por exemplo : Quando clicar em assistir episódio 01 : Para aparecer : Player 01 e Player 02 . Tem como ?

    Desde já agradeço .

    ResponderExcluir
    Respostas
    1. Olá, é possível sim amigo, só que não é o descrito aqui no tutorial, para isto é necessário que entre em contato conosco, através do menu serviços BG. Para que possamos estar dando um maior suporte a você.

      Excluir
  9. Olá este efeito funciona com vídeos da UOL?

    ResponderExcluir
    Respostas
    1. Olá Gabriela este efeito funciona com qualquer vídeo ou página, o que precisa fazer é aplicar o código correto dentro das tag definidas acima no caso de videos código embed no caso de páginas URL.
      Abraços Andrew Silva do BG.

      Excluir
  10. Olá, coloquei esse lightbox no meu blog e deu certo, só que no outro dia não pega mais, segue o link para você dar uma olhada

    http://www.assistirfilmes720p.com/2014/04/game-of-thrones-hd-720p-dublado-online.html

    ResponderExcluir
    Respostas
    1. Olá Italo no teste dos navegadores que fizemos aqui está funcionando perfeitamente, talvez seja sua conexão pois para chamar o script a página fica um pouco pesada, mas até o presente momento a página está ok

      Abraços Andrew Silva do BG

      Excluir
  11. Entendo, testei em outros computadores e navegadores e não está pegando, você teria outro tipo de código?

    ResponderExcluir
    Respostas
    1. Olá Italo testamos novamente e continua funcionando normalmente em todas as resoluções e navegadores,
      quanto ao script existem vários e script para abrir vídeo vimeo e outros em PopUp mas no caso em especifico, teria que criar um tutorial pois a explicação seria como o artigo acima e ficaria muito grande para nós postarmos aqui nos comentários verifique novamente pois para nós está funcionando normalmente.

      Abraços Andrew Silva do BG.,

      Excluir
  12. Olá, agora está pegando, testei o mesmo código com 1 adicional que é um complemento acima de body se não me engano, vou te passar o link, assim você poderá complementar este tutorial

    http://www.stylifyyourblog.com/2011/06/adding-shadowbox-in-blogger.html

    Se você quiser excluir minha resposta por causa do link sem problemas, Grato pela atenção!

    ResponderExcluir
    Respostas
    1. Olá Italo, agradecemos o contato e ficamos felizes em saber que o seu problema tenha sido resolvido com relação ao efeito light-box com o shadowbox.

      Abraços Andrew Silva do BG.

      Excluir
  13. Respostas
    1. Olá, agradecemos o contato e ficamos felizes em saber que o artigo foi útil para você, volte sempre que precisar, Abraços Andrew Silva do BG

      Excluir
  14. Excelente tutorial. Funcionou perfeitamente. =)

    ResponderExcluir
    Respostas
    1. Olá Jessica, estamos satisfeito por este efeito com shadowbox ter sido útil para você.
      Abraços Andrew Silva do BG.

      Excluir
  15. Muito bom, ajudou demais!
    Valeu! :D

    ResponderExcluir
  16. Muito bom o tutorial, Me ajudo muito

    abraços

    ResponderExcluir
  17. foi o único que funcionou com meu template personalizado, apesar de ainda sentir falta dos botões de controle da janela e a área de clique da imagem ser bem reduzida. me retorna caso possa ajudar. feitoza.pedro@gmail.com

    ResponderExcluir
    Respostas
    1. Ocorreu um erro e só agora pude ver os comentários deste post. Espero que tenha resolvido, amigo! Abs

      Excluir
  18. Excelente, ta de parabéns o seu trabalho, acompanho sempre seus post. Deus te abençoe cara!

    ResponderExcluir
  19. É possivel colocar esse efeito automaticamente? Em todas as postagens?

    ResponderExcluir
  20. Este comentário foi removido pelo autor.

    ResponderExcluir

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.