Icone sociali con tooltip per Blogger.

Come installare dei pulsanti con collegamenti a Facebook, Pinterest, Instagram, Twitter, Google+ e Youtube.

Vado a presentare una ennesima versione dei bottoni dei social network più importanti da posizionare sotto al contenuto del post. Non si tratta di pulsanti che permettono di condividere automaticamente i post in questi social, a tale scopo si può consultare questo articolo ma con un semplice collegamento al profilo, alla pagina fan di Facebook o alla pagina business di Google+.

 

I link possono essere inseriti al posto dei cancelletti (#) nel codice del widget. La particolarità di questo gadget è che quando ci si passa sopra con il mouse viene attivato un tooltip con l'invito al lettore a visitare i nostri account su Facebook, Twitter, Instagram, Youtube, Pinterest e Google Plus. Il tooltip ha lo sfondo nero e il testo bianco ma sarete certamente a conoscenza della possibilità di modificare i codici dei colori a nostro piacimento. 

Dopo aver salvato il template si va su Modello > Modifica HTML e intorno alla 14-esima riga si clicca sulla freccetta nera posta sulla sinistra accanto alla sezione <b:skin> per visualizzarne tutto il codice. Dopo aver cliccato nell'area del template e usando la combinazione di tasti Ctrl+F si cerca la riga ]]></b:skin> e, subito sopra a questa, si incolla questo codice 

/* Bottoni Tooltip */
#masterpanel{margin-left:20px}
#masterpanel ul{padding:0; margin:0; list-style:none}
#masterpanel ul li{padding:0; margin:0; position:relative}
#masterpanel ul li a{background-color:transparent; background-repeat:no-repeat; background-position:50% 0; padding:0 6px; margin:0 5px; float:left; height:60px; width:56px; text-decoration:none; position:relative}
a.tfacebook{background-image:url(https://lh4.googleusercontent.com/jleBWStjR4utzPxIrw987WZt6ygHTGheiZM-skAleXM8=s64-no)}
a.ttwitter{background-image:url(https://lh5.googleusercontent.com/-ygAelYpbxKc/U5dI81gGAaI/AAAAAAAAUis/vGswwURBEQc/s64-no/1402441057_Twitter.png)}
a.tyoutube{background-image:url(https://lh3.googleusercontent.com/-Mas51ujMhdA/U5dJqrGR7xI/AAAAAAAAUjU/owv4mlk2au4/s64-no/1402441143_YouTube.png)}
a.tinstagram{background-image:url(https://lh5.googleusercontent.com/-M6bwv_ZXFk8/U5dK0N6pmeI/AAAAAAAAUko/sBMmeUhVWw8/s64-no/1402441098_Instagram.png)}
a.tpinterest{background-image:url(https://lh6.googleusercontent.com/-h9IBD-G306o/U5dJ6vPcdTI/AAAAAAAAUjo/EeRtSTZ5AU0/s64-no/1402441109_pinterest.png)}
a.tgoogle{background-image:url(https://lh6.googleusercontent.com/--Jlsq6a1BpI/U5dKkTj91lI/AAAAAAAAUkU/PbNrzuRMfgY/s64-no/1402441071_GooglePlus.png)}
#masterpanel a small{background-color:Black; border-radius:10px; color:#FFF; display:none; font-family:Consolas,sans-serif; font-size:11px; font-weight:normal;  -moz-box-shadow:0 5px 10px #666;  -webkit-box-shadow:0 5px 10px #666;  box-shadow:0 5px 20px #666; width:80px; padding:5px; line-height:1; text-align:center}
#masterpanel a:hover small{display:block; position:absolute; top:0px; left:0; margin-top:-35px; z-index:9999; -moz-animation:mymove .25s linear; -webkit-animation:mymove .25s linear}
@-moz-keyframes mymove{0%{-moz-transform:scale(0,0); opacity:0}
50%{-moz-transform:scale(1.2,1.2); opacity:0.3}
75%{-moz-transform:scale(0.9,0.9); opacity:0.7}
100%{-moz-transform:scale(1,1); opacity:1}
}
@-webkit-keyframes mymove{0%{-webkit-transform:scale(0,0); opacity:0}
50%{-webkit-transform:scale(1.2,1.2); opacity:0.3}
75%{-webkit-transform:scale(0.9,0.9); opacity:0.7}
100%{-webkit-transform:scale(1,1); opacity:1}
}

Si cerca quindi questa riga di codice
<b:includable id='post' var='post'>

Eventualmente si clicca sulla freccetta nera posta alla sua sinistra per visualizzare tutto il codice della sezione. Si scorre il template in basso fino a trovare la riga <data:post.body/>. Se ce ne fossero due si sceglie la seconda. Subito sotto a questa si incolla questo nuovo codice 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='masterpanel'><ul id='mainpanel'><li><a class='tfacebook' href='#'><small>Diventa Fan!</small></a></li>
<li><a class='ttwitter' href='#'><small>Seguimi su Twitter!</small></a></li>
<li><a class='tyoutube' href='#'><small>Iscriviti al mio canale!</small></a></li>
<li><a class='tinstagram' href='#'><small>Seguimi su Instagram!</small></a></li>
<li><a class='tpinterest' href='#'><small>Seguimi su Pinterest!</small></a></li>
<li><a class='tgoogle' href='#'><small>Seguimi su Google+!</small></a></li>
</ul></div>
</b:if>

Si salva il modello. Le due righe evidenziate di verde in questo secondo codice sono i tag condizionali per mostrare i bottoni solo negli articoli e non in Homepage e nelle Pagine statiche.

 

Come detto al posto dei cancelletti si mettono i link ai vari social network e si possono anche modificare i testi del tooltip. Ricordo che visto che il codice va nel template di evitare apostrofi o caratteri accentati. Il primo codice è invece il CSS che serve per l'aspetto dei bottoni. Si possono modificare le distanze, i colori, la famiglia di font, l'ombreggiatura e altri parametri.

Fonte | Aizum Blog