Primero del todo ponemos este código después de </head> o bien debajo de de ]]></b:skin> vamos probando ya que un poco más arriba o un poco más abajo la porción de código debe ir ahí o arriba de (sin la barra baja].
<script src='http://highslide.com/highslide/highslide-full.js' type='text/javascript'/>
<link href='http://highslide.com/highslide/megik.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.allowSizeReduction = false;
hs.showCredits = false;
hs.isUnobtrusiveAnchor = function(el) {
if (el.href && /\.jpg$/.test(el.href)) {
el.className = 'highslide';
return 'image';
}
//insert the if condition code for other extensions like .jpeg, .gif, .png etc.
}
function fixBloggerImages(searchFor, replaceWith) {
var href;
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++) {
href = anchors[i].href;
if(href.indexOf(searchFor) != -1) {
anchors[i].href = href.replace(searchFor, replaceWith);
anchors[i].setAttribute("onclick", "return hs.expand(this)");
anchors[i].setAttribute("class", "highslide");
anchors[i].setAttribute("title", "Click to enlarge");
}
}
}
//]]>
</script>
<link href='http://highslide.com/highslide/megik.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.allowSizeReduction = false;
hs.showCredits = false;
hs.isUnobtrusiveAnchor = function(el) {
if (el.href && /\.jpg$/.test(el.href)) {
el.className = 'highslide';
return 'image';
}
//insert the if condition code for other extensions like .jpeg, .gif, .png etc.
}
function fixBloggerImages(searchFor, replaceWith) {
var href;
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++) {
href = anchors[i].href;
if(href.indexOf(searchFor) != -1) {
anchors[i].href = href.replace(searchFor, replaceWith);
anchors[i].setAttribute("onclick", "return hs.expand(this)");
anchors[i].setAttribute("class", "highslide");
anchors[i].setAttribute("title", "Click to enlarge");
}
}
}
//]]>
</script>
Una vez colocado el .Js (Javascript) en la plantilla deberemos colocar en el post el html necesario que a continuación explicaré. Estaría bien subir por lo menos archivos tipo imagen (gif, png, etc) a un sitio donde alojar imágenes. Para no hacer Hotlinking lo que es igual a robo de transferencia o ancho de banda y por supuesto el archivo con extension .js (http://getlostpodcast.info/highslide/highslide.js)
Esto sería una imagen simple:
Esto sería el código para aplicar lo anteriormente citado:
<div style="text-align: center;"><a class="highslide" href="http://i47.tinypic.com/24w4y1g.gif" id="thumb1" onclick="return hs.expand(this)"><img alt="Highslide JS" src="http://i46.tinypic.com/2iktpxg.gif" title="Los Simpsons de Vacaciones"></a></div><br>
Esto sería una galería con 8 miniaturas:
 |  |  |  |
 |  |  |  |
Y esto el código de la anterior galería.
<div style="text-align: center">
<table border="0" cellpadding="0" cellspacing="10" style="margin-right: 40px; margin-top: -10px; text-align: center;"><tbody>
<tr align="center"><td>
<a class="highslide" href="http://i48.tinypic.com/ou1dhx.jpg" id="shashin_thumb_link_1" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_1" src="http://i48.tinypic.com/309sbb7.jpg" style="height: 140px; width: 140px;" title="" /></a></div>
</td><td>
<a class="highslide" href="http://i47.tinypic.com/qobrky.jpg" id="shashin_thumb_link_2" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_2" src="http://i48.tinypic.com/9ve4ug.jpg" style="height: 140px; width: 140px;" title="" /></a>
</td><td>
<a class="highslide" href="http://i49.tinypic.com/volyyu.jpg" id="shashin_thumb_link_3" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_3" src="http://i48.tinypic.com/20t0wtu.jpg" style="height: 140px; width: 140px;" title="" /></a>
</td><td>
<a class="highslide" href="http://i46.tinypic.com/jj9xck.jpg" id="shashin_thumb_link_4" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_4" src="http://i45.tinypic.com/mwxp4i.jpg" style="height: 140px; width: 140px;" title="" /></a></td></tr>
<tr align="center"><td>
<a class="highslide" href="http://i50.tinypic.com/2a0nfxe.jpg" id="shashin_thumb_link_5" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_5" src="http://i46.tinypic.com/9um8t4.jpg" style="height: 140px; width: 140px;" title="" /></a>
</td><td>
<a class="highslide" href="http://i45.tinypic.com/106ij9c.jpg" id="shashin_thumb_link_6" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_6" src="http://i48.tinypic.com/6qvgj9.jpg" style="height: 140px; width: 140px;" title="" /></a>
</td><td>
<a class="highslide " href="http://i50.tinypic.com/v79n4o.jpg" id="shashin_thumb_link_7" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_7" src="http://i48.tinypic.com/2prb9d3.jpg" style="height: 140px; width: 140px;" title="" /></a>
</td><td>
<a class="highslide" href="http://i45.tinypic.com/qsv8ua.jpg" id="shashin_thumb_link_8" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_8" src="http://i49.tinypic.com/21digch.jpg" style="height: 140px; width: 140px;" title="" /></a>
</td></tr>
</tbody></table>
<script type="text/javascript">
addHSSlideshow('group23');
</script>
</div>
<table border="0" cellpadding="0" cellspacing="10" style="margin-right: 40px; margin-top: -10px; text-align: center;"><tbody>
<tr align="center"><td>
<a class="highslide" href="http://i48.tinypic.com/ou1dhx.jpg" id="shashin_thumb_link_1" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_1" src="http://i48.tinypic.com/309sbb7.jpg" style="height: 140px; width: 140px;" title="" /></a></div>
</td><td>
<a class="highslide" href="http://i47.tinypic.com/qobrky.jpg" id="shashin_thumb_link_2" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_2" src="http://i48.tinypic.com/9ve4ug.jpg" style="height: 140px; width: 140px;" title="" /></a>
</td><td>
<a class="highslide" href="http://i49.tinypic.com/volyyu.jpg" id="shashin_thumb_link_3" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_3" src="http://i48.tinypic.com/20t0wtu.jpg" style="height: 140px; width: 140px;" title="" /></a>
</td><td>
<a class="highslide" href="http://i46.tinypic.com/jj9xck.jpg" id="shashin_thumb_link_4" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_4" src="http://i45.tinypic.com/mwxp4i.jpg" style="height: 140px; width: 140px;" title="" /></a></td></tr>
<tr align="center"><td>
<a class="highslide" href="http://i50.tinypic.com/2a0nfxe.jpg" id="shashin_thumb_link_5" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_5" src="http://i46.tinypic.com/9um8t4.jpg" style="height: 140px; width: 140px;" title="" /></a>
</td><td>
<a class="highslide" href="http://i45.tinypic.com/106ij9c.jpg" id="shashin_thumb_link_6" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_6" src="http://i48.tinypic.com/6qvgj9.jpg" style="height: 140px; width: 140px;" title="" /></a>
</td><td>
<a class="highslide " href="http://i50.tinypic.com/v79n4o.jpg" id="shashin_thumb_link_7" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_7" src="http://i48.tinypic.com/2prb9d3.jpg" style="height: 140px; width: 140px;" title="" /></a>
</td><td>
<a class="highslide" href="http://i45.tinypic.com/qsv8ua.jpg" id="shashin_thumb_link_8" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_8" src="http://i49.tinypic.com/21digch.jpg" style="height: 140px; width: 140px;" title="" /></a>
</td></tr>
</tbody></table>
<script type="text/javascript">
addHSSlideshow('group23');
</script>
</div>
Más información sobre cómo aplicar Highslide en el tutorial de la misma página, eso si si quieres poner una galería cómo no uses (ya se que es un poco largo) el código que aquí os he mostrado no creo que lo consigas ya que en Blogger es otra historia, estuve varios días dandole vueltas y si no se hace así a lo engorroso no hay manera. Espero haber sido lo más claro posible, si tenéis alguna duda, me lo decís en los comentarios y veré en que os puedo ayudar, también tenéis más ejemplos en el tutorial de la página oficial.
