Pubblicato il 02/01/15e aggiornato il

Bottoni sociali animati con contatore manuale per Facebook, Twitter, Google+ e Feed.

Bottoni sociali animati con contatore dei follower per Twitter, Facebook, Google+ e Feed RSS per Blogger.
Anno nuovo widget nuovo ma funzionalità vecchio stile. Il gadget che presento mostra le icone di Twitter, Facebook, Google+ e Feed RSS con la particolarità che al passaggio del cursore ci sarà un effetto animazione con la comparsa di un fumetto con il numero dei follower in quel determinato social network. Dico subito che il contatore è manuale nel senso che il webmaster dovrà aver cura di aggiornare il numero dei follower ogni qualvolta lo riterrà opportuno. 

Nella versione originale di cui posto il link a fondo pagina sono presenti oltre ai social sopra indicati anche Dribble e Forrst che ho ritenuto non inserire visto il poco seguito che hanno qui da noi. Il widget potrà essere inserito in una sidebar ma sarà necessario anche modificare il modello. Alla fine della installazione il gadget avrà questo aspetto 


Dopo aver salvato il template si va su Modello > Modifica HTML e si clicca sulla icona nera accanto alla 14-esima riga per visualizzare il codice della sezione b:skin.  Con l'ausilio di Ctrl+F si cerca la riga ]]></b:skin> e subito sopra a questa si incolla questo codice

/* Bottoni Sociali animati */
.social {
  border-radius: 30px;
  position: relative;
  width: 150px;
  height: 32px;
  box-shadow: inset -1px 1px 1px 0px rgba(0, 0, 0, 0.2);
  display: inline-block;
}
.social .count {
  width: 58px;
  height: 31px;
  background: url(https://lh5.googleusercontent.com/-Jf36iOnwaqU/VKaUD0BzuhI/AAAAAAAAquU/peD81fscQoA/s58/bubble.png) no-repeat;
  position: absolute;
  top: 0;
  right: -65px;
  line-height: 31px;
  text-align: center;
  text-indent: 8px;
  font-weight: bold;
  font-size: 14px;
  color: #868686;
}
.social span {
  font-size: 12px;
  color: #fff;
  line-height: 30px;
  display: block;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  margin-left: 30px;
  text-align: center;
  width: 120px;
}
.social .button {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  position: absolute;
  left: 0;
}
#twitter.social {
  background: #55d4ff;
}
#twitter .button {
  background: #fff url(https://lh6.googleusercontent.com/-trETSnRkGqA/VKaQ7z3A5oI/AAAAAAAAquI/6VkdT7Iozvw/s20/twitter.png) 5px 5px no-repeat;
  border: 1px solid #53d4ff;
}
#facebook.social {
  background: #354970;
}
#facebook .button {
  background: #fff url(https://lh4.googleusercontent.com/-7rGftSutES8/VKaQ1_3-rVI/AAAAAAAAqtw/IQvrSLAIkTM/s20/facebook.png) 5px 5px no-repeat;
  border: 1px solid #354970;
}
#rss.social {
  background: #db6610;
}
#rss .button {
  background: #fff url(https://lh3.googleusercontent.com/-nWdZo05SNTM/VKaQ6OLkvxI/AAAAAAAAquA/RcKx1gTLG4k/s20/rss.png) 5px 5px no-repeat;
  border: 1px solid #db6610;
}
#googleplus.social {
  background: #383638;
}#googleplus .button {
  background: #fff url(https://lh3.googleusercontent.com/-7A6g5XFHpE8/VKaQ4I0g9hI/AAAAAAAAqt4/4NM6R2K5Ar4/s20/googleplus.png) 5px 5px no-repeat;
  border: 1px solid #383638;
}

Successivamente si cerca la riga </head> e, subito sopra, si incolla questo nuovo codice

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/><script type='text/javascript'>
$(document).ready(function() {
    $(&#39;.count&#39;).hide();
    $(&#39;.sociallink&#39;).hover(
     function() {    
      social_id = $(this).find(&#39;.social&#39;).attr(&#39;id&#39;);
      switch(social_id)
      {
        case &#39;twitter&#39;:
          new_textcolor = &#39;#55d4ff&#39;;
          new_text = &#39;Follower su Twitter&#39;;
          break;
        case &#39;facebook&#39;:
          new_textcolor = &#39;#354970&#39;;
          new_text = &#39;Amici su Facebook&#39;;
          break;       
        case &#39;rss&#39;:
          new_textcolor = &#39;#db6610&#39;;
          new_text = &#39;Iscritti ai feed&#39;;
          break;
        case &#39;googleplus&#39;:
          new_textcolor = &#39;#383638&#39;;
          new_text = &#39;Amici su Google+&#39;;
          break;       
      }
      $(this).find(&#39;.button&#39;).stop().animate({
        &#39;left&#39;: &#39;119px&#39;
      }, 700);
       $(this).find(&#39;span&#39;).stop().animate({
         &#39;margin-left&#39;: &#39;5px&#39;,
         &#39;color&#39;: new_textcolor
       }, 500);
       $(this).find(&#39;.social&#39;).stop().animate({
         backgroundColor: &#39;#fcfcfc&#39;
       }, 500);
       $(this).find(&#39;span&#39;).text(new_text);
       $(this).find(&#39;.count&#39;).stop().fadeIn(&quot;slow&quot;);
    },
    function(){
      social_id = $(this).find(&#39;.social&#39;).attr(&#39;id&#39;);
      switch(social_id)
      {
        case &#39;twitter&#39;:
          new_bgcolor = &#39;#55d4ff&#39;;
          new_text = &#39;Segui su Twitter&#39;;
          break;
        case &#39;facebook&#39;:
          new_bgcolor = &#39;#354970&#39;;
          new_text = &#39;Segui su Facebook&#39;;
          break;       
        case &#39;rss&#39;:
          new_bgcolor = &#39;#db6610&#39;;
          new_text = &#39;Iscriviti via RSS&#39;;
          break;
        case &#39;googleplus&#39;:
          new_bgcolor = &#39;#383638&#39;;
          new_text = &#39;Segui su Google+&#39;;
          break;       
      }
       $(this).find(&#39;.button&#39;).stop().animate({
        &#39;left&#39;: &#39;0&#39;
        }, 700);
      $(this).find(&#39;span&#39;).stop().animate({
         &#39;margin-left&#39;: &#39;30px&#39;,
        &#39;color&#39;: &#39;#ffffff&#39;
       }, 600);
      $(this).find(&#39;.social&#39;).stop().animate({
         backgroundColor: new_bgcolor
       }, 500);
      $(this).find(&#39;span&#39;).text(new_text);
      $(this).find(&#39;.count&#39;).stop().fadeOut(&quot;slow&quot;);
    });
});
</script>

Si salva il modello. La riga evidenziata di giallo rappresenta la libreria JQuery e può essere tralasciata se fosse già presente nel vostro modello. Le scritte in rosso saranno quelle visibili nel widget e possono essere personalizzate a piacere oltre ai codici dei colori per eventualmente modificare l'aspetto.

Ora si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla

<div class="wrap">
<a href="https://twitter.com/parsifal32" class="sociallink">
  <div id="twitter" class="social" style="background-color: rgb(85, 212, 255);">
    <div class="button" style="left: 0px;"></div>
    <span style="color: rgb(255, 255, 255); margin-left: 30px;">Seguimi su Twitter</span>
    <div class="count" style="display: none; opacity: 1;">753</div>
  </div>
</a>
<br />
<br />
<a href="https://www.facebook.com/ideepercomputeredinternet" class="sociallink">
  <div id="facebook" class="social" style="background-color: rgb(53, 73, 112);">
    <div class="button" style="left: 0px;"></div>
    <span style="color: rgb(255, 255, 255); margin-left: 30px;">Seguimi su Facebook</span>
    <div class="count" style="display: none; opacity: 1;">3407</div>
  </div>
</a>
<br />
<br />
<a href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" class="sociallink">
  <div id="rss" class="social" style="background-color: rgb(219, 102, 16);">
    <div class="button" style="left: 0px;"></div>
    <span style="color: rgb(255, 255, 255); margin-left: 30px;">Iscriviti ai Feed</span>
    <div class="count" style="display: none; opacity: 1;">2200</div>
  </div>
</a>
<br />
<br />
<a href="https://plus.google.com/+ideepercomputeredinternet" class="sociallink">
  <div id="googleplus" class="social" style="background-color: rgb(56, 54, 56);">
    <div class="button" style="left: 0px;"></div>
    <span style="color: rgb(255, 255, 255); margin-left: 30px;">Seguimi su Google+</span>
    <div class="count" style="display: none; opacity: 1;">1022</div>
  </div>
</a>
<br />
<br />
</div>

Si salva e si posiziona in una sidebar. Dovranno essere inseriti gli URL della pagina Facebook, dell'account Twitter, della pagina brand di Google Plus e dei feed del blog. Si inseriscono manualmente anche i numeri dei follower nei rispettivi social network.
Fonte | Animated Social Icons CodePen -




3 commenti :

  1. Auguri di buon Natale e felice anno nuovo.

    Ti pocco consigliare di dare un'occhiata a questi temi per blogger?
    ecommerce
    http://www.templateism.com/2014/10/betacommerce-shopping-blogger-template.html
    sito torrent
    http://www.templateism.com/2014/12/torrentism-responsive-blogger-template.html
    portale video
    http://www.templateism.com/2014/01/blogtube-professional-video-blogger.html

    bbye

    RispondiElimina
    Risposte
    1. Grazie degli auguri :)
      I temi per Blogger creati da web designer non mi sono mai interessati troppo. Preferisco operare sui modelli ufficiali e aggiungere lì le personalizzazioni. I modelli scaricati da internet hanno e danno sempre un sacco di problemi
      @#

      Elimina
    2. Ni.
      In realtà wordpress ha acquisito una certa rilevanza rispetto al concorrente blogger perchè offriva personalizzazioni che blogger anni fa non dava. Oggi questa distanza si sta assottigliando, ivi compresa la possibilità di crearsi un ecommerce, molto ricercata per utenti esperti (una fascia di pubblico che bada alle personalizzazioni dei blog).

      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.