Galeria de Imagens

Vou ensinar como colocar no Blogger esta galeria de fotografias (da autoria de Stu Nicholls) que, apesar do título, é bastante simples de editar. Não se esqueça de verificar os termos de uso na página.

Coloque no código do seu template, antes de ]]></b:skin>

#gallery {width:728px; height:380px; padding:10px; border:1px solid #333; background: #888; position:relative; margin: 30px auto 0;}
#gallery b.default {position:absolute; left:10px; top:10px; width:548px; height:380px; text-align:center;}
#gallery b.default img {display:block; margin:0 auto 10px auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
#gallery b.default span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}

#gallery ul {list-style:none; padding:0; margin:0; width:180px; position:relative; float:right;}
#gallery ul li {display:inline; width:52px; height:52px; float:left; margin:0 0 5px 5px;}
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; border:1px solid #000; border-color:#eee #555 #333 #ddd;}
#gallery ul li a span {display:none;}
#gallery ul li a img {display:block; width:50px; height:50px; border:0;}
#gallery ul li a:hover {white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
#gallery ul li a:hover b {position:absolute; left:-548px; top:0; width:548px; height:380px; text-align:center; background:#888; z-index:20;}
#gallery ul li a:hover span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul li a:hover img {margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}

#gallery ul li a:active, #gallery ul li a:focus {white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
#gallery ul li a:active b, #gallery ul li a:focus b {position:absolute; left:-548px; top:0; width:548px; height:380px; text-align:center; background:#888; z-index:10;}
#gallery ul li a:active span, #gallery ul li a:focus span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul li a:active img, #gallery ul li a:focus img{margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}

Eu editei o original (onde está em negrito) para centralizar a galeria na página.

Agora cole, depois de (ou antes, como preferir) <div id='content-wrapper'>

<div id='gallery'>

<b class='default'><img src='link da imagem' />
<span>This is the default image with some descriptive text</span></b>

<ul>
<li><a href='#'><b><img src='link da imagem' /><span>Texto descritivo</span></b></a></li>
<li><a href='#'><b><img src='link da imagem' /><span>Texto descritivo</span></b></a></li>
</ul>

</div>

Repetir a linha <li><a href='#'><b><img src='link da imagem' /><span>Texto descritivo</span></b></a></li>
quantas forem as imagens utilizadas.

Onde está href="#" coloque o endereço da página que deseja linkar e os links das imagens onde existe indicação. Não há necessidade de editar dois tamanhos de imagens. Apenas não use imagens que ultrapassem as medidas da galeria (728px alt, 380px larg).

Para ver o resultado no meu blog de testes clique aqui.