Pubblicato il 03/11/16 - aggiornato il  | 29 commenti :

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

widget-ultimi-post-etichetta


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.
È 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.


29 commenti :

  1. Grazie come sempre, Ernesto. Sul mio Blog con Template "Visualizzazione Dinamica" non funziona.

    RispondiElimina
    Risposte
    1. Funziona anche nelle Dinamiche
      http://i.imgur.com/LqbvIK5.jpg
      Elimina dal codice questa parte
      #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 */}
      e poi pubblica restando sempre su HTML. Poi per sostituire l'URL del tuo blog fallo sempre da HTML senza andare su Scrivi
      @#

      Elimina
  2. Ciao Ernesto ti ringrazio!
    Mi funziona benissimo, anche nella sidebar mi funziona la versione precedente.
    Io però questo widget (quello nella pagina) vorrei applicarlo ad una etichetta invece che agli ultimi post, è possibile? In pratica mi piacerebbe che nella pagina si vedano le miniature dell'etichetta "dolci".
    Grazie e buona serata!

    RispondiElimina
    Risposte
    1. Si può fare facilmente con una piccola modifica. Nella penultima riga fai questa sostituzione

      http://www.ideepercomputeredinternet.com/feeds/posts/default/-/blogger?max-results

      Tu devi sostituire il nome del tuo blog e quella della etichetta al posto di blogger

      @#

      Elimina
    2. Ciao Ernesto, ho fatto come mi hai indicato e funziona molto bene, l'unica cosa è che alla fine delle miniature delle etichette (ne ho impostate 50), me ne riporta sette degli ultimi post (credo che vada in conflitto con il widget nella colonna destra degli ultimi post.
      Ti metto il link nel caso tu voglia vedere.
      http://www.inviaggioincucina.it/p/i-miei-dolci_1.html
      Buon weekend!

      Elimina
    3. Tu ne hai impostate 7 in questa riga

      'http://www.inviaggioincucina.it/feeds/posts/summary?max-results=7&orderby=p

      e in quest'altra

      var numberOfPosts = 7;

      Se vuoi cambiare modifica il numero
      @#

      Elimina
    4. Ciao, ho risolto il problema eliminando il widget ultimi post che era posizionato nella barra destra della homepage.
      Ora quello inserito nella pagina funziona correttamente (evidentemente mettendone più di uno vanno in "conflitto" tra loro).
      Buona domenica!

      Elimina
    5. Puoi provare a nascondere quel widget solo nella pagina statica di quello in oggetto tramite i tag condizionali
      http://www.ideepercomputeredinternet.com/2016/08/blogger-conditional-tags.html
      Leggi la sezione COME USARE I TAG CONDIZIONALI CON I WIDGET
      @#

      Elimina
  3. ho già aumentato la distanza tra le anteprime dei post, come faccio ad aumentare anche la distanza tra titolo e testo sottostante di ciascun post?

    RispondiElimina
    Risposte
    1. Prova a incollare
      #bp_recent a{margin-bottom:20px;}
      sotto la rpima riga < style >
      oppure prova con questìaltra

      div#bp_recent a{margin-bottom:20px;}

      @#

      Elimina
    2. provate entrambe sotto a < style > ma non hanno funzionato.. se ti viene un'altra idea, se no grazie mille ugualmente

      Elimina
    3. Prova questa riga
      div.bp_item_summary {margin-top:25px;}
      da incollare sempre sotto < style >
      @#

      Elimina
    4. Alternativamente prova quest'altra
      div.bp_item_title {margin-bottom:20px;}
      con le stesse modalità
      @#

      Elimina
    5. la prima delle ultime due che mi hai dato funziona, quindi l'ultima non l'ho provata, grazie!!

      Elimina
  4. quando visualizzo la pagina con questo widget, spariscono tutti i widget statici nella barra a destra (ho un tema Semplice), che poi si vedono di nuovo non appena cambio pagina o post. c'è modo di modificare il widget in modo che non entri in conflitto con gli altri e rimangano visibili? (i widget nella barra a destra sono: post più rilevanti, casella di ricerca, modulo di contatto)

    RispondiElimina
    Risposte
    1. Il widget è stato creato così per avere più spazio per la tabella dei post nascondendo la sidebar. Se la vuoi lasciare basterà eliminare questo codice
      #sidebar-left-1, #sidebar-right-1, #sidebar-right-2-1, sidebar-right-2-2 {
      display: none;
      visibility: hidden;
      }
      e eventualmente modificare la larghezza della pagina impostata come 820 pixel
      @#

      Elimina
  5. c'è modo di aumentare la grandezza dei titoli dei post?

    RispondiElimina
    Risposte
    1. Proba a incollare questa riga
      div.bp_item_title {font-size:24px;}
      sopra a < /style >
      @#

      Elimina
    2. sì funziona, grazie e ancora grazie

      Elimina
  6. Ho utilizzato il widget con la modifica suggerita ad un altro utente per visualizzare solo i post con una specifica etichetta: è proprio quello che cercavo, grazie! C'è solo un problema:la visualizzazione di alcuni caratteri in corsivo e/o grassetto risulta difettosa. Come si può ovviare a questo inconveniente? Questa è una delle pagine dove si riscontra il problema: https://www.maridadesign.com/p/my-free-patterns.html

    RispondiElimina
    Risposte
    1. Nell'incipit del post viene mostrato solo il testo piano senza formattazione. Alcuni tag invece di essere interpretati come tali sono inseriti come testo.
      Probabilmente deriva dal fatto che hai un Tema Responsive e che il codice è stato realizzato per un Tema dei vecchi modelli. Puoi risolvere solo non inserendo formattazione nelle prime tre o quattro righe del post.
      @#

      Elimina
  7. Grazie per la risposta. Non avevo capito che i caratteri visualizzati corrispondevano ai tag di spaziatura. Credo comunque di aver risolto il problema rieditando i post.

    RispondiElimina
  8. c'è modo per aggiungere le etichette dei post accanto alle barre dove c'è la data e "continua a leggere"?

    RispondiElimina
    Risposte
    1. Il modo c'è sempre ma bisognerebbe modificare tutto il codice
      @#

      Elimina
  9. Ciao Ernesto, una domanda sai per caso come spostare more e posizionarlo subito dopo ultimo carattere dell’incipit, e la data sotto il titolo? O mi puoi suggerire qualche altro widget per l'ultimo articolo con queste caratteristiche. Grazie. Ciao.

    RispondiElimina
    Risposte
    1. Sul tema del Read More ho scritto questo post per la sua personalizzazione
      https://www.ideepercomputeredinternet.com/2019/08/read-more-blogger-customize.html
      Vedi se può essere utile
      @#

      Elimina

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