Come mostrare un banner scorrevole con i post consigliati allo scorrere della pagina su Blogger.

Come installare il widget dei post raccomandati su Blogger che mostra un banner scorrevole che appare dalla destra quando si scorre la pagina verso il basso.

Una versione di questa personalizzazione l'ho già presentata nel precedente post che mostrava un banner insieme ai bottoni di condivisione di Facebook e Twitter ma è una funzionalità visibile in molti quotidiani online come Il Sole 24 Ore anche se in quel caso il banner esce dal basso e non dalla destra come nella versione proposta nel post linkato e in questo articolo.

La differenza tra questo widget e il precedente risiede nella mancanza delle icone sociali di Twitter e Facebook e nella possibilità entro certi limiti di gestire la quantità di scorrimento della pagina che fa aprire il banner con il post consigliato. Se in quest'ultimo sono presenti delle immagini sarà mostrata anche la miniatura della prima che viene rilevata

Il link con la X serve per chiudere il banner mentre quello con il punto interrogativo punterà a questa pagina di istruzioni per l'installazione del widget con la possibilità di inserire un altro URL. 

Demo
Clicca qui

Nella Demo aprite un qualsiasi post e iniziate a scorrere la pagina verso il basso. Sulla destra si aprirà un banner con il link a un altro articolo del blog. Per la installazione si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla questo 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:Georgia;
}
#bpslidein p{
font-size:11px;
text-transform:uppercase;
font-family:Georgia;
letter-spacing:1px;
color:#333;
}
</style>
<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://5a523e1f28c72be6fbd73bfdda99b7e6f16bde26.googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/articoli-simili-raccomandati.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://goo.gl/GExY8V" 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>

Non occorre mettere il titolo al widget. Si salva e si posiziona a piacere nella sidebar. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga

<b:includable id='post' var='post'>

quindi si scorre il codice verso il basso fino a trovare la riga

<data:post.body/>

Subito sotto a questa si incolla questo nuovo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bpslidein_place_holder' style='display:none'/>
</b:if>

quindi si salva il modello. Con questo posizionamento il banner dovrebbe aprirsi abbastanza presto dopo che si è iniziato a scorrere il post verso il basso. Se si desidera che si apra dopo uno scorrimento maggiore lo stesso codice può essere incollato subito sopra a

<div class='post-footer'>

oppure subito sopra a

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

in modo da trovare il ritmo di apertura giusto per ciascun modello. Se si aprisse troppo tardi il codice può essere invece incollato subito sotto la riga

<div class='post-header-line-1'/>

Nel codice si possono personalizzare i codici dei colori, la famiglia di font (Georgia) e la dimensione del banner. L'URL accorciato con Goo.gl evidenziato di verde rimanda a questa pagina e può essere sostituito da un altro mentre l'URL evidenziato di giallo è il javascript caricato su Google Drive che funzionerà fino al 31 Agosto del 2016. Prima di quella data il file dovrà essere scaricato e caricato su altro hosting come Google Sites (per i siti blogspot.com) o su Dropbox.

Per più personalizzazioni: Widget scorrevole dei post consigliati per Blogger