-->

Agregar Slider con Entradas Destacadas

Es una aplicación para mostrar contenido destacado del blog. Resulta ideal para bitácoras de noticias, de artículos variados o simplemente para atraer la atención de los lectores hacia un conjunto de entradas.
 

Lo unico que tienes que hacer es:

Busca 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/AVvXsEjUGhMXhzWyL0pakr7oMbSOcoyvZ8yPyMQm8cvOMhdFsrsyY_1viaOFhlBVZd-9-raDl57xTkU5b0XieixVzbAknGyJ8vVLayRkRq_XYxLy7xdJsaH4JuIzf7AquJIQsTd4yRi47LfjZeGn/s320/blflechi1.png);}
.balcnSiguiente{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEac47UO76sUwjc6pIPM3LmH4Haoan0ZtCrOVf0hvCA6T7pnX39mKuMkUILSpRO3kcP_K17e6L4F4LPIVsaJ0gT4johwJbrWN5zkZXb4NGp6zIZLuZSRHM_fybaNQULAN0qNAw-iAMvwnJ/s320/blflechi2.png);}
</style>


Luego:
Diseño>añadir gadget (elemento de página)>html-javascript


 
 
 
Y agrega los contenidos a tu gusto :


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

No hay comentarios :

Publicar un comentario

¿Que te pareció esta publicación?