Widget dello Slide dei post simili con bottoni di Facebook e Twitter.

Come installare un widget per Blogger che mostri uno slide popup che inviti il lettore a leggere un articolo random ma simile con bottoni e contatori di Twitter e Facebook.

Il gadget che vado a presentare è una elaborazione del widget scorrevole dei post consigliati per piattaforma Blogger reso di più facile installazione e con la presenza dei bottoni con contatore di Twitter e Facebook. Per la realizzazione di questo gadget ho dovuto attingere al lavoro di altri siti verso cui inserirò i crediti di attribuzione a fondo pagina. Il concetto del widget è quello di mostrare in basso sulla destra un popup a scomparsa quando l'utente scorre la pagina fino in fondo. Tale banner avrà un collegamento a un articolo dello stesso blog che tratti un argomento simile. Il lettore potrà cliccare sul titolo del post per aprire l'articolo oppure andare sulla icona della croce per nasconderlo.

Nel caso in cui nel post simile ci sia almeno una immagine, se ne vedrà la miniatura subito a sinistra del titolo. Ecco cosa vedranno sulla destra i navigatori che scorreranno il post

Oltre alla scritta di invito a leggere l'articolo è visibile la miniatura della prima immagine e i due pulsanti di Twitter e Facebook per condividere il post. Non verrà condiviso l'articolo che si sta leggendo ma quello il cui titolo è visibile nel banner. Aprite un qualsiasi post di questo mio blog di prova

e scorrete la pagina fino in fondo per visualizzare il popup sulla destra del layout. Per l'installazione non occorre neppure modificare il modello ma è necessario JQuery. Ci possono essere modelli che sono incompatibili con la libreria JQuery perché funzionano con degli script che vi interferiscono. Andate su Layout > Aggiungi un gadget > HTML/Javascript e incollate il seguente codice

<a href="http://goo.gl/Y9hYt" target="_blank" title="Recommended Posts Widget for Blogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge5UXweEmgK_7dBvSiWrNp_JS7wcJ-cv8pKqnZZm_NjRL5SRBOdxzYyn46GlHUQqRXqqzJXMxZlpNID-LSiZwhPZpiDUhyphenhyphenqTvEx1aTeJovjVZ0xi9fvsSAhWezF8Bd2dX-V74aOKkXJjIF/s128/bckground.png" border="0" alt="Blogger-Gadget" style="position:absolute; top: 0px; right: 0px;" /></a><style type="text/css">#recslide{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-top:3px solid #000;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-6px -5px 5px #aaa; font-family:Arial, Helvetica, sans-serif;}#recslide p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#003366; font-weight: bold;}#recslide_title{color:#000;font-weight:700;font-size:14px;margin:10px 20px 10px 0;}#recslide a,#recslide a:hover,#recslide_title{text-decoration:none;color:#940F04; padding: 5px 5px 5px 2px;}#recslide .close,#recslide .expand,#recslide .help{border:2px solid #EEE;cursor:pointer;color:#9A9AA1;width:13px;height:15px;padding:2px 0 0 5px;position:absolute;right:10px;font-size:17px;font-weight:700;font-family:Arial, Helvetica, sans-serif;font-size:12px;}#recslide .help{right:35px;}#recslide_image{float:left;width:80px;}#recslide_title{width:287px;height:30px;overflow:hidden;}</style><div id="recslide" 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="recslide_image"></div><div id="recslide_title">Loading..</div><center><div id="share_box">loading</div></center></div><script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bts_onload_queue=='undefined')var bts_onload_queue=[];if(typeof bts_dom_loaded=='boolean')bts_dom_loaded=false;else var bts_dom_loaded=false;if(typeof bts_async_loader!='function'){function bts_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(bts_dom_loaded){newcallback()}else bts_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bts_domLoaded!='function')function bts_domLoaded(callback){bts_dom_loaded=true;var len=bts_onload_queue.length;for(var i=0;i<len;i++){bts_onload_queue[i]()}}bts_domLoaded();bts_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js",function(){bts_async_loader("https://sites.google.com/site/scriptperilblog/widget-1/post-raccomandati2.js",function(){},"bts-out-slide")},"jQueryjs")}</script>

Salvate l'elemento senza digitare il titolo e lasciatelo pure nella posizione che occupa. Si possono personalizzare i colori del banner e della scritta oltre anche ad altri parametri. Nel codice proposto #940F04; è il colore del titolo del post mentre #003366; è il colore della scritta "TI POTREBBE INTERESSARE ANCHE IL POST:". I meno esperti possono consultare l'articolo sui codici dei colori per adattare il widget al loro layout. Può anche essere utile leggere il post sulle ombreggiature.

Nel caso possediate un blog con dominio personalizzato dovreste incollare l'URL del javascript post-raccomandati2.js nel browser per poterlo scaricare. Andrà quindi caricato su DropBox nella cartella Public, ne andrà ricavato il suo link diretto che poi andrà sostituito a quello del javascript scaricato.
Fonti | Codrops,  Blogger Plugin,  Blogger Tips & TRicks -