Pubblicato il 22/12/12 - aggiornato il  | 33 commenti :

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.

widget-ultimi-articoli
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://lh3.googleusercontent.com/-nb8LCtw09gQ/UNWvVmIjdGI/AAAAAAAAd7U/dXS66xYkSe4/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://lh6.googleusercontent.com/-JXchI0yx-AI/UNWuIYXP0HI/AAAAAAAAd7E/EOVcKEnLpM0/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 -


    33 commenti :

    1. E' una bella idea. Inserita in una pagina statica da usare come home, potrebbe in parte sostituire la visualizzazione dinamica flipcard.

      Ho creato un nuovo blog e sto lottando da ieri pomeriggio perché non viene applicata nessuna modifica. Se mi arrabbio, torno a un modello classico e inserisco questo widget.

      Ah... nel caso non dovessimo sentirci prima di Natale, ti auguro Buone Feste.

      RispondiElimina
    2. ottimo, ho creato una pagina statica per gli ultimi articoli, però c'è un problema: il riquadro della descrizione è troppo in basso e troppo a destra, quindi si vede soltanto per i primi post a sinistra, spostandosi ai post sulla destra scompare oltre lo schermo...
      Mi puoi indicare dove andare a modificare e in che modo? Grazie.

      RispondiElimina
      Risposte
      1. @...
        Il CSS è #mini-gallery rp-item rp-child
        Prova a modificare top e right

        Elimina
      2. Ti ringrazio, ma non funzionava. Ricodandomi di una tua precedente risposta per un altro problema ho provato a sostituire fixed a absolute e va benissimo.

        Elimina
      3. @GiancarloChieco
        Grazie dell'idea. Ho cambiato il codice :)

        Elimina
      4. Sono contento, il mio solito disturbo questa volta è stato utile.

        Elimina
    3. Risposte
      1. @IvanDeFelice
        Si può far tutto però non c'è un parametro ben definito damodificare. Si dovrebbe rimettere mano a tutto il codice perché le larghezze sono collegate le une alle altre.

        Elimina
    4. Ernesto prima di tutto grazie per questo meraviglioso sito che riempie i nostri blog =)
      Volevo dirti che ho appena lasciato le visualizzazioni dinamiche per i troppi problemi e sono tornato al vecchio modello, però l'inserimento di queste miniature risolve tante cose.
      Io ho un solo problema (scusa l'ignoranza ma veramente ne capisco poco di informtica), quando passo con il cursore sopra le immagini mi esce il nome dell'articolo bello grande e sotto ad alcuni le prime parole dello stesso mentre sotto ad altri diciture del tipo "Normal.dotm 0 0 220 .... etc etc Artistico 17 4 2639..." come si aggiusta?

      infine la finestra che compare (stesso problema di giancarlo) compare sempre in fondo alla pagina non è possibile che la finestra appaia sempre in prossimità del cursore?

      RispondiElimina
      Risposte
      1. TheMangoBlack
        Non mi viene in mente niente che possa aiutarti per i titoli. Prova a inserire le Descrizioni nella preferenza di ricerca
        http://www.ideepercomputeredinternet.com/2012/03/la-descrizione-nelle-preferenze-di.html
        Invece il tooltip con il nuovo codice dovrebbe essere visibile più vicino alla miniatura.

        Elimina
      2. ho messo il codice che c'è qui sopra però la finestra appare sempre in basso e lontana dalla miniatura, magari per capire cosa intendo puoi provare a vedere sul mio blog? =) ti ringrazio per la risposta celere ed efficiente, appena posso provo a inserire le descrizioni.

        Elimina
      3. TheMangoBlack
        Ho visto ma purtroppo non tutti i problemi sono risolubili con facilità. Il tooltip appare subito sopra alla parte bassa ed è in funzione di quanto si sia scrollata la pagina. Come tentativo prova a sostituire
        top:0%;
        right:0%;
        con
        top:-20%;
        right:-10%;
        e poi guarda come risponde. Eventualmente prova anche a cambiare fixed con absolute

        Elimina
      4. No figurati io non ci capisco molto quindi già ti ringrazio per tutto quello che fai!..
        Comunque ho provato a sostituire anche con altri numeri ma non cambia niente, e se metto absolute la finestra non compare nemmeno.

        Elimina
    5. inserito anche questo! ma come faccio a variare le dimensioni della tabella non riesco a capirlo grazie!!! se passi da me posso offrirti una fetta di torta :-)

      RispondiElimina
      Risposte
      1. @# Il widget è stato creato per essere largo 532 pixel con ciascuna miniatura da 72 pixel, vedi i dati width:532px; width:72px; e height:72px; Si possono modificare questi parametri però poi devi ricalibrare. Ti consiglio all'inizio di cambiare 72 con un altro numero in tutte e quattro le occorrenze poi di vedere quale numero mettere al posto di 532 facendo dei test. Fai anche il calcolo 7x72=504 + 6x2 + 6x2 (di margini) = 532

        Elimina
    6. ciao ti ringrazio sono riuscito a modificare quasi tutto, ma non capisco come modificare il colore del titolo e il carattere e altra cosa, come fare a levare il bordo del widget, nel senso, ho messo lo sfondo bianco, ma si vede sempre il profilo del widget come se ci fosse l'ombra e io vorrei levarlo per renderlo omogeneo col bianco del sito.

      grazie mille

      RispondiElimina
      Risposte
      1. Per l'aspetto del titolo cioè "ULTIMI ARTICOLI" devi operare su questo blocco

        #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;

        in cui il font è century gothic e il colore è color:#cdcdcd;
        Per togliere le ombre devi eliminare tutte le righe che contengono shadow
        come per esempio queste

        -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);

        @#

        Elimina
    7. Ciao Ernesto, grazie e complimenti per tutti i tuoi post..
      Se posso volevo chiederti se è fattibile inserire in questo gadget il "target _blank" per aprire i link in nuove finestre, oppure se possibile usare un css per tutti i link di un blog che si aprano in nuove...

      RispondiElimina
      Risposte
      1. Se conosci un po' di javascript puoi provare a aggiungere target="_blank" a questa riga
        < a href="' + posturl + '" > mantenendo la stessa struttura. Purtroppo in questo momento non ho tempo per testare. Per quello che riguarda l'apertura di tutti i link in un'altra scheda leggi questo post
        http://www.ideepercomputeredinternet.com/2011/04/come-aprire-tutti-i-link-di-un-blog-su.html
        @#

        Elimina
      2. ho inserito e testato: a href="' + posturl + '"target="_blank" funziona grazie! sei grande!

        Elimina
      3. scusate l'intromissione :) dove va inserita questa parte di codice per avere l'apertura degli articoli in un'altra scheda? potreste spiegarlo con precisione? grazie mille, sarebbe molto utile :)

        Elimina
      4. Cerca la riga
        <div class="rp-item"><a href="' + posturl + '">
        che si trova all'incirca nel mezzo del codice e modificala in questo modo
        <div class="rp-item"><a href="' + posturl + '"target="_blank">

        I link dovrebbero aprirsi in un'altra scheda
        @#

        Elimina
      5. grazie mille, risolto :) complimenti per il sito, lo consiglierò a tutti i miei amici e colleghi ;)

        Elimina
    8. Salve amici, siete i numeri uno. Consigli originali, utili e spiegati benissimo. Siete per me l'unico punto di riferimento e spero tanto che riusciate ad aiutarmi. Sto costruendo con blogger un sito che tratta i trucchi di Paperama http://trucchipaperama.blogspot.it/. Mi sono avvalso di molti vostri tutorial, ma avrei la velleità di inserire un widget all'interno del sito, in cui gli utenti possono accedere immediatamente al livello interessato (senza dover scorrere la home). Ho pensato quindi a introdurre nel sito una tabella, di cui vi posto uno schizzetto http://i59.tinypic.com/117wzlw.jpg . Secondo voi è realizzabile da un comune mortale? Mi dareste qualche dritta su come realizzarlo? Quale programma usare per convertire questo progetto in un codice javascript da inserire nel widget. Confido molto nella vostra professionalità, vi ringrazio per il contributo che mi darete.

      RispondiElimina
      Risposte
      1. Credo sia molto difficile su Blogger. Prova a vedere se ti può essere utile una tabella usata come Galleria con Paginazione che comunque è cosa diversa da quello che desideri
        http://www.ideepercomputeredinternet.com/2012/12/galleria-foto-blogger.html

        Elimina
      2. ovviamente e da chiedere ad ernesto ma quando io facevo informatica utilizzavamo dei metodi che rimandavano a delle zone della pagina html e questi codici possono essere inseriti come widget in html solo che non ricordo come mi ricordo che era molto semplice era come un richiamo della parola

        Elimina
    9. Grazie Ernesto .... era quello che cercavo, pulito e semplice
      Mi sono iscritta al tuo sito molto volentieri e spero ricambierai ^_^
      Già che ci sono vorrei chiederti se il bordo che è color grigio e carattere del titolo si possono modificare ..... fammi sapere !!!
      Grazie mille Ciaooooooooooo
      ^_^ Valentina ^_^

      RispondiElimina
    10. Grazie Ernesto .... era quello che cercavo, pulito e semplice
      Mi sono iscritta al tuo sito molto volentieri e spero ricambierai ^_^
      Già che ci sono vorrei chiederti se il bordo che è color grigio e carattere del titolo si possono modificare ..... fammi sapere !!!
      Grazie mille Ciaooooooooooo
      ^_^ Valentina ^_^

      RispondiElimina
    11. E se si possono modificare le misure della tabella, magari rendendola un rettangolo orizzontale
      Semmai dimmi dove, sul codice, devo apportarle di preciso queste modifiche
      Grazie ancora Ciao ^_^

      RispondiElimina
      Risposte
      1. Per il bordo modifica il codice di questo colore
        border:4px solid #6FBAFD;
        mentre 4px rappresenta lo spessore de bordo.
        Per mettere tutto in una riga orizzontale prova a mettere
        numposts = 7, al posto
        numposts = 42,
        nelle prime righe del codice
        @#

        Elimina
      2. Dimenticavo. Per la famiglia di caratteri aggiungi la riga
        font-family:Georgia;
        subito sotto a
        font-size:16px;
        Ovviamente al posto di Georgia puoi mettere la famiglia di caratteri che più ti piace
        @#

        Elimina
    12. Chido scusa se disturbo, si può aggiungere un'etichetta?

      RispondiElimina
      Risposte
      1. Il post è molto vecchio quindi non so se il codice funzionerà ancora. Cosa intendi per aggiungere una etichetta? Nel senso di mostrare gli ultimi post solo relativi a una etichetta? No. Ci sono altri widget per questa funzionalità ma non questo
        @#

        Elimina

    Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
    Info sulla Privacy