Como Insertar Wow Slider en Blogger

COMO INSERTAR

UN SLIDER

WOW SLIDER

EN BLOGGER

www.lauritapurple.com

www.lauritapurple.com 2

Introducción El motivo por el cuál he decidido hacer esta guía no es otro que intentar

“ayudar al prójimo”.

Hice unos cambios en mi blog en los que incluí un slider con las entradas

más populares del sitio. Sabía que quería un slider desde el primer momento

en el que comencé a realizar dichos cambios pero no sabía que por ser de

Blogger iba a tener tantas complicaciones.

Encontré millones de tutoriales tanto en castellano como en inglés de cómo

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 prometía sliders con diferentes efectos para personas que no fueran

expertas en códigos. No obstante, no resultó tan fácil tampoco, pues los

usuarios de Wordpress son los que tienen grandes facilidades para

instalarlos, e incluso la web de wowslider.com te explica cómo introducir el

slider en tu web de una manera muy pobre y sin especificar nada.

Después de mucho cavilar y finalmente encontrar otro blog que más o menos

lo explicaba bien, funcionó. Además, le añadí otras mejoras como la

eliminación 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!


¿Qué necesitarás para crear un slider?

A continuación encontrarás 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 más 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 imágenes y

otros archivos que necesitarás, por ejemplo Dropbox.


Descarga del programa de Wowslider.com Esta aplicación 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 página principal de Wowslider.com, en la pestaña “Download for Win & Mac” encontrarás 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 botón anterior

“Download Now!” se habilitarán los enlaces para descargarlo, tanto si eres

Windows como si eres Mac.


Una vez instalado, podrás 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 préviamente.


Elección de los posts a enlazar Cómo ya te he comentado, este slider mostrará unas imágenes que tú habrás

elegido enlazando los contenidos que tú hayas decidido. No mostrará de

manera automática 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 recomendación es que elijas aquellos posts que más 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 métricas y descubrir cuáles son esos

posts que más le gustan a la gente.


Imágenes atractivas a mostrar La verdad más absoluta es que una imagen vale más que mil palabras y

exactamente como te pasa a ti cuando visitas otras páginas web o blogs, las

imágenes son algo que atraen muchísimo.

Es por ello que te recomiendo que las imágenes 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 cámara

carísima. 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 tamaño fijo para tus

imágenes. Un blog tiene mejor aspecto si se ve ordenado y con fotos e

imágenes que tengan un tamaño adecuado. Además, a la hora de hacer tu

slider, tendrás que elegir un ancho y un alto para las imágenes a mostrar

porque si no tienen el mismo tamaño quedarán descuadradas para ajustarse

al slider.


Alojamiento de archivos e imágenes Cuando crees tu Wowslider, el programa generará una serie de archivos, los

cuáles deberán estar a disposición 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 ningún 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 imágenes sea

pública para que Blogger pueda entrar en ella cada vez que cargue el slider.


Creación 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 haciéndolo según voy escribiendo

esto para no dejarme absolutamente nada.

Preparados, listos…¡YA!

En primer lugar, tendrás que añadir las fotos definitivas que hayas elegido al

programa de Wowslider. Para ello, arrastra las imágenes 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


has de copiar y pegar cada una de las URL de tus posts escogidos y

asociarlos a cada una de las imágenes.

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 pestaña en la misma

ventana.

Una vez configurado este parámetro, te aconsejo también que le pongas un

título 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.


Puedes ver que hay 3 pestañas en la barra superior: “General”, “Images” y

“Publish”.

Veamos de que opciones dispones en la parte izquierda de la pestaña

“General”:

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

si quieres que sea automático, o no, o mejor prefieres que aparezca un botón

de play/pause para que las visitas puedan pararlo y ponerlo en marcha a su

antojo.

Hasta puedes introducirle un archivo de música.


Las opciones que podrás ver a la derecha de la ventana son las siguientes:

Aquí podrás escoger que se muestren las descripciones o que aparezcan las

imágenes en miniatura de todo el slider en la parte inferior.


La siguiente pestaña que tendrás que ver y modificar a tu antojo es la de

“Images”.

En este caso, se trata de la personalización a nivel de aspecto de las

imágenes del slider.

A la izquierda de la ventana puedes escoger plantillas diferentes para el

slider. Selecciona la que más te guste, pues tienes una vista previa en la

parte inferior.


A la derecha de la ventana es donde tienes que establecer el tamaño del

slider. De aquí viene que antes te haya comentado que todas tus imágenes

deberían tener el mismo tamaño.

También puedes escoger el tipo de transición que tendrán las imágenes y la

duración de los efectos.

Verás que la opción de marca de agua o “Watermark” no se puede quitar. No

te preocupes, más adelante te enseñaré como eliminarla.

Para terminar, en la pestaña de “Publish” puedes ver lo siguiente:


Deberás escoger en que carpeta de tu ordenador quedará guardado tu slider

y entonces clicka sobre el botón “Publish” que aparece en la parte inferior

derecha.

Si te diriges a la carpeta en la que has guardado el slider creado te

encontrarás con las siguientes carpetas:

Dentro de “data1” verás otra carpeta que se llama “Images” en la que

aparecerán las imágenes 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

necesitarás subir a Dropbox.

Ahora es cuando viene lo más 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 público,

son las imágenes 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.

Después, sube también a Dropbox los archivos que encontrarás en la carpeta

“engine1”:

• style.css

• jquery.js


• script.js

También deberás subir el archivo wowslider.js, pero antes tendrás 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 línea:

.css({zIndex:11,right:"5px",bottom:"2px"})

De aquí tendrás que eliminar los valores en píxeles 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, súbelo también a

Dropbox junto con el resto.

Por último, también deberás subir a Dropbox el resto de imágenes 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 imágenes originales, en las que no aparece marca de agua

• Archivos style.css, jquery.js, script.js y wowslider.js

• Las imágenes del resto de elementos que hayas decidido tener,

como flechas, botones, etc.

Una vez dispongas de todo esto en una carpeta pública, podrás introducirlo

en tu blog.


Para ello, dirígete 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

código:

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

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

Tendrás 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 público 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.

Después, tendrás que decidir dónde ubicarás el slider en tu blog. En la

pestaña de “Diseño” de tu blog añade un gadget de HTML/JavaScript.

El código que tendrás 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 mostrándote el

slider. Haz click con el botón derecho en el área fuera del slider y clicka sobre

“Ver código fuente”.

Copia el código que se encuentra entre las frases:

 y  y pégalo en el gadget de HTML/JavaScript que has añadido en el diseño de

tu blog.

El código es el siguiente, y tendrás que cambiarle lo que te indico a

continuación (es un poco caótico, así que tomátelo con calma :P):

<div id="wowslider-container1">

<div class="ws_images"><ul>

<li><a href="http://www.lauritapurple.com/2013/04/personalizando-mi-blog-

redes-sociales.html" target="_parent"><img src="link de la foto de Dropbox"

alt="nombre de la foto para que Google la indexe" title="título 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="título 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-coast-

hawaii.html" target="_parent"><img src="link de la foto de Dropbox"



<li><a href="http://www.lauritapurple.com/2013/05/tatuajes-que-donde-quien-

cuando-como.html" target="_parent"><img src="link de la foto de Dropbox"




</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>


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.

Como Insertar Wow Slider en Blogger

Documents

Transcript of Como Insertar Wow Slider en Blogger