Jordi Guerrero - Blog

Slideshow_j

jueves, 31 de enero de 2013

Crear Slideshow gratis para Blogger

Bueno, después de buscar un poco y gracias a las indicaciones de un amigo (gracias Ivan!), he encontrado una forma de añadir un slideshow con jquery a mi blog :) .

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/ */
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/ */
Después buscamos:
</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/ -->
<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(){
$(&#39;#my-slideshow&#39;).bjqs({
&#39;width&#39; : 940,
&#39;height&#39; : 340,
&#39;showMarkers&#39; : true,
&#39;showControls&#39; : true,
&#39;centerMarkers&#39; : false
});
});
</script>
<!-- End Slider Code From http://www.spiceupyourblog.com/ -->
Guardamos la plantilla.

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">
<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>
Espero que os guste este mini tutorial ;) .


4 comentarios:

  1. Muchas Gracias!!! :) lo andaba buscando! saludos desde Colombia. Master

    ResponderEliminar
  2. De nada! Me alegra que te haya servido. Un saludo!

    ResponderEliminar
  3. e sirvió mucho éste código! hice mi slideshow pero ahora me queda una duda... me está costando y cambiando valores no puedo solucionar mi problema, ya intenté con todas las medidas tanto con píxels como sin pixels y no lop ude solucionar... cómo separo el slideshow del banner que tengo por título en mi blog? porque me quedan pegados ambos elementos uno con otro =(.. tal vez sea una tontería y no me doy cuenta de cómo dejar ese pequeño espacio, pero espero que me puedas asesorar

    ResponderEliminar
  4. El tamaño de fotografía que a mi me funciona es: 940x180 píxeles.

    Fíjate que en la URL de la foto que pegues:
    http://1.bp.blogspot.com/ [...]/s[ancho de fotografia]/nombre_foto.jpg

    En mi caso:
    http://1.bp.blogspot.com/ [...]/s940]/nombre_foto.jpg

    ResponderEliminar