Slideshow para Blogger

Slideshow Charkleons


Usuario: Avanzado

Un slideshow es una herramienta que nos permite mostrar los temas de nuestra página, o información que consideremos importante a través de imágenes, por lo general usar un slideshow en blogger requiere agregar varios códigos en la plantilla, pero con este slideshow se corrige eso, y solo se debe agregar el código en el gadget, o en la entrada que quieran publicarlo.







Slideshow Charkleons.comSlideshow Charkleons.comSlideshow Charkleons.comSlideshow Charkleons.com

A continuación les comparto el código al cual solo le tendrán que editar unas partes muy específicas, dependiendo del tamaño de las imágenes que piensen incluir en su slideshow, este código se puede agregar directamente en una entrada en modo HTML, o en un gadget HTML-Javascript en la parte de Diseño.

Dejo con colores las partes que se pueden editar, por favor lean las indicaciones o sugerencias que dejo al final.

-----------------------------------
<center>
<style>
#slider {
  position:relative;
  width:550px;
  height:350px;
  margin-top:-150px;
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  -ms-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
 }
  
 .nivoSlider img {
  position:absolute;
  top:0;
  left:0;
  display:none;
 }
  
 .nivoSlider a {
  border:0;
  display:block;
 }
  
 .nivoSlider a.nivo-imageLink {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 border:0;
 padding:0;
 margin:0;
 z-index:8;
 display:none;
 }

 .nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
 }
  
 .nivo-box {
  display:block;
  position:absolute;
  z-index:5;
 }
  
 .nivo-caption {
  position:absolute;
  left:25px;
  bottom:29px;
  width:500px;
  padding-top:13px;
  padding-bottom:13px;
  z-index:8;
  border:1px solid #000;
  border-left-color:rgba(0,0,0,.5);
  border-right-color:rgba(0,0,0,.5);
  -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  -ms-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 );
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  -ms-border-radius:4px;
  border-radius:4px;
 }
  
 .nivo-caption p {
  margin:0;
  font-family:'Andika Basic', Helvetica, Arial, sans-serif;
  font-size:16px;
  font-weight:bold;
  color:#fff;
  text-align:center;
  text-shadow:0px -1px 0px #000;
 }
  
 .nivo-caption a {
  display:inline !important;
  }
  
 .nivo-html-caption {
  display:none;
 }
  
 .nivo-directionNav a {
  position:absolute;
  bottom:30px;
  z-index:9;
  cursor:pointer;
  text-indent:-9999px;
  width:45px;
  height:39px;
  background-image:url(http://4.bp.blogspot.com/-nVH_wLuXb7c/UB62lKkUv1I/AAAAAAAABVM/_FjJIm1wIrM/s1600/labstrike-arrows.png);
  background-repeat:no-repeat;
}
  
 .nivo-prevNav {
  left:75px;
  background-position:0 0;
  box-shadow: 1px 0px 0px rgba(255,255,255,.2), 2px 0px 0px rgba(0,0,0,.4);
 }
  
 .nivo-nextNav {
  right:77px;
  background-position:-45px 0px;
  box-shadow: -1px 0px 0px rgba(255,255,255,.2), -2px 0px 0px rgba(0,0,0,.4);
 }
  
</style> 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script  src="https://googledrive.com/host/0B-vmRyhqbM7_XzY0U3o4elpsWWM/"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('.nivoSlider').nivoSlider({
            effect: 'sliceDown',
            pauseTime: 5000,
            directionNavHide: false,
            captionOpacity: 1,
            controlNav: false
        });
    });
</script>
  
<div id="slider" class="nivoSlider">
<a href="URL del Tema 1"><img src="URL de la Imagen 1
 alt="Info si no hay imagen 1" title="Descripción del tema o imagen 1" /></a><a href="URL del Tema 2"><img src="URL de la Imagen 2" alt="Info si no hay imagen 2" title="Descripción del tema o imagen 2" /></a><a href="URL del Tema 3"><img src="URL de la Imagen 3" alt="Info si no hay imagen 3" title="Descripción del tema o imagen 3" /></a><a href="URL del Tema 4"><img src="URL de la Imagen 4" alt="Info si no hay imagen 4" title="Descripción del tema o imagen 4" /></a><a href="URL del Tema 5"><img src="URL de la Imagen 5" alt="Info si no hay imagen 5" title="Descripción del tema o imagen 5" /></a></div>
</center>
-----------------------------------

En width:550px;  height:350px; definen el ancho (width) y alto (height) de las imágenes, es recomendable que todas las imágenes tengan las medidas que se indican en esta parte.

En margin-top:-150px; se define la distancia que hay desde la parte superior del slideshow hasta el título, o parte de otro gadget que esté arriba. Cuando se publica el slideshow en una entrada se recomienda dejar -150px; o de -140px; a -175px; y cuando se publica el slideshow en un gadget se recomienda dejar de 0px; a 20px;

En width:500px; se define la medida de la barra gris que muestra la información sobre las imágenes, esta medida tiene por lo general 50px menos que el ancho (width) de las imágenes. Si esta edición no hace que se visualice bien la barra al darle a la imagen un ancho tipo 389px, 724px, etc, entonces lo correcto es ir editando este valor con el método de prueba y error hasta encontrar la medida justa.

En font-family:'Andika Basic', Helvetica, Arial, sans-serif; definen el tipo de fuente, solo deben cambiar la parte de Andika Basic por la fuente que ustedes prefieran. En font-size:16px; definen el tamaño de la fuente en dado caso de que la que elijan predeterminadamente tenga un tamaño mayor o menor a lo usual.

Esta parte <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> deben eliminarla en dado caso de que ya la hayan incluído en sus plantillas o la estén usando en otro gadget.

Estas son las opciones que pueden colocar en effect: 'sliceDown', esta parte define el efecto de transición al pasar de una imagen a otra.

sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft

En pauseTime: 5000, modifican el tiempo en que se visualiza cada imagen, por ejemplo 3 segundos sería 3000 y así sucesivamente.

En URL del Tema deben colocar la url o el link del tema que quieran enlazar a la imagen. Por lo general los temas de la página se abrirán en la misma pestaña, y los de páginas externas se abrirán en otra, si esto último no pasa, solo deben seguir alguna de las dos opciones que se muestran en este Tema. Si no quieren enlazar las imágenes a alguna página solo deben dejar vacía la parte de la URL del tema, o retirar las etiquetas <a> de apertura y </a> de cierre dejando solo la etiqueta de la imagen, ejemplo: <img src="URL de la Imagen" alt="Info no imagen" title="Descripción del tema o imagen" />.

En URL de la Imagen deben colocar la url o el link de la imagen. Les recomiendo dejar de primera la que pese menos. Recuerden que pueden optimizar el peso de las imágenes desde la página Smush.it que recomienda Charkleons.com en Mundo Web HTML.

En title="Descripción del tema o imagen" colocan una descripción corta de la imagen o el tema al que pertenece la imagen, la parte de la etiqueta alt que la antecede sirve para colocar información que se leerá en caso de que la imagen no se pueda visualizar.

Sugerencias o indicaciones para corregir posibles errores.

■ Si publicaron el slideshow en un gadget, y quieren que se visualice solo en la página principal o en una entrada en específico, esto lo pueden hacer usando un condicional que se agrega en la plantilla como se muestra en este Tema. Ejemplo:


■ La carga del slideshow dependerá ademas del peso de las imágenes, del tiempo que demoren en cargar otros scripts como los de la publicidad, facebook, twitter, etc.

■ Es muy importante que no haya espacios entre los enlaces de las imágenes, y también entre el enlace de la última imagen y la etiqueta div de cierre </div>, ya que esto causará que la barra de información desaparezca por momentos, y también que no funcionen bien las flechas para avanzar o retroceder en el slideshow.

■ En las pruebas que realicé Chrome fue el único navegador en el que no se presentaron inconvenientes al momento de agregarle un condicional en la plantilla al gadget que incluía el slideshow.

■ Se recomienda que el slideshow contenga máximo 5 imágenes para no retrasar el tiempo de carga de la página que lo incluya.

■ Después de agregar el slideshow en una entrada en modo HTML puedes pasar al modo Redactar sin problemas, verás las imágenes una sobre otra pero el slide show se visualizará correctamente luego de editar y actualizar la entrada.

■ En Internet Explorer podría no visualizarse bien.


Eso sería todo, espero que esta información les sea muy útil.

Gracias.

Slideshow para blogger, un slideshow fácil para blogger, slideshow que no se instale en la plantilla para blogger, slideshow que se pueda usar en una entrada de blogger, código de un slideshow sencillo para blogger, tutorial para instalar un slideshow en blogger, guía para instalar un slideshow en blogger, slideshow nivo slider para blogger, nivo slider fácil para blogger, nivoslider para una entrada de blogger, cómo se usa nivoslider en blogger,