3 de agosto de 2012

Cómo agregar un SlideShow automático en el blog

Bien aqui les dejo esta imagen de muestra, para que vean como es el slide, de todas maneras, puedes ver una demostracion en este blog de pruebas.



1. Logeate en Blogger
2. Ve a la edicion HTML y busca la etiqueta </head>
3. Descarga este código y pegalo antes de la etiqueta </head>


4. Ahora, ir a elementos de la pagina
5. Seleccione añadir un nuevo gadget> HTML/javascript
6. Pega el siguiente código.


<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
  visible: 1,
speed: 1500,
  auto:5000,
  mouseWheel: true,
  easing: "backout"

});

});
</script>

<div id="slidearea">
<div id="gallerycover">
<div class="mygallery">

<ul>

<!-- Slide-1 Code Start -->
<li>
<div class="mytext">
<a href="YOUR-POST-1-LINK-HERE">
<img src="imagen" alt=""/>
</a>
<div class="inpost">
<p>YOUR-FEATURED-POST-1-SMALL-DESCRIPTION-HERE [...] </p>
</div>
</div>
</li>
<!-- Slide-1 Code End -->


<!-- Slide-2 Code Start -->
<li>
<div class="mytext">
<a href="YOUR-POST-2-LINK-HERE">
<img src="imagen" alt=""/>
</a>
<div class="inpost">
<p>YOUR-FEATURED-POST-2-SMALL-DESCRIPTION-HERE [...] </p>
</div>
</div>
</li>
<!-- Slide-2 Code End -->


<!-- Slide-3 Code Start -->
<li>
<div class="mytext">
<a href="YOUR-POST-3-LINK-HERE">
<img src="imagen" alt=""/>
</a>
<div class="inpost">
<p>YOUR-FEATURED-POST-3-SMALL-DESCRIPTION-HERE [...] </p>
</div>
</div>
</li>
<!-- Slide-3 Code End -->

</ul>

<div class="clear"></div>

</div>
</div>
</div>

<div class="clear"></div>


Para Entender el código:

En rojo; Titulo de la entrada
En verde: La imagen de fondo referente
En Amarillo: Una descripcion o fragmento de la entrada


Podés añadir los Slides que quieras pegando este codigo siempre después de la etiqueta </ul>.


<!-- Slide-4 Code Start -->
<li>
<div class="mytext">
<a href="YOUR-POST-4-LINK-HERE">
<img src="imagen" alt=""/>
</a>
<div class="inpost">
<p>YOUR-FEATURED-POST-6-SMALL-DESCRIPTION-HERE [...] </p>
</div>
</div>
</li>
<!-- Slide-4 Code End -->


Bueno, espero que les haya servido y que les haga más vistosos sus blogs :) Saludos!






cómo añadir un slideshow en mi blog, slideshows para blog, cómo colocar un slideshow en mi blog, cómo colocar un slide en mi blog, cómo añadir un slide en mi blog, cómo añadir un slideshow en mi blogger, slideshow para blogger, como colocar un slideshow en mi blogger, cómo colocar un slide en mi blog, como añadir un slide en mi blog, slide blog, slide blogger, gadgets, slideshow blog, slideshow blogger. 

8 comentarios:

  1. Primero que todo saludos y muchas gracias por tus aportes.
    Bueno, tengo una duda en relación con los slideshow, en realidad el proceso me resulta de lo más bién, pero me gustaría saber como hacer para que el slide quede centrado y no alineado a la izquierda (como también te queda a ti) y sin ese margen a la derecha.

    Ojalá que puedas responderme, saludos y gracias nuevamente.

    Fernando.

    ResponderEliminar
  2. Fernando ahí te respondo el mail que me mandaste :)

    ResponderEliminar
  3. Muy buen tutorial, mi pregunta es, se puede cambiar el tamaño? y si es asi como?
    las magenes me quedan muy raras

    te dejo mi blog para queveas lo que digo
    http://niyamendesigns.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola Anotnio, entré a tu blog pero veo otro slideshow puesto en la página principal.

      En el código para descargar tienes que editar esta parte:

      #slidearea{
      height: 250px;
      overflow: hidden;
      position: relative;
      width:670px;


      HEIGHT es el alto y WIDTH es el ancho. Simplemente edita esos valores y ya. Sino también puedes editar tus imágenes y ponerle el alto de 250px y el ancho de 670px y ya se van a ajustar bien al slide. Saludos :)

      Eliminar
  4. OKI A MI SI ME SIRVIO , PERO UNA CONSULTA , A ESTE SLIDES , SE PUEDE PONER FLECHAS PARA RETROCER , EJ: QUERO VER UNA ENTRADAD PERO YA PASO MUY RADIPO Y QUERO VOLVER ATARS LAS IMAGES DEL SLIDES , COMO SE ASES PARA PONER ESAS COSAS



    TE DEJO MI COREEO P.CURILAO@HOTMAIL.COM

    ResponderEliminar
  5. Hola amigo, este slideshow está configurado para que quede así, no tiene opción para poner flechas o imágenes para que vaya pasando la galería.

    ResponderEliminar
  6. Excelente post, yo apenas estoy comenzando con esto de los blog y estaba tan bien explicado, que me quedó muy bien en el mio.

    DCQ

    ResponderEliminar
    Respuestas
    1. Muchas gracias DCQ , me alegro que te haya quedado bien :)

      Eliminar