blog - 25 ago. 2014

PONER UN BANNER ROTATIVO O SLIDER EN TU BLOG

Después del exitazo de la Guia de tutoriales para personalizar tu blog hoy os traigo otra idea para hacer tu blog diferente.

En esta ocasión en un banner rotativo o slider, para las que no sepáis que es exactamente simplemente son imágenes que van rotando y a las que le podemos añadir enlaces, a forma de valla publicitaria y que puede ser muy útil para promocionarnos y darnos a conoces.

Buscando por la red he encontrado varias opciones:

1. USANDO LA WEB Y EL PROGRAMA WOW SLIDER

Esta web te permite hacer un slider sin mucha complicación descargando un pequeño programa. Es la forma mas fácil de realizar esta tarea, contiene plugging para wordpress y varias opciones de configuración, además de explicar paso a paso como colocarlo.

Si pinchas AQUÍ accederás directamente a web donde podrás descargar el programa y seguir paso a paso como crearlo e implantarlo en tu web.

2. USANDO HTML

Esta opción es un poco mas complicada y requiere un poco de conocimiento o ser muy estricto a la hora de realizar los pasos. La mayoría de los tutoriales que he encontrado a este respecto vienen en ingles, aunque he dado con algunos en español. Pero ningún tutorial esta del todo completo y he ido saltando de uno a otro hasta obtener toda la información necesaria.

En vez de poner los enlaces y que sea un poco lioso os hago un pequeño resumen.

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. Para hacerlo más sencillo con este slideshow solo se debe agregar el código en el gadget, o en la entrada que quieran publicarlo.

El siguiente código lo he sacado de una web en ingles, he encontrado varios códigos distintos muy parecidos entre si que lo que varia es poca cosa. Tendréis que editar unas partes muy específicas, que dejaré indicado y explicado con colores debajo del código, dependiendo del tamaño de las imágenes que piensen incluir. 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.

<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. Si queremos otro tamaño distinto de foto solo debemos modificar esta parte. Por ejemplo si queremos que el ancho sea el ancho de nuestro blog.

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 el 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 de la página 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 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 que previamente hallamos alojado. En punto 12 de la Guia para personalizar tu blog explica muy bien como haverlo.

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 y que podemos conseguir usando ESTE tutorial.

http://www.charkleons.com/2012/10/condicionales-para-blogger.html

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.

Os recomiendo 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.

Como la vez anterior y para que os resulte más fácil os dejo el tutorial en PDF para que podais descargarlo y seguirlo a vuestro ritmo.