Botones sociales flotantes con efecto hover

Comparteme :

De nuevo, después de una larga temporada sin publicar nada, hoy os traigo un nuevo cacharrito social, flotante, espero que os guste o sea de vuestro agrado. Trata de una barra social de botones sociales, que se posicionan en la parte lateral del blog o web, y están desarrollados con CSS3, HTML y Sprites de imagen al hacer hover o al pasar el cursor por encima del botón social. Y sirve para que tus seguidores o lectores de tu blog, o ya sea de una web, hagan o accionen con un clic en dicho icono social, para que te sigan en las distintas redes sociales. A priori, este gadget social, está realizado y ejecutado, para obtener más fans o seguidores de tu página web o blog, de tu site a las redes sociales. Los iconos están formados por los botones siguientes: Facebook, Twitter, Google+, Youtube, RSS. Bueno, después de una breve explicación, puedes ver la demo de los iconos a continuación.

Demostración
Para añadirlo sigue los siguientes pasos:

Ir a Blogger
Después a Plantilla.
Añadir un Gadget.
Y ahora ir a Editar HTML.
Añade el siguiente código antes de ]]></b:skin>:

.social-sidebar-buttons {
width: 32px;
margin-left: 1100px;
}
.social-facebook {
    height: 48px;
    width: 48px;
    margin:0px 0 0 48px;
    float: left;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
 position:fixed;
 right:0px;
 z-index:1000;
 top:200px;

}
.social-facebook:hover {
    background-position: 0px -48px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.social-twitter {
    height: 48px;
    width: 48px;
    margin:0px 0 0 48px;
    float: left;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
 position:fixed;
 right:0px;
 z-index:1000;
 top:250px;
 
}
.social-twitter:hover {
    background-position: 0px -48px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.social-google {
    height: 48px;
    width: 48px;
    margin:0px 0 0 48px;
    float: left;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
 position:fixed;
 right:0px;
 z-index:1000;
 top:300px;
 
}
.social-google:hover {
    background-position: 0px -48px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.social-youtube {
    height: 48px;
    width: 48px;
    margin:0px 0 0 48px;
    float: left;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
 position:fixed;
 right:0px;
 z-index:1000;
 top:350px;
 
}
.social-youtube:hover {
    background-position: 0px -48px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.social-rss {
    height: 48px;
    width: 48px;
    margin:0px 0 0 48px;
    float: left;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
 position:fixed;
 right:0px;
 z-index:1000;
 top:400px;
 
}
.social-rss:hover {
    background-position: 0px -48px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.twitter-hover {
    background-image: url('http://3.bp.blogspot.com/-aW0EJLzWqQQ/U-kFYKUFEPI/AAAAAAAAVZc/uFV9N6kQEts/s1600/twitter-hover.png');
}
.facebook-hover {
    background-image: url('http://1.bp.blogspot.com/-OUx8NjCmOPY/U-kFMvueC5I/AAAAAAAAVZU/c9GltNEzfwI/s1600/facebook-hover.png');
 
}
.google-hover {
    background-image: url('http://2.bp.blogspot.com/-eBa2XYdq3Z0/U-kFh6_wPmI/AAAAAAAAVZk/bYRySdPNLZs/s1600/google-hover.png');
}
.youtube-hover {
    background-image: url('http://3.bp.blogspot.com/-WgqHTGHIbwU/U-kFrohrovI/AAAAAAAAVZs/VDYpeZL4REA/s1600/youtube-hover.png');
}
.rss-hover {
    background-image: url('http://3.bp.blogspot.com/-fLZeQuFiekc/U-kF1msvhZI/AAAAAAAAVZ0/fHgCKPkPlBI/s1600/rss-hover.png');
}

Ahora añade el codigo HTML donde creas conveniente por ejemplo en diseño/gadget

Ir a Blogger
Después a Plantilla.
Editar HTML.
Añade el siguiente código antes de </body>:
Y remplaza todas las "#" por las URL de tus redes sociales, y listo!

<a href="#" alt="Facebook" target="_blank"><div class="social-facebook facebook-hover"></div></a><a href="#" alt="Twitter" target="_blank"><div class="social-twitter twitter-hover"></div></a><a href="#" alt="Google+" target="_blank"><div class="social-google google-hover"></div></a><a href="#" alt="Youtube" target="_blank"><div class="social-youtube youtube-hover"></div></a><a href="#" alt="Rss" target="_blank"><div class="social-rss rss-hover"></div></a>

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

Botones sociales flotantes con efecto hover.

Comparte

BLOGUERO TUTORIAL