Widget degli Articoli Recenti per la versione mobile di Blogger.

Come installare il gadget degli Ultimi Post o degli Articoli Recenti su Blogger in modo da visualizzarlo solo nella versione mobile.

Il Widget degli Ultimi Post o degli Articoli Recenti è uno di quei gadget che vengono installati nella sidebar del blog per mostrare ai visitatori le ultime pubblicazioni del sito. La versione mobile di Blogger come è noto non mostra le sidebar e quindi un widget di questo genere è di difficile installazione. Inoltre ci sono anche problemi di linguaggio perché nella sidebar i gadget si inseriscono con l'elemento HTML/Javascript mentre il modello di Blogger usa il linguaggio XML che come abbiamo visto non salva i javascript se non dopo una opportuna conversione.

In questo articolo vedremo come installare il Widget degli Ultimi Post nella versione mobile di Blogger. Nella versione desktop si può benissimo avere un widget diverso da questo. Per questo scopo utilizzerò un classico script di Blogger Plugins che tradussi in italiano diversi anni fa e che ho usato anche per la configurazione del Widget degli Articoli Recenti con Miniature. Mostreremo quindi le ultime pubblicazioni del nostro sito solo alla fine dei post e non in Homepage, nelle pagine delle Etichette o di Archivio e neppure nelle pagine statiche perché nella versione mobile di Blogger tali pagine hanno una struttura significativamente diversa da quella dei post.

Ho realizzato un widget senza miniature ma ho lasciato le opzioni per inserirle. Non le ho messe nel codice proposto perché la loro visualizzazione non è perfetta per alcune risoluzioni di tablet.

Dopo aver salvato il template si va su Modello > Modifica HTML, con Ctrl+F si cerca la riga

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

che indica l'inizio della sezione del codice per il mobile. Si scorre il codice della sezione verso il basso fino a trovare la nuova riga

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

Subito sopra a questa riga si incolla il codice seguente

<!-- Ultimi post Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<p style='margin-left:8px; font-size:20px; 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[
/* Recent Posts Script by bloggerplugins.org localized in italian by www.ideepercomputeredinternet.com */var numberOfPosts = 4;
var showPostDate = false;
var showSummary = true;
var summaryLength = 250;
var titleLength = 100;
var showCommentCount = false;
var showThumbs = 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 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 -->

Si salva il modello. Le personalizzazioni per questo widget possono essere consultate nel post che ho dedicato a questo widget per il desktop. Ne sono state aggiunte altre che riguardano il numero dei post da mostrare che nel codice sono stati proposti come 4. Ci sono due occorrenze con questo numero all'inizio del primo script e alla fine del codice.

È anche possibile modificare il titolo del widget ULTIMI POST come pure il codice del colore e la dimensione dei font. Le altre personalizzazioni più importanti riguardano

1. L'URL del vostro sito che va sostituito a quello di questo blog nella ultima parte del codice
2. La dimensione e il colore dei caratteri del titolo - font-size:13px e color:#f95b5b;
3. Il colore del titolo quando ci si passa sopra con il mouse - #1fe0c9
4. La dimensione e il colore dei caratteri del sommario - font-size:10px; color:#191919;
5. La distanza tra gli elementi - margin-top:15px
6. Il numero dei caratteri del sommario - var summaryLength = 250;
7. Il numero dei caratteri del titolo - var titleLength = 100;

Ho scelto di non mostrare le miniature con var showThumbs = false; e di non mostrare il Leggi Tutto - var showReadMore = false; - perché non mi soddisfaceva la visualizzazione del widget nei tablet. Se riesco a trovare la configurazione giusta ci farò un altro articolo.