Posts más recientes con miniatura

Aquí tenemos este nuevo muestreo de entradas o posts recientes en blogger con miniatura será más genial.

Mira este mismo truco pero para una etiqueta específica (Click aquí)

Tomado gentilmente de AllBloggerTricks

Veamos como se pone:

1. Lo primero será ir a nuestro escritorio blogger allí vamos a Diseño > añadir un gadget > HTML/Javascript.

2. Luego allí copiamos el siguiente código:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:#000000;padding:8px;}
#post-gallery .rp-item {float:left;display:inline; position:relative; margin:2px; padding:0px 0px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKBdQihlXJAiuGPhSnGez3ZihICnqYn0kYLz5v4DJh37Y_S9hji9RUkR4lF1DmD1W16MuwNAigP-36NrX_ktIYdz9KD19hLh8-NVsb_pcR5yvo3SR2UkL34TwxmBbuXNKusSoqHOUSHUVj/s1600/LOAD+(66).gif') no-repeat 50% 50%; width:79px; height:79px;}
#post-gallery .rp-item img { width:69px; height:69px; border:none !important; margin:0px 0px !important; padding:0px 0px !important; background:transparent !important; display:none;}
#post-gallery .rp-item img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
#post-gallery .rp-item .rp-child { position:relative; top:10%!important; left:10%!important; z-index:1000; width:200px; background-color:white; border-bottom:5px solid #1BA1E2; -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7); box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7); padding:10px 15px; overflow:hidden; word-wrap:break-word; display:none; opacity: 0.9;}
#post-gallery .rp-item .rp-child h4 { font-size:12px; margin:0px 0px 5px; color:#1BA1E2;}
#post-gallery .rp-item:hover .hidden {display:block;}</style>
<script type="text/javascript">
var rpTitle = "Últimas Fotografías", // Titulo del gadget
numposts = 13, // Numero de posts a mostrar
numchar = 200, // Numero de caracteres a mostrar
rcFadeSpeed = 600, // Velocidad
pBlank = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif", // Defecto imagen si el post no tiene
blogURL = "https://URL de tu blog/"; // URL de tu blog
</script>
<script src="http://files.allbloggertricks.com/Scripts/abt-recent-posts.js" type="text/javascript"></script>
<script>
$(function() {
$('div.rp-item img').hide();
$('div.rp-child').removeClass('hidden');
var winWidth = $(window).width(),
winHeight = $(window).height(),
ttWidth = $('div.rp-child').outerWidth(),
ttHeight = $('div.rp-child').outerHeight(),
thumbWidth = $('div.rp-item').outerWidth(),
thumbHeight = $('div.rp-item').outerHeight();
$('div.rp-item').css('position', 'static').mouseenter(function() {
$('div.rp-child', this).filter(':not(:animated)').fadeIn(rcFadeSpeed);
}).mousemove(function(e) {
var top = e.pageY+20,
left = e.pageX+20;
if (top + ttHeight > winHeight) {
top = winHeight - ttHeight - 40;
}
if (left + ttWidth > winWidth) {
left = winWidth - ttWidth - 40;
}
$('div.rp-child', this).css({top:top, left:left});
}).mouseleave(function() {
$('div.rp-child', this).hide();
});
});
function showrecentposts(json) {
var entry = json.feed.entry;
for (var i = 0; i < numposts; i++) {
var posturl;
for (var j=0; j < entry[i].link.length; j++) {
if (entry[i].link[j].rel == 'alternate') {
posturl = entry[i].link[j].href;
break;
}
}
if ("content" in entry[i]) {
var postcontent = entry[i].content.$t;
} else if ("summary" in entry[i]) {
var postcontent = entry[i].summary.$t;
} else {
var postcontent = "";
}
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (postcontent.length > numchar) {
postcontent = postcontent.substring(0,numchar) + '...';
}
var poststitle = entry[i].title.$t;

if ("media$thumbnail" in entry[i]) {
postimg = entry[i].media$thumbnail.url
} else {
postimg = pBlank
}
document.write('<div class="rp-item"><a href="' + posturl + '"><img src="' + postimg + '" alt="thumb" /></a>');
document.write('<div class="rp-child hidden"><h4>' + poststitle + '</h4>');
document.write(postcontent + '</div>');
document.write('</div>');
}
}
document.write('<div id="post-gallery"><h2>' + rpTitle + '</h2><sc' + 'ript src="' + blogURL + '/feeds/posts/default?max-results=' + numposts + '&orderby=published&alt=json-in-script&callback=showrecentposts"></sc' + 'ript><div style="clear:both;"></div></div>');
var i = 0, int=0;
$(window).bind("load", function() {
var int = setInterval("doThis(i)",400);
});
function doThis() {
var imgs = $('div.rp-item img').length;
if (i >= imgs) {clearInterval(int);}
$('div.rp-item img:hidden').eq(0).fadeIn(400);
i++;
}
</script>

Ahora bien vamos a modificar por la dirección de nuestro blog lo que está en color azul, con eso ya podríamos guardar todo y salir sin tanto complique sin embargo dejamos aclaración de lo demás que está resaltado.

- En color naranja está el SCRIPT que lo controla todo, está alojado en un sitio de terceros este se satura más a medida que cada vez alguien implemente este mismo código por ende puedes descargarlo y alojarlo por tu cuenta en donde quieras. click aquí para descargar.

- En color rojo tenemos el link de la URL de la imagen que va por defecto cuando un post o entrada reciente no lleva imagen, puedes cambiarla por una de tu gusto.

- Lo que tenemos en verde claro, especifica datos como velocidad, # de carácteres etc, modificando lo que está en verde lo podrás configurar a tu gusto.