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.

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




 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/AVvXsEibuXskqDG_Bg4Z0K67EGZvsGXjLnPOdlGb-q70zxkDjDLr1P2icQ6JBnygsByq5Kht2Mg_nPD8oBK4YpgkcxNchxHPxvu-EI5s7BzTb1lqeZ_Wbh0eG61tot1Oj682jmDnIjj_UwDq2MQ/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;
    }
  4. 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.
  5. 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>

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

14 Commentaires

Laisser un commentaire

  1. super merci. J ai cela dis un souci le rollover est fixe sur mon site. J'obtiens pas le déplacement de la vignette

    RépondreSupprimer
  2. Merci pour ce tuto.
    Donc, ce sera le même procédé chez tous les réseaux sociaux quels qu'ils soient?

    RépondreSupprimer
  3. Salut,
    je viens de tomber sur ce site, très sympathique, mais avec ce code j'ai un problème , tout est inversé, quand j'ai le bouton à gauche, le texte s'ouvre vers la gauche et donc impossible de le lire pareil pour la droite, le texte s'ouvre vers la droite ... Que dois-je donc faire ?

    RépondreSupprimer
  4. Savez-vous si on peut faire la même chose mais rediriger les personnes vers le site little-market ? Je sais où mettre l'ID mais pr le visuel ?

    RépondreSupprimer
  5. Changer les liens en bleu dans le code ci-dessus, par vos liens Facebook, twitter, google plus...

    RépondreSupprimer
  6. Bonjour,
    l'image source n'est plus disponible, pourriez-vous la mettre en ligne ou nous permettre de la télécharger ?.
    Merci.

    RépondreSupprimer
  7. Pareil et pour mon problème ? :
    Salut,
    je viens de tomber sur ce site, très sympathique, mais avec ce code j'ai un problème , tout est inversé, quand j'ai le bouton à gauche, le texte s'ouvre vers la gauche et donc impossible de le lire pareil pour la droite, le texte s'ouvre vers la droite ... Que dois-je donc faire ?

    RépondreSupprimer
  8. Bonjour,

    Je suis toujours en attente d'une réponse de votre part. Pourriez-vous svp me fournir l'image que vous aviez utilisé pour ce tuto.

    Merci.

    RépondreSupprimer
  9. J'ai met le code mais n'apparaisse sur mon blog aidez moi

    RépondreSupprimer
  10. Ce code ne fonctionne plus.

    RépondreSupprimer
  11. Bonjour, super tuto !! malheureusement l'URL des icônes ne fonctionne plus...
    auriez -vous un autre lien ou un tuto pour en créer un ?
    merci d'avance

    RépondreSupprimer
  12. Voici un nouveau lien pour l'image qui ne fonctionne plus !

    Remplacer le lien par celui ci:

    http://3.bp.blogspot.com/-7H0LXzrgPhg/UnDYXwkVO8I/AAAAAAAAEr4/hpSQRjcPkFM/s1600/floating+mas-icons.png

    :)

    RépondreSupprimer

Enregistrer un commentaire

Laisser un commentaire

Plus récente Plus ancienne