Mil Trucos Blogger

Agregar Nivo Slider en Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

En busca de un Slider sencillo y ligero para Blogger, he dado con Nivo Slider, uno de los slider más ligeros que hay, puesto que pesa tan solo 12 Kb (en su versión comprimida), además que viene con una gran cantidad de efectos y es muy fácil de agregar en nuestros blogs.

Agregar Nivo Slider en Blogger…

Nivo-Slider-en-Blogger

Demo del Truco

Para agregar este gran slider a tu blog, ve a Plantilla, Editar HTML y antes de ]]></b:skin>  agrega lo siguiente:

/*
* jQuery Nivo Slider v2.5.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
#slider-wrapper {
background:url(http://3.bp.blogspot.com/-upQKtIwk5Kw/TeiNrE-31II/AAAAAAAAASU/J_p9rYGVEHQ/s1600/slider.png) no-repeat;
width:998px;
height:392px;
margin:0 auto;
padding-top:74px;
margin-top:50px;
}
#slider {
position:relative;
width:618px;
height:246px;
margin-left:190px;
background:url(http://4.bp.blogspot.com/-ueagsKPMZC4/TeiMv1JhNFI/AAAAAAAAASI/326s2RXE-mQ/s1600/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(ttp://4.bp.blogspot.com/-jQWCeMA4bLI/TeiNqrIkyHI/AAAAAAAAASQ/c35RQfTbw_I/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://4.bp.blogspot.com/-rgk389yhc1Y/TeiNraq4IVI/AAAAAAAAASY/b0WSOzs075o/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://4.bp.blogspot.com/-rgk389yhc1Y/TeiNraq4IVI/AAAAAAAAASY/b0WSOzs075o/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
/* Control nav styles (e.g. 1,2,3…) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(http://4.bp.blogspot.com/-jQWCeMA4bLI/TeiNqrIkyHI/AAAAAAAAASQ/c35RQfTbw_I/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}

Ahora justo antes de </head> agrega lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/1611641113/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>

Para terminar añade el HTML del Slider directamente en la plantilla o en elemento HTML/JavaScript (Diseño, Añadir gadget, HTML/JavaScript):

<div id='slider'>
<img alt='' src='URL IMAGEN POST 1'/>
<a href='URL POST 1'><img alt='' src='URL IMAGEN POST 2' title='Titulo Post'/></a>
<img alt='' src='URL IMAGEN POST 3' title='Titulo Post'/>
<img alt='' src='URL IMAGEN POST 4'/>
</div>
<div class='nivo-html-caption' id='htmlcaption'>
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href='#'>a link</a>.
</div>

Solo queda personalizar lo resaltado en azul por lo que se indica y guardar los cambios.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo