Bem, alguns dias atrás, o efeito lightbox padrão do Blogger, foi desabilitado pela própria equipe do Blogger. Mas acontece que algumas pessoas gostaram do efeito, então aqui vai um código para você adicionar um efeito lightbox alternativo, ao seu blog. Outra coisa boa nesse efeito alternativo, é que você aplica somente as imagens que você quiser. Não em todas, como era feito com o e feito padrão do Blogger. Então vamos logo ao tutorial.
Clique na imagem abaixo para ver um exemplo de como ficará o efeito em seu blog:
Bem, primeiramente, você deve entrar no editor HTML do seu blog, e procurar a tag '</head>', depois de encontrada cole o código abaixo, imediatamente acima dela:
<style>#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}#lightbox img{ width: auto; height: auto;}#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }#imageContainer>#hoverNav{ left: 0;}#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }#prevLink { left: 0; float: left;}#nextLink { right: 0; float: right;}#prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAsSXRMt1I8EElJn5pnzXF_RZHQItCumqath41GwaH2QroHW5lH0j_visVrGiailWiLzCtDSTLpoFiw_KMKau0IpMfcVhTrrKt0SEfV991ZNU16yXpjFoYKsYw2N17OMeSI8_NHG9WZd0/) left 15% no-repeat; }#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhozu_wN2XewcQbK8aMuOfNokYzDX8KTRXIfNqQ4D5cIgimP5w8NjPnd-yZoanKbNwvHblwiWo-2i5xUD9gcXp_NKgTg_41qw-7TPtXHy5T3yYHoM9mEXgrieXkJ78bpACEGN2WGiF2HK8/) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }#imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; }#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }round-color: #000; }lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }round-color: #000; }</style><script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/><script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/><script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
Então depois de feito isso, clique em 'SALVAR MODELO'.
Para adicionar o efeito, em determinada imagem:
Entre no editor html do editor de posts, então procure pelo código correspondente a imagem, depois de encontrado, adione o código abaixo, antes da palavra 'style':
Atualização!! O exemplo a cima parou de funcionar, pois tirei o efeito do meu blog, pois estava dando conflito com o box flutuante que adicionei ao lado.
Para adicionar o efeito, em determinada imagem:
Entre no editor html do editor de posts, então procure pelo código correspondente a imagem, depois de encontrado, adione o código abaixo, antes da palavra 'style':
rel="lightbox" title="Nome da Imagem"E publique o post, e está tudo certo, fácil não?
Atualização!! O exemplo a cima parou de funcionar, pois tirei o efeito do meu blog, pois estava dando conflito com o box flutuante que adicionei ao lado.
0 comentários:
Postar um comentário
Regras para comentar:
1. Não será publicado comentários escritos inteiramente em caixa alta.
2. Não será publicado comentários que possuam palavras de baixo calão, como xingamentos, que possam ofendeder ou magoar pessoas que venham a ler este comentário.
3. Não será publicado comentários que possuam links de sites que possuam conteúdos copiados de outros sites ou que seja um site de downalods ilegais.
4. Só será publicado comentários que seja sobre o contúdo do post, caso contrário mesmo que siga todas as regras a cima ele não será publicado.