Um novo jeito de exibir imagens no blogger muito bom para quem possui varias imagens e queria mostrar em tamanho grande sem sair da página.Veja um exemplo deste hack funcionando aqui.A aplicação é das mais simples, mas garante um incrivel efeito no blogger. Então vamos começar a aplicação:Instalação
1.Faça login no blogger
2.Vá para layout> Editar html
Nota: É sempre bom fazermos um bakup do template pois se algo dar errado você recupera o seu template rapidamente
</head>E antes dele cole o seguinte:
<!--Light Box Code Starts Bloggerplugins.ORG & Noticia e blog-->
<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/AVvXsEg5LqXN7uNe37Lcc25jkTfoVpn_K12xmQJtjbyX5LrO4EueVaIOCeoXkFIbIB5glGmbOo2wtW6CEkY8tYa-3ofIJi1Xi5r_sqwbtoBkcIuPlNsH5Xx8ROsrS7fSWyNZYKI2Cy1Bj2daa5w/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqdwZ0f1N6sW1GLXl8NxLaC8MATBJKYlvjhgY621ZD6NZtmcGQzxe_twW6xMY0Hoij8KibnITtfVYua3Vmyes1Dnfh3TiNQXY54WdPPKZ2BFB2U017X4qVjcb4f0MtO6UB_nVYgOwN_Q8/) 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'/>
<!--Light Box Code Ends Bloggerplugins.ORG-->Adicionando imagem para ser visualizada
Você adicionou os scripts necessários para funcionar agora veja como adicionar as imagens para que sejam visualizadas pelo visualizador:
Você pode adicionar imagens com uma descrição ou em forma de galeria
Nota: Crie uma postagem no blogger que deseja adicionar imagem
Primeiro faça upload da imagem normalmente no blogger, na postagem ainda clique em editar html, agora nesta imagem abaixo veja como editar a postagem:
Clique para na imagem para ver maior:
Veja como proceder:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOTp12s14aBGgUIBQbLs9AD6W7fPDTieu8DtUdPKOaeiMgJAUdfblp8je2Qhp5kldqnqANuNLzo123yAzSGYtA3OY8tdwCtxJPQrv1pVpsCH5VWQFVncCh3tcCqbccyoMcR4jy2sXEbhcn/-h/google3.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 200px; height: 182px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOTp12s14aBGgUIBQbLs9AD6W7fPDTieu8DtUdPKOaeiMgJAUdfblp8je2Qhp5kldqnqANuNLzo123yAzSGYtA3OY8tdwCtxJPQrv1pVpsCH5VWQFVncCh3tcCqbccyoMcR4jy2sXEbhcn/s200/google3.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5366640003899059554" /></a>No código acima vemos um código de uma imagem quando é postada no blogger:
O código em vermelho deve ser substituído pelo código abaixo:
rel="lightbox" title="descrição da imagem"
O código em verde deve ser apagado para que o hack funcione.
Criando um álbum
Você deverá usar o seguinte código
Criando um álbum
Você deverá usar o seguinte código
rel="lightbox[nome do álbum]" title="Descrição 1"
Para adicionar mais imagens a este álbum basta repetir o código acima e em descrição coloque a que deseja para segunda imagem veja o exemplo abaixo
rel="lightbox[nome do álbum]" title="Descrição 2"
Pronto se seguiu todo o tutorial você já está com seu vizualizador pronto
A postagem original pode ser vista aqui
3.Procure pelo código abaixo no seu template:
Sign up here with your email
ConversionConversion EmoticonEmoticon