WIDGET DE ARTICULOS RECIENTES PARA BLOGGER

WIDGET DE ARTICULOS RECIENTES PARA BLOGGER.

Si queréis verlo en acción podéis verlo en este mismo bloc en la pagina principal.

Existen varios widgets para mostrar las entradas de Blogger, pero muchos están anticuados o son bastante sosetes.

Pensando un poco en este tema, he diseñado este panel en el que mostraremos los artículos del blog de una forma mas actual y profesional.

 Esta realizado utilizando jQuery, JSON y CSS3, y nos permite mostrar tantas entradas como queramos.

También, como podéis observar, al pasar el cursor sobre cualquiera de las imagenes, nos aparece un tooltip que nos informa del titulo y un pedacito de texto de dicho articulo.

Este widget, por su tamaño, esta especialmente indicado para ponerlo en un gadget HTML grande, como por ejemplo debajo de las entradas o en el footer.

Si te gusta y quieres ponerlo en tu blog, copia el siguiente código y pegalo en un gadget HTML. Tienes que escribir la url de tu blog donde esta indicado en rojo para que se vean tus entradas.

 También puedes indicar la cantidad de artículos que quieres mostrar, indicándolo donde esta en color verde, pero siempre deben de ser de 7 en 7, como por ejemplo 28, 35 o 42.

Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:

1-Un clic en “Diseño”

                                                                     

2-Clic en “Añadir un gadget”

                                                                     

3-Busca el widget que dice “HTML-Javascript” y ábrelo

                                                                               

4-Coloca el siguiente código en el interior

                                                                               

<center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "Articulos recientes",
    numposts    = 42,             
    numchar     = 100,           
    rcFadeSpeed = 600,           
    pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVPgK6sjx5KyeGc6Mji7Hoa2izCaoqAQFkc75qVcPp0RP21zs3PKNHlo3FBbL1ijFuVqQcpteEAJpiCbUaTVrhSJ9Elh-LcDVq3VPAvHuQbGhQ8pe_LF090ynPMDu2xdlf5bTzEBprNS4/s204/images.jpeg",
    blogURL     = "http://urldetublog.blogspot.com";
</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="mini-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></center>
<style type="text/css">
#mini-gallery {
  width:532px;
  margin:0px auto;
  font:normal 11px Verdana,Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#7E7E7E;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}

#mini-gallery h2 {
  font:bold 18px century gothic;
  color:#cdcdcd;text-align:center;
  text-shadow:1px 1px 1px black;
  text-transform:uppercase;
  margin:2px 2px 2px;letter-spacing:1px;
  padding-top:5px;padding-bottom:10px;

}

#mini-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW8DCH6ngU4O83KLRwAVn5Q_Jz8Q-Nn6lWbvqKW7SBmvgbaVrB-aI2zsyoC2iF2fTPpab0EVsGd70O3UEvv3P0-kLj2XxfZmCFcPU4WSZQAkO7-ytsZZQUWK5dywz1_r3DbkzofXyApw0/s48/loading-white.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}

#mini-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}

#mini-gallery .rp-item img:hover {-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);}

#mini-gallery .rp-item .rp-child {
  position:absolute;
  top:0%;
  right:0%;
  z-index:1000;
  width:200px;
  background-color:white;
  border:4px solid #6FBAFD;
  -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  box-shadow:0px 0px 3px rgba(0,0,0,0.7);
-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
}

#mini-gallery .rp-item .rp-child h4 {
  font-size:16px;
  margin:0px 0px 5px;
  color:#0874CC;
-webkit-text-shadow: 1px 1px 1px #000000;-moz-text-shadow: 1px 1px 1px #000000;text-shadow: 1px 1px 1px #000000;
}

#mini-gallery .rp-item:hover .hidden {display:block;}
</style>

Despues de haber insertado el código, un clic en  "Guardar"

 Fecha de la Publicación; 29-07-2019

 Fuente; redeando

 Publicado por;