Las instrucciones las he encontrado en la siguiente dirección:
http://www.spiceupyourblog.com/2012/03/simple-stylish-jquery-image-slideshow.html
De todas formas las reescribo aquí, ya que algún paso esta desactualizado.
------------------------
En primer lugar en el apartado Plantilla, editamos el HTML.
Buscamos el código:
]]></b:skin>Y copiamos este código justo encima:
/* Start Slider Code From http://www.spiceupyourblog.com/ */Después buscamos:
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;max-width:100%;}
ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;max-width:96%;margin:0;padding:2%;position:absolute;bottom:0;background:rgba(0,0,0,0.7);color:#fff;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-box-shadow: 4px 4px 4px #dddddd;-webkit-box-shadow: 4px 4px 4px #dddddd;}
}
/* End Slider Code From http://www.spiceupyourblog.com/ */
</head>Y copiamos este código justo encima (los números en naranja se pueden cambiar, son el ancho y largo del slideshow):
<!-- Start Slider Code From http://www.spiceupyourblog.com/ -->Guardamos la plantilla.
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/9921010228/basic-jquery-slider.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('#my-slideshow').bjqs({
'width' : 940,
'height' : 340,
'showMarkers' : true,
'showControls' : true,
'centerMarkers' : false
});
});
</script>
<!-- End Slider Code From http://www.spiceupyourblog.com/ -->
Ahora nos vamos al apartado Diseño y añadimos un gadget (encontré una foto ilustrativa):
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWGA8UcfuoPtkGK9yGimR72WUCzV9_ax8VMbIuL7J7UPoriVcQlrhLsZy2osGRpX5ou5IPYwbVVQj7VoVNdK9mSLqVMNFyEufAQvFtTa-ErunfhBDroMZlnFO0NYuCcnkEyC4xFkiOTmw/s1600/A%C3%B1adir+nuevo+gadget.jpg
Añadir HTML/Javascript y dentro copiamos este código (en naranja tenéis el link de las fotos, las podéis cambiar para poner vuestras fotos, siempre que coincidan con el tamaño indicado en el código anterior):
<div id="my-slideshow">Espero que os guste este mini tutorial ;) .
<ul class="bjqs">
<li><img title="This is a caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0O4sHL0H-GmEcYmWcl2a4BIZzkhC1dr8SWtixmbndMzBGr0hiHxt897z8J4hDPBNjtfPH1_x0IgYbzo6F4zmRV4WGRA4bfl8gZSZOggYReynhmeUGblVp514bmbU0BRgSdKHuX-50-LdB/s1600/slider-image1.jpg"/></li>
<li><img title="This is a another caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLFqUoS7RFvK_LRK_Yz6N1AG-FwzA1lVk21hx70jrne5kVtV1_ZVxNxcUtu-StP7RoZ3QZR1OsZ4pTmvID4coLmIXJknK_crDaTntdDizrGgfPhlfo2atGayabd_bozaG2_hwYY4esQKUp/s1600/slider-image2.jpg"/></li>
<li><img title="This is a another longer caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR1GiQX8fgRMo4Lop3cZl-uEntS34yl1B7MERPI9qJtybK2NicnICCtA7YRXOTriGH5TT1h17M2LlzaC-yrmNNYt0Fufk6ccF7R6cAMlV0O4yqni-8lNrk8DbAv4eWGUntLpl3ndO6ENib/s1600/slider-image-3.jpg"/></li>
<li><img title="This is a another much longer caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw7tGg6IS8CDcFY9-20RmH6qI9qTxT9-DuWBKW41e9WGVIYe5izi8_ZOdY-ezUyvsYxYrtapekBKVj7kZC-I-MFd1Jm6hGTK66PZaBnZwcQvnvuug0L68CGTTzPNDvJmcMuBgpSDv9naQr/s1600/slider-image4.jpg"/></li>
<li><img title="This is a another longer caption that can be the lenght of the image or even longer onto the next line." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja137tpOSrWlhhBQHSCdmj1qKtB5VfBoF7_T_OY8sufEK2e_PYkFCEwwU7BBFKZu8I74FDzLCjMAtLJPV3JwCn52aQrC7k4WBISzA92kDqXXCUcsB08CgDWCThdOj10ESS3XB4leSxsoIM/s1600/slider-image5.jpg"/></li>
</ul>
</div>
