Barre verticale avec boutons de partage sur réseaux sociaux avec Effet

Aprés le gadget Module Social Facebook  (Fans sur Facebook) flottant sur votre blogs. Voila comment faire une barre verticale avec boutons de partage sur réseaux sociaux ? avec effet attaché à la droite de l'écran...

C'est ici !!! Alors le widget suit le mouvement de haut en bas pour minimiser l'utilisation du javascript,

Et bien, je vais vous expliquer comment mettre en place le tutoriel ou comment faire un widget bookmarking social flottante avec jQuery et l'effet des cours d'assouplissement supplémentaire.

DEMO

 Il n'y a que 4 types de réseaux sociaux avec Pinterest et Youtube.

Voici les étapes de fabrication:
1. Connectez-vous à Blogger
2. Connectez-vous à Modéle >> Modifier le code HTML (cochez développer des modèles de widgets)
3. Placez le code CSS ci-dessous au-dessus de ]]></b:skin> :

.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM9EzsalcMW55qzI6NqvWYLHUMaznBNNYpzS8ZWPMqJK56MqY6XMAzIIXA45yDhyTPlzhYVf2EimH_CstVOdNYKBsfe5_CReaiGa_KH21szJWW9jfGWMGsfCi_Rs5r5crwj7epdDLUZcQ/s1600/floating+mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}

2. Suivant ajoutant jQuery et javascript, toujours dans Modifier le code HTML mettre le code suivant avant la balise </head> :
   

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

   <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
   <script>
       $(window).load(function(){
           $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
               $(this).stop();
               $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
           });
           $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
               $(this).stop();
               $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
           });
       });
   </script>

   Pour le code en bleu est le " jQuery" ci-dessus.
3. Le widget prochaine d'appel, placez le code HTML ci-dessous avant </body> : 

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/Ton FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Suivez moi sur Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/Ton twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Suivez moi sur Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/Ton G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Suivez moi sur Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/Ton ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/Ton ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Suivez moi sur Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/Ton flux' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Abonnez vous RSS</span></span></a>
</div>

1. Changer les liens en bleu dans le code ci-dessus, par vos liens Facebook, twitter, google plus....
2. Enfin, enregistrer votres modèles