Glider: Mostrar entradas destacadas

Son muchos quienes piden un gadget que muestre las entradas destacadas en forma de slide, es decir que se desplace el resumen de la entrada junto con una imagen representativa, así que podemos hacerlo usando JQuery y un script de Dynamicdrive.
Para que sepas mejor de qué hablo puedes ver un ejemplo en este blog de pruebas.

Ponerlo en el blog no es complicado pero el sistema no es automático, así que cada vez que se desee que se muestren otras entradas se tiene que editar dicho gadget, así que no es un gadget para perezosos.

Para empezar entramos en Diseño > Edición de HTML y pegamos antes de ]]></b:skin> lo siguiente:

#glidercontent{
margin:0px 0px 20px 10px;
font-family: 'Lucida sans unicode', tahoma, Verdana, Arial, Sans-Serif; /* Tipo de letra */
background:#ccc; /* Color de fondo */
-moz-border-radius:10px;
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border: 1px solid #000; /* Color del borde */
}
.glidecontentwrapper{
position: relative;
width: 480px; /* Ancho */
height: 250px; /* Alto */
overflow: hidden;
padding:0;
margin:0;
}
.glidecontent{
position:absolute;
padding:20px 10px 0px 8px;
width:445px;
color:#fff; /* Color del texto */
background:#ccc; /* Color de fondo */
margin:0px 0px;
height: 250px;
overflow:hidden;
float:left;
}
.glidim{
float:left;
width:150px;
}
.glidim img{
margin:10px 5px 5px 10px;
padding:3px 3px;
background:#fff; /* Color de fondo de las imágenes */
}
.glidmeta h2{ /* Propiedades de los títulos */
margin:0px 0px 5px 0px;
font-size:20px;
font-weight:bold;
overflow:hidden;
height:27px;
}
.glidmeta h2 a:link, .glidmeta h2 a:visited{
text-decoration:none;
color:#fff; /* Color del texto del título */
}
.glidmeta{
float:right;
text-align:justify;
width:260px;
padding:0 10px 0px 5px;
margin:10px 0px 0 0;
color:#fff;
font-size:12px;
}
.gmore{ /* Propiedades del enlace Leer más */
float:right;
height:28px;
background:#585858;
width:75px;
line-height:30px;
padding-left:27px;
font-size:12px;
margin-top:5px;
}
.gmore a:link, .gmore a:visited{
color:#fff;
}
.gnav{
width: 100px;
height:50px;
z-index:150;
float:right;
padding-right:25px;
}
.glidecontenttoggler{
height:35px;
z-index:150;
width: 940px;
}
.glidecontenttoggler a{
display: -moz-inline-box;
display: inline-block;
color: #000;
font-weight: bold;
text-decoration: none;
}
.glidecontenttoggler a.selected{
background: #E4EFFA;
color: #000;
}
.glidecontenttoggler a:hover{
background: #E4EFFA;
color: #000;
}
.glidecontenttoggler a.toc{
}
.glidecontenttoggler a.prev{ /* Flecha izquierda */
top:5px;
right:42px;
position:absolute;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4wnStt-LmiEZ9EgJfsI0q_UAN0rNA1PFoqZyWgqfrc9zaKJ2EBfqVe-pJmFm76Bsqowjf4w3kZeul142oiZeUrErhKNMT1HRiO0YsUDd-I9qQeHmBN5f1-mFXYUxW3_gpLS1grAgEJT0/s400/left.png)no-repeat left;
height:29px;
width:40px;
}
.glidecontenttoggler a.next { /* Flecha derecha */
float:right;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl05X3FRCD7Qa6oYUVwx_AVfnTdOeYYfCv63cl_1ssKa4MrVR8KLjMTo566OhRDuU-f7YVYjxazBsz_Xxaw47c6FQAcSReYlVn7gtExIjJvVikya5mTqVz9p5UOPfEtt8VK91K-ewErTE/s400/right.png)no-repeat right;
width:40px;
height:29px;
position:absolute;
top:5px;
right:15px;
}

Luego pegamos antes de </head> el contenido de este archivo. Y esto:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Ahora ahí mismo en Edición de HTML y SIN expandir los artilugios buscamos esta parte:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>

Si no lo tiene tu plantilla puedes ponerlo debajo de <div id='main-wrapper'> aunque si el ancho de tus entradas es menor a 480px el gadget no se mostrará por completo.
En fin, pegamos debajo de esa línea lo siguiente:

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<script type='text/javascript'>
featuredcontentglider.init({
gliderid: &quot;glidercontent&quot;,
contentclass: &quot;glidecontent&quot;,
togglerid: &quot;togglebox&quot;,
remotecontent: &quot;&quot;,
selected: 1,
persiststate: true,
speed: 200,
direction: &quot;leftright&quot;,
autorotate: true,
autorotateconfig: [5000, 1] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</script>

<b:section class='glide' id='glide1' showaddelement='no'>
<b:widget id='HTML99' locked='true' title='Glider: Contenido destacado' type='HTML'/>
</b:section>
</b:if>

Guarda los cambios y ahora entra en Diseño > Elementos de la página y verás un nuevo gadget llamado Glider, haz click en Editar.
Ahí pega esto:

<div class="glidecontent">
<div class="glidim">
<a href="URL de la entrada"> <img src="URL de la imagen" width="100" height="100" /> </a>
</div>
<div class="glidmeta">

<h2><a href="URL de la entrada">Título de la entrada</a></h2>
...Aquí va el resumen de la entrada...

<div class="gmore">
<a href="URL de la entrada">Leer más</a>
</div>
</div>
</div>

Cambia donde se indica la URL de la entrada del post al que llevará, así como la URL de la imagen.
Si quieres cambiar el tamaño de la miniatura busca en este último código donde dice width="100" height="100" y cámbialo por otros valores.
Puedes poner tantas entradas destacadas como quieras sólo pega debajo de ese mismo código un código igual (con distintos datos obviamente) por cada entrada que quieras mostrar en el gadget. Este gadget puede servirte para promocionar las entradas que quieras que tus lectores vean.