Cómo agregar un slider en un blog de blogger (Nivo Slider)

Vaya que mejoran los blogs con un bonito slider. Averigué mucho y luego de muchos intentos fallidos, logré dar con unas buenas instrucciones para instalar Nivo Slider en un blog de blogger. Los créditos son para bloggermentor.com

* Perdón por la desconfiguración de este post, pero el apuro no me permite arreglarlo por ahora

Los pasos son los siguientes:

- Ir a blogger, en la sección Diseño y clickear en Añadir un gadget

- Seleccionar HTML/Javascript

- Copiar el siguiente código

<div id='slider'>
<a href='http://bloggermentor.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDb37p1X9W7MstmFqFNaQqwVsXa6YttQn9fE7fMaTYuyLRXKcJfWx7iY4Yy9-HEj1IyoAruiYfF5X0EMBF5KPTai0Aw6Hv66tY4UWbsfkCzCjCgigckSsh39so7RJqKquEsqqBKZnvTLA/s1600/toystory.jpg'/>
<a href='http://bloggermentor.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1m-zdqHVauTFgyGls6_Op0-tao0U3RipFQx9jRQyn9uVFgf01osZIdlppLPSDT1NNfBHpzvGtrQVSMxh5vEtxYIxfj_88VnYtwCTsniPxlhtjhsOk3TFH4yYqmCl9VLwYAcCadkmtGmU/s1600/up.jpg' title='#htmlcaption'/></a>
<a href='http://bloggermentor.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2jmGYbV4mIpXQLjioscf6kwkllgXxcsf1TLQTAEk3FMUFKi91zZKe1tRChNy-MSGfxqTB6VTClSk0ZpTLcL3KqWkh88JpirTFgMkrkGCeBrkNELAPFp1K5-3LqyBSlvulqs0W8iNDF6s/s1600/walle.jpg' title='This is an example of a caption'/>
<a href='http://bloggermentor.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiLJDTonokLls5zfbQf0zxr9-5RT2o8vxJMK11a-2N0vF4DLJBbe7j7DffdokLGKWUXgyERzFc6o3IVXjvAoj_-AwvhWwBhZ5_WXfO8bGHWOafNylDBqQqBcaRZq9zN5XM5FFHWEUj2fw/s1600/nemo.jpg'/>
</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>

Reemplazar el texto ROJO con tu dirección y reemplazar el texto AMARILLO con tu propio texto personalizado.

- Click en Guardar

Luego,

- Ir a la sección Plantilla, Editar HTML

- Buscar el código ]]></b:skin> (con ctrl+F se facilita la búsqueda dentro de la plantilla)

- Copiar el siguiente código justo arriba de ]]></b:skin>

/*
* 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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4jxOksokL_HVlQ1JwUP-_aVh94JsJaWabUAI8CJeZQdmsrzslPl69kT_Pztjz3JPT8VPQrmY1IAlnhrYz29TMGELKsbmaHuEIrd1DXGGaqd3xtfLtCc8kLOsmkyRiX1EZqiQEImNc9tI/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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc1vQgJLCc4djA_xqKmVAoNOoa0UVORz8jpKudsedaC8OUkKt44PZHwgIpAWkovKVYaSghHjI2oIrFlXaB2OOS6ABicxxurbxW0dLEEdhhQVfaLtHjBc-KEOibFExXetmBv_HihPE0Eqw/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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn5w2IzxyEkOZdNG5zusuQxwlJ_osH4wh1Vs00yd75LTKT-z_Dr-mH1oo0b6B2tY9-9O9WUHD24eJHOU6Bra_IGU2KdIomSpYZPhldWXoNa5CmnEZpfp64lEhFy8KBJrJ0wsrVc-CY2PQ/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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnNT055MtKwJkKYbzvAatxeSVSc49xkgJJu_LsG0Chhh1tkb18nF0usAyqSrRBto4MDgrmhsv3XD1lCYEqZdbiglgoD-UdpCJW_ofRL0UBIwahJ0hV-Mvts1QtLUVeDXWmGv8NkcgQlpc/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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnNT055MtKwJkKYbzvAatxeSVSc49xkgJJu_LsG0Chhh1tkb18nF0usAyqSrRBto4MDgrmhsv3XD1lCYEqZdbiglgoD-UdpCJW_ofRL0UBIwahJ0hV-Mvts1QtLUVeDXWmGv8NkcgQlpc/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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn5w2IzxyEkOZdNG5zusuQxwlJ_osH4wh1Vs00yd75LTKT-z_Dr-mH1oo0b6B2tY9-9O9WUHD24eJHOU6Bra_IGU2KdIomSpYZPhldWXoNa5CmnEZpfp64lEhFy8KBJrJ0wsrVc-CY2PQ/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}

Luego,

- Buscar </head>
- Copiar el siguiente código justo arriba de </head>

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

- Guardar

Y listo! Ya tienen Nivo Slider! Ahora a configurarlo!