Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Botones sociales flotantes con efecto hover



Botones sociales flotantes


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.









Para añadir ésta barra social en Blogger, sigues estos pasos!



  1. Ir a Blogger
  2. Después a Plantilla.
  3. Añadir un Gadget.
  4. Y ahora ir a Editar HTML.
  5. 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');
}



Y ahora toca añadir los botones del HTML y la llamada al estilo CSS!



  1. Ir a Blogger
  2. Después a Plantilla.
  3. Editar HTML.
  4. Añade el siguiente código antes de </body>:
  5. 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>




Aizum Blog, lunes, agosto 11, 2014


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9