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

Barre verticale avec boutons de partage sur réseaux sociaux avec Effet | LeBlogger : Astuces Blogger et Blogspot

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:Connectez-vous à BloggerConnectez-vous à Modéle >> Modifier le code HTML (cochez développer des modèles de widgets)Placez le code CSS ci-dessous au-dessus ]]> :.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(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/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;}Suivant ajoutant jQuery et javascript, toujours dans Modifier le code HTML mettre le code suivant avant la balise :Pour le code en bleu est le " jQuery" ci-dessus.Le widget prochaine d'appel, placez le code HTML ci-dessous avant :

http://www.leblogger.fr/2013/04/barre-verticale-boutons-partage-reseaux.html