Tabella delle miniature degli Ultimi Articoli per Blogger.

Come installare il widget degli Ultimi Post in una tabella di miniature con tooltip.

Ho presentato moltissimi widget che mostrano gli Ultimi post pubblicati nel nostro sito su Blogger. Oltre a quello classico dell'elenco verticale ricordo il widget degli Ultimi Articoli con le Miniature, lo slideshow verticale e lo slideshow con Easy Slider.

Su questa stessa falsariga vado a illustrare un widget che presenta le miniature degli Ultimi post in una tabella. Ciascuna immagine è collegata all'articolo di riferimento e, passandoci sopra con il mouse, si visualizza un tooltip che mostra il titolo del post e la sua descrizione o il suo incipit.

Ci sono molte possibilità di personalizzazione riguardo al numero di miniature visualizzate e ai colori da usare. Visto che si tratta di un gadget piuttosto largo più che in una sidebar può essere inserito nel footer, sotto l'header o in una pagina statica.

Gli articoli che sono senza immagini mostreranno una miniatura di default che può essere personalizzata a piacere. Ho postato una demo del widget in una pagina statica

L'installazione del widget non presenta difficoltà visto che basta andare su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, incollare il seguente codice

<div align="center"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "Ultimi Articoli",
    numposts    = 42,              
    numchar     = 100,             
    rcFadeSpeed = 600,             
    pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgeKX53rchnoJjODaonGL8PkiC97aJA6jah_BCywP-uDRtEEoSxAleEI_M8Z8MxM8nDYK_N0MSxY4tpzsokY306WrxFYtNhu5c39gMsDMpgy-UjE-TfMd52luLBV78PEby8GrN3A7QlkV4/s200/no-image.png",
    blogURL     = "http://design-prova.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></div>
<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/AVvXsEi5b_fxJSquGEtlHX8aInX25NkA3GOvGG-YNIGa9jwCbGge3_vTEY1T9dG5v90BrZrCGiYB0f6j9NeiyRUST6qa8GXd5imYnOWcTfSMWJ1pFVW4Kz_9f7QLcX0HTc09EBD8vIkDBlZ4IHsy/s50/loading25.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:fixed;
  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>

I parametri fondamentali da modificare sono

1. L'URL del nostro sito da inserire in blogURL
2. Il numero dei post da mostrare che deve essere un multiplo di 7 (42)
3. L'immagine di default da mostrare quando non ce ne sono nell'articolo che nel codice è colorata di viola e l'immagine in GIF di caricamento del widget il cui URL è colorato di verde.
4. I codici esadecimali dei colori possono essere variati così come il titolo del widget
5. La libreria JQuery evidenziata di giallo può essere tolta nei modelli in cui fosse già presente

Fonti | Ivith e Redeando -