Pubblicato il 06/11/15e aggiornato il

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

post-consigliato-blogger

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. 
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://lh5.googleusercontent.com/-XDrFjd0tgvw/UQBruQRzGfI/AAAAAAAAfSo/z2QZ6YNia78/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.




4 commenti :

  1. ciao Ernesto, complimenti per il post, davvero interessante;
    volevo chiederti come diminuire i caratteri del titolo del post che compare nel riquadro per fare in modo che tutto il titolo per intero entri nel riquadro stesso; non c'è nel codice una voce attinente alla dimensione dei caratteri del titolo, ma solo attinente alla introduzione "ti potrebbe interessare anche il post"; ho provato a modificare la larghezza e l'altezza, ma il risultato è scarso;
    inoltre posizionando il secondo codice in ognuna delle posizioni che hai indicato, il banner compare sempre all'inizio dello scorrimento, indistintamente dalla posizione del codice (ho verificato);
    potresti darmi una mano in merito? grazie mille e complimenti ;)

    RispondiElimina
    Risposte
    1. Prima di </style> prova a incollare questo codice

      #bpslidein a, #bpslidein a:hover, #bpslidein_title {
      font-size:10px !important;
      }

      Se 10 pixel è ancora troppo grande diminuisci il valore. Dovrebbe funzionare
      @#

      Elimina
    2. aggiunto il codice, funziona perfettamente, grazie mille;
      resta il fatto però che il banner compare appena comincio a scorrere la pagina, come posso fare per farlo comparire verso la metà dello scorrimento della pagina? grazie ancora :)

      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.