Pubblicato il 28/04/12e aggiornato il

Widget scorrevole dei post consigliati per Blogger.

Widget dei Post Consigliati per Blogger che appare con Effetto Slide dovuto a JQuery in basso a destra e che consiglia il navigatore di leggere un altro post simile.
Da qualche tempo su alcuni siti, anche prestigiosi come Il Sole 24 Ore, quando si scorre un articolo, in basso a destra compare un rettangolo che invita a aprire un articolo correlato a quello che si sta leggendo. Esistono dei servizi ancora in Beta che offrono questi widget ma, pur avendo fatto richiesta da diverse settimane, non mi hanno ancora mandato l'invito. Probabilmente vengono privilegiati i siti di lingua inglese.

Per fortuna sul web ho trovato un grande plugin di Codrops realizzato con JQuery e che è stato riadattato da Blogger Plugins per gli utenti di Blogger. Ve lo presento con qualche modifica e con le istruzioni per ulteriori personalizzazioni. Il rettangolo che invita a leggere un altro post del blog comparirà solo in calce agli articoli e non sarà visualizzato in homepage e nelle pagine delle etichette.

post-consigliati-blogger

Oltre al titolo dell'articolo sarà mostrata anche la miniatura della prima immagine del post, sempre che ve ne siano. Per vedere questo plugin all'opera potete aprire un qualsiasi articolo del mio Blog di Prova. Cliccando sulla crocetta in alto a destra il navigatore può nascondere il rettangolo.

Andate su Modello > Backup/Ripristino e salvate il modello completo per sicurezza. Su Layout > Aggiungi un gadget > HTML/Javascript, in Sezioni del sito, incollate questo codice 

<div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Ti potrebbe interessare anche il post:</p> <div id="bpslidein_image"></div> <div  id="bpslidein_title">Sto caricando...</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js",function(){bp_async_loader("https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/post-simili-raccomandati.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://goo.gl/Vn4Yh" target="_blank"><img src="https://lh5.googleusercontent.com/-XDrFjd0tgvw/UQBruQRzGfI/AAAAAAAAfSo/z2QZ6YNia78/s128/background.png" alt="Slide Recommended Posts" /></a>

Inserite anche un titolo al widget, per esempio Post Correlati, per rendere poi più semplice trovarlo nel template. Andate adesso su Modello > Modifica HTML > Procedi e espandete i modelli widget. Pigiando su F3 o Ctrl+F cercate il widget Post Correlati e inserite i due tag condizionali

<b:if cond='data:blog.pageType == &quot;item&quot;'>
e
  </b:if>

così come mostrato nello screenshot

tag-condizionali-post-correlati
Cercate adesso nella sezione desktop del codice la riga

 <div class='post-footer-line post-footer-line-1'>
e, subito sotto, incollate quest'altro codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bpslidein_place_holder' style='display:none'/>
</b:if>
Per finire, subito sopra alla riga </head>, si incolla quest'ultimo codice
<style type='text/css'>
#bpslidein{z-index:999;width:400px;height:100px;padding:10px;background-color:#fff;border-top:3px solid #0a0adf;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #ccc;-webkit-box-shadow:-2px 0 5px #ccc;box-shadow:-2px 0 5px #ccc;font-family:Arial, Helvetica, sans-serif;}#bpslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#333;}
</style>

che serve per configurare le dimensioni del rettangolo, il suo colore di sfondo e lo stile del bordo. Si salva il modello e si può togliere il titolo di Post Correlati al widget HTML/Javascript.
E' possibile personalizzare ulteriormente il rettangolo dei Post Consigliati.




54 commenti :

  1. Accipicchia, questo si che è carino, dopve posso trovare un esempio su blogger? prima di metterlo, sai credo sia molto più useful dei miei orrendi 'post correlati' a fine pagina fatti da semplici link e molto piùà leggero dei posti correlati fatti da immagini di tnti blog percrò bisognerebbe testarlo 'su campo'...

    RispondiElimina
  2. per farlo comparire prima bisogna modificare il js?si deve arrivare in fondo alla pagina per vederlo, nessuno lo fa

    RispondiElimina
  3. @MassyBiagio
    @DomenicoSergioAntonacci
    Per vedere come funziona aprite questa pagina
    http://design-prova.blogspot.com/2012/02/demo-del-codice-qr-inserito-nel-blog.html
    o un'altra qualsiasi dello stesso blog. Non importa arrivare in fondo alla pagina, si apre dopo uno scroll di 100-150 pixel

    RispondiElimina
    Risposte
    1. guarda, prova ad andare sul mio blog..mi si apre solo se arrivo in fondo

      Elimina
  4. Intanto complimenti per il post. A me la finestra esce appena faccio un minimo scroll e non appena arrivo dove ho posizionato il div. Com'è possibile? Il mio blog è http://www.epicfootball.org, cliccate su un post a caso

    RispondiElimina
  5. @Filippo Di Stefano
    @Domenico Sergio Antonacci
    Avete due problemi opposti, a chi gli si apre troppo presto e a chi troppo tardi. Provate a posizionare diversamente l'elemento pagina HTML e a posizionare la riga
    <div id='bpslidein_place_holder' style='display:none'/>
    subito dopo
    <data:post.body/>
    per chi la vuole fare aprire prima o subito dopo alla riga

    <div class='post-footer-line post-footer-line-3'>

    per chi la vuole fare aprire più in ritardo

    RispondiElimina
    Risposte
    1. perfettooo...sei un mito!

      adesso per mettere lo sfondo semi-trasparente cosa inserisco qui?

      background-color:#fff

      serve un css?

      Elimina
    2. @Domenico...
      Prova con questo
      background: transparent url(url di una immagine col colore);

      Elimina
    3. Grazie per la risposta Ernesto. Comunque ho provato tutte le soluzioni possibili e non va, il widget si apre troppo presto.

      Elimina
    4. adesso a me appare subito..troppo ahah

      Elimina
    5. @GiacomoD.M.
      Ti prego di non inserire link attivi altrimenti sono costretto a eliminare il commento, basta incollare l'URL. Per quanto riguarda la domanda prova a seguire le indicazioni del commento numero sei.

      Elimina
    6. Si, non sapevo che avrebbe potuto dare fastidio :)
      Ho già provato tutto quello che hai detto nel commento 6, ma niente. Ho provato a metterlo anche sotto a:
      div class='post-footer-line post-footer-line-2'
      ovunque, ma niente :/
      forse è un problema di modello. Cosa dici?

      Elimina
    7. Scusa se lascio un altro commento. Ma come mai da un post a caso e non uno correlato per etichetta?

      Elimina
    8. @GiacomoDM
      Se lo vuoi vedere prima dovresti inserire il codice subito dopo
      < data:post.body/ >
      ma immagino tu abbia già provato. Visto che fa vedere un articolo solo viene mostrato che abbia la stessa etichetta però può capitare che questo non succeda per delle ragioni che mi sono ignote :)

      Elimina
    9. Non hai soluzioni? Non credo che i problemi siano nel css, oppure nei fogli di stile del mio modello c'è qualcosa che impedisce "l'apparizione" del widget.
      Se vuoi ti mando per email il template e se vuoi puoi dare un'occhiata, se ti và. Grazie mille lo stesso :)

      Elimina
    10. @GiacomoDM
      Se mi mandi il codice non è che possa capire la ragione per cui non ti appare in modo corretto. Quello di cui sono a conoscenza l'ho pubblicato nel post e nei commenti precedenti

      Elimina
  6. fatto, ma non c'è la trasparenza...vabbè non fa niente, era un surplus.
    Comunque adesso compare troppo subito, mannaggia

    RispondiElimina
    Risposte
    1. ho provato anche ad usare la seconda alternativa, per farlo uscire dopo, ma compare ugualmente subito...

      nel layout l'ho spostato in varie zone..adesso ce l'ho in basso alla sezione del post

      Elimina
    2. @Domenico...
      La trasparenza dovrebbe esserci scegli un file piccolo 1x1 pixel o al massimo 5x5 pixel di un colore non troppo scuro.

      Elimina
  7. Ciao, ho cercato di inserire il tuo widget ma il file js non é più online. Comunque complimenti per il tuo blog.

    RispondiElimina
    Risposte
    1. @Gianluca...
      Ci sono dei problemi con Google Code. Spero di risolvere presto.

      Elimina
    2. Grazie Ernesto,
      tienimi informato, comunque piacere di conoscerti, io sono toscano come te di Pisa, se ti interessano i viaggi visita il mio sito http://www.ilmigratore.com se ti interessa un widget che ho messo sul sito dimmelo che te lo invio.
      A presto.
      Gianluca.

      Elimina
  8. mi funziona a tratti, non ho capito se è un problema mio generale

    RispondiElimina
    Risposte
    1. @DomenicoSergio...
      Potrebbe essere un problema di mancanza di banda. Prova a caricare questo javascript
      http://www.isoladeifamosi-2009.it/upload/post-simili.js
      su Dropbox e poi sostituiscilo nel codice per vedere se ci sono dei miglioramenti.

      Elimina
  9. sto cambiando il riquadro..ho fatto lo sfondo semistrasparente..ma vorrei cambiare colore del testo..ora è blu ma non capisco dove si può cambiare..grazie!

    RispondiElimina
    Risposte
    1. @Domenico.......
      Prova a analizzare questo file
      http://www.isoladeifamosi-2009.it/upload/post-simili.js

      Elimina
    2. questo?text-decoration:none;color:#1616F5

      Elimina
  10. ma non capisco..dove devo aggiungerlo?il campo del testo che mi interessa non c'è..

    RispondiElimina
  11. Ciao !
    A me invece se si clicca sul punto interrogativo si apre questa pagina....e se c'è laminiatura della foto non compare la scritta blu del link....
    www.fedetails.net

    RispondiElimina
    Risposte
    1. @FedetailsFranco
      Il punto interrogativo è l'equivalente del link Get widget presente in quasi tutti i gadget. Ho aperto alcuni post del tuo blog è mi sembra che sia tutto OK. Può dipendere anche dai browser che si usano e dai cookie. Si tratta di un plugin per Wordpress riadattato per Blogger quindi non funziona perfettamente su tutti i modelli.

      Elimina
  12. io ancora non riesco a modificare il colore del testo..mi sa che è impossibile, possibile?ahah

    RispondiElimina
  13. Salve volevo sapere se si potrebbe eliminare i puntointerrogativo con il collegamento

    RispondiElimina
    Risposte
    1. Ah un'altra domanda come faccio a non visualizzare la scritta post correlati sul sito? elimino il titolo? dopo non avrò difficoltà a ritrovarlo in caso ci fossero preblemi?

      Elimina
    2. @HimeKiki
      Questo widget è una traduzione in italiano di un gadget di Blogger Plugins come correttamente evidenziato nel post. Si può naturalmente modificare ma bisogna conoscere il linguaggio di programmazione.
      Puoi cancellare il titolo, basta che ti appunti il numero del Widget valer a dire id='HTML...'

      Elimina
    3. ma allora non è possibile togliere il collegamento con il punto interrogativo?

      Elimina
    4. @HimeKiki
      Mi sembra di essere stato chiaro nel precedente commento. Si può fare tutto ma bisognerebbe rimettere mano a tutto il widget e francamente io non me la sento però se tu ne sei capace ...

      Elimina
  14. Non so come ringraziarti. Uno script stupendo e le tue istruzioni non chiare, CHIARISSIME. L'ho messo sul mio blog http://aldotorrebruno.blogspot.com e ne sono davvero felice!

    RispondiElimina
  15. Non mi funziona bene, si vedeno soltanto le due scritte, "Ti potrebbe interessare anche il post:", tra l'altro in maiuscolo, e "Sto caricando..." senza farmi vedere la miniatura ed il titolo del post.
    Peccato.

    RispondiElimina
  16. Ciao ci sarebbe un modo per usare questa finestra non a random? cioè inserire un link che vogliamo?

    RispondiElimina
    Risposte
    1. No. Per una cosa del genere puoi usare altri sistemi tipo un avviso flottante o simile @#

      Elimina
  17. Ciao Ernesto!
    Mi rivolgo nuovamente a te per cercare di realizzare qualcosa di carino per il mio blog. Mi sapresti dire se sia possibile creare un widget con pochi post verticali o anche scorrevole ( senza alcuna differenza), che però ricavi i post da far scorrere o i post elencati stessi, da una parola chiave/etichetta?
    non so se sono riuscita a spiegarmi >.<
    grazie infinite e buon inizio settimana <3

    RispondiElimina
    Risposte
    1. Prova questo
      http://www.ideepercomputeredinternet.com/2012/08/slideshow-verticale-blogger-miniature.html
      o questo
      http://www.ideepercomputeredinternet.com/2010/01/come-inserire-il-widget-degli-ultimi_04.html
      Per passare dagli Ultimi articoli agli Ultimi articoli relativi a una singola etichetta devi semplicemente modificare l'URL del feed seguendo questo tutorial
      http://www.ideepercomputeredinternet.com/2013/03/blogger-feed-url.html
      @#

      Elimina
  18. Ciao Ernesto, è possibile in qualche modo creare una slide orizzontale di determinate immagini o post? Nello specifico vorrei proporre una serie di articoli in vendita (modello Amazon) e sto cercando di capire come adattare una slide in tal senso.
    Scusa per l'eventuale OT e scusa se hai già trattato il tema in altro post, ma il blog è ormai sterminato!

    RispondiElimina
    Risposte
    1. Prova questi due
      http://www.ideepercomputeredinternet.com/2011/02/widget-di-uno-slideshow-orizzontale-con.html
      http://www.ideepercomputeredinternet.com/2011/03/slideshow-di-immagini-in-orizzontale.html
      @#

      Elimina
    2. Proverò, grazie e Buona Pasqua!

      Elimina
  19. Ho inserito il widget nel mio blog e tutto ok. Solo volevo cambiare i colori e sono riuscita a cambiarli tutti tranne il titolo che rimane blu. Dove lo trovo il codice? Oppure cosa devo aggiungere?
    Grazie mille!

    RispondiElimina
    Risposte
    1. Non è semplice. Prova a aggiungere questo codice

      <style>
      div#bpslidein_title a {color:#f00 !important;}
      </style>

      prima del resto del codice. Non ho testato e non so se funziona. Nel caso poi sostituisci #f00 con il colore desiderato
      @#

      Elimina
  20. Ciao ernesto, quando dici di cercare "adesso nella sezione desktop del codice la riga
    - div class='post-footer-line post-footer-line-1' -
    e, subito sotto, incollate quest'altro codice..."

    Ho fatto una ricerca nell'html del blog ma non mi trova niente del genere in quanto non sembra esserci nessuna sezione desktop!!!
    Ho capito che questa informazione serve a visualizzate il widget in basso dopo i post ma anche così non sono riuscito a capire dove inserire il codice.

    RispondiElimina
    Risposte
    1. La sezione Desktop esiste. Leggi questo post
      http://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html
      anche se è una denominazione che ho inventato io per maggiore chiarezza. Nella fattispecie devi cercare questa riga
      <b:includable id='post' var='post'>
      che è quella da cui inizia la sezione Desktop e scorrere il codice verso il basso fino a trovare la riga indicata che è quella che indica l'inizio del footer (versione desktop)
      @#

      Elimina
    2. Proprio adesso mi sono accorto che il link al post non funzionava in cui si spiegava che cosa si intende per versione desktop non funzionava. Ho riparato
      @#

      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.