Pubblicato il 02/02/15e aggiornato il

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. 

tooltip-bottoni-sociali

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




7 commenti :

  1. Ciao Ernesto.
    C'è qualcosa di simile da inserire all'interno dei post, che però funga da condivisione degli articoli sui vari social? Qualche idea?

    RispondiElimina
    Risposte
    1. Leggi questo post
      http://www.ideepercomputeredinternet.com/2013/09/icone-facebook-linkedin-twitter-googleplus-modello-blogger.html
      Poi potresti provare a sostituire la seconda parte del codice di questo articolo con quello del post che ti ho linkato. Non è cosa semplicissima ma neppure proibitiva con un po' di pazienza
      @#

      Elimina
  2. Ciao Ernesto vorrei cambiare con quelle che ho creato io le icone sociali di default di blogger quelle sotto i post, ho guardato un po tra i tuoi post ma sono tantissimi. Hai già fatto questo tutorial puoi indirizzarmi alla tua pagina? Grazie in anticipo Lisa

    RispondiElimina
    Risposte
    1. Ti riferisci alle icone di questo post o alle icone ufficiali di Blogger? Nel primo caso gli URL tipo questo
      https://lh5.googleusercontent.com/-ygAelYpbxKc/U5dI81gGAaI/AAAAAAAAUis/vGswwURBEQc/s64-no/1402441057_Twitter.png
      o questo
      https://lh4.googleusercontent.com/jleBWStjR4utzPxIrw987WZt6ygHTGheiZM-skAleXM8=s64-no
      con immagini caricate su Picasa
      http://www.ideepercomputeredinternet.com/2013/03/picasa-image-hotlink.html
      Se invece ti riferisci alle icone ufficiali di condivisione di Blogger non si può fare. Al massimo possono essere rese invisibili e mostrarne delle altre al loro posto come mostrato in questo post. Per rfenderle invisibili si va su Layout > Post del blog > Modifica e si toglie la spunta appunto alle icone
      @#

      Elimina
    2. si perfetto mi riferivo proprio a quelle ufficiali di blogger ma volendo scegliere appunto di non farle vedere ho modo di inserirne sempre sotto il post di mie esiete un codice per farle comparire li ma senza che fluttuino o altre cose semplici. Grazie nell'attesa saluti.

      Elimina
    3. Ti linko i post delle icone che ho attualmente su questo sito. Il primo è senza effetto hover
      http://www.ideepercomputeredinternet.com/2015/07/blogger-icone-social-network-mobile-desktop.html
      e il secondo con effetto hover
      http://www.ideepercomputeredinternet.com/2015/07/sprite-css-immagini-blogger-seo.html
      @#

      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.