Tutorial: Añadir Nivo Slider en Blogger

Publicado el 30 septiembre 2013 por Ludymila Mello Ludymila Mello @LudymilaM

¡¡¡Hello everybody!!! lo primero, tengo que pediros perdón por haber tardado tanto en subir este tutorial, no me odiéis, porfa, pero es que no he tenido tiempo para nada estos ultimos dias :( Pero, no me enrollo, os dejo ya con el tutorial.
Hoy os voy a enseñar como poner un slider en su blog igual al que yo uso aqui en el mio. Su nombre es Nivo y varios sitios profesionales lo utiliza. Lo que mas me gusta del Nivo son los diferentes efectos de transición que tiene (15 en total). Yo personalmente lo veo muy Cool y muy útil para destacar algo.
1 - Primera parte Para instalar el Slider:
Para poner este slider en tu blog entra en la Edición HTML, y Despues de </head> agrega los estilos:
Copia el codigo abajo y pega despues de </head> <style type="text/css">/* */ </style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"><script src="http://static.tumblr.com/y66747w/9hlmdpcpa/nivoslider.js" type="text/javascript"><script type="text/javascript">/* */ </script>
Ejemplo de donde poner el codigo

las dimensiones del slider son 663px de ancho por 330px.
Si deseas cambiar el tamaño del slider tienes que cambiar el codigo width:663px; y height:330px; que encuentres, en esta área:
#w2bNivoSlider { position:relative; width:663px !important; /*largura do slide*/height:330px !important; /*Altura do slide*/ 

2 - Segunda Parte para instalar el Slider: 
ahora entra en la sección de Diseño y agrega un elemento HTML/Javascript, ahí pega esto:
Copia el codigo abajo y pega en un Gadget HTML
<div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<a href="LINK_DEL_SLIDE_1"><img src="URL_DE_IMAGEN_1" title=""/></a>
<a href="LINK_DEL_SLIDE_2"><img src="URL_DE_IMAGEN_2" title=""/></a>
<a href="LINK_DEL_SLIDE_3"><img src="URL_DE_IMAGEN_3" title=""/></a>
<a href="LINK_DEL_SLIDE_4"><img src="URL_DE_IMAGEN_4" title=""/></a>
</div>
</div>
Ejemplo de donde poner el código


Ahora si queréis poner este Slider en toda la area del blogtienes que poner el código de la segunda parte en un gadget HTML abajo de la cabecera y cambiar el tamaño del slider en la primera parte por el tamaño total de su blog.

Ver ejemplo del Slider en toda la area del blog aqui


Y esto ha sido todo por hoy, Cualquier duda solo teneis que preguntar. ok
Estés atentos al blog pues habrá mas tutoriales, reseñas y una gran Sorpresa.
Xoxo