16:55
Moderador
1) Vamos a Diseño
2) Edición de HTML
3) Buscamos </head> y antes pegamos el siguiente código:
<script src='http://pmsc.free.fr/gb/J/1039115625.js' type='text/javascript'/>
<script src='http://pmsc.free.fr/gb/J/1039115553.js' type='text/javascript'/>
<style type='text/css'>
#mygallery{overflow: hidden;}
</style>
<script type='text/javascript'>
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 3, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjhet4BdAOrxA64P2LXTzUJIzUxss0c2vI57td0WonyzpsvN6FFINsti_PiM1HCcCil77ErZXhDkeKceSk2xfhUp9JiZgG7xLk7WGHk8AbFb3U1qlgG016f05ib7Njz3a0MHF-ZDx_UZw/s400/left.jpg', -48, 0], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXtGICHi97H5J9ezNbXAV9HI53_j6b_qD-A9qvtOAwCXDndHTTVuLGHT9VvCau-6VYh-5SBJVfsCVLEAGUPAwgccW7vnHLXn2POR-Ykb_qn0mGR4xA4dCl2HMIJ59uxMp1PrVEO0zrQ-U/s400/right.jpg', 0, 0]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
Estos dos scripts los he subido a un servicio gratuito para subir scripts. Te recomiendo que los guardes por si algún día fallan.
4) Ahora buscamos el código ]]></b:skin> y añade encima lo siguiente:
#myslides{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgum7qSytTCTUEl7YU4Pg7L_LTACMqnDI1qngzVBF135jRTl14mMGW_9W30l-61T3Vr_RNOXn3ERaxGuQGskLTeg4q2qpINbkkYBZYa0thrCP4QhDWbNDmt6Sn26rqQjwaMmeRKC2PCJQ/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}
.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}
5) Ahora clicamos en vista previa y si no hay ningún error, guardamos la plantilla.
6) Finalmente vamos a Diseño> Elementos de página> Añadir un gadget> HTML/Javascript y allí pegamos el siguiente código:
<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">
<!-- 1st imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" title="TITULO"> <img width="160" alt="DESCRIPCION" src="http://ENLACEIMAGEN.jpg" height="110"/> </a>
</div>
<!-- end code of 1st -->
<!-- 2nd imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" title="TITULO"> <img width="160" alt="DESCRIPCION" src="http://ENLACEIMAGEN.jpg" height="110"/> </a>
</div>
<!-- end code of 2nd -->
<!-- 3rd imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" title="TITULO"> <img width="160" alt="DESCRIPCION" src="http://ENLACEIMAGEN.jpg" height="110"/> </a>
</div>
<!-- end code of 3rd -->
<!-- 4th imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" alt="DESCRIPCION" title="TITULO"> <img src="http://ENLACEIMAGEN.jpg"/> </a>
</div>
<!-- end code of 4th -->
</div></div></div>
Si nos fijamos en ese último código, en él es donde incluiremos cada imagen del slideshow (carrusel de imágenes). Cada bloque de código por imagen esta diferenciada por <!-- 1st imagen --> y <!-- end code of 1st --> y entre ese código ese está el enlace de la imagen que deberemos incluir, concretamente en http://www.ENLACEENTRADA.html deberemos poner el enlace al que queramos que se nos dirija cuando hagamos clic en una imagen determinada; y en http://ENLACEIMAGEN.jpg deberá ir el enlace de la imagen que queramos incluir. Y así con todas imágenes predefinidas. No te olvides DE la descripción y título del SEO imágenes para Blogger. Si queremos añadir o eliminar imágenes basta con fijarse en el código y ver cómo está formado. No guarda ningún secreto.
Todo listo, espero que te guste el resultado final.
Posted in: Imagenes,zona de blogger
0 comentarios:
Publicar un comentario