Widget per Blogger degli Articoli Recenti con Miniature per desktop e mobile.

Come mostrare il widget degli Articoli Recenti con Miniature in una sidebar di Blogger nella versione desktop e sotto i post nelle versioni per tablet e smartphone.

Dopo qualche test sono riuscito a trovare una configurazione accettabile per mostrare le miniature anche nella versione mobile del widget degli Ultimi Post per mobile e desktop proposto nel precedente articolo. La soluzione non mi soddisfa del tutto perché avrei preferito utilizzare il tag display:block; che però non sono riuscito a inserire per la particolare struttura del widget.

Ho risolto modificando la dimensione dei caratteri e della interlinea e aumentando il margine tra i vari elementi oltre a inserire le miniature sulla destra invece che a sinistra nella versione mobile. Non sono in grado di dire quanto possa aumentare il CTR (percentuale di click) con la visualizzazione anche delle immagini insieme ai titoli e incipit degli Ultimi Post, quindi si tratta solo di una opzione ulteriore per chi ha installato questo widget. Se il gadget vi va bene senza miniature lasciate pure tutto invariato.

Nello screenshot precedente si vede il gadget mostrato in una sidebar nella versione desktop e sotto il post nelle versioni per tablet e per smartphone. Per brevità mi limiterò a indicare le modifiche da apportare ai tre codici elencati nel post linkato all'inizio per mostrare le miniature anche nella versione mobile.  Prima di procedere e fortemente consigliato di salvare il template.

MODIFICHE DEL PRIMO CODICE

Il codice che è stato incollato nel modello subito sopra alla riga </head> va modificato. Il codice che parte da var showPostDate = false; fino a var readMore = 'Leggi tutto'; va cambiato così

var showPostDate = false;
var showSummary = true;
var showCommentCount = false;
var showNoImage = false;
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
var readMore = 'Leggi tutto';

MODIFICHE DEL SECONDO CODICE

Il secondo codice che serve per la versione mobile e che è stato incollato nella sezione

<b:includable id='mobile-post' var='post'>

va cambiato sostituendo la sua parte centrale con quest'altro codice

<p style='margin-left:4px; font-size:18px; color:#f95b5b; font-weight:bold;'>ULTIMI POST</p>
<style>
#bp_recent a {margin-top:30px; font-size:13px; font-weight:bold; color:#f95b5b;}
#bp_recent a:hover {color:#1fe0c9;}
#bp_recent div {font-size:11px; color:#191919; text-align:justify;}
.bp_item_title {margin-top:15px;}
</style>
<div id='bp_recent'/>
<script style='text/javascript'>
//<![CDATA[
var numberOfPosts = 4;
var summaryLength = 350;
var showThumbs = true;
var imgDim = 75;
var imgFloat = 'right';
var titleLength = 100;
//]]>
</script>

Si salva il modello. Ho lasciato i codici dei colori di questo blog che possono essere cambiati.

MODIFICHE DEL TERZO CODICE

Il terzo codice è quello che è stato incollato su Layout > Aggiungi un gadget > Base > HTML/Javascript > Sezioni del sito.  Lo <style> e il primo <script> si cambia in questo modo

<style>
#bp_recent a {font-size:13px; font-weight:bold; color:#f95b5b;}
#bp_recent a:hover {color:#1fe0c9;}
#bp_recent div {font-size:12px; line-height:18px; color:#191919; text-align:justify;}
div.bp_item_title {margin-top:5px;}
</style>
<div id='bp_recent'></div>
<script style='text/javascript'>
var numberOfPosts = 8;
var summaryLength = 230;
var showThumbs = true;
var imgDim = 100;
var imgFloat = 'left';
var titleLength = 120;
</script>

Si salva. I codici dei colori anche in questo caso possono essere personalizzati a piacere.