Carrusel de artículos destacados en tu blog

Este es un Slider, o Carrusel que rotan con los artículos más destacados de tu blog.
Es perfecto para añadir post destacados, y para atraer la atención de los lectores hacia un conjunto de entradas.
Para ello tenemos que modificar nuestra plantilla:
Pero como siempre digo antes de esto tenemos que hacer una copia de seguridad por si acaso.
Puedes ver como se hace paso a paso en este link.


Una vez hecho esto empezamos:

1º Vamos a Plantilla > HTML
Buscamos la etiqueta </head> y justo antes añade estas líneas:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
    <script src='https://sites.google.com/site/scriptsbalcon/b/blarticRotador1.js' type='text/javascript'/>
    <script src='https://sites.google.com/site/scriptsbalcon/b/blarticRotador2.js' type='text/javascript'/>
    <script src='https://sites.google.com/site/scriptsbalcon/b/blarticRotador3.js' type='text/javascript'/>
    <link href='https://sites.google.com/site/scriptsbalcon/b/blarticRotador4.css' media='screen' rel='stylesheet' type='text/css'/>
    <script type='text/javascript'>//<![CDATA[
    jQuery(document).ready(function() {
    Cufon.replace('.blogname h2', { fontFamily: 'MankSans-Medium' });
    Cufon.replace('.sidetitl,.blogname h1', { fontFamily: 'ChunkFive' });
    });
    //]]></script>

    <style>
    .balcnAnterior{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipc_cScLZaMAUx9AnzRIDzO30QRN-tAhOx3IZInkJ7lmHMOCU3h74uGOFzmUfPESd8Ic9ry622R0I0ucEotO-N0Rk5pgJsmJJY5cklgAlZVF61D8AtFa9VLU49YSKqdiEQHW3oDT1x__PE/s320/blflechi1.png);}
    .balcnSiguiente{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJjzi4NbUhax86BadHEEIuihUMRvKUi2CNM1jNAAqpQf_8_2_M10OAAaPAtrlKWY0ROFd_KepdgAdbugm36aQkk39s9tfp3O3ZxfNJW3UCUE5M15hhJ_13VRbihgjmkPhwcpLQgFRdRw-y/s320/blflechi2.png);}
    </style>

Las líneas en color rosa corresponden a las imágenes de flecha apuntando hacia la izquierda y de flecha apuntando hacia la derecha -respectivamente.
 Puedes cambiarlo por la imagen que quieras

Ahora guarda la plantilla.

2º Nos vamos a Diseño > Añadir un gadget.
Seleccionamos HTML/Javascript

 Pegamos este código

<div id="balcnSlider1">
<div class="balcnSliderFila">
<a href="#" class="balcnAnterior"></a>
<a href="#" class="balcnSiguiente"></a>
<div class="clear"></div>
</div>
<div id="balcnSlider2">
<div class="balcnSlider3">
<ul>

<li>
<div class="balcnSContenido">
<h2><a href="DIRECCION" title="Leer artículo">TITULO</a></h2>
<p>RESUMEN... (<a href="DIRECCION">Seguir leyendo...</a>)</p>
<img alt="" src="URL IMAGEN" />
</div>
</li>

<li>
<div class="balcnSContenido">
<h2><a href="DIRECCION" title="Leer artículo">TITULO</a></h2>
<p>RESUMEN... (<a href="DIRECCION">Seguir leyendo...</a>)</p>
<img alt="" src="URL IMAGEN" />
</div>
</li>

<li>
<div class="balcnSContenido">
<h2><a href="DIRECCION" title="Leer artículo">TITULO</a></h2>
<p>RESUMEN... (<a href="DIRECCION">Seguir leyendo...</a>)</p>
<img alt="" src="URL IMAGEN" />
</div>
</li>

</ul>
<div class="clear"></div>
</div>
</div>
</div>

<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".balcnSlider3").jCarouselLite({
btnNext: ".balcnSiguiente",
btnPrev: ".balcnAnterior",
visible: 1,
easing: "backout",
speed: 1000
});
});
</script>

Reemplazamos:
 DIRECCION por la URL del post, se incluye dos veces
TITULO con el título de la entrada,
 RESUMEN con una breve descripción o una frase del post y URL IMAGEN con la dirección de la imagen que representará al artículo.

El widget mostrará un total de tres entradas. Para añadir más tan solo debes agregar este bloque tantas veces como posts desees mostrar:

<li>
<div class="balcnSContenido">
<h2><a href="DIRECCION" title="Leer artículo">TITULO</a></h2>
<p>RESUMEN... (<a href="DIRECCION">Seguir leyendo...</a>)</p>
<img alt="" src="URL IMAGEN" />
</div>
</li>