COMO INSERTAR

UN SLIDER
WOW SLIDER
EN BLOGGER

www.lauritapurple.com

Introduccin
El motivo por el cul he decidido hacer esta gua no es otro que intentar
ayudar al prjimo.
Hice unos cambios en mi blog en los que inclu un slider con las entradas
ms populares del sitio. Saba que quera un slider desde el primer momento
en el que comenc a realizar dichos cambios pero no saba que por ser de
Blogger iba a tener tantas complicaciones.
Encontr millones de tutoriales tanto en castellano como en ingls de cmo
poner un slider en el blog, pero ninguno me funcionaba. Investigu sobre
jQuery, busqu otros javascripts y nada. A la hora de visualizar los cambios
no funcionaba.
Fue entonces cuando encontr la web de Wow Slider (www.wowslider.com)
que prometa sliders con diferentes efectos para personas que no fueran
expertas en cdigos. No obstante, no result tan fcil tampoco, pues los
usuarios de Wordpress son los que tienen grandes facilidades para
instalarlos, e incluso la web de wowslider.com te explica cmo introducir el
slider en tu web de una manera muy pobre y sin especificar nada.
Despus de mucho cavilar y finalmente encontrar otro blog que ms o menos
lo explicaba bien, funcion. Adems, le aad otras mejoras como la
eliminacin de la marca de agua que te genera el slider si no eres PREMIUM.
Espero que este tutorial te sirva de gran ayuda.
Un saludo!

www.lauritapurple.com

Qu necesitars para crear un slider?

A continuacin encontrars listado todo lo que necesitas para crear un slider

y poder instalarlo en tu blog.
Descargarte el programa de la web de wowslider.com
Elegir los posts ms relevantes de tu sitio que quieras enlazar con el
slider.
Disponer de una imagen atractiva para cada uno de estos posts.
Tener cuenta en un servidor donde puedas alojar estas imgenes y
otros archivos que necesitars, por ejemplo Dropbox.

www.lauritapurple.com

Descarga del programa de Wowslider.com

Esta aplicacin no se puede utilizar online, por lo que requiere que te la
descargues. Tanto si eres Windows como Mac, los pasos a seguir son los
mismos. En la pgina principal de Wowslider.com, en la pestaa Download
for Win & Mac encontrars el formulario.

Introduce tu nombre y el e-mail para obtener el link de descarga del

programa.

Aunque recibas un e-mail con los links, al clickar sobre el botn anterior
Download Now! se habilitarn los enlaces para descargarlo, tanto si eres
Windows como si eres Mac.

www.lauritapurple.com

Una vez instalado, podrs observar que se trata de un programa muy intuitivo
y que lo facilita todo bastante. Antes de lanzarte a la piscina, hay algo que
tienes que hacer prviamente.

www.lauritapurple.com

Eleccin de los posts a enlazar

Cmo ya te he comentado, este slider mostrar unas imgenes que t habrs
elegido enlazando los contenidos que t hayas decidido. No mostrar de
manera automtica los ltimos posts publicados a no ser que actualices
constantemente el slider. No estar conectado a los contenidos del blog,
sino que es algo externo que creamos e insertamos en l.
Mi recomendacin es que elijas aquellos posts que ms visitas tengan. Posts
que sean suculentos, que le gusten a la gente para que las nuevas visitas
que entren en el blog lo vean anunciado en tu slider y clicken sobre l. Esa es
su finalidad.
Atraer a las visitas nuevas hacia nuestro mejor contenido aumentar las
probabilidades de que esas personas vuelvan en otro momento esperando
encontrar contenido atractivo.
Es momento de echar un vistazo a tus mtricas y descubrir cules son esos
posts que ms le gustan a la gente.

www.lauritapurple.com

Imgenes atractivas a mostrar

La verdad ms absoluta es que una imagen vale ms que mil palabras y
exactamente como te pasa a ti cuando visitas otras pginas web o blogs, las
imgenes son algo que atraen muchsimo.
Es por ello que te recomiendo que las imgenes que vayas a mostrar en el
slider sean bonitas, tengan buena luz, un buen encuadre En mi blog tienes
un post con 5 consejos muy sencillos para que consigas ese toque que
buscas en una foto sin necesidad de ser un profesional ni tener una cmara
carsima. Te animo a echarle un vistazo y que lo pruebes.
No importa que tu post actual no tenga imagen, no la necesitas para que el
slider funcione porque como te he dicho anteriormente, es un elemento
externo que simplemente enlaza con tus posts. No obstante, pocos posts
escribiremos sin ninguna imagen, verdad? ;)
Es hora de que establezcas, si no lo has hecho antes, un tamao fijo para tus
imgenes. Un blog tiene mejor aspecto si se ve ordenado y con fotos e
imgenes que tengan un tamao adecuado. Adems, a la hora de hacer tu
slider, tendrs que elegir un ancho y un alto para las imgenes a mostrar
porque si no tienen el mismo tamao quedarn descuadradas para ajustarse
al slider.

www.lauritapurple.com

Alojamiento de archivos e imgenes

Cuando crees tu Wowslider, el programa generar una serie de archivos, los
cules debern estar a disposicin del blog para que funcione correctamente.
Blogger no tiene la posibilidad de almacenamiento de este tipo de archivos y
existen varias plataformas que te pueden servir, como Google Drive, o la que
yo eleg, Dropbox.
No la escog por ningn motivo en concreto sino que fue la primera que utilic
y ya que me funcion, no intent hacerlo con otra plataforma.
Es necesario que la carpeta donde alojes estos archivos e imgenes sea
pblica para que Blogger pueda entrar en ella cada vez que cargue el slider.

www.lauritapurple.com

Creacin del slider Wowslider

Ha llegado el momento de comenzar. Te recomiendo paciencia y que leas
todo lo que te digo poco a poco. Voy a ir hacindolo segn voy escribiendo
esto para no dejarme absolutamente nada.
Preparados, listosYA!
En primer lugar, tendrs que aadir las fotos definitivas que hayas elegido al
programa de Wowslider. Para ello, arrastra las imgenes dentro del cuadro o
bien clicka sobre + para que se abra el navegador y puedas elegirlas.

Como puedes ver, cuando seleccionas cada una de las fotos, abajo puedes
indicar a que URL quieres enlazar cada foto. Este es el momento en el que

www.lauritapurple.com

has de copiar y pegar cada una de las URL de tus posts escogidos y
asociarlos a cada una de las imgenes.
En el campo de Target puedes escoger varias opciones. Escoge _blank
para que cuando alguien clicke sobre la imagen en el slider se le abra el post
en una nueva ventana. Si prefieres que se abra en la misma escoge _self y
_parent si quieres que el post se abra dentro de una pestaa en la misma
ventana.
Una vez configurado este parmetro, te aconsejo tambin que le pongas un
ttulo descriptivo a cada foto, utilizando el campo Title.
Para continuar, debes clickar sobre la llave inglesa que te aparece en la barra
superior para configurar todo lo configurable de este slider.

www.lauritapurple.com

10

Puedes ver que hay 3 pestaas en la barra superior: General, Images y

Publish.
Veamos de que opciones dispones en la parte izquierda de la pestaa
General:

Te recomiendo que las leas detenidamente y pienses como quieres tu slider,

si quieres que sea automtico, o no, o mejor prefieres que aparezca un botn
de play/pause para que las visitas puedan pararlo y ponerlo en marcha a su
antojo.
Hasta puedes introducirle un archivo de msica.

www.lauritapurple.com

11

Las opciones que podrs ver a la derecha de la ventana son las siguientes:

Aqu podrs escoger que se muestren las descripciones o que aparezcan las
imgenes en miniatura de todo el slider en la parte inferior.

www.lauritapurple.com

12

La siguiente pestaa que tendrs que ver y modificar a tu antojo es la de

Images.

En este caso, se trata de la personalizacin a nivel de aspecto de las

imgenes del slider.
A la izquierda de la ventana puedes escoger plantillas diferentes para el
slider. Selecciona la que ms te guste, pues tienes una vista previa en la
parte inferior.

www.lauritapurple.com

13

A la derecha de la ventana es donde tienes que establecer el tamao del

slider. De aqu viene que antes te haya comentado que todas tus imgenes
deberan tener el mismo tamao.
Tambin puedes escoger el tipo de transicin que tendrn las imgenes y la
duracin de los efectos.
Vers que la opcin de marca de agua o Watermark no se puede quitar. No
te preocupes, ms adelante te ensear como eliminarla.
Para terminar, en la pestaa de Publish puedes ver lo siguiente:

www.lauritapurple.com

14

Debers escoger en que carpeta de tu ordenador quedar guardado tu slider

y entonces clicka sobre el botn Publish que aparece en la parte inferior
derecha.
Si te diriges a la carpeta en la que has guardado el slider creado te
encontrars con las siguientes carpetas:

Dentro de data1 vers otra carpeta que se llama Images en la que

aparecern las imgenes que has elegido para el slider y en las que aparece
la marca de agua de wowslider.com.
En engine1 aparecen los javascripts para que funcione el slider y que
necesitars subir a Dropbox.
Ahora es cuando viene lo ms lioso del asunto.
Lo primero que te recomiendo que subas a Dropbox, o a la plataforma de
alojamiento de archivos que elijas, siempre y cuando sea de acceso pblico,
son las imgenes de tu slider. Pero no subas las que te ha generado el
programa que llevan la marca de agua, sino las tuyas propias, las originales.
Despus, sube tambin a Dropbox los archivos que encontrars en la carpeta
engine1:
style.css
jquery.js

www.lauritapurple.com

15

script.js
Tambin debers subir el archivo wowslider.js, pero antes tendrs que
modificarlo para eliminar la marca de agua.
Abre el fichero wowslider.js con un editor de texto como el Notepad, o el
TextEdit. Una vez abierto, busca dentro del fichero la palabra zindex
para encontrar la siguiente lnea:
.css({zIndex:11,right:"5px",bottom:"2px"})
De aqu tendrs que eliminar los valores en pxeles de la marca de agua
para que quede de la siguiente manera:
.css({zIndex:11,right:",bottom:""})
Una vez hecho esto, guarda el documento y ahora si, sbelo tambin a
Dropbox junto con el resto.
Por ltimo, tambin debers subir a Dropbox el resto de imgenes que se
encuentren en engine1 y que corresponden a elementos como las
flechas, o los botones de play/pause.
Para hacer un recuento, en Dropbox tienes que disponer de:
Las imgenes originales, en las que no aparece marca de agua
Archivos style.css, jquery.js, script.js y wowslider.js
Las imgenes del resto de elementos que hayas decidido tener,
como flechas, botones, etc.
Una vez dispongas de todo esto en una carpeta pblica, podrs introducirlo
en tu blog.

www.lauritapurple.com

16

Para ello, dirgete a la plantilla de tu blog. Recuerda que antes de hacer

cambios sobre la plantilla HTML de tu blog es recomendable que hagas una
copia de seguridad, por lo que pueda pasar.
Busca dentro de tu plantilla la palabra </head> y encima pega el siguiente
cdigo:

<link href='https://tupropiolink/style.css' rel='stylesheet' type='text/css'/>

<script src='https://tupropiolink/jquery.js' type='text/javascript'/>

Tendrs que modificar el link de Dropbox de cada uno de los archivos. Como
puedes observar en lo que te he marcado en rojo, el primer link se refiere al
archivo style.css y el segundo al archivo jquery.js.
Dropbox te facilita el link pblico de cada uno de los archivos subidos a su
plataforma, as que solamente tienes que copiarlos y modificarlos aqu.
Una vez hecho esto, guarda la plantilla.
Despus, tendrs que decidir dnde ubicars el slider en tu blog. En la
pestaa de Diseo de tu blog aade un gadget de HTML/JavaScript.
El cdigo que tendrs que pegar aqu, lo puedes encontrar en el fichero
Index.html que se ha generado en la carpeta de Wowslider a la hora de
crear el slider. Al abrir este fichero se abrir el navegador mostrndote el
slider. Haz click con el botn derecho en el rea fuera del slider y clicka sobre
Ver cdigo fuente.

www.lauritapurple.com

17

Copia el cdigo que se encuentra entre las frases:

<!-- Start WOWSlider.com BODY section --> y <!-- End WOWSlider.com
BODY section -->
y pgalo en el gadget de HTML/JavaScript que has aadido en el diseo de
tu blog.
El cdigo es el siguiente, y tendrs que cambiarle lo que te indico a
continuacin (es un poco catico, as que tomtelo con calma :P):
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><a href="http://www.lauritapurple.com/2013/04/personalizando-mi-blogredes-sociales.html" target="_parent"><img src="link de la foto de Dropbox"
alt="nombre de la foto para que Google la indexe" title="ttulo descriptivo de la
foto que ya debes de haber indicado al crear el slider, sino, ahora puedes
cambiarlo" id="wows1_0"/></a></li>
<li><a href="http://www.lauritapurple.com/2013/07/our-wedding.html"
target="_parent"><img src="link de la foto de Dropbox" alt="nombre de la foto
para que Google la indexe" title="ttulo descriptivo de la foto que ya debes de
haber indicado al crear el slider, sino, ahora puedes cambiarlo"
id="wows1_1"/></a></li>
<li><a href="http://www.lauritapurple.com/2013/07/honeymoon-west-coasthawaii.html" target="_parent"><img src="link de la foto de Dropbox"
alt="nombre de la foto para que Google la indexe" title="ttulo descriptivo de la
foto que ya debes de haber indicado al crear el slider, sino, ahora puedes

www.lauritapurple.com

18

cambiarlo" id="wows1_2"/></a></li>
<li><a href="http://www.lauritapurple.com/2013/05/tatuajes-que-donde-quiencuando-como.html" target="_parent"><img src="link de la foto de Dropbox"
alt="nombre de la foto para que Google la indexe" title="ttulo descriptivo de la
foto que ya debes de haber indicado al crear el slider, sino, ahora puedes
cambiarlo" id="wows1_3"/></a></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="btonesderedessociales01"><img
src="data1/tooltips/btonesderedessociales01.png"
alt="btonesderedessociales01"/>1</a>
<a href="#" title="nuestraboda"><img src="data1/tooltips/nuestraboda.png"
alt="nuestraboda"/>2</a>
<a href="#" title="nuestralunademielslider0101"><img
src="data1/tooltips/nuestralunademielslider0101.png"
alt="nuestralunademielslider0101"/>3</a>
<a href="#" title="todosobretattoos"><img
src="data1/tooltips/todosobretattoos.png" alt="todosobretattoos"/>4</a>
</div></div>
<span class="wsl"><a href="http://wowslider.com">Header Slider</a> by
WOWSlider.com v4.8m</span>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="tupropiolink/wowslider.js"></script>
www.lauritapurple.com

19

<script type="text/javascript" src="tupropiolink/script.js"></script>

El cdigo que he tachado significa que hay que borrarlo. Hace referencia a
las flechas y dems botones pero no es necesario que est aqu ya que el
archivo style.css ya llama a estas imgenes desde su cdigo, por eso no
es necesario que escribamos el link de Dropbox de las flechas y botones en
ninguna parte.
No obstante, han de estar en Dropbox porque el cdigo que hay en
style.css dice que esas imgenes se encuentran en la misma carpeta que
el propio fichero .css.
Vaya lo, no?
Por ltimo, vers que al final del cdigo estn referenciados los ficheros
wowslider.js y script.js. Tendrs que escribir el link entero que te facilite
Dropbox para cada uno de los ficheros.
Guarda los cambios realizados en el gadget de tu blog y mira el resultado.
Si te fijas en mi slider, puedes ver que yo he optado por que no aparezcan ni
ttulos ni descripciones, sino que he aadido yo los ttulos de cada post
editando la imagen. Tampoco tengo botones de play/pause ni imgenes en
miniatura.
Como puedes ver, Wowslider es muy personalizable y has de hacerlo tuyo y
a tu agrado.

www.lauritapurple.com

20

Espero que este tutorial te haya servido y si tienes cualquier duda o

problema, no dudes en contactar conmigo porque intentar ayudarte.
Muchas gracias por estar ah.
Un abrazo.

www.lauritapurple.com

21