jueves, 25 de diciembre de 2014

on Leave a Comment

Botones sociales laterales



Buenas, hoy os mostraré como insertar en vuestro blog estos botones sociales laterales que al pasar el cursor por encima se despliegan con un bonito efecto.


Lo primero es ir a Plantilla > Editor HTML > Buscamos </head> y justo antes de </head> pegamos el siguiente código:

<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>



Después vamos a diseño y le damos a añadir widget, seleccionamos el que ponga HTML/Javascript e insertamos este código:

<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(https://lh4.googleusercontent.com/-YvuT8p88fv8/UfENL6P-ROI/AAAAAAAAMdQ/sJGzNVgLf2U/w23-h256-no/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>

Cambiamos las url por las nuestras y listo!



0 comentarios:

Publicar un comentario