Efeito Lightbox nativo do Blogger

Hoje em dia, muitos blogueiros usam longos scripts para fazer o efeito lightbox para imagens, efeito que deixa a imagem maior ao ser clicada. E até esta semana, o Blogger lançou misteriosamente o efeito nativo, mas não foi anunciado. Além de misterioso, o Blogger não possui opção para ativar ou desativar o efeito.

Basta clicar em qualquer imagem de seu blog que surge um efeito, deixando a imagem clicada com o tamanho original, além de todas as imagens do post apareceram em miniatura em baixo como um menu, possibilitando visualizar todas na mesma janela.

O mais estranho é que alguns blogs possuem este script sem adicioná-lo. Mas para aqueles que ainda não possuem, lá vai:

Acesse o painel do Blogger, escolha seu blog, clique em "Design" > "Editar HTML". Procure pela tag ]]></b:skin> e acima dela, cole o código css:

<link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/3353720152-widget_css_lightbox_bundle.css' />

Agora, vamos adicionar o script principal para o efeito funcionar. Procure pela tag </head> e cole o seguinte código acima dela:

<script type='text/javascript'>
  //<![CDATA[
function killLightbox() {
 var images = document.getElementsByTagName('img');
 for (var i = 0 ; i < images.length ; ++i) {
  images[i].onmouseover=function() {
   var html = this.parentNode.innerHTML;
   this.parentNode.innerHTML = html;
   this.onmouseover = null;
  };
 }
}

if (window.addEventListener) {
 window.addEventListener('load',killLightbox,undefined);
} else {
 window.attachEvent('onload',killLightbox);
}
//]]>
</script>

Salve as modificações e seu efeito estará prontinho!