Barra flottante orizzontale per Blogger con i bottoni di Facebook, Twitter e Google Plus.

Come installare su Blogger una barra flottante orizzontale con i bottoni con contatore di Facebook, Google Plus e Twitter.

Ci sono moltissimi social network ma soltanto tre sono assolutamente imprescindibili vale a dire Twitter, Facebook e Google Plus. Avere i bottoni per la condivisione dei singoli post è un importante atout in grado di aumentare non solo le visite ma anche l'autorevolezza del sito. In passato ho presentato delle barre verticali che riunivano insieme tutti questi bottoni, con questo post vado a illustrare come si possa installare una barra orizzontale che compaia solo negli articoli e solo quando il lettore scorra la pagina verso il basso.

All'interno della barra, che avrà un colore sempitrasparente personalizzabile, saranno presenti i bottoni di Facebook, Twitter e Google Plus.

 

Prima della sua installazione occorre salvare il template per sicurezza. Si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Si cerca la riga </head> e subito sopra si incolla il codice della libreria JQuery. Si può evitare di farlo se fosse già presente nel modello. Si deve adesso mettere un marcatore per fissare il punto della pagina in cui durante lo scorrimento deve iniziare a visualizzarsi la barra. Si cerca la riga <data:post.body/> e si incolla subito sopra o subito sotto quest'altro codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='md-active-share-comment-marker'/>
</b:if>

Se lo si incolla sopra la barra sarà visualizzata quasi immediatamente mentre se lo si incolla sotto si vedrà solo verso la fine dell'articolo. Adesso si va verso la fine del template nella riga </body> e subito sopra si incolla questo ultimo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://sites.google.com/site/scriptperilblog/javascript-2/barra-flottante.js' type='text/javascript'/>
<div id='md-share-window' style='width: 100%; display: block; position: fixed; top: -450px; left: 0px; background-color: rgba(235, 88, 60, 0.8); z-index: 100; padding: 0 0 10px 0;'>
<div style='width: 800px; margin: 20px auto;'>
<span id='twitter' style='float:left; margin: 0 5px; padding: 3px 0 0 0;'>
<a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span>
<span id='md-plusone' style='float:left; padding-top: 4px; margin: 0 5px;'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='tall'/></span>
<span id='md-fblike' style='float: left; margin: 0 5px; padding: 4px 0 0; width: 80px; '>
<div id='fb-root'/>
<script src='http://connect.facebook.net/it_IT/all.js#appId=362600930477422&amp;xfbml=1'/>
<fb:like font='' href='' layout='box_count' send='false' show_faces='false' width='50'>
</fb:like>
</span>           
<div style='display:block; margin: 0 30px; padding: 5px 0px 0px; color: #FFFFFF'>
<span style='color: #EEEEEE; font-size: 18px;'> Condividere i post che ti piacciono più che un dovere è un piacere! </span><br/>
<span style='color: #FFFFFF; font-size: 20px; font-weight:bold;'><data:blog.pageName/></span>
</div>
</div>
</div>
</b:if>

Finalmente si salva il modello. Le personalizzazioni più importanti riguardano i seguenti parametri

1. Se si possiede un dominio personalizzato occorre scaricare il file javascript della seconda riga caricato su Google Sites e caricarlo sulla cartella Public di Dropbox.
2. Il colore di sfondo della barra è dato dal codice rgba(235, 88, 60, 0.8); in cui 0.8 è la quantità di trasparenza (o opacità). Per maggiori informazioni leggete il post sui codici dei colori.
3. Il pulsante di Facebook dovrebbe funzionare anche senza sostituire l'ID della applicazione. Se così non fosse create una vostra applicazione su Facebook
4. L'espressione colorata di viola può essere personalizzata a piacere così come i colori e le dimensioni dei caratteri della scritta di invito e del titolo dell'articolo data dal tag di Blogger <data:blog.pageName/>
   

Fonte | MakingDifferent -