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…

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.