Pubblicato il 28/05/14e aggiornato il

Bottoni per condividere su Facebook, Twitter e Google+ con contatore e effetto slide.

Come mostrare i bottoni di condivisione di Facebook, Twitter e Google Plus con effetto slide e hover e con contatore per Blogger.
Ho già presentato una gran quantità di widget con bottoni per la condivisione dei post nei più importanti social network che adesso per proporre qualcosa di nuovo bisogna che abbia assolutamente i tratti dell'originalità. È il caso dei pulsanti con contatore di Twitter, Facebook e Google+ che possono essere visualizzati sotto ciascun post nella parte centrale.

I bottoni all'inizio si presentano in bianco e nero e spogli ma quando ci si passa sopra con il mouse si colorano e mostrano il contatore orizzontale con le condivisioni ottenute dalla pagina in ciascun social network. Cliccando su uno di questi pulsanti si aprirà la finestra precompilata per condividere la pagina con un click su Twitter, Facebook o Google Plus.

I pulsanti vengono visualizzati allineati e centrati sotto il post in questo modo


Dopo aver salvato il template si va su Modello > Modifica HTML > Vai al widget > Blog1

codice-blogger

quindi si cerca la sezione che inizia con la riga
<b:includable id='post' var='post'>
che è quella che sovrintende all'aspetto del blog nella versione desktop

blogger-versione-desktop

Si clicca sulla freccetta nera per visualizzare tutto il codice e si scorre fino a trovare la nuova riga
<div class='post-footer'>
Subito sopra a questa si incolla il seguente codice

<!-- Bottoni Sociali Slide Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>@import url(http://fonts.googleapis.com/css?family=Open+Sans);@import &quot;//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css&quot;;#button-box{width:430px;overflow: hidden;margin: 10px auto 0;}
.bottonisociali{float:left;margin-right: 10px;width: 120px;background: #eaeaea;border: 1px solid #cbcbcb;border-radius: 3px; -o-border-radius: 3px;-ms-border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow:inset 0 1px 0px #fdfdfd;padding:15px 5px 5px;box-sizing:border-box;}
.bottonisociali i{background: #c5c5c5;color: #eaeaea;text-align:center;line-height:40px;font-size: 18px;width:40px;height:40px; display:block;margin: 0 auto 10px;border-radius: 50%;-o-border-radius: 50%;-ms-border-radius: 50%;-moz-border-radius: 50%; -webkit-border-radius: 50%;}
.contenitore-bottoni{text-align:center;text-transform:uppercase;font-size: 12px;color: #656565;line-height: 54px;font-family: Open Sans;background: #d8d8d8;width: 100%;height: 45px;box-shadow:inset 0 -2px 4px #c7c7c7;border-radius: 3px;-o-border-radius: 3px;-ms-border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;position:relative;overflow: hidden;}
.button-scroll,.bottonisociali i{-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;}
.button-scroll {box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);border-radius: 0 0 22px 22px;-o-border-radius: 0 0 22px 22px; -ms-border-radius: 0 0 22px 22px;-moz-border-radius: 0 0 22px 22px;-webkit-border-radius: 0 0 22px 22px;transition: all 0.2s ease-in-out;position: absolute;height: 45px;width: 100%;top: -35px;}
.button-scroll::after {content: &quot;&quot;;display: block;position: absolute;width:100%;height: 10px;box-shadow: inset 0 1px 0px #fdfdfd, 0 3px 0px #cdcdcd;border-radius: 3px;-o-border-radius: 3px;-ms-border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;background: #eaeaea;border:1px solid #cbcbcb;box-sizing: border-box;bottom: 0;}
.bottonisociali:hover .button-scroll {top: 0;border-radius: 3px;}
.IN-widget,.bottonisociali iframe, .google #___plusone_0 {top:-2px;position: relative;}
.twitter iframe {width: 79px !important;}
.google #___plusone_0 {width: 60px !important;}
.bottonisociali.facebook:hover i, .facebook .button-scroll {background:#305c99;color: white;}
.bottonisociali.twitter:hover i, .twitter .button-scroll{background: #00cdff;color: white;}
.bottonisociali.google:hover i, .google .button-scroll{background: #d24228;color: white;}
</style><div id='button-box'><div class='facebook bottonisociali'> <i class='icon-facebook'/> <div class='contenitore-bottoni fb'> <div class='button-scroll'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px'/> </div> Facebook </div></div><div class='twitter bottonisociali'> <i class='icon-twitter'/> <div class='contenitore-bottoni tw'> <div class='button-scroll'><a class='twitter-share-button' href='https://twitter.com/share'> Tweet </a> <script> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;; if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script></div>Twitter </div></div><div class='google bottonisociali'> <i class='icon-google-plus'/> <div class='contenitore-bottoni tw'> <div class='button-scroll'><div class='g-plusone' data-size='medium'/><script type='text/javascript'>(function(){var po=document.createElement(&#39;script&#39;);po.type = &#39;text/javascript&#39;;po.async = true;po.src=&#39;https://apis.google.com/js/plusone.js&#39;; var s =
document.getElementsByTagName(&#39;script&#39;)[0];s.parentNode.insertBefore(po, s);})();</script></div>Google+</div></div></div><div style='text-align: right;'/>
</b:if>
<!-- Bottoni Sociali Slide Fine -->

Si salva il modello. Le due righe evidenziate di giallo sono i tag condizionali per mostrare i bottoni solo nei post quindi se andate su Anteprima Modello non li vedrete. I bottoni possono anche essere inseriti in un'altra posizione per esempio un po' più in basso incollando il codice subito prima o subito dopo queste tre nuove righe

<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'>
<div class='post-footer-line post-footer-line-3'>

Fonte | Amor Sevillista -




3 commenti :

  1. ho inserito i tre bottoni ma nn si riesce poi a cliccarci sopra per condividere perché le finestre si aprono e chiudono troppo velocemente
    grazie

    RispondiElimina
    Risposte
    1. Il codice non è mio. L'ho preso dal sito linkato a fine post.Non ti so dire la ragione del tuo problema però prova a cambiare tutte le transizioni che ora durano due decimi di secondo tipo
      transition: all 0.2s ease-in-out;
      e metterci per esmpio 0.8s

      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.