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.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhhLhqraQnrokaFFpY6o_K2JpPhFnz-BsLlYGRrSg1KO3yFRIs2GrrivhG3AD-JAvZWB-6Ta8lXUzx_U1FaBReMkYwEMAPml28AfwuGUjLZg2rH5NJvNUAaiMGsvU1ecSgQ-maDYmb0Kk/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


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.