Lightbox alternativo para seu blog

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&gt;#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':

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.