Pubblicato il 14/09/15 - aggiornato il  | 4 commenti :

Blogger: Widget degli Articoli Casuali con Miniature Ruotanti.

Come installare un widget degli Articoli Casuali con Miniature Ruotanti in un blog su Blogger.
Per mantenere i navigatori dentro il nostro sito bisogna invogliarli a leggere altri nostri contenuti oltre alla pagina che stanno già consultando. Per questa ragione vengono installati alcuni widget che mostrano le pubblicazioni più recenti (Ultimi Articoli), i contenuti più apprezzati (Post più popolari), le ultime discussioni (Commenti Recenti) e i post con gli stessi contenuti (Articoli Simili).

La presenza di questi quattro widget è la configurazione classica per un blog su piattaforma Blogger ma si può decidere di mostrare anche altro materiale come per esempio un pulsante per scegliere un articolo a caso. Seguendo questa falsariga si può creare anche un widget per visualizzare un intero elenco di articoli scelti a caso. In questo post vedremo appunto come installare un widget che mostri degli articoli casuali con i relativi titoli e le miniature ruotanti. Il navigatore che ci cliccherà sopra sarà indirizzato al post corrispondente

articoli-casuali-miniature-ruotanti
Per l'installazione di questo gadget non occorre neppure modificare il modello. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla questo codice

<style type="text/css"> #post_casuali img{float:left;margin-right:10px;margin-bottom:10px;width:55px;height:55px;padding:3px;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);border-radius:999em;-moz-border-radius:999em;-webkit-border-radius:999em;-o-border-radius: 999em;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);} #post_casuali img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);} </style><div id='post_casuali'>
<script type='text/javaScript'>
var IPCEI_numposts=6;var IPCEI_snippet_length=150;var IPCEI_comment='Commenti';var IPCEI_disable='Commenti Disabilitati';var IPCEI_current=[];var IPCEI_total_posts=0;var IPCEI_current=new Array(IPCEI_numposts);function totalposts(a){IPCEI_total_posts=a.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<IPCEI_numposts;i++){var a=false;var b=get_random();for(var j=0;j<IPCEI_current.length;j++){if(IPCEI_current[j]==b){a=true;break}};if(a){i--}else{IPCEI_current[i]=b}}};function get_random(){var a=1+Math.round(Math.random()*(IPCEI_total_posts-1));return a};
</script>
<script type="text/javascript">
function articoli_casuali(json){for(var i=0;i<IPCEI_numposts;i++){var entry=json.feed.entry[i];var IPCEI_posttitle=entry.title.$t;if('content'in entry){var IPCEI_get_snippet=entry.content.$t}else{if('summary'in entry){var IPCEI_get_snippet=entry.summary.$t}else{var IPCEI_get_snippet="";}};IPCEI_get_snippet=IPCEI_get_snippet.replace(/<[^>]*>/g,"");if(IPCEI_get_snippet.length<IPCEI_snippet_length){var IPCEI_snippet=IPCEI_get_snippet}else{IPCEI_get_snippet=IPCEI_get_snippet.substring(0,IPCEI_snippet_length);var space=IPCEI_get_snippet.lastIndexOf(" ");IPCEI_snippet=IPCEI_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var IPCEI_commentsNum=entry.thr$total.$t+' '+IPCEI_comment}else{IPCEI_commentsNum=IPCEI_disable};if(entry.link[j].rel=='alternate'){var IPCEI_posturl=entry.link[j].href;if('media$thumbnail'in entry){var IPCEI_thumb=entry.media$thumbnail.url}else{IPCEI_thumb="https://lh3.googleusercontent.com/-QHAVnMyiszg/VHL1-qLbkTI/AAAAAAAAqMA/KjsePS2PsRQ/s48-Ic42/no-image.jpg"}}};document.write('<p>');document.write('<img alt="'+IPCEI_posttitle+'" src="'+IPCEI_thumb+'"/>');document.write('<div><a href="'+IPCEI_posturl+'" rel="nofollow" title="'+IPCEI_snippet+'">'+IPCEI_posttitle+'</a></div>');document.write('<div style="clear:both"></div></p>')}};getvalue();for(var i=0;i<IPCEI_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+IPCEI_current[i]+'&max-results=1&callback=articoli_casuali\"><\/script>')};
</script>
</div>

Lo snippet, ovvero l'incipit del post, non sarà visibile immediatamente ma sarà mostrato quando si passerà con il mouse sopra al titolo

snippet-articoli-casuali

L'impostazione più importante è quella del numero dei post da mostrare var IPCEI_numposts=6; insieme alla modifica dei codici dei colori da rendere omogenea al nostro sito. I colori sono stati introdotti con del gradiente e quindi hanno un colore di partenza e uno di arrivo. L'URL colorato di rosso è l'indirizzo della immagine di default che viene mostrata qualora nel post non ce ne siano. 


4 commenti :

  1. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  2. Bello! Funziona alla perfezione e la personalizzazione con i colori del blog mi pare super! Grazie!
    Volendo fare una sorta di aggregatore di articoli in una pagina statica, inserendo più fonti diverse di un medesimo autore, è possibile utilizzare questo widget?
    Ho provato inserendone uno e naturalmente funziona, ma inserendone più di uno mi pare ci sia un conflitto. Non vedo specificato l'url del blog, che evidentemente rileva in automatico, per cui la vedo difficile.
    Chiedo conferma o, magari, possibile soluzione.
    Ancora grazie

    RispondiElimina
    Risposte
    1. Non si possono inserire due widget perché avendo lo stesso script non funzionerebbero. In teoria si potrebbe anche risolvere cambiando il codice del secondo widget ma sarebbe un lavoraccio che poi si dovrebbe ripetere per la terza sorgente e così via.
      @#

      Elimina
    2. Immaginavo! Fa nulla, era solo un esperimento. Grazie Ernesto, prezioso come sempre!

      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