Como Desativar o Efeito Lightbox Padrão do Blogger

O Blogger fez uma atualização no Efeito LightBox então veja aqui sobre Colocar e Configurar Efeito LightBox nas Imagens no Blogspot, agora ficou bem mais simples ativar e desativar o efeito LightBox padrão do blog nas suas postagens

Nem todos os blogueiros gostaram do efeito lightbox automático no blogspot e alguns têm perguntado sobre como desativar, então pesquisamos sobre isso e achamos vários tutoriais sobre retirar o lightbox do blogger e parece que cada tipo de template precisa de um código diferente, portanto será necessário fazer testes para saber qual código funcionará no seu blog.

O primeiro passo é fazer um backup do seu template, assim se ocorrer algum erro no HTML do blogger você poderá voltar ao seu modelo de layout atual sem problemas. Para fazer isso entre na Pagina Modelo clique em Fazer backup Restaurar e baixe o arquivo (fazer download do modelo completo).


Depois salvou uma copia do seu template, vamos usar a primeira opção para desativar o efeito lightbox do blogspot, procure no seu HTML por </html> e coloque o código antes dele:
<script type='text/javascript'>
document.getElementById('main').innerHTML = document.getElementById('main').innerHTML.replace("'lightboxEnabled': true,","'lightboxEnabled': false,");
</script>

Clique para salvar e faça o teste, caso não funcione, então retire esse código que adicionou, e agora coloque esse javascript antes da linha </head>

<script type="text/javascript">
//<![CDATA[
function killLightbox() {
var images = document.getElementsByTagName('img');
for (var i = 0 ; i < images.length ; ++i) {
images[i].onmousemove=function() {
var html = this.parentNode.innerHTML;
this.parentNode.innerHTML = html;
};
}
} if (window.addEventListener) {
window.addEventListener('load',killLightbox,false);
} else {
window.attachEvent('onload',killLightbox);
}
//]]>
</script>

Em nossos blogs de testes os dois códigos funcionaram, mas publicamos os dois jeitos porque lemos vários comentários dizendo que um e outro código não funciona em certos tipos de templates, portanto é necessário testar para descobrir qual código funciona corretamente no seu blogger.

Leia também:

Colocar Efeito Neve no Blog
Analisar, Testar e Melhorar o Blog
Editor de Fotos e Imagens Online Grátis

Lembre-se: Caso o primeiro código não desabilitar o light box você deve retira-lo antes de colocar o outro.

40 comentários:

  1. Oi Fabiano,

    O que é este efeito lightbox automático no blogspot?

    ResponderExcluir
  2. Pat.
    ao clicar na imagem da postagem ela amplia e o resto da tela fica mais escura, como na imagem que publicamos com o garfield

    ResponderExcluir
  3. olá fabiano tem algum tutorial de como colocar vizualizações tio visuzalições de cada posttagem alguma coisa desse tipo... valew obrigado

    ResponderExcluir
  4. Ebrahim
    quer um contador de visitas mostrando o numero de acesso de cada post separadamente?

    semelhante como é feito nos comentários? cada postagem tem a sua contagem....

    já testei uns códigos assim, mas apresentaram falhas... mas vou pesquisar novamente sobre isso e se achar algum que funcione bem (todos os navegadores e templates do blogger) farei um tutorial sobre o assunto

    ResponderExcluir
  5. Fabiano Roberto, você é o cara xD.. valeww

    ResponderExcluir
  6. Olá.
    Eu gostaria de dizer que o efeito Lightbox automático do Blogger desapareceu agora à tarde.
    Não sei se eles removeram porque muita gente o reprovou ou isso é apenas temporário.
    Mas se clicarem em algum imagem nos blogs que estão hospedados no Blogger, ela é exibida à parte na janela do navegador.

    Uma pena disso ter acontecido, pois eu adorei o efeito.

    ResponderExcluir
  7. Nos meus blogs não aparecem esses efeitos.
    Por que será?

    ResponderExcluir
  8. não sei se é uma falha do blogger ou eles mudaram de idéia sobre o efeito lightbox automatico...

    mas depois que publiquei o tutorial notei que não está funcionando na maioria dos blogs....

    mas vou deixar o tutorial aqui mesmo assim, afinal não sabemos se é uma falha momentânea ou se o blogger voltou atras.

    o melhor a fazer é esperar e ver o que acontece nos próximos dias

    ResponderExcluir
  9. Olá Fabiano! Eu estou com uma duvida. Tenho pesquisado na NET, que, quando tenho uma imagem com link, ela fica meio com uma capa branco transparente, e, quando passo o MOUSE por cima, ela fica normal. Como se faz isso?

    ResponderExcluir
  10. Eu quero saber como fazer e colocar uma caixa de pesquisa no blog. Obrigada.


    http://asesmaltados.blogspot.com/

    ResponderExcluir
  11. Iguinho__- HQ
    veja aqui Imagens Transparentes

    na verdade as imagens usam uma cor de fundo e ficam semi transparentes ao passar o mouse isso gera esse efeito que falou


    Marilia Santos
    você pode usar uma pesquisa do adsense e ganhar dinheiro com isso: Busca dentro do blog - AdSense para pesquisas

    ResponderExcluir
  12. Olá Fabiano.Esse efeito foi para todos os blogs?Pq se foi esqueceram de mim.Eu entro todos os dias e não vi nada de diferente.Tenho um blog de artesanato e talvez esse efeito seria interessante.Qto ao q o Daniel disse q clica na imagem e ela aparece em tamanho maior em outra pg,o meio é assim desde q criei o blog.Eu precisava era de algum link aqui em seu blog q ensina como colocar slides do meu perfil no Flikr.Obrigada...

    ResponderExcluir
  13. Eu gostei do lightbox, gostaria de saber como reativa-lo, se meche no HTML do meu blog, ou se a blogger ainda não disponibiliza essa função?

    ResponderExcluir
  14. Olá, meu nome é thais e sou nova no blogger acabei de fazer um blog pois o outro que fiz foi rackeado e tive que me obrigar a apagar minha conta entao fiz outro e ja naquele mal sabia mechei,entao queria saber como posso colocar este negosio que aparece em todo final da postagem "post relacionados", como posso coloca-lo no meu blog?!
    Quero participar do do top parceiros também como faço?

    ResponderExcluir
  15. Fabiano primeiramente para bens pelo seu blog, ele está me ajudando mto, mas to aqui pra pergunta uma coisa quase do mesmo genero deste posts.

    Queria saber como que retira aquela margens que fica em volta das imagens nas postagen, para explicar melhor olha esse posts dele -

    http://myproevo.blogspot.com/p/pes-2012-demo-1.html

    viu? a imagen do PES 2012 tem uma linha em volta dela, queria saber como retirala, vlw cara

    ResponderExcluir
  16. foi mau Fabiano, esqueci a regra de não enviar links

    ResponderExcluir
  17. Fabiano Roberto, sobre aquele assunto de visualizações nos em cada post eu achei aqui http://www.cblogger.net/2011/04/contador-de-visualizacoes-de-posts.html so que tipo você tem que arrumar o código que nao esta funcionando antes funcionava .. valew

    Abraços

    ResponderExcluir
  18. Ebrahim
    o código do link que falou tem um arquivo PHP, provavelmente o problema está nele e isso não tenho como corrigir.

    ResponderExcluir
  19. Matheus - PRO EVO

    veja neste link: Colocar bordas nas imagens do blog

    é só usar o estilo .post img{border:none}, mas procure no html se já tem algum estilo .post img colocando as bordas se tiver só altere. Não deixa códigos repetidos no blog

    ResponderExcluir
  20. Oi, Fabiano.
    Eu novamente.
    Desculpe o incômodo. Retirei um gadget que tava dando problema e o layout do blog voltou ao normal.
    Espero que continue...
    Mto obrigada.
    Sua ajuda é mto importante.
    Parabéns pelo blog

    ResponderExcluir
  21. Eu ia perguntar que bicho era este,mas já li nos comentários.Penso que no meu não aconteceu nada,por`me ter um interface novo para publicar as postagens e ali não consigo criar outro blog,como estou querendo.Poderia me ajudar por favor?santiago.zilda@gmail.com
    Grata desde já.Bjs na alma.

    ResponderExcluir
  22. Zilda Santiago
    se está com problemas com a nova interface pode voltar a usar a antiga... tem um link no topo do painel do blogger

    ResponderExcluir
  23. Fabiano sei que não tem nada a ver com o post mas não achei nada sobre minha pergunta, como faço pra almentar a letra dos marcadores no final da postagem?

    ResponderExcluir
  24. isso depende de como está configurado seu html... saber qual é o estilo dos marcadores no final da pagina...

    pode tentar colocar o estilo:

    .post-labels a{font-size:130%}


    e veja se dá resultados... mas como falei isso varia conforme o template

    ResponderExcluir
  25. nossa Vlw msm Fabiano, deu certinho aqui, só que o código era esse


    .post img{
    padding:4px;
    border:1px solid $bordercolor;
    background: #F2F2F2;
    }

    ResponderExcluir
  26. Fabiano eu coloquei mas não deu resultados, vou deixar assim mesmo.

    ResponderExcluir
  27. Fabiano outro jeito muito mais fácil sem precisar mexer no HTML, é só clicar em "Configurações", "Formatação" e no item "Open images in Lightbox" é só escolher a opção "Não".
    Fica ai minha dica.

    ResponderExcluir
  28. Rosiel T.S.
    acabei de ler sobre o assunto e vou fazer um post sobre isso...

    ResponderExcluir
  29. Olá, nossa estou muito feliz com esse tutorial, isso porque sou dono do site busaodenatal.com e nele uso muito fotos e galeria de fotos, mais depois que o blogger fez esse Lighbox automatico padrão, conseguie retirar do meu blogger e assim o meu outro efeito Lighbox funciona perfeitamente.

    Por isso venho aqui agradecer pelo o serviço prestado.

    ResponderExcluir
  30. Olha, para quem trabalha com atividades escolares, este efeito é muito ruim, principalmente para quem tem propagandas, pois, ao acessar a primeira imagem, as propagandas já ficam "encobertas" e também, não é todo mundo que consegue notar o "X" para voltar ou não sabe dar um "esc"... acaba saindo...

    ResponderExcluir
  31. Colocar o código "antes" quer dizer acima???

    ResponderExcluir
  32. Ok, funcionou perfect!!
    Obrigado, já que estou sempre por aki, vou colocar seu banner lá no Portal escola.

    ResponderExcluir
  33. Fabiano, como eu tiro meio que uma linha que fica na esquerda da tela, eu nao gostei daquilo gostaria de tirar, se alguem puder ajudar add arthur_camposs@hotmail.com

    ResponderExcluir
  34. qual linha? não era para ficar nada aparecendo

    ResponderExcluir
  35. Há alguma forma de colocar o lightbox por editar o modelo do blogger, adicionando em "CSS"?È que meu template não tem o lightbox..e eu precisaria muito do lightbox, pois ele é muito útil...

    Obrigado desde já

    ResponderExcluir
  36. no meu Blogger já está acontecendo ao contrário, ele está ativado mais não está funcionando, poderiam me ajudar ?

    ResponderExcluir
  37. Gustavo entrei no seu blog e o efeito está funcionando.

    mas tem duas coisas que deixam o carregamento do blog mais lento:

    seu blog tem musica e o formato das imagens está em .png que é mais pesado, sugiro que salve as imagens no formato .jpg


    e justamente por ficar muito lento o efeito não aparece porque não dá tempo da imagem no tamanho original carregar.



    ResponderExcluir