Pubblicato il 03/11/16e aggiornato il

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://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 = 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.




10 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

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.