Come installare il widget degli Ultimi Post nella versione desktop e mobile di Blogger.

Come mostrare il widget degli Ultimi Post con Miniature nella versione desktop di Blogger e solo con Titoli e Sommario nella versione mobile.

Nell'articolo precedente abbiamo visto come si possa installare il widget degli Ultimi Post nella versione mobile di Blogger. Per ottimizzare il codice del blog sarebbe opportuno utilizzare lo stesso script per mostrare il gadget degli Articoli Recenti sia su desktop sia su mobile. Con questo post ci riproponiamo proprio questo obiettivo.

Lo script scelto è quello di Blogger Plugins che tradussi in italiano diversi anni fa ma che è sempre uno dei più completi visto che permette diverse configurazioni. Quella che propongo in questo articolo prevede di mostrare nei dispositivi mobili solo il Titolo e l'Incipit del post mentre nella versione desktop di mostrare pure le miniature visto che abbiamo una visualizzazione che ce lo permette. Anche il numero dei post dei due widget sarà diverso con quattro per il mobile e otto per il desktop. Si tratta naturalmente di proposte che possono essere adattate al layout di ciascun sito.

Nello screenshot precedente viene mostrato il widget così come si visualizza nella sidebar del desktop e sotto gli articoli nel tablet e negli smartphone.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </head>. Subito sopra a questa si incolla il seguente codice

<!-- Script Ultimi Post Inizio -->
<script style='text/javascript'>
//<![CDATA[
/* Recent Posts Script by bloggerplugins.org localized in italian by www.ideepercomputeredinternet.com */
var showPostDate = false;
var showSummary = true;
var showCommentCount = false;
var showNoImage = false;
var imgDim = 100;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
var readMore = 'Leggi tutto';
var postTitleOriginal,  myLink, myDiv, myImage,mySeparator;
var    main;
var float_clear=false;
var flag = 0;
function bprecentpostswiththumbnails(json) {
for (var i = 0; i < numberOfPosts; i++) {
if (i == json.feed.entry.length) break;
var s;
    var entry = json.feed.entry[i];
    var postTitle = entry.title.$t;
    postTitleOriginal = postTitle;
    if (isNaN(titleLength) || titleLength == 0) {
        postTitle = '';
    }
    else if (postTitle.length > titleLength) postTitle = postTitle.substring(0, titleLength) + "...";
    var postUrl="";
    for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
            var commentText = entry.link[k].title;
            var commentUrl = entry.link[k].href;
        }
        if (entry.link[k].rel == 'alternate') {
            postUrl = entry.link[k].href;
            break;
        }
    }
    if (showThumbs == true) {
        var thumbUrl = "";
        try {
            thumbUrl = entry.media$thumbnail.url;
            thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");
        } catch (error) {
            if ("content" in entry) s = entry.content.$t; else s="";
            if (thumbUrl == "" && mediaThumbsOnly == false) {
                 regex = /http\:\/\/www\.youtube(-nocookie){0,1}\.com\/(v){0,1}(embed){0,1}\/(([^"&?' ]*))/;
                videoIds = s.match(regex);
                if (videoIds != null) {
                    videoId = videoIds[4];
                }
                if (videoIds != null && videoId != null) thumbUrl = "http://img.youtube.com/vi/" + videoId + "/2.jpg"
            }
            if (thumbUrl == "" && mediaThumbsOnly == false) {
                a = s.indexOf("<img");
                b = s.indexOf("src=\"", a);
                c = s.indexOf("\"", b + 5);
                d = s.substr(b + 5, c - b - 5);
                if ((a != -1) && (b != -1) && (c != -1) && (d != "")) thumbUrl = d;               
            }
        }
        if(thumbUrl.indexOf("static.flickr.com")!=-1) {thumbUrl= thumbUrl.replace("_b_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_s_t.jpg","_s.jpg");
        thumbUrl= thumbUrl.replace("_b.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m.jpg","_s.jpg");}
        if (thumbUrl == "" && showNoImage == true)
        {
        thumbUrl = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmgSGV78RPTI6xQe31RtKEn74s2yHV6gs5rRijs6trxiwb9UcEhNWjKubuO7SgHqFVdy7wHreGzkZVaKAiNItf4T-l46TrgeaQnqg7M_1U0jDmOqoH9z_rZOqtGzPE5BKLfMRUI2mqxxM/s72/noimage.png";
        try{if(defaultImage!="") thumbUrl=defaultImage;}catch(error){}
        thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");
        }
        }
    if (showPostDate == true) {
        var postdate = entry.published.$t;
        var cdyear = postdate.substring(0, 4);
        var cdmonth = postdate.substring(5, 7);
        var cdday = postdate.substring(8, 10);
        var monthnames = new Array();
        monthnames[1] = "Gen";
        monthnames[2] = "Feb";
        monthnames[3] = "Mar";
        monthnames[4] = "Apr";
        monthnames[5] = "Mag";
        monthnames[6] = "Giu";
        monthnames[7] = "Lug";
        monthnames[8] = "Ago";
        monthnames[9] = "Set";
        monthnames[10] = "Ott";
        monthnames[11] = "Nov";
        monthnames[12] = "Dic";
    }
    code = "";
        main = document.getElementById('bp_recent');
        myDiv = document.createElement('div');
        myDiv.setAttribute("class", "bp_item_title");
        myLink = createLink(postUrl,"_top",postTitleOriginal)
        if(main.innerHTML!=""){
        mySeparator = createDiv("bp_recent_separator");
        main.appendChild(mySeparator)
        }
        if(postTitle != ''){myDiv.appendChild(myLink);}
        main.appendChild(myDiv);if(postTitle != '')myLink.innerHTML = postTitle;
    if (showThumbs == true && thumbUrl != "") {
        myImage = document.createElement('img');
        myImage.setAttribute("src", thumbUrl);
        if(imgFloat!="none")
        {
        float_clear=true;
        myImage.style.cssFloat=imgFloat;
        myImage.style.styleFloat=imgFloat;
        }
      try{if(myMargin!=0)myImage.style.margin = myMargin+"px";} catch(error){}
        myImage.setAttribute("alt", postTitleOriginal);
        myImage.setAttribute("width", imgDim);
        myImage.setAttribute("height", imgDim);
        myLink = document.createElement('a');
        myLink.setAttribute("href", postUrl+"");
        myLink.setAttribute("target", "_top");
        myLink.setAttribute("title", postTitleOriginal);
        myLink.appendChild(myImage);
        myDiv = document.createElement('div');
        myDiv.setAttribute("class", "bp_item_thumb");
        myDiv.appendChild(myLink);
        main.appendChild(myDiv);
    }
try {
        if ("content" in entry) {
            var postContent = entry.content.$t;
        }
        else if ("summary" in entry) {
            var postContent = entry.summary.$t;
        }
        else var postContent = "";
        var re = /<\S[^>]*>/g;
        postContent = postContent.replace(re, "");
        if (showSummary == true) {
            myDiv = createDiv("bp_item_summary");
                if (postContent.length < summaryLength) {myDiv.appendChild(document.createTextNode(postContent));}
            else {
                postContent = postContent.substring(0, summaryLength);
                var quoteEnd = postContent.lastIndexOf(" ");
                postContent = postContent.substring(0, quoteEnd);
                myDiv.appendChild(document.createTextNode(postContent + '...'));
            }
            main.appendChild(myDiv);
        }
    } //end try
    catch (error) {}
    myDiv =  createDiv("bp_item_meta");
    myDiv.style.clear="both";
    myDiv.style.marginBottom="4px";   
    if (showPostDate == true) {
        myDiv.appendChild(document.createTextNode(monthnames[parseInt(cdmonth, 10)] + '-' + cdday + '-' + cdyear));
        flag = 1;
    }
    if (showCommentCount == true) {
        if (flag == 1) {
            myDiv.appendChild(document.createTextNode(" | "));
        }
        if (commentText == '1 Comments') commentText = '1 Comment';
        if (commentText == '0 Comments') commentText = 'No Comments';
        var myLink = createLink(commentUrl,"_top",commentText + " on " + postTitleOriginal)
        myDiv.appendChild(myLink);
        myLink.innerHTML=commentText;
        flag = 1;;
    }
    if (showReadMore == true) {
        if (flag == 1) {
            myDiv.appendChild(document.createTextNode(" | "));
        }
        var myLink = createLink(postUrl,"_top",postTitleOriginal)
        myDiv.appendChild(myLink);
        myLink.innerHTML = readMore+" &raquo;";
        flag = 1;;
    }
    if (flag == 1) main.appendChild(myDiv);
}
if(float_clear==true && imgFloat!="none")
{
myDiv = createDiv("bp_clear_float");
myDiv.style.clear=imgFloat;
main.appendChild(myDiv);
}
document.getElementById("bp_recent_link").style.backgroundImage="url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj596S0L0fnYHI0iIsWh5dnautDHwE91gm57uyd72CdUTZ6FYEao4LEi0t6mwtGgzXRKY2WrB_cYUorhNOQoszBYQ3dtMPaa6z9vAmWnkSpLmhtEusMXtMA_J9ruV29cVLrB-OeJePe5aA/')";
document.getElementById("bp_recent_link").style.backgroundRepeat="no-repeat";
try{
if(myMargin!=0 && imgFloat=="left" && flag==0) document.getElementById("bp_recent_link").style.marginLeft = myMargin+"px";
} catch(error){}
}
function createDiv(className)
{
var myDiv = document.createElement('div');
myDiv.setAttribute("class", className);
return myDiv;
}
function createLink(href,target,title)
{
var myLink = document.createElement('a');
        if(href.substring(href.length-13,href.length)=="#comment-form") {href= href.substring(0,href.length-13)+"#comment-form";myLink.setAttribute("href", href);}
        else myLink.setAttribute("href", href+"");
        myLink.setAttribute("target", target);
        myLink.setAttribute("title", title);
        return myLink;
}
//]]>
</script>
<!-- Script Ultimi Post Fine -->

Successivamente si cerca la riga

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

che denota l'inizio della versione mobile di Blogger. Si scorre il codice in basso fino a trovare 

<div class='post-footer-line post-footer-line-2'>

Subito sopra a questa riga si incolla il codice per il widget della versione mobile

<!-- Ultimi post Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<p style='font-size:24px; color:#f95b5b; font-weight:bold;'>ULTIMI POST</p>
<style>
#bp_recent a {font-size:13px; font-weight:bold; color:#f95b5b;}
#bp_recent a:hover {color:#1fe0c9;}
#bp_recent div {font-size:10px; 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 = 250;
var showThumbs = false;
var titleLength = 100;
//]]>
</script>
<script src='http://www.ideepercomputeredinternet.com/feeds/posts/summary?max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails'/>
</b:if>
</b:if>
<!-- Ultimi post Fine -->

Finalmente si salva il modello. Ora il widget degli Ultimi Post sarà visibile nella versione mobile che avrà come titolo ULTIMI POST e che mostrerà 4 articoli con titolo e sommario. Per la configurazione degli altri parametri fate riferimento all'articolo linkato all'inizio di questo post. 

WIDGET ARTICOLI RECENTI NELLA VERSIONE DESKTOP

Per utilizzare questo script anche per la versione desktop dobbiamo andare su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, incollare questo codice

<style>
#bp_recent a {font-size:14px; font-weight:bold; color:#f95b5b; line-height:15px;}
#bp_recent a:hover {color:#1fe0c9;}
#bp_recent div {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 = 200;
var showThumbs = true;
var titleLength = 120;
</script>
<script src='http://www.ideepercomputeredinternet.com/feeds/posts/summary?max-results=8&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

Si Salva e si posiziona nel Layout con il drag & drop del mouse. Va naturalmente sostituito l'URL di questo sito con quello del vostro ricordando a beneficio di coloro cha abbiano un sito gratuito del tipo blogspot che è sempre meglio usare l'estensione canonica .com invece di quella localizzata .it. I codici dei colori e gli altri parametri possono essere configurati consultando il post linkato all'inizio e l'articolo che ho dedicato più di un anno fa al Widget degli Articoli Recenti con Miniature. Questo script permette anche di mostrare la data dell'articolo, il Read More e anche il numero dei commenti. Per modificare le configurazioni vanno cambiati alcuni posizionamenti di codice. Per esempio se volessimo mostrare i commenti nella versione desktop si procede così:

1. Cancellare la riga var showCommentCount = false; dal primo codice
2. Incollare la stessa riga nel secondo codice dopo //<![CDATA[
3. Nel codice inserito nella sidebar va incollata la riga var showCommentCount = true; subito dopo alla riga <script style='text/javascript'>.
4. Si procede nello stesso modo con la riga var showPostDate = false; per mostrare anche la data o con la riga var showReadMore = false; per mostrare il Read More.

Aggiornamento: Consultate il post sugli Articoli Recenti con Miniature per Desktop e Mobile se volete mostrare le miniature delle foto anche nella versione mobile di Blogger.