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



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



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 -