Pubblicato il 09/04/13e aggiornato il

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

post-raccomandati-blogger

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://lh4.googleusercontent.com/-sszpE71K2QQ/UWQGnm4x6FI/AAAAAAAAhKU/SE_3NVaH-8c/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 PluginBlogger Tips & TRicks -




6 commenti :

  1. Buonasera Signor Ernesto,

    di nuovo qui nel disturbarla con i miei grattacapi che concernono il mio blog.
    Comunque, per favor, mi sa spiegare perchè dopo costruito un menu con le “ Etichette “ mi dice cliccando sulla per esempio sulla voce “ Politica “ NESSUN POST CON QUESTA ETICHETTA? Quando poi ci sono post con questa “ Etichetta “. Aggiungo che prima funzionava tutto.

    Esempio: ://www.pontelatone.net/search/label/politica/'>Politica

    E' corretta la procedura di codice che uso? Ovviamente manca l'inizio e la fine del codice, altrimenti non accettava la pubblicazione della mia domanda.

    Mille e mille grazie

    RispondiElimina
    Risposte
    1. @# Ti ricordo che le etichette sono case sensitive vale a dire che Politica è diverso da politica.. Il codice è questo
      <a href="http://www.pontelatone.net/search/label/politica">Politica</a> Poi ci potrebbe essere anche un codice di un elenco in questo modo
      <li><a href="http://www.pontelatone.net/search/label/politica">Politica</a></li>

      Elimina
    2. Son che concordo con Lei sulle differenze. Tornando al " Menu ", niente, non funziona. Il codice che uso è corretto, anche perchè era già presente nel template, aggiungo solo l'indirizzo del blog, search/label/nome-etichetta. Cos'altro potrei verificare?
      Grazie

      Elimina
    3. O santi numi, il dramma risiedeva nella lettera maiuscola. Ossia: search/label/Politica">Politica
      A volte rimango esterrefatto, fa distinzione pur su questo.
      Comunque, la ringrazio di cuore, visto sempre la Sua titanica gentilezza.
      Buonasera

      Elimina
  2. Ciao Ernesto, esiste la possibilità di anticipare l'uscita? La coda del mio blog è un pò lunga e a fine corsa il cursore laterale potrebbe non arrivare mai.
    E' possibile anche spostare l'altezza d'usicta del box?, per esempio riproponendola in alto o a metà inestra?
    Grazie di esistere. :)

    RispondiElimina
    Risposte
    1. @# Ci avevo già pensato ma con questo non ho trovato il modo.

      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.