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.
![articoli-recenti-mobile-desktop articoli-recenti-mobile-desktop](http://lh3.googleusercontent.com/-x5nyACItpQ0/VeK9GMnrdrI/AAAAAAAAwkk/D1eHNed6DWI/articoli-recenti-mobile-desktop%25255B4%25255D.jpg?imgmax=800)
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';
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>
<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>
#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.
Nessun commento :
Posta un commento
Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy