Pubblicato il 25/09/16 - aggiornato il  | 18 commenti :

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

ultimi-articoli-con-miniature-blogger






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://lh5.googleusercontent.com/-Qwbi5xozsS8/T6pkMpQ4ZmI/AAAAAAAAYEo/kpwCFEWIKR8/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('http://3.bp.blogspot.com/-H8WPIh3wjr4/TmHnuo9tnnI/AAAAAAAACDE/_yuVqfb1HAk/blogger-widgets.png')";
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 = 5var 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.

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.


18 commenti :

  1. Infatti!!!! avevo notato che da giorni non mi funzionava più il widget.. così son passata qui da te a vedere se trovavo qualcosa.. e pufff ecco il tuo esauriente post! Grazieee... ho sostituito il codice ed è tutto ok :-D

    RispondiElimina
  2. Grazie mille Ernesto, ora però non riesco a togliere quei puntini he mi vengono fuori nelle prime 3 miniature....ufficini!!!!
    Comunque grazie mille intanto

    RispondiElimina
  3. Ciao,
    stavo pensando (visto che non è più possibile utilizzare la pagina principale di picasa per visualizzare gli album fotografici) di utilizzare il widget dei post recenti unito alla funzione "link del titolo" per creare dei post e reindirizzare i visitatori direttamente ad album di google foto o ad una cartella google drive. Questi widget (ne ho provati un pò) non sono compatibili con questa funzione.... E' per caso possibile modificarne il codice per renderla attiva?

    RispondiElimina
    Risposte
    1. Non conosco questi widget di reindirizzamento agli album di Google Foto. Questo script è difficilmente modificabile in modo così profondo. Quello che si può fare l'ho già elencato nell'articolo
      @#

      Elimina
  4. Ernesto ciao, a gennaio ho variato il mio blog da blogspot a dominio personalizzato e la persona che mi ha aiutato in questo passaggio mi ha anche sistemato il widget miniature ultimi post. Fino a venerdì le miniature erano visibili nel mio blog ma ora sono sparite. Come mai? E' cambiato qualcosa? Grazie, Lorena

    RispondiElimina
    Risposte
    1. Non so che widget hai installato. Dovresti chiedere a chi ti ha aiutato a aggiungerlo
      @#

      Elimina
    2. Ho installato questo sopra: miniature ultimi post. L'ho installato a gennaio e non aveva problemi, la settimana scorsa invece è sparito. Puoi aiutarmi?

      Elimina
    3. La Demo funziona sempre quindi il problema risiede nel tuo modello. Forse hai installato un secondo widget degli Ultimi Articoli che è andato in conflitto con questo. Il consiglio che posso darti è quello di provare a disinstallarlo per poi installarlo di nuovo
      @#

      Elimina
    4. Ernesto, non ho installato assolutamente nulla di nulla...

      Elimina
    5. Ho aperto il tuo sito ma non vedo il widget. Non so che altro dirti oltre a quello già scritto nel commento 4.c. Mi spiace :(
      @#

      Elimina
    6. Si infatti Ernesto, non lo vedi perchè come ho accennato, non è più visibile. Pensi che se ti invio l'HTML del mio widget puoi capirne il motivo? Grazie per la tua disponibilità

      Elimina
    7. Se il codice lo hai copiato bene non vedo come possa fare a capirlo :(
      @#

      Elimina
    8. Si si, anche perchè funzionava... Però il mio codice non è così lungo come questo sopra. Grazie e buona giornata

      Elimina
    9. Allora togli il codice che hai e inserisci questo e vedrai che ti funzionerà visto che la demo funziona. Probabilmente stai utilizzando un javascript esterno caricato su Google Sites che non è supportato dai blog con dominio personalizzato. È spiegato nel post
      @#

      Elimina
  5. Ciao Ernesto...avevo inserito il tuo widget, ma da giorni non si vede più nulla!!! UFFI
    Ho provato a rinserirlo, ma nulla da fare. Cosa posso fare?
    Buona giornata

    RispondiElimina
    Risposte
    1. Sei passata a HTTPS nel frattempo? Perché la demo funziona sempre. Se hai impostato l'HTTPS dovrebbe bastare cambiare l'URL del blog nel widget sostituendo http:// con https://
      @#

      Elimina
  6. Ciao Eneresto, scusa ho riscontrato un piccolo problema nella miniatura degli ultimi post mi inserisce prima del testo la didascalia della foto del post hai per caso una soluzione al mio problema?
    Ciao e grazie

    RispondiElimina

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