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.

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: "https://www.ideepercomputeredinternet.com",
tag: "blogger" }, {
name: "WIDGET",
url: "https://www.ideepercomputeredinternet.com",
tag: "widget" }, {
name: "IMMAGINI",
url: "https://www.ideepercomputeredinternet.com",
tag: "immagini" }, {
name: "SLIDESHOW",
url: "https://www.ideepercomputeredinternet.com",
tag: "slideshow" },{
name: "YOUTUBE",
url: "https://www.ideepercomputeredinternet.com",
tag: "youtube" }, {
name: "GOOGLE",
url: "https://www.ideepercomputeredinternet.com",
tag: "google" }, {
name: "TEMPLATE",
url: "https://www.ideepercomputeredinternet.com",
tag: "modello" }, {
name: "FACEBOOK",
url: "https://www.ideepercomputeredinternet.com",
tag: "facebook" }, {
name: "TWITTER",
url: "https://www.ideepercomputeredinternet.com",
tag: "twitter" },{
name: "ANDROID",
url: "https://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://sites.google.com/site/progettoipcei/progetti/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.