Hasta ahora me había resistido a insertar un slideshow en el blog solo por un motivo, quería mostrar las últimas entradas. Hasta ahora todos los que he visto tenían un impedimento, había que ir modificándolo manualmente conforme vas editando entradas.

He intentado varias veces forzarlos con mi feed pero no había forma. Hoy me he encontrado con un script en BloggerTricks que muestra un widget con las últimas entradas y usando JQuery se puede convertir.


Este es el resultado original del widget.



Usando JQuery y un poco de CSS el resultado queda así.



Para implementarlo nos bajamos este fichero, lo subimos a nuestra web de alojamiento, añadimos un elemento HTML a nuestra plantilla y pegamos

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

<script type="text/javascript">
$(document).ready(function(){

var first = 0;
var speed = 800;
var pause = 6500;

function removeFirst(){
first = $('ul#slide li:first').html();
$('ul#slide li:first')
.animate({opacity: 0.5}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}

function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#slide').append(last)
$('ul#slide li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}

interval = setInterval(removeFirst, pause);
});
</script>

<style type="text/css">

#slide{
height:150px;
width:360px;
overflow:hidden;
border: 1px solid #ccc;
margin: 0;
padding:5px;
}

#slide li{
margin: 10px 0 0 0;
list-style:none;
}

#slide .news-title{
display:block;
text-align: center;
line-height: 10px;
}

#slide img{
float:left;
margin-right:2px;
padding:10px;
border:solid 1px #ccc;
}
</style>



<script language="JavaScript">
imgr = new Array();

imgr[0] = "URL IMAGEN 1";
imgr[1] = "URL IMAGEN 2";
imgr[2] = "URL IMAGEN 3";
imgr[3] = "URL IMAGEN 4";
imgr[4] = "URL IMAGEN 5";

showRandomImg = true;
tablewidth = 360;
cellspacing = 1;
borderColor = "";
bgTD = "#ffffff";


imgwidth = 120;
imgheight = 120;
fntsize = 30;
acolor = "#000";
aBold = true;
icon = " ";

text = "no";

showPostDate = false;

summaryPost = 0;
summaryFontsize = 12;
summaryColor = "#ccc";
icon2 = " ";

numposts = 10;
label = "";
home_page = "http://NOMBRE DE NUESTRO BLOG.blogspot.com/";

</script>
<script src="URL ALOJAMIENTO/recentposts_thumbnail.js" type="text/javascript"></script>


Algunos detalles a tener en cuenta:
  1. En rojo resalto lo que debéis rellenar
  2. En URL IMAGEN podemos poner url de imágenes que se usaran en caso de que la entrada no tenga imágenes
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también