Come installare il widget degli Ultimi Post con Miniature in una Pagina Statica di Blogger.

Come installare in una pagina statica di Blogger il widget degli Articoli Recenti con Miniature completamente personalizzabile.

A seguito di un commento appena ricevuto illustro la procedura per installare il Widget degli Articoli Recenti con Miniature non in una sidebar o comunque nel Layout ma in una pagina statica.

In questo modo potrà essere inserito un link nel menù e si potranno mostrare molti più elementi che nella sidebar. Si possono anche nascondere le sidebar solo in quella data pagina  per avere più spazio. Il widget è completamente personalizzabile e permetterà di scegliere cosa mostrare e cosa non mostrare attraverso i valori true e false applicati ai vari elementi. 

Si tratta in sostanza di mostrare i Titoli degli Ultimi post e di aggiungere nei riquadri opzionalmente anche Miniatura, Incipit dei primi 400 caratteri del contenuto, Data con Giorno Mese e Anno, Numero dei Commenti ricevuti dal post e Link per aprire l'articolo completo. Per questa installazione non occorre neppure modificare il modello. Si va su Bacheca -> Pagine -> Nuova Pagina e, in Modalità HTML, si incolla il seguente codice

<style>
#sidebar-left-1, #sidebar-right-1, #sidebar-right-2-1, sidebar-right-2-2 {
display: none;
visibility: hidden;
}
#main {
width: 820px; /* Larghezza della pagina statica */}
.bp_item_summary {text-align:justify;}
/* Giustificazione del testo */
</style>
<div id='bp_recent'></div>
<script style='text/javascript'>
//<![CDATA[
/* Recent Posts Script by bloggerplugins.org localized in italian by www.ideepercomputeredinternet.com */
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 style='text/javascript'>
var numberOfPosts = 18;
var showPostDate = true;
var showSummary = true;
var summaryLength = 400;
var titleLength = 140;
var showCommentCount = true;
var showThumbs = true;
var showNoImage = false;
var imgDim = 100;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = true;
var readMore = 'More';
</script>
<script src='http://www.ideepercomputeredinternet.com/feeds/posts/summary?max-results=18&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

quindi si va su Pubblica dopo aver digitato anche il titolo. Il widget avrà questo aspetto

PERSONALIZZAZIONI PIÙ IMPORTANTI

In questo widget non sono presenti personalizzazioni per i codici dei colori e quindi i colori verranno ereditati dalle impostazioni del blog. Si può però operare sui seguenti parametri:

1. Va inserito l’URL del vostro sito con il .com e non il .it ( per i blog gratuiti)
2. Il numero dei post mostrati (18) va modificato in tutte e due le occorrenze
3. var showPostDate = true; per mostrare la data. Se non la si vuole sostituire true con false.
4. showCommentCount serve per mostrare o meno il numero dei commenti con true o false
5. var showThumbs = true; serve per mostrare le miniature. Se non volete mostrarle sostituite true con false. Si può mostrare o meno l’immagine di default in showNoImage.
6. L'immagine di default si può modificare sostituendo il file ...noimage.png
7. In var imgDim = 100; si imposta la dimensione delle miniature
8. In imgFloat = 'left'; si posiziona la miniatura sulla sinistra. Con right va a destra
9. In myMargin = 5; si imposta il margine tra miniatura e testo
10. Con mediaThumbsOnly = true; si visualizzeranno anche le miniature di oggetti multimediali come per esempio quelle dei video di Youtube
11. La condizione showReadMore = true; serve per mostrare il Read More o Intervallo. Se non si vuole inserire basta sostituire true con false
12. var readMore = 'More'; serve per personalizzare l’espressione del Read More
13. var showSummary = true; per mostrare o meno l’incipit del post
14. var summaryLength = 400; per settare il numero dei caratteri dell’incipit. I valori più grandi di 400 per mostrare più caratteri non funzionano
15. var titleLength = 140; per il numero massimo di caratteri del titolo.
16. .bp_item_summary {text-align:justify;} serve per giustificare il testo dell'incipit
17. width: 820px; serve per impostare la larghezza  della pagina statica mentre gli ID colorati di viola (#sidebar-left-1, #sidebar-right-1, #sidebar-right-2-1, sidebar-right-2-2) sono quelli delle sidebar che vogliamo nascondere.

Demo
Clicca qui

È importante pubblicare la pagina direttamente da HTML senza tornare su Scrivi. Quando si pubblica Blogger potrebbe avvertirvi che potrebbe essere problematico inserire dei indirizzi http in una pagina https ma voi andate su Elimina e procedete.