Otras formas de mostrar "Entradas recientes"

Existen varias formas de mostrar las entradas mas recientes de nuestro mismo blog o incluso de cualquier otro blog, de manera que puedes elegir entre las mas sencillas hasta las mas complejas. Como lo puede ser añadir un Gadget de feed directamente hasta un script que muestre parte de la entrada y hasta la fecha de la entrada.

Puedes usarlo para auto-promocionar el blog, esa técnica es muy utilizada para que los lectores puedan encontrar fácilmente lo que buscan o interesarse por las demás entradas de nuestro blog.

Ejemplo

Había tenido bastante tiempo estudiando los feeds del blog, de hecho yo mismo desarrollé la mayoría de los siguientes scripts. Solo el último fue desarrollado por Hans de Beautiful Beta

Los gadgets funcionan recogiendo las entradas por medio del feed del blog, al recoger las entradas simplemente les da un poco de formato, es decir los textos en negrita, el titulo y etc...

Simples

Este es el código del ejemplo, el mas pequeño y con mas funcionalidad que cualquier otro gadget en proporcion al código, lo que le quita capacidad de personalización pero al fin y al cabo cumple bien su función que es mostrar las entradas mas recientes.

Mostrar código

<div id='howentrrec'>
<script type='text/javascript'>
entradasrec = function (json) { 
var m = 3; 
var mltr = 100;
var f = ''; 
for (var i=0;i < m;i++) { 
var n = json.feed.entry[i]; 
var l = n.link[4].href; 
var r = '[...]'.link(l); 
var e = n.summary.$t.substring(0, mltr); 
var t = n.title.$t.link(l).bold(); 
f = f + t + '<br/>'; 
f = f + e + r +'<br/><br/>'; 
} 
document.write(f);
}</script>
<script src='http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=entradasrec' type='text/javascript'></script>
</div>

En donde el texto color:
Rojo.- Máximo de entradas a mostrar
Verde.- Máximo de caracteres por entrada

Con metodos DOM

Es similar al anterior solo que este script tiene mas capacidad de personalización, es decir, puedes cambiar fácilmente los colores, la letra, el fondo. Utiliza métodos DOM para agregar el código al contenedor.

Mostrar código

<div id='howentrrec'><script type='text/javascript'>
entradasrecientesDOM = function(json) {
  var m = 3; 
  var mltr = 100;
  var contenedor = document.createElement('div');
  contenedor.setAttribute('class','howentradasrecientes');
  for (var i=0;i < m;i++) {
    var contenedorPost = document.createElement('div');
    contenedorPost.setAttribute('class','howpostreciente')
    var post = json.feed.entry[i];
    var link = post.link[4].href;
    var readMore = document.createTextNode('[...]');
    var entrada = post.summary.$t.substring(0, mltr);
    entrada = document.createTextNode(entrada);
    var titulo = document.createElement('a');
    titulo.setAttribute('href',link);
    titulo.setAttribute('style','font-weight:bold;');
    var txtTitulo = post.title.$t;
    txtTitulo = document.createTextNode(txtTitulo);
    titulo.appendChild(txtTitulo);
    var salto = document.createElement('br');
    var salto_ = document.createElement('br');
    contenedorPost.appendChild(titulo);
    contenedorPost.appendChild(salto);
    contenedorPost.appendChild(entrada);
    contenedorPost.appendChild(readMore);
    contenedorPost.appendChild(salto_);
    contenedor.appendChild(contenedorPost);
  }
  document.getElementById('howentrrec').appendChild(contenedor);
}
</script>

<script src='http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=entradasrecientesDOM' type='text/javascript'></script></div>

En donde el texto color:
Rojo.- Máximo de entradas a mostrar
Verde.- Máximo de caracteres por entrada

Para modificar el estilo puedes utilizar los siguientes selectores

Para modificar el contenedor de las entradas
.howentradasrecientes {}
Estilo de cada entrada
.howpostreciente {}

Estilo del titulo de cada entrada
.howpostreciente a {}

Normales

Código mucho mas similar al simple, pero este tiene algunos arreglos que lo hacen mas fácil de personalizar incluso que al anterior. Utiliza el metodo innerHTML acelerando así la injección de código.

Mostrar código

<div id='howentrrec'><script type='text/javascript'>
entradasrecientes = function (json) {
  var id = 'howentrrec';
  var c = (document.getElementById(id)?document.getElementById(id):document.All[id]);
  var m = 3; 
  var mltr = 100;
  var f = "";
  for (var i=0;i < m;i++) {
    var n = json.feed.entry[i];
    var l = n.link[4].href;
    var r = '[...]'.link(l);
    var e = n.summary.$t.substring(0, mltr);
    var t = n.title.$t.link(l).bold();
    f = f + '<div class="howpostreciente">' + t + '<br/>';
    f = f + '<div class="howposttext">' + e + '</div>' + r +'<br/><br/></div>';
  }
  c.innerHTML = f;
}
</script>

<script src='http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=entradasrecientes' type='text/javascript'></script></div>

En donde el texto color:
Rojo.- Máximo de entradas a mostrar
Verde.- Máximo de caracteres por entrada

Para modificar el estilo puedes utilizar los siguientes selectores

Estilo del contenedor#howentrrec {}
Estilo de cada entrada
.howpostreciente {}
Estilo del titulo de cada entrada
.howpostreciente a{}
Estilo del texto de cada entrada
.howposttext {}

Mas coplejas

Este script realizado por Hans, es uno de los mas complejos en el área. Pues tiene la funcionalidad de mostrar parte de la entrada así como la fecha en que fue publicada.

Mostrar código

<script type="text/javascript">
function showrecentposts(json) {

  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 == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    posttitle = posttitle.link(posturl);
    var readmorelink = '(leer mas)';
    readmorelink = readmorelink.link(posturl);
    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';
    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 (!standardstyling) document.write('<div class='bbrecpost'>');
    if (standardstyling) document.write('<br/>');
    document.write(posttitle);
    if (showpostdate == true) document.write(' - ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)]);
    if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
    if (showpostsummary == true) {
      if (standardstyling) document.write('<br/>');
      if (postcontent.length < numchars) {
         if (standardstyling) document.write('<i>');
         document.write(postcontent);
         if (standardstyling) document.write('</i>');}
      else {
         if (standardstyling) document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(' ');
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...' + readmorelink);
         if (standardstyling) document.write('</i>');}
}
    if (!standardstyling) document.write('</div>');
    if (standardstyling) document.write('<br/>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
document.write('<span style='font-size:80%;'><a href='http://beautifulbeta.blogspot.com'></a></span>');
if (!standardstyling) document.write('</div>');

}
</script>

<script type="text/javascript">
//Numero de entradas que mostrará
var numposts = 10;
//Numero de caracteres por entrada
var numchars = 50;
//Mostrar fecha(true o false)
var showpostdate = false;
//Mostrar el (leer mas)...(true o false)
var showpostsummary = true;
//Mostrar entradas con el estilo predeterminado
var standardstyling = false;
</script>

<script type="text/javascript" src="http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Para añadir las entradas recientes que elegiste, simplemente debes agregar los códigos en un gadget HTML/javascript.

Personalmente yo utilizo este tipo de gadgets, pues cuando los usuarios están navegando en una entrada, se muestran las cinco(o las que quieras) entradas mas recientes a lado de la entrada. Así cada que cambien de entrada verán mas entradas y navegarán mas por el blog.

|✔| Puedes aprender CSS, en Hacker of the Web tenemos un manual muy bueno, aunque es básico: Manual básico de CSS.