Widget degli Ultimi Articoli con Miniature per Blogger.

Come installare il widget per Blogger degli Ultimi Post o Articoli Recenti con Miniature completamente personalizzabile funzionante anche nei domini personalizzati.

Nel precedente post abbiamo visto come installare nel modello o in un elemento HTML/Javascript un widget che utilizzava un file esterno caricato su Google Drive. Il metodo proposto è quello di copiare il codice del file esterno, sia esso javascript o CSS, per poi incollarlo nel modello o nell'elemento pagina tra righe di codice che lo possano far funzionare.

Questa modifica si è resa necessaria dopo che Google Drive non supporta più il servizio di hosting. Chi abbia un blog gratuito del tipo nomeblog.blogspot.com può usare Google Sites come hosting senza alcun problema e limitazione. Tale soluzione non è possibile per i blog con dominio personalizzato con URL del tipo www.dominio.com e malauguratamente chi abbia un account Dropbox attivato successivamente al 4 Ottobre 2012 non può usare neppure questo servizio per ottenere l'hotlink.

Riepilogo i passaggi da effettuare per questa modifica. Innanzitutto si scarica il file esterno incollandone l'URL nell'indirizzo del browser e andando su Invio. Se si aprisse una pagina che mostra il codice ci si dovrà cliccare sopra con il destro del mouse per poi scegliere Salva con nome.

I javascript esterni vengono postati con questo codice

<script src='URL_JAVASCRIPT_ESTERNO.js' type='text/javascript'/>

che dovrà essere cancellato e sostituito da quest'altro

<script type='text/javascript'>
//<![CDATA[
 
 ----- Codice del javascript ----

 //]]>
</script>

dove al post di ----- Codice del javascript ---- si incolla tutto il codice del file esterno.

I CSS esterni vengono invece postati con questa riga di codice

<link rel='stylesheet' href='URL_CSS_ESTERNO.css'>

che dovrà essere cancellata e sostituita da questo codice

<style>  

/* Codice del file scaricato */

</style>

dove al posto di si incolla tutto il codice del file CSS aperto con un software come Notepad++.

WIDGET DEGLI ULTIMI POST CON MINIATURE PER BLOGGER

Vediamo come installare e visualizzare nella sidebar del nostro blog un widget come questo

Il codice da incollare andando in Layout -> Aggiungi un gadget -> Base -> HTML/Javascript con un file .js esterno sarebbe il seguente

<div id='bp_recent'></div>

<script style='text/javascript' src='https://sites.google.com/site/exdrive32/script/articoli-recenti-miniature.js'></script>

<script style='text/javascript'>
var numberOfPosts = 6;
var showPostDate = true;
var showSummary = true;
var summaryLength = 200;
var titleLength = 100;
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 = 'Leggi tutto';
</script>
<script src='http://www.ideepercomputeredinternet.com/feeds/posts/summary?max-results=6&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

Il codice del javascript esterno è stato evidenziato di giallo. Questo widget funzionerà in tutti i blog gratuiti di Blogger ma non in quelli personalizzati. Dobbiamo applicare la procedura illustrata all'inizio per aggiungere il codice del file compreso tra le quattro righe mostrate sopra. Il codice risultante da incollare con le identiche modalità diventa quindi il seguente

<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 = 6;
var showPostDate = true;
var showSummary = true;
var summaryLength = 200;
var titleLength = 100;
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 = 'Leggi tutto';
</script>
<script src='http://www.ideepercomputeredinternet.com/feeds/posts/summary?max-results=6&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

Come vedete si tratta di un codice molto più lungo e in pratica è proprio questa la ragione per la quale si utilizzano i file esterni. Le personalizzazioni più rilevanti sono colorate di rosso:

1. Va inserito l’URL del vostro sito ricordando di mettere il .com e non il .it ( per i blog gratuiti)
2. Il numero dei post mostrati (6) 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.  La stessa procedura del punto 3)  serve per mostrare o meno il numero dei commenti mediante il parametro showCommentCount.
5. La stringa var showThumbs = true; serve per mostrare le miniature. Se non volete mostrarle sostituite true con false. Si può anche decidere o meno di mostrare l’immagine di default in showNoImage.
6. L'immagine di default si può modificare solo nel 2° codice 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 configura il margine tra miniatura e testo
10. Con mediaThumbsOnly = true; si visualizzeranno anche le miniature di oggetti multimediali come potrebbero essere quelle dei video di Youtube
11. La condizione showReadMore = true; serve per mostrare il Read More o Jump o Intervallo. Se non si vuole inserire basta sostituire true con false come al solito.
12. var readMore = 'Leggi tutto'; serve per personalizzare l’espressione del Read More
13. var showSummary = true; per mostrare o meno l’incipit del post
14. var summaryLength = 200; per settare il numero dei caratteri dell’incipit
15. var titleLength = 100; per il numero massimo di caratteri del titolo.

Demo
Clicca qui

Il secondo codice per domini personalizzati funziona anche se incollato in una pagina statica in Modalità HTML per mostrare gli ultimi contenuti in modo diverso.