Divisor

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


Botones de redes sociales con efecto deslizante




Hoy he visto en internet, navegando, unos botones que me han llamado mucho la atención y no he podido remediar escribir sobre estos fantásticos botones deslizantes de redes sociales, que son muy vistosos y llamativos, ya que cuando pasamos el cursor por encima de ellos, se deslizan, abriéndose hacia la izquierda con una transición y cambiando de color. Estos botones se posicionan en la parte lateral de tu web o blog y corresponden a las redes sociales de más auge del momento: Facebook, Twitter, G+, Pinterest, YouTube y Feed.






  1. Para añadirlo, debes de localizar en tu plantilla la etiqueta siguiente de más abajo:

  2. </head>

  3. Una vez localizalo con (ctrl+F) la anterior etiqueta en tu plantilla, añades el script siguiente que verás a continuación, antes de dicha etiqueta anterior pega esto:

  4. <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;.botones-sociales .social&#39;).mouseenter(function(){
    $(this).stop();
    $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
    });
    $(&#39;.botones-sociales .social&#39;).mouseleave(function(){
    $(this).stop();
    $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
    });
    });
    </script>

  5. Ahora por último, deberás de colocar el siguiente código, en un elemento en modo de gadget, es decir, añadir gadget y luego seleccionamos Html/Javascript y pegas:

<style type="text/css">
.botones-sociales {
position: fixed;
top: 130px;
width: 45px;
z-index: 9999;
}
.izquierda {
left: 0;
}
.derecha{
right: 0;
}
.botones-sociales #twitter-btn .social,
.botones-sociales #facebook-btn .social,
.botones-sociales #google-btn .social,
.botones-sociales #rss-btn .social,
.botones-sociales #pinterest-btn .social,
.botones-sociales #youtube-btn .social {
background-color: #33353B;
background-image: url(http://3.bp.blogspot.com/-opXRPqX4Ia4/UfFh1sDxJ1I/AAAAAAAAOps/Kl_mb2q-AZM/s1600/mas-icons.png);
}
.izquierda #facebook-btn span {
background-position: right 10px;
}
.izquierda #twitter-btn span {
background-position: right -35px;
}
.izquierda #google-btn span {
background-position: right -127px;
}
.izquierda #rss-btn span {
background-position: right -80px;
}
.izquierda #pinterest-btn span {
background-position: 11px -177px;
}
.izquierda #youtube-btn span {
background-position: 11px -223px;
}
.derecha #facebook-btn span {
background-position: 12px 10px;
}
.derecha #twitter-btn span {
background-position: 11px -35px;
}
.derecha #google-btn span {
background-position: 10px -127px;
}
.derecha #rss-btn span {
background-position: 11px -80px;
}
.derecha #pinterest-btn span {
background-position: 11px -177px;
}
.derecha #youtube-btn span {
background-position: 11px -223px;
}
.botones-sociales #facebook-btn:hover .social {
background-color: #3B5998;
}
.botones-sociales #twitter-btn:hover .social {
background-color: #62BDB2;
}
.botones-sociales #google-btn:hover .social {
background-color: #DB4A39;
}
.botones-sociales #rss-btn:hover .social {
background-color: #FF8B0F;
}
.botones-sociales #pinterest-btn:hover .social {
background-color: #D43638;
}
.botones-sociales #youtube-btn:hover .social {
background-color: #C4302B;
}
.botones-sociales a:hover .texto{
display: block;
}
.izquierda .social {
-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;}

.izquierda .texto{
display: none;
float: right;
font-size: 1em;
font-weight: bold;
margin: 11px 40px 11px 0px;
white-space: nowrap;
}
.derecha .social {
-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;}

.derecha .texto {
display: none;
float: left;
font-size: 80%;
font-weight: bold;
margin: 11px 0 11px 40px;
white-space: nowrap;
}
.botones-sociales .texto{
color: #FFFFFF;
}
</style>

<div class='botones-sociales derecha hidden-phone hidden-tablet'>
<a class='itemsocial' href='url de facebook' id='facebook-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Facebook</span></span></a>
<a class='itemsocial' href='url de twitter'id='twitter-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Twitter</span></span></a>
<a class='itemsocial' href='url de google+' id='google-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Google</span></span></a>
<a class='itemsocial'href='url de pinterest 'id='pinterest-btn' target='_blank'><span class='social'>
<span class='texto'>Síguenos via Pinterest</span></span></a>
<a class='itemsocial' href='url de youtube' id='youtube-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Youtube</span></span></a>
<a class='itemsocial' href='url del feed' id='rss-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via RSS</span></span></a>
</div>


Aizum Blog, martes, mayo 14, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

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