| |

Script para mostrar Nuevas Entradas

¿Haz visto la sección "Nuevas Entradas" en la barra lateral de 100 Recursos y demás blogs de 100 Sitios?

Este pequeño script es una buena estrategia para evitar las visitas rebote en las web, ya que si alguien accesa a nuestro blog desde Google, y accede a un post, podrá ver el contenido más reciente que hayamos publicado y seguramente le interese y también lo vea.

También causa una bonita impresión de nuestro blog, y además, si contamos con varios blogs podemos mostrar el contenido más reciente de varios blogs. Por ejemplo, en 100 Recursos mostramos 2 nuevas entradas de 100 Recursos y 2 nuevas entradas de SFM Diario.

¿Te gustaría tener un formulario de contacto en tu blog? Descubre cómo crear uno haciendo clic aquí.



Para agregar el script en tu blog (creado con blogger) debes:
- Acceder a Blogger con tu cuenta.
- Ir a la sección "Diseño" del blog donde pondrás el Script de Nuevas Entradas.
- Dar clic en "Añadir un Gadget" en el área donde quieres el script.
- Buscar y dar clic en "HTML/Javascript"
- Pegar el código que se muestra más adelante.
- Guardar los cambios.

Para agregar el script en tu blog (creado en otra interfaz) o un sitio web debes pegar el código en el área donde deseas que aparezcan las nuevas entradas.

El código del script es:
<style type="text/css">
img.recent_thumb {padding:2px;width:70px;height:70px;border:0;
float:left;margin:5px 10px 10px 0; border: 1px 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>
var numposts = 2;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 75;</script>
<script src="http://www.100recursos.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs"></script>
Datos que puedes cambiar: Busca lo siguiente: "http://www.webaholic.co.in/other/no-image.jpg" y puedes cambiarla por una imagen que tu desees que aparezca cuando un post no contiene imágenes para aparecer miniaturas.

Al final aparecen unas líneas de código que empiezan con "var". Esas son variables con características que puedes modificar, activar/desactivar. A continuación las detallamos:

var numposts = 2; // es la cantidad de entradas nuevas que se mostrarán.

var showpostthumbnails = true; // "true" activa las imagenes en miniatura, si lo cambias por "false" no se mostrarán.

var displaymore = true; // "true" activa un pequeño enlace después de cada entrada que dice "Más", si lo cambias por "false" no lo mostrará.

var displayseparator = true; // Muestra un separador (guiones) debajo de cada entrada.

var showcommentnum = true; // Muestra la cantidad de comentarios que tiene la entrada.

var showpostdate = true; // Muestra la fecha de publicación de la entrada.

var showpostsummary = true; // Muestra un pequeño resumen del contenido del post.

var numchars = 75; // *sólo funciona si la variable anterior está en valor "true". ** Configura la cantidad de caracteres que se mostrarán en el resumen del contenido del post.

Por último, en el siguiente pedazo de código:

<script src='http://www.100recursos.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Cambia el link que está en rojo por la url de tu blog, o en todo caso, cambia el link completo por el enlace a Feeds de tu web. Si quieres mostrar nuevas entradas de varios blogs como en 100 Recursos, simplemente deberás duplicar ese último pedazo de código y escribir las url correspondientes.

Referencias: NUEVAS ENTRADAS, ENTRADAS RECIENTES EN BLOGGER, SCRIPT DE NUEVAS ENTRADAS, UTILIDADES BLOGGER, CODIGO PARA MOSTRAR ENTRADAS.

1 comentario:

  1. Graciaaassss estaba buscando este script de nuevas entradas, me ha servido, muy bien explicado gracias!!!

    ResponderEliminar

Por favor evita comentarios fuera del tema. Si necesitas ayuda con algo fuera de tema hazlo en Solicitar Ayuda. Agradecemos tus comentarios :)