Blogger: slider de entradas con FeaturedContentSlider

Hace poco vimos como configurar y usar el FeaturedContentSlider, de los slider que he probado, este es el mas sencillo, permite hacer una presentación de diapositivas y configurar la forma en que muestra cada una; Puedes elegir si quieres paginación o no, personalizar la misma de modo que se muestre una secuencia de números que enlacen a las diapositivas o etiquetas para lo mismo, la velocidad de transición, ejecutar scripts usando el evento onChange, etc.

Basándome en ello he diseñado un Slider para las entradas del blog (las más vistas, más resaltantes o como quieras denominarlo); Para descargar los archivos y saber como aplicarlo debes leer nuevamente éste post, la única diferencia va a ser que no usaremos el CSS que nos proporcionan, si no, uno modificado a partir de ese.

El slider puedes colocarlo donde lo desees, yo lo agregue sobre las entradas, antes de:

<div id='main-wrapper'>

que viene siendo el contenedor de contenidos del blog, es posible que el identificador en el caso de tu plantilla no se llame main-wrapper, eso es lo de menos, solo busca el texto "Entradas del blog" dentro del código (en el caso de firefox: te vas a --> menú editar --> buscar, colocas "Entradas del blog" y presionas aceptar) y te situarías en el inicio dentro de ese div contenedor, solo resta colocar el código correspondiente.

CSS para Slider de entradas:

<style>
.sliderwrapper{
 position: relative;
 float: left;
 overflow: hidden;
 border: 5px solid #c1930b;
 height: 190px;
 background: #242424;
 margin: 0 0px 5px 60px;
}

.sliderwrapper, .sliderwrapper .contentdiv, .pagination{
 width:630px;
}

.sliderwrapper .contentdiv{
 visibility: hidden;
 padding:5px;
}

.sliderwrapper img{
 position:absolute;
 float:left;
 left:5px;
 top:5px;
 padding:5px;
 background:#515252;
 width:270px;
 height:170px;
}

.sliderwrapper h2{
 font-weight:normal;
 font-size:14px;
 margin-top:4px;
 margin-bottom:1px;
 height:30x;
 color: #fff;
}

.sliderwrapper p {
 top: 30px;
 height:148px;
 margin-top:2px;
 line-height:20px;
 color: #c4c4c4;
 text-align: justify;
}

.sliderwrapper p, .sliderwrapper h2{
 /*border:1px solid #fff;*/
 position:absolute;
 float:left;
 left: 290px;
 width:335px;
 font-family: Tahoma,Georgia,Verdana,sans-serif,arial;
}

.sliderwrapper h2 a:link, .sliderwrapper h2 a:visited {
 color:#fff;
}

.pagination{
 float:left;
 text-align: center;
 border:2px solid #000;
 padding:3px 0 0 0;
 background:#000;
 margin-left: 60px;
}

.pagination .prev, .pagination .next{
 width:8px;
 height:20px;
 margin-top: -4px;
 z-index:200;
}

.pagination, .pagination .prev, .pagination .next{
 -webkit-border-top-left-radius:70px;
 -webkit-border-top-right-radius:70px;
 -webkit-border-bottom-left-radius:70px;
 -webkit-border-bottom-right-radius:70px;
 border-top-left-radius:70px;
 border-top-right-radius:70px;
 border-bottom-left-radius:70px;
 border-bottom-right-radius:70px;
 -moz-border-radius-topleft: 70px;
 -moz-border-radius-topright:70px;
 -moz-border-radius-bottomleft:70px;
 -moz-border-radius-bottomright:70px;
}

.pagination .prev {
 background:url(prev.png) no-repeat;
 float:left;
}

.pagination .next{
 float:right;
 background:url(nxt.png) no-repeat;
}

.pagination .next a:hover, .pagination .next a.selected{
 background-color: none;
}

.pagination a{

 background:transparent url(vbgpaginacionkt3.gif) repeat ;
 font-weight: normal;
 text-decoration: none;
 color:#fff;
 margin:0 2px;
 padding:2px 7px;
 width:10px;
 height:20px;
}

.pagination a:hover, .pagination a.selected{
 color: #c1930b;
 border: 1px solid #c1930b;
}
</style>

Aquí dejo las imágenes usadas:

<!-- div contenedor padre -->
<div class='sliderwrapper' id='slider1'>

<!-- este representa cada entrada --> 
<div class='contentdiv'>
<a href='URL de la entrada'><img src='imagen de la entrada'/></a>
<h2><a href='URL de la entrada'>titulo</a></h2>
<p>resumen.. ve verificando como se ve para que quede perfecto ;)</p>
</div>
...
</div><!-- cierro div contenedor padre-->

Reitero, todo lo demás está explicado en éste post y acá el demo.