Pubblicato il 04/09/10 - aggiornato il  | 35 commenti :

Come personalizzare il widget dei post più popolari in Blogger.

Personalizzazione del widget dei Post più popolari di Blogger riguardo alla dimensione delle miniature, larghezza e altezza del gadget.
Il widget dei Post più popolari ha da pochi giorni fatto la sua comparsa in Blogger e può essere inserito attraverso la Bacheca di Blogger in Draft. Le personalizzazioni offerte dal servizio sono ancora minime e non sempre ben funzionanti visto che si tratta ancora di un gadget sperimentale. Vediamo come ovviare a un paio di queste manchevolezze, ricordando che il widget si basa su un elenco e su delle miniature, quindi il suo aspetto dipenderà dallo stile che il nostro modello ha per questi due elementi.

Come diminuire il numero dei post più popolari visualizzati
Uno dei problemi maggiori è che di default vengono mostrati i dieci post più visti e non c'è data possibilità di modificare questo numero. Ecco come si può ovviare a questo inconveniente. Il trucco è quello di modificare la lunghezza del widget con il vincolo di non mostrare la parte eccedente. Occorre andare in Design > Modifica HTML e cercare la seguente riga

]]></b:skin>


cliccando su F3 o su Ctrl+F. Immediatamente sopra deve essere incollato il seguente codice


/* Post Popolari */
#PopularPosts1 {
height: 420px;
overflow: hidden;
}

dove la prima riga è un commento che serve per ritrovare il codice per eventuali future modifiche e il parametro da modificare è height: 420px; cercando l'altezza giusta per mostrare solo il numero dei post che desideriamo. Ovviamente va salvato il modello.

Come modificare l'aspetto del widget
Sempre su Design > Modifica HTML possiamo visualizzare quello che è il codice standard per il widget


<b:widget id='PopularPosts1' locked='false' title='Post più popolari' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail-center'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


che può variare a seconda che abbiamo optato per la presenza o meno di miniature e snippet. Il codice, come quello di tutti i gadget inizia con <b:widget id=… e termina con </b:widget>. Una possibile personalizzazione è quella di cancellare totalmente tutto questo codice e di sostituirlo con quest'altro

<b:widget id='PopularPosts1' locked='false' title='Articoli più letti' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img src='http://t9pysw.blu.livefilestore.com/y1pyDV2pEY18AF2Mp8eieGrghWSLgB1udVJJq3fNps6_-t5NcEqMOQQ51e8TM2v0-DPEi5eXJypDjrqC46urd98E2e9apZHo9NG/miniatura-90.jpg'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Le parti evidenziate di rosso possono essere personalizzate e riguardano principalmente l'immagine che dovremo mostrare come miniatura se nel post non ce ne fosse nessuna. Una tale immagine deve essere caricata su un servizio tipo Picasa o Skydrive.

Adesso cerchiamo la riga
]]></b:skin>
e, immediatamente sopra, incolliamo il CSS del widget


/* Post Popolari Stile */
#PopularPosts1 li{
list-style:none;
width:300px;
height: 70px;
border-bottom: 1px solid #111;
margin: 5px ;
padding: 0 0 15px 0;
}
.item-thumbnail {
padding: 5px;
}
.item-title {
padding: 30px 0;
font-size: 14px;
}

Le parti in rosso indicano tutto quello che si può personalizzare e riguardano
  1. La larghezza del widget (width:300px;) e l'altezza di ogni singolo elemento dell'elenco (height: 70px;)
  2. La larghezza del bordo (1px), la sua forma (solid o dashed o dotted) e il suo colore (#111)
  3. La dimensione dei caratteri del titolo del post (14px)
  4. Si possono anche modificare i valori del margin (distanza tra il widget e il resto del layout) e del padding (distanza tra l'esterno del widget e il suo contenuto interno)
  5. La dimensione della miniatura deve essere coerente con l'altezza che si è impostata per ogni singolo elemento dell'elenco
Ecco un esempio di come può diventare il widget con queste modifiche

widget-post-più-letti

Si vede la stessa miniatura in tutti i post perché per il test ho utilizzato il mio blog di prova nel quale non ci sono immagini. Se le modifiche non ci soddisfano si può sempre eliminare il widget e reinstallarlo per ritornare alla situazione di partenza. Dovranno anche essere tolte le righe di codice inserite sopra a ]]></b:skin>.
Aggiornamento: Ho inserito la riga list-style:none; per non mostrare il puntino dell'elenco accanto alle miniature.




35 commenti :

  1. grandissimo! appena ho un po' di tempo faccio qualche prova...

    RispondiElimina
  2. Grazie per l'aiuto.I tuoi consigli sono veramente utili,anche per chi come me è a digiuno di informatica e affini.Per il mio blog ho inserito l'antipixel, per sdebitarmi.

    RispondiElimina
  3. Ciao, volevo sapere con le tue modifiche come faccio a far vedere l'anteprima dell'articolo, visto che non mi esce più anche se spunto snippet!

    RispondiElimina
  4. @Link Kollettivo Foggia
    Questa personalizzazione è stata fatta solo per i post più popolari senza snippet.
    Se vuoi inserire lo snippet, disintalla il widget e reinstallalo da Blogger con le opzioni che desideri. In questo caso puoi comunque diminuire il numero dei post visualizzati con la procedura illustrata nella prima parte dell'articolo.
    Non escludo che in un prossimo articolo non si possa risolvere anche il problema che hai posto.
    Ciao

    RispondiElimina
  5. Ok... grazie! Ah ho notato che con questo metodo i post con i titoli lunghi non escono tutti, ma vengono sostituiti con dei puntini di sospensione anche se ci sarebbe lo spazio per fare uscire tutto il titolo! Anche se diminuisco la grandezza del font, il titolo non esce mai tutto! Come posso fare a mostrare il titolo del post per intero?

    RispondiElimina
  6. @Link Kollettivo Foggia
    Mi rendo conto che si tratta di una personalizzazione insufficiente però per il momento c'è solo questa. I più grandi blogger del mondo stanno cercando delle strade per migliorare l'aspetto del widget. Con alcuni sono in contatto, altri li seguo via feed. Se ci saranno delle novità le pubblicherò.
    Per il tuo problema prova a sostituire nella parte del codice che va nella parte alta del modello
    font-size: 14px;
    con
    font-size: 12px;
    Ciao

    RispondiElimina
  7. Grazie infinite! Era molto che cercavo un widget del genere.
    Per il momento ci accontentiamo, eppoi grazie alle spiegazioni molto chiare del tuo post sono riuscita a fare più di quanto mi potessi aspettare da me stessa!
    Puoi guardare da te
    Ciao Veggie

    RispondiElimina
  8. @Veggie
    pardon Regina Del Sapone... ^_^
    devo dire che sei stata fortunata perché questo widget si adatta molto bene al tuo modello. Hai anche fatto un ottimo lavoro :-)
    Ciao

    RispondiElimina
  9. Beh veramente ho avuto una paura che non ti dico! Soprattutto quando ho dovuto cancellare tutto l'HTML di quello che c'era. Però per sicurezza, prima di cancellare ho inserito il nuovo.
    Io non sono tagliata per questo genere di lavori, mi fanno venire le palpitazioni hehe!! mi riesce molto meglio il sapone.
    Che tu sappia non c'è la possibilità di centrare il link quando occupa più di una riga?
    Comunque anche se non si può far niente mi sei stato di grande aiuto
    Grazie ancora.
    Veggie

    RispondiElimina
  10. Per questo widget quello che si è potuto fare fino a questo momento l'ho già pubblicato

    RispondiElimina
  11. Vorrei raccontare la mia esperienza con questo widget.
    L'ho inserito nel blog e ho fatto tutte le modifiche consigliate, tutto è andato per il giusto verso.
    Ho ridimensionato tutto e ho ridotto la lunghezza in modo da lasciare visibili 7 post anziché i 10 previsti.
    Oggi ho inserito il nuovo widget, quello dei post casuali e ho avuto necessità di cambiare l'ordine degli elementi nella colonna, così ora il widget dei post più letti non è più l'ultimo in basso.
    Nella pagina degli elementi questo widget mantiene gli elementi sottostanti ad esso ad una distanza di quasi 20 cm più in basso.
    Cioè gli elementi sono tutti uno sotto l'altro come dovrebbero essere, ma quelli sotto questo widget sono situati a quasi 20cm.lasciando uno spazio all'apparenza vuoto, ma che vuoto non è. Una cosa molto strana. Sperando di essermi spiegata bene, vorrei sapere se anche altri hanno riscontrato il problema.
    Veggie

    RispondiElimina
  12. @Veggie
    Ho dato uno sguardo alla sidebar di destra del tuo blog ma non vedo spazi vuoti; mi sembra che tu abbia fatto un ottimo lavoro

    RispondiElimina
  13. Immaginavo di non essermi espressa bene, purtroppo ho delle carenze di linguaggio informatico.
    Lo spazio vuoto è visibile solo nella sezione dove si lavora: Design> Elementi pagina.
    Gli elementi della sidebar (i rettangolini che si trascinano in su o in giù per cambiare la posizione degli elementi)è lì che c'è la distanza di 20 cm.
    Tra I più letti in 30 giorni e Ti potrebbero anche interessare c'è questo spazio, quindi per trascinare tutti gli elementi situati più in basso e per cambiarne collocazione ho delle difficoltà perché quando voglio trascinarli si perdono in quei 20 cm di vuoto dove scompaiono. Semmai dopo posso fare una foto e mandartela in pvt per mostrarti cosa intendo.
    Ciao Veggie

    RispondiElimina
  14. @Veggie
    Ho capito! Sai perché? Nei post più popolari hai inserito il codice preso da questo blog per limitare l'altezza. Nel Layout è comunque presente. L'importante è che non compaia nel blog. Se hai difficoltà a trascinare con il mouse prova a spostare il widget nella parte più bassa.
    Ciao

    RispondiElimina
  15. Infatti ho pensato che fosse quella la ragione.
    L'importante è che non danneggi niente. Se so che non succede niente posso sopportare il piccolo inconveniente. Semmai quando dovrò spostare gli oggetti, sposterò prima quello, mettendolo in un a posizione dove non è di ostacolo per poi riposizionarlo a spostamenti avvenuti.
    GRazie Ciao
    Veggie

    RispondiElimina
  16. molto interessante questa possibilità, la proverò, ho visto che blogger non la offre più sui widget base;
    una domanda, non so bene perchè i miei post compaiono senza immagine miniatura nel blogroll dei blogs amici, è per il peso delle immagini, di solito cerco di stare sotto i 100 kb; hai scritto qualche post in merito in passato?
    grazie e saluti
    Blas

    RispondiElimina
  17. @blasblog
    Succede perché posto con WLW; non mi so spiegare perché ma se non si posta con l'editor di Blogger non appaiono le immagini nel blogroll

    RispondiElimina
  18. grazie per il chiarimento, era un dubbio che avevo da un pezzo, eppure usando WLW si pensa di avere sempre qualche cosa in più...
    ancora grazie, seguo il tuo blog
    Blas

    RispondiElimina
  19. Neanche a me compaiono le immagini, salvo ripetere la miniatura standard, mentre invece compaiono nel widget degli ultimi articoli !! mistero... anche io uso wlw, ma non capisco perchè in un widget compaiono e in un altro no.

    http://hiroshimamovies.blogspot.com

    RispondiElimina
  20. ahahah io non uso wlw ma l'editor di blogger e le miniature non appaiono comunque malgrado le abbia selezionate!

    RispondiElimina
  21. @Edina
    Sono i misteri di Blogger ^*

    RispondiElimina
  22. @parsifal32

    dipende dalla grandezza della miniatura..quindi non è automatica la cosa :) conviene preimpostare una foto allora!

    RispondiElimina
  23. Il widget è di Blogger e non è un granché. E' un tentativo di personalizzarlo. La foto che vedi forse è questa
    http://t9pysw.blu.livefilestore.com/y1pyDV2pEY18AF2Mp8eieGrghWSLgB1udVJJq3fNps6_-t5NcEqMOQQ51e8TM2v0-DPEi5eXJypDjrqC46urd98E2e9apZHo9NG/miniatura-90.jpg
    Sostituiscila con un'altra. Il problema è che le miniature non si vedono quasi mai.

    RispondiElimina
  24. @TUTTI GLI SCANDALI DEL VATICANO
    si ho notato.sinceramente l'ho rimosso perchè era tutto sfasato sia quello di blogger che questo!!!
    in particolare a parte non vedere alcuna immagine c'erano le crocette sfasate con il titolo..

    RispondiElimina
  25. Le miniature nel mio blog -http://mondo-win.blogspot.it/-(il templates è personalizzato quindi non è di quelli presenti in Blogger) nel widget Post più popolari per esempio o quelle dell'Elenco Blogs sono troppo grandi e non riesco a ridimensionarle, esattamente non trovo la riga del codice all'interno del modello. Quando dico troppo grandi dico che sono praticamente uguali a quelle originali del post, cioè non sono una vera e propria miniatura. E' la prima volta che mi succede con il widget di Blogger.
    Grazie e complimenti per il blog

    RispondiElimina
  26. ciao, pensi sia possibile modificare il widget di blogger in modo da modificare la data entro cui cerca i posto più popolari? per esempio, se invece di 1 mese volessi lavorare su 6 mesi?

    RispondiElimina
  27. Ciao, io carico le mie foto su blogger tramite flickr e questo impedisce al widget di recuperare le immagini. Comeposso ovviare al problema senza dover abbandonare flickr?
    Grazie

    RispondiElimina
    Risposte
    1. Non mi risulta esista un metodo valido per tutti i widget in grado di rilevare automaticamente le immagini di Flickr per mostrarne le miniature però so che esistono widget in cui questo problema non si pone.
      @#

      Elimina
    2. E' che non trovo un widget alternativo a quello imposto da blogger. Continuerò la ricerca.
      Grazie mille per il momento.

      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.