Pubblicato il 09/01/15e aggiornato il

Mostrare i post delle etichette più popolari in una pagina statica di Blogger.

Come mostrare le etichette più popolari in una pagina statica di Blogger con l'elenco degli ultimi post insieme alle loro miniature.
Ho già presentato diversi articoli che illustrano la creazione di Sitemap a beneficio dei lettori che mostrano tutti i post pubblicati suddivisi per etichette per poi mostrarli in un widget o in una pagina statica con la possibilità di mostrare solo i titoli dei post o anche con le miniature.

In questo post illustrerò un metodo alternativo in modo da mostrare in una pagina statica l'elenco delle etichette che riteniamo più interessanti per i lettori con gli ultimi articoli pubblicati. In ciascun post si visualizzerà titolo, miniatura e anche snippet nel caso ci sia lo spazio sufficiente. Gli elenchi si posizioneranno in una, due, tre o quattro colonne a seconda dello spazio disponibile. Nel caso abbiate eliminato la sidebar dalla pagina statica e quindi disponete di un layout particolarmente ampio potete posizionare anche più di quattro colonne.

etichette-blogger

Nello screenshot precedente il posizionamento è su due colonne. In basso a ciascuna etichetta c'è il pulsante More per aprire direttamente la pagina del blog. Ciascun articolo può essere aperto dal lettore semplicemente cliccando sopra al collegamento con il cursore



Per l'installazione si va su Pagine > Nuova pagina e se ne digita il titolo. Nell'Editor si clicca sul bottone HTML che si trova accanto a Scrivi e si incolla questo codice

<style type="text/css" scoped="scoped">
#feed-list-container{margin-top:0px}
.list-entries{background:white;border:1px solid #d8d8d8}.list-entries ul,.list-entries li{margin:0;padding:0;list-style:none}.list-entries li{padding:1em;border-bottom:1px solid #ddd}.list-entries .main-title{padding:0}.list-entries .main-title h4{display:block;font:inherit;font-weight:bold;padding:.5em 1em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:14px;margin-top:0 !important}.list-entries .title a{font-weight:300;font-size:14px;text-decoration:none;line-height:.5em;color:#222}.list-entries .title a:hover{text-decoration:underline;color:#5886a7}.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}.list-entries .summary{overflow:hidden;color:#999}.list-entries .more-link{border-bottom:none;}.list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#82b965;padding:.5em 1em;position:relative;font-weight:bold;color:white}.list-entries .more-link a:after{content:"";width:0;height:0;position:absolute;top:50%;right:.3em;border:4px solid transparent;border-left-color:white;margin-top:-4px}.list-entries .more-link a:hover{background-color:#71a555}
.list-entries {
margin:5px;
width:260px; /* Larghezza dei post */
float:left;
font-size:11px;
}</style>
<div id="feed-list-container">
<script type="text/javascript">
var multiFeed = {
feedsUri: [{
name: "BLOGGER",
url: "
http://www.ideepercomputeredinternet.com",
tag: "blogger" }, {
name: "WIDGET",
url: "
http://www.ideepercomputeredinternet.com",
tag: "widget" }, {
name: "IMMAGINI",
url: "
http://www.ideepercomputeredinternet.com",
tag: "immagini" }, {
name: "SLIDESHOW",
url: "
http://www.ideepercomputeredinternet.com",
tag: "slideshow" },{
name: "YOUTUBE",
url: "
http://www.ideepercomputeredinternet.com",
tag: "youtube" }, {
name: "GOOGLE",
url: "
http://www.ideepercomputeredinternet.com",
tag: "google" }, {
name: "TEMPLATE",
url: "
http://www.ideepercomputeredinternet.com",
tag: "modello" }, {
name: "FACEBOOK",
url: "
http://www.ideepercomputeredinternet.com",
tag: "facebook" }, {
name: "TWITTER",
url: "
http://www.ideepercomputeredinternet.com",
tag: "twitter" },{
name: "ANDROID",
url: "
http://www.ideepercomputeredinternet.com",
tag: "android" } ],
numPost: 4,
showThumbnail: true,
showSummary: true,
summaryLength: 80,
titleLength: "auto",
thumbSize: 72,
containerId: "feed-list-container",
readMore: {
text: "More",
endParam: "?max-results=8" }};
</script>
<script type="text/javascript" src="https://2cd2e6bd6df053a80ac331ad9c3223fc430652d4.googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/multifeed.js"></script></div>

Si pubblica direttamente da HTML senza tornare su Scrivi. Oltre alla personalizzazione dei codici dei colori si può scegliere il numero dei post da mostrare per ogni etichetta, la dimensione della miniatura e la lunghezza dell'incipit

La parte evidenziata di giallo è quella da editare. Si può decidere di mostrare 10 etichette come proposto o un numero diverso. È importante mantenere la stessa sintassi. Osservo che alla fine del codice c'è una parentesi quadra che deve rimanere in quella posizione. Le singole etichette vanno editate in questo modo

{
name: "NOME VISUALIZZATO",
url: "URL_DEL_BLOG",
tag: "NOME_ETICHETTA" },

Bisogna ricordarsi che le etichette sono case sensitive e quindi in tag per esempio l'etichetta Blogger sarà diversa da BLOGGER e da blogger. Se avete etichette di due parole allora in tag dovete per esempio inserire social%20network per l'etichetta social network. Per settare il numero di colonne in funzione dell'area disponibile si può intervenire su 
width:260px; /* Larghezza dei post */

per trovare la larghezza giusta. Il nome visualizzato può essere diverso dal nome etichetta.
Fonte | Amor Sevillista -




20 commenti :

  1. Grazie! Ieri ho passato l'intera giornata a trafficare con le Yahoo! Pipes senza riuscire a cavare il proverbiale ragno dal buco. Con le opportune personalizzazioni questo widget diventa una valida alternativa. :)

    RispondiElimina
  2. come si comporta questo widget nella versione mobile, si restringe o si contorce a come capita?

    RispondiElimina
    Risposte
    1. Non lo so. Potresti provare ad aprire la pagina di demo con un cellulare o un tablet
      @#

      Elimina
    2. purtroppo non li possiedo ma basandomi sull'anteprima di Pagespeed sembra che funzioni bene perché le colonne le manda a capo. Per caso sai se si potrebbero inserire delle mini-descrizioni sotto ogni "sezione", ad esempio sotto le scritte BLOGGERE, WIDGET ecc. ?

      Elimina
    3. Bisognerebbe modificare radicalmente il javascript compreso quello caricato su Google Drive. E non è cosa da poco ammesso e non concesso di trovare il modo per farlo
      @#

      Elimina
  3. Grazie mille, il tuo post mi è stato molto utile!

    RispondiElimina
  4. Salve, questo widget e molto utile per il mio blog di informazione, ma da oggi non funziona più. si potrebbe ripristinarlo quanto prima?. Grazie e buona giornata.

    RispondiElimina
  5. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  6. Buona sera, il widget di nuovo non funziona, le chiedo se può ripristinarlo. Grazie

    RispondiElimina
    Risposte
    1. Dipende dal sovraccarico di Google Drive. Per verificare quandofunzionerà di nuovo incolla questo URL nel browser
      https://2cd2e6bd6df053a80ac331ad9c3223fc430652d4.googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/multifeed.js
      che comunque non è mio ma è dell'autore che ho linkato alla fine del post.
      @#

      Elimina
  7. Salve, sono due settimane che questo widget non funziona, Cosa può essere successo?

    RispondiElimina
    Risposte
    1. È successo questo
      http://www.ideepercomputeredinternet.com/2015/10/google-drive-hosting-deprecato.html
      a cui si può rimediare con questo
      http://www.ideepercomputeredinternet.com/2016/09/come-ripristinare-i-widget-di-blogger.html
      Nella fattispecie ho salvato il tuo commento. Seguimi i prossimi giorni e tenterò di ripristinare il widget.
      @#

      Elimina
    2. Ok, aspetto il ripristino del widget, grazie, molto gentile

      Elimina
    3. Purtroppo questo widget non lo posso ripristinare. Ho perduto il file multifeed.js e non sono riuscito a trovarlo in rete :(
      @#

      Elimina
    4. Ok, grazie lo stesso. Qualcosa di simile c'è

      Elimina
    5. L'unica possibilità è che l'autore dello script
      http://www.amorsevillista.com/2014/11/indice-entradas-por-etiquetas.html
      metta a disposizione il codice. Ho postato il link al suo .js senza caricarlo sul mio Google Drive come faccio solitamente :(
      @#

      Elimina
  8. Ciao, l'autore ha ripristinato il widget, ora si può fare qualcosa?

    RispondiElimina
    Risposte
    1. Sì. I prossimi giorni ripubblico il post. Comunque puoi già risolvere sostituendo queasto URL
      https://dl.dropbox.com/s/6knm14gfi3et7ju/multifeed.js
      a
      https://2cd2e6bd6df053a80ac331ad9c3223fc430652d4.googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/multifeed.js

      @#

      Elimina
    2. Grazie, già fatto. Ieri ho contattato l'autore

      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.