Pubblicato il 02/05/14e aggiornato il

Widget degli Articoli Casuali con miniature per Blogger.

Come installare il widget dei Post Casuali per Blogger con Miniature completamente personalizzabile.
Fino a qualche mese fa era perfettamente funzionante il gadget dei Post Casuali che mostrava ai lettori degli articoli scelti a caso tra quelli pubblicati. Da quando Blogger ha modificato la procedura per widget esterni questo come altri gadget ha smesso di funzionare. Ho pensato quindi di riproporre una versione funzionante che si installa mediante codice senza bisogno di accedere alle API di Blogger.

Si tratta di un widget personalizzabile nel numero degli elementi e in altri parametri che credo incontrerà il favore di molti lettori. Non ci soni difficoltà di installazione visto che non è neppure necessario modificare il modello ma solo usare un Elemento pagina.

articoli-casuali-bloger-con-miniature

Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla questo codice

<style>
#post-casuali img{border-radius: 10px;float:left;margin-right:5px;
width:75px;height:75px;background-color: #F7F7F7;padding: 3px;transition: all 0.3s linear 0s;}
#post-casuali img:hover{opacity: 0.6;}
ul#post-casuali {list-style-type: none;padding: 0px;}
#post-casuali a {font-size: 16px; padding: 0px auto 5px;}
#post-casuali a:hover {text-decoration: none;}
.rp-snippet {font-size: 12px; text-align:justify; background: none; padding: 4px; margin-right: 6px;}
#post-casuali span {}
#post-casuali li {margin-bottom: 10px;border-bottom: 1px solid #ddd; padding: 4px;}
</style>
<ul id='post-casuali'>
<script type='text/javaScript'>
var rdp_numposts=6;
var rdp_snippet_length=100;
var rdp_info='yes';
var rdp_comment='Commenti';
var rdp_disable='Commenti Disabilitati';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.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<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'> 
function post_casuali(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="//lh5.googleusercontent.com/fo1tWr4w3-nC-xzirExn-JFywzN8UuC1-TUSw9MKednv=s172-no"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div  class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<br/><div class="rp-snippet">'+rdp_snippet+'</div><div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=post_casuali\"><\/script>')};
</script>
</ul>

Si salva e si posiziona nella sidebar. Le personalizzazioni più importanti riguardano
  1. La dimensione delle miniature proposta di 75 pixel
  2. La dimensione dei font del titolo proposta a 16 pixel
  3. La dimensione dei font dello snippet proposta a 12 pixel
  4. Il numero dei post mostrati proposti come 6
  5. Il numero dei caratteri dello snippet, 100 quello proposto
  6. La giustificazione dello snippet (text-align:justify)
  7. La visualizzazione o meno dello snippet (rdp_info='yes'; oppure no)
  8. L'URL della immagine di default se non ce ne fossero (colorato di viola)
  9. Codici dei colori, stile dei bordi, opacità e durata della transizione

MOSTRARE IL WIDGET SENZA DATA


Se non vi piace la data inserita subito sotto il titolo basta usare quest'altro codice

<style>
#post-casuali img{border-radius: 10px;float:left;margin-right:5px;
width:75px;height:75px;background-color: #F7F7F7;padding: 3px;transition: all 0.3s linear 0s;}
#post-casuali img:hover{opacity: 0.6;}
ul#post-casuali {list-style-type: none;padding: 0px;}
#post-casuali a {font-size: 16px; padding: 0px auto 5px;}
#post-casuali a:hover {text-decoration: none;}
.rp-snippet {font-size: 11px; text-align:justify; background: none; padding: 4px; margin-right: 6px;}
#post-casuali span {}
#post-casuali li {margin-bottom: 10px;border-bottom: 1px solid #ddd; padding: 4px;}
</style>
<ul id='post-casuali'>
<script type='text/javaScript'>
var rdp_numposts=6;
var rdp_snippet_length=100;
var rdp_info='yes';
var rdp_comment='Commenti';
var rdp_disable='Commenti Disabilitati';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.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<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'> 
function post_casuali(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="//lh5.googleusercontent.com/fo1tWr4w3-nC-xzirExn-JFywzN8UuC1-TUSw9MKednv=s172-no"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div  class="rp-info">'+rdp_commentsNum)+'</div></span>'};document.write('<br/><div class="rp-snippet">'+rdp_snippet+'</div><div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=post_casuali\"><\/script>')};
</script>
</ul>

Dopo aver salvato si otterrà questo risultato


articoli-casuali-senza-data

Le personalizzazioni sono le stesse del codice precedente.




17 commenti :

  1. Dici sia questo il motivo per cui sia Firefox che Chrome andavano in crash quando tentavo di accedere al modello? Cioè... inserivo il widget e lì per lì funzionava; dopo un po' mi si bloccava tutto. -.- Da quando ho tolto il widget sembra tornato tutto a posto.

    RispondiElimina
  2. Non te lo so dire ma penso di no. I widget installati hanno continuato a funzionare se però si provava a modificarli smettevano di farlo
    @#

    RispondiElimina
    Risposte
    1. Bah... chissà a cos'era dovuto. A ogni modo questa nuova versione non mi ha dato ancora problemi.

      Elimina
  3. Mi piace molto, lo metto sul mio blog personale.

    RispondiElimina
  4. Ciao Ernesto ti disturbo perchè volevo installare linkwithin in un blog e non ci riesco...gìho cercato e mi dice che nn funziona piu'....ci sono alternative? grazie

    RispondiElimina
    Risposte
    1. Chi mi fa delle domande sul blog non disturba mai a meno che non pretenda cose che richiedano molto tempo. Per installare LinkWitthin leggi qui
      http://www.ideepercomputeredinternet.com/2014/03/linkwithin-blogger-template.html
      Come alternativa prova questo
      http://www.ideepercomputeredinternet.com/2013/02/related-posts-with-thumbnails-for-blogger.html
      @#

      Elimina
    2. sei sempre gentilissimo..il fatto è che lo ho installato tempo indietro in 2 blog,adesso nn si riesce piu'...cmq proverò

      Elimina
    3. fatto ora come dice nel primo indirizzo che mi hai dato...sei un mitoooo

      Elimina
  5. Ciao Ernesto,

    volevo chiederti un aiuto in merito a un problema che ho sul blog. (piattaforma blogger)
    All'improvviso la miniatura degli ultimi post pubblicati non compare correttamente. Nel senso che non viene inserita l'immagine automaticamente dal post ma compare l'immagine standard che di solito dovrebbe comparire qualora il post sia sprovvisto di foto.
    Il problema si è presentato all'improvviso.
    Può esserci un codice che inibisce la funzione oppure si è sconfigurato qualcosa?
    Ecco il link del blog http://www.sportbusinessmanagement.it/

    Grazie mille per il supporto.
    Giuseppe Berardi

    RispondiElimina
  6. Se può essere utile ho notato che caricando le immagini, blogger ha modificato il codice html per le immagini.

    Ad esempio:

    Prima veniva generato il seguente codice:



    Adesso invece

    RispondiElimina
    Risposte
    1. Purtroppo non ti so rispondere. Ho notato anche io che i post condivisi su Facebook da qualche giorno mostrano una miniatura sbagliata ma credo che tu ti riferisca al widget. Se non hai cambiato nulla nel template si tratta di uno dei tanti "misteri di Blogger"
      @#

      Elimina
    2. A quanto ho capito leggendo sul forum di supporto, si tratta di un cambiamento nella gestione delle immagini da parte di Blogger. Gli URL sono passati da http:// a https:// quindi gli script che generano le miniature andranno modificati (una cosa del genere è successa qualche mese fa con i widget di terzi aggiunti tramite generatore).

      Elimina
    3. Sì. Domani o dopodomani ci farò un post
      @#

      Elimina
    4. Finché la situazione non tornerà pian piano alla normalità, suggeriscono di cancellare manualmente la s dall'indirizzo delle immagini quando si aggiungono ai post.

      Elimina
    5. Si è vero. Il problema sta nell'url. Togliendo la s manualmente l aminiatura compare correttamente.
      Grazie mille per il supporto.

      Elimina
    6. io ho provato a togliere la s e comunque non funziona.
      proverò ad aspettare.

      Elimina
    7. Sembra che non si vedano le miniature in alcuni widget e che togliendo la s dopo http si risolva. Domani o nei giorni successivi farò dei test più approfonditi sperando che si risolva tutto da solo visto che pare si tratti di un bug di Blogger già noto anche agli stessi ingegneri
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.