Tutorial: Botones flotantes de redes sociales a mano derecha con efectos

Hola amigos hablachento, les traigo un tutorial para blogger, hay una bookmarking social asociado a la derecha de la pantalla, el widget seguirá el movimiento hacia arriba y hacia abajo. Debido a minimizar el uso de javascript, deliberadamente dejado claro sin el widget utilización cierto efecto con el uso consecuente de imágenes para formar un widget que más y más. Bueno, esta vez voy a dar un tutorial o cómo crear un widget de marcadores sociales flotante con una biblioteca jQuery efectos de aceleración adicional y por supuesto con el uso de la imagen más pequeña (sólo uno).

Con el jQuery Además, si pones el cursor sobre uno de los iconos de marcadores sociales, que va a salir despacio, suave como la nueva princesa Solo fuera del palacio, fue debido al efecto de facilitar el jQuery existente en ui.min. Además del efecto de facilitar que añado en este widget, así como el tipo de medios de comunicación social que conecto más. En la plantilla o Pakdhe Johny Johny Ribet sólo hay cuatro tipos, para este tiempo puedo añadir un widget de medios de comunicación social Pinterest y Youtube para hacerla más completa. Estos son los pasos de la fabricación:

    Entre para Blogger
    Ir a la plantilla HTML Edit >> (marque ampliar las plantillas de widgets)
    Coloque el siguiente código CSS por encima de ]]> </ b: piel>:

.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/AVvXsEjW9A202gKmBB8pvcnZdlnx55hWVtQ2DDMMIlf9dxtMlatD8_wcTlcNSgfokZBmsgpkGm6DeCnGmdSUrsjf5Knq_j_SgejLU25K-LLLTnt8rUPt3pQTf4WNnSsv5unbpWCp8n-1sWRRuyg/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;
}

Las siguientes adiciones y javascript jquery, todavía en lugar Editar HTML el siguiente código antes de la etiqueta </ head>: