Carrusel o Slider de entradas destacadas

Vamos a mostrar hoy como podemos poner un slider, o carrusel en nuestro blog de los artículos mas destacados donde podemos poner: Noticias, o entradas variadas.

Modificando nuestra plantilla

Para hacer que funcione lo primero que tenemos que hacer es modificar nuestra plantilla HTML.

Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso

 Nos vamos a:
Tema > HTML
y peganos este texto justo antes de la etiqueta </head>

<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/AVvXsEi8G8VApGEPxjiWkAx9jSol4Jb4FUJCI2s-4zzIb3f-wDs53ggi6aQczj8BOKaaUH_CKLDZ84bu4sID7qLtuUpf_zDDR33WDVFtaMANZAc6ysP0DuHg1IpIBA3x-qOprTyk_x1D3CwzXgYz/s320/blflechi1.png);}
.balcnSiguiente{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlYqoPtNsqOoHR9Q5mK0rBJs6ZVgkzCSibFr_9JbnXWF31s1xxaf4pHZlKd_8Tc0Urn0w-dS_zdmNzk0CP4O-ZSchh9LJzeCqZZyPWTrNO8wi_C0K8zSKBhNAet7jqdKYkxxbfZfakx-kW/s320/blflechi2.png);}
</style>

Podemos modificar las imagenes de las flechas por las marcadas en rosa por las que nosotros queramos

Hecho esto guardamos nuestra plantilla.

Añadiendo el Gadget

Para que esto funcione tenemos que irnos a añadir un Gadget.
Nos vamos a 
Diseño > Añadir HTML/Javascript
 

Pega este código en su interior.

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

Ahora modificamos:
Lo marcado en azul por la URL de la entrada de nuestro blog.
Lo marcado en verde por el titulo de la entrada.
Y lo marcado en morado por la URL de nuestra imagen.

Nota:
Si queremos añadir mas entradas a nuestro slider, solo tenemos que añadir este código

<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>
Puedes ver en este post como lo hacemos paso a paso

Enlace de:

http://elbalcondejaime.blogspot.com