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.
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.
Espero que os sirva de ayuda este post y que lo pongáis en practica. Ya sea usando el programa de la web o a través de HTML.
Si te gusta éste post y crees que es útil: Por favor, compártelo. Gracias!
10 comentarios
Hola: es una opción muy interesante e innovadora.. Queda muy bien en los blogs.
ResponderEliminarMuchas gracias por la info,besos guapa,
ResponderEliminarHola linda, un buen consejo la verdad es que son realmente esteticos y practicos en un blog o web en general. Me guardo el PDF para un futuro. Muchas gracias por compartir. Un beso enorme y buen comienzo de semana
ResponderEliminarComparto cielo.
EliminarPost interesante.
ResponderEliminarBesos!
Es un post muy interesante. Me gusta aprender a personalizar mi blog.
ResponderEliminarUn beso, guapa :)
Es genial el banner rotativo y tu entrada, la verdad!
ResponderEliminarNo dudo en que volveré a releer esta publicación cuando me líe la manta a la cabeza y me apetezca hacerlo. Pero debo tener ese día mucha paciencia porque los códigos y demás de HTML me ponen de los nervios ajjajaja
Un beso!
Graciaspr compartirlo guapa! saludos!
ResponderEliminarGracias!! Creo que en algún momento lo intentare poner ;)
ResponderEliminarLo comparto
♡ Besos ♡
Gracias pequeñuela, este tipo de cosas siempre me gusta aprenderlas por si en un futuro me da por intentar poner uno : )
ResponderEliminar