Pubblicato il 02/05/12e aggiornato il

Widget degli Ultimi Articoli per Blogger con icona.

Widget degli ultimi articoli per Blogger con elenco personalizzato.
Una rassegna degli Ultimi Post pubblicati sono un dato essenziale per informare il navigatore del tipo di argomenti trattati dal nostro sito. Questo serve per cercare di far rimanere il più a lungo possibile il visitatore nel blog inducendolo a aprire almeno un altro post. Una diminuzione della frequenza di rimbalzo può avere ripercussioni molto positive sul posizionamento delle nostre pagine.

Ci sono moltissimi gadget che mostrano gli ultimi articoli. Si va da quello che fa vedere tutti i post a quello che permette di visualizzare solo quelli per una singola etichetta, dal widget orizzontale con le miniature a quello verticale sempre con miniature, dallo slideshow dei titoli dei post allo slideshow delle immagini degli ultimi articoli.

Ci sono alternative estremamente sofisticate e scelte più minimaliste. Passo a illustrare quale potrebbe essere una via di mezzo presentando il gadget degli Articoli Recenti in un elenco verticale ma con uno stile particolare che ci permetta di inserire una piccola icona prima di ciascun titolo.

Questo widget è quello che attualmente sto usando in questo blog e mi era stato esplicitamente chiesto in un commento un tutorial su come installarlo. Si va su Layout > Aggiungi un gadget > HTML/Javascript e, dopo aver digitato il titolo, in Sezioni del sito, si incolla il codice seguente

<script style="text/javascript">
function ultimipost(json) {
document.write('<ul>');for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(leggi tutto)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Gen";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "Mag";
monthnames[6] = "Giu";
monthnames[7] = "Lug";
monthnames[8] = "Ago";
monthnames[9] = "Set";
monthnames[10] = "Ott";
monthnames[11] = "Nov";
monthnames[12] = "Dic";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);
if (showpostdate == true) document.write(' - ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)]+ ' ');
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');
document.write('<div id="crdt" style="font-size:70%;text-align:center"><p><a href="http://goo.gl/SEGfw">Get Widget</a></div>');
}
</script>
<script style="text/javascript">
var numposts = 12;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>
<script src="http://www.ideepercomputeredinternet.com/feeds/posts/default?orderby=published&alt=json-in-
script&callback=ultimipost"></script>
dove i dati da personalizzare colorati di rosso sono:
  1. Il numero degli articoli da mostrare (12)
  2. Per visualizzare anche la data si sostituisce true a false in var showpostdate
  3. Per mostrare anche l'inizio dell'articolo si sostituisce true a false in var showpostsummary
  4. Se si è scelto true nella precedente opzione si può scegliere il numero di caratteri dell'incipit (100)
  5. Infine si inserisce l'URL del nostro blog per acquisirne i feed
Dopo aver cliccato su Salva e se abbiamo lasciato le opzioni di default, si visualizzerà un elenco degli Ultimi Articoli con lo stile ereditato dal modello del blog che potrebbe essere così

widget-ultimi-articoli

Possiamo modificare lo stile dell'elenco per renderlo esteticamente più valido. Se per esempio al posto del puntino vogliamo visualizzare una immagine dobbiamo usare una riga di CSS di questo genere
list-style-image: url(URL IMMAGINE);
Per poterla applicare al widget ne dobbiamo però conoscere l'ID. Ci sono diversi metodi per ottenere questa informazione. Si può per esempio aprire il codice del modello e cercare il titolo del widget pigiando su F3 o Ctrl+F. L'ID sarà visibile nella riga di codice corrispondente 

id-widget

L'ID per un gadget generico è HTMLX dove X è un numero naturale determinato dall'ordine di inserimento del widget e quindi diverso da modello a modello e da blog a blog. Un sistema anche più semplice consiste nell'aprire il widget cliccando sopra a Modifica o sull'icona del cacciavite e della chiave inglese. La parte finale dell'URL della finestra che si apre indicherà l'ID del widget

id-del-widget

Come vedete in questo caso abbiamo HTML4 come ID. Per visualizzare l'icona al posto del puntino dobbiamo quindi modificare lo stile dell'elenco solo in questo gadget. Andiamo su Modello > Modifica HTML > Procedi, cerchiamo la riga ]]></b:skin> e, subito sopra, incolliamo questo codice

#HTML4 li {
list-style-image: url(https://lh3.googleusercontent.com/-A9zmBdgNiYc/T5-RPwNMwhI/AAAAAAAAX5c/1nv2SropIiQ/s14/red-check.png);
}

dove HTML4 è l'ID del widget ed è funzione del modello e l'URL della icona è colorato di rosso. Ho scelto una icona di 14x11 pixel che può essere sostituita con un'altra anche di diverse dimensioni. Si salva il modello e il nostro gadget assumerà l'aspetto del primo screenshot

widget-ultimi-articoli[5]

Nella parte finale del widget c'è un link che conduce a questo articolo e che serve per facilitare l'installazione del gadget a chi lo avesse apprezzato aprendo una pagina di un blog in cui fosse stato inserito. Mi rendo conto che in taluni layout questo collegamento può risultare antiestetico. Per toglierlo occorre incollare, sempre sopra alla riga ]]></b:skin>, questo CSS

#crdt {display:none;}  

e salvare nuovamente il template.




33 commenti :

  1. grazie che ai messo anche come mettere l'icona, ti vorrei chiedere anche, perchè non mi trovo più posta un commento sotto il post, per caso mi manca qualche stringa di codice?BLOG:http://ps3gameita.blogspot.it, ho provato a fare un altro modello ma non me lo fa salvare e mi da errore: bx-d2k0hw segnalare a blogger, come lo segnalo?

    RispondiElimina
    Risposte
    1. @Manager
      Il tuo problema forse deriva dal modello. Per segnalare al forum vai qui
      http://productforums.google.com/forum/#!forum/blogger-it

      Elimina
  2. no, non è il template secondo me è qualche stringa di codice che non ho inserito.... ma non so cosa.... guarda,
    fatti da me con lo stesso modello
    1:http://ps3gameita.blogspot.com/ NON SI VEDE COMMENTO
    2:http://marisaavonitalia.blogspot.com/ SI VEDE COMMENTO
    una cosa che ho notato è che nel primo modello sulla home non si vedono nemmeno il numero dei commenti;
    se ti può essere utile i template li ho ricavati da questo sito:
    http://www.pimp-my-profile.com/generators/blogger.php

    RispondiElimina
  3. appena installato , grazie ancora per il tuo lavoro preciso!

    RispondiElimina
  4. mi chiedevo se si può fare anche con i post più seguiti!

    RispondiElimina
  5. @manager
    Se e' un tuo errore non vedo come possa aiutarti.
    @Caterina
    Se mi posti l'Irl del post vedo che si può fare

    RispondiElimina
  6. Ernesto, volevo chiederti se fosse possibile in questo gadget disporre gli articoli in due file, quattro in una fila e quattro, sotto, nell'altra.
    Grazie.

    RispondiElimina
    Risposte
    1. @Veronica
      Con questo codice no ma potrebbe essere una sfida :)

      Elimina
  7. Sto guardando tutti i tuoi post e ho appena notato che mi hai risposto :)
    Adesso sono su questo che trovo bellissimo http://www.ideepercomputeredinternet.com/2012/03/widget-degli-ultimi-post-con-miniature.html
    L'ho provato ma la richiesta è la stessa: qui si può? Grazie ancora.
    (ma come fai a rispondere a tutti? :)

    RispondiElimina
    Risposte
    1. mi piacerebbe farti vedere cosa ho in mente ma dovrei linkarti un blog di un'altra blogger. Non credo si possa fare, giusto?

      Elimina
    2. @Veronica
      Non si può fare neppure con quello. Puoi tranquillamente incollare l'URL del blog in cui hai visto il widget, dubito che sia di Blogger.

      Elimina
    3. e infatti c'hai proprio ragione.
      http://www.cavolettodibruxelles.it/. Guarda che bello. C'è un solo post in home e poi più sotto quel widget.

      Amo Blogger (giusto perché ospita il mio blog) ma comincio a pensare che abbia un po' di limiti dal punto di vista grafico.
      Pensi che si possano superare? ;)

      Elimina
    4. @Veronica
      Si tratta di un tema Wordpress, esattamente questo
      http://www.theukmap.com/detail_wordpress_theme_1796.php
      e qui c'è la demo
      http://www.theukmap.com/preview.php?type=wordpress&theme_id=1796
      Sappiamo quali sono i pregi e i difetti di Blogger e Wordpress. Quando si inizia conviene usare Blogger, se si vuole un sito più sofisticato allora serve Wordpress però anche in quel caso ci sono diversi problemi e si devono gestire da soli molte problematiche che in Blogger vengono sbrigate direttamente da Google.

      Elimina
  8. Sì, lo so, infatti me ne rimango dove sto. Tra l'altro in genere sono una habitué e non cambio facilmente, malgrado certe scomodità.
    Vedrò come risolvere perché quando mi intestardisco... :)
    Grazie tante, Ernesto. Sei sempre disponibilissimo.

    RispondiElimina
  9. Ernesto yeeeaahhhh!!!
    Voglio condividere con te il mio successo :)... te lo avevo detto che se mi intestardisco...
    http://www.bloggerplugins.org/2011/09/recent-posts-thumbnails-blogger-widget.html
    e poi ho cambiato qualcosa (facilissimo!)

    RispondiElimina
    Risposte
    1. @Veronica
      Non è certo un widget su due colonne come mi avevi chiesto ma è esattamente identico a questo
      http://www.ideepercomputeredinternet.com/2012/03/widget-degli-ultimi-post-con-miniature.html

      Elimina
    2. è vero, è vero. Solo che non l'avevo capito. Dall'anteprima che davi tu mi sembrava dovesse rimanere così. Con l'anteprima di quell'altro invece, che era come volevo io, facendo varie modifiche sono ritornata a quello che proponevi tu :)
      questioni di ignoranza.
      tanto te l'ho già scritto nel post dove sospendevi per tot tempo le pubblicazioni che se questo blog migliora da due anni a questa parte è grazie a te.

      Elimina
    3. la verità è che stiamo parlando sul post sbagliato. è proprio quest'ultimo che mi segnali tu quello giusto, quello di cui ti chiedevo se potevo mettere nelle due file.

      Elimina
    4. E poi forse è stata una questione di comunicazione. File e colonne.
      Ora chiudo :)

      (anzi continuo a stare qui che adesso il mio problema è come cambiare lo stile di questo elenco che non mi sta riuscendo. document.write non sta funzionando e mi da errore 500)
      'notte.

      Elimina
  10. ciao,
    scusa se approfitto sempre della tua pazienza.... ho questo problema.
    non vedo più i miei gadget solo nella home!!
    guarda www.besanaweb.it
    solo nella home non vedo i gadget 0:
    grazie mille se vorrai rispondermi!!

    RispondiElimina
    Risposte
    1. @besanaweb
      Ho visto. Fai mente locale e pensa a quello che hai cambiato nel modello. Spero tu abbia salvato una copia del template di qualche tempo fa.

      Elimina
  11. Buon pomeriggio, Ernesto. Fra tutti i widget sui ultimi post presentati, questo credo sia il più comodo per il mio blog. Solo una domanda: è possibile inserirlo direttamente nel modello e non in un widget html/javascript? Intendo sulla falsariga del widget post correlati con l'elenco dei titoli fra il post e i commenti.

    RispondiElimina
    Risposte
    1. @BastetLaDeaGatta
      Non te lo saprei dire. Bisognerebbe provare. Prima salva il template e il codice, prima di incollarlo convertilo in XML con questo strumento
      http://blogcrowds.com/resources/parse_html.php

      Elimina
    2. No, purtroppo non funziona. Ho provato a inserirlo sia dopo la prima stringa
      < div class='post-footer-line post-footer-line-1' > che dopo la seconda (compare due volte). Cercherò un'altra soluzione...

      A ogni modo, grazie mille.

      Elimina
    3. Aggiornamento: in linea di massima ci sono riuscita, grazie a Feed2JS e al sito che hai linkato sopra (FeedBurner purtroppo lascia un antiestetico logo). Ora devo solo sistemarlo. ;)

      Elimina
  12. Salve,
    ho inserito il widget Ultimi articoli. Non si visualizza con Chrome, invece funziona bene con IE e firefox. Il sito è Tutto su Roma sparita (www.romacult.blogspot.it). che devo fare. grazie
    pg

    RispondiElimina
    Risposte
    1. Non hai usato questo codice ma mi pare quello di un altro widget sempre di questo blog. Il widget non funziona perché hai sbagliato a inserire l'URL dei feed. Non è
      http://romacult.blogspot.it/feeds/posts/default
      ma
      http://romacult.blogspot.com/feeds/posts/default
      Ricordati sempre di mettere nei widget l'URL canonico con il .com e non quello con il .it localizzato in italiano
      @#

      Elimina
  13. Salve, ho inserito il widget ultimi articoli ma non riesco a visualizzarlo...ho controllato anche io il feed ma è corretto..(maghelladicasa.blogspot.com) ma non riesco proprio a visualizzarlo...
    cosa potrei avere sbagliato?
    Grazie...
    Stefania

    RispondiElimina
    Risposte
    1. Prova a incollare il codice così come è con l'URL del mio blog. Se ti funziona significa che sbagli a sostiuirlo. Uno degli errori più comuni è quello di mettere .it invece che .com mentre un altro è quello di mettere la slash finale in modo che alla fine ce ne sono due. Se invece il codice non ti fuznonasse allora fammelo sapere ma cfredo non possa essere così visto che viene usato da anni senza problemi. Un'altra possibilità è che tu abbia un altro widget simile e che quindi possa creare incompatibilità
      @#

      Elimina
  14. Ciao Ernesto ho un problema... ho installato il widget però vorrei che i simboli (v) stessero più vicino al titolo... come stanno nel tuo widget degli ultimi articoli..
    questo è il blog http://www.plettrando.com/

    RispondiElimina
    Risposte
    1. Non è cosa semplice. Probabilmente avrai aggiunto un codice come questo

      #HTML10 li {
      list-style-image: url(URL-ICONA);
      }
      Prova a modificarlo in questo modo

      #HTML10 li {
      list-style-image: url(URL-ICONA);
      padding-left:0px !important;
      }

      oppure aggiungi quest'altro codice
      #HTML10 ul li {
      padding-left:0px !important;
      }
      Con il padding purtroppo non si possono aggiungere numeri negativi come per il margin
      @#

      Elimina
  15. Ciao sa per caso come si centra il titolo nel widget Articoli piu' letti nel sito sotto?
    http://infoutili.blogspot.it/
    Grazie

    RispondiElimina
    Risposte
    1. @# Prova con questo codice
      #PopularPosts1 > h2 {text-align:center !important;}
      da aggiungere sopra alla riga con /b:skin

      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.