Poner Últimas Entradas con un Gadget

Poniendo este Gadget en nuestro Blog , nuestros lectores sabrán cuales son nuestros últimos temas que hemos publicado.
Podremos configurarlo en lo siguiente:

+ visualizar una miniatura- configurar alto y ancho donde dice: width:65px;height:65px;

+ El inicio del texto de la entrada.

+ La fecha.

+Borde y color para cada tema en: border: 0px solid #ccc; en border pueden dejar 1px y en solid dejar el color de su elección.

Para agregarlo a nuestro Blog solo debemos ir a la parte de Diseño / Añadir un Gadget / HTML-Javascript y agregar el siguiente código : 

<style type='text/css'>


img.recent_thumb {padding:2px;width:65px;height:65px;border:0;
float:left;margin:5px 10px 10px 0; border: 0px solid #ccc;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 100px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:75px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
.recent_posts_with_thumbs h4 {
text-transform: uppercase;
font-size: 14px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)


{
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl=d;} else thumburl='http://www.webaholic.co.in/other/no-image.jpg';
}


var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Ene";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Abr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Ago";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dic";document.write('<li class="clearfix">');




if(showpostthumbnails==true) 
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><h4><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b></h4>');


if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g; 
postcontent = postcontent.replace(re, "");




if (showpostsummary == true) {


if (postcontent.length < numchars) {
document.write('<i>');
document.write(postcontent);
document.write('</i>');}
else {
document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...');
document.write('</i>');}
}


var towrite='';var flag=0;
document.write('<br><strong>');


if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+' - '+cdday+' - '+cdyear;flag=1;}


if(showcommentnum==true) 
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='0 Comments') commenttext='0 comentarios';
if(commenttext=='1 Comment') commenttext='1 comentario';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}


if(displaymore==true) 
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Más</a>';
flag=1;
;
}


document.write(towrite);


document.write('</strong></li>');
if(displayseparator==true) 
if (i!=(numposts-1))
document.write('');
}document.write('</ul>');


}
//]]>
</script>
<script style='text/javascript'>
var numposts = 10;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 60;</script>
<script src='XXXXXXXXXXfeeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Las siguientes lineas se configuran con TRUE para que se muestre y FALSE para ocultarlo. Hay dos que se definen con un valor numérico:  var numposts = 10;  -  var numchars = 60;

var numposts = 10; » Muestra el número de entradas que se visualizarán.
var showpostthumbnails = true; » Mostrar la miniatura de la primera imagen del tema.
var displaymore = false; » Mostrar la palabra "Más" para ir al tema.
var displayseparator = false; » Mostrar una línea que separa los temas del gadget.
var showcommentnum = false; » Mostrar el número de comentarios.
var showpostdate = false; » Mostrar la fecha de publicación del tema.
var showpostsummary = true; » Mostrar el texto del inicio del tema.
var numchars = 60; » Muestra el número de caracteres que incluirá el texto.

Para terminar colocamos la URL de nuestro Blog por las xxxxxxxxxx, Guardamos cambios y y esta.

Si te sirvió Compártelo en tus Redes Sociales!