Anteriormente ya vimos como colocar unos simpáticos iconos flotantes de Redes Sociales y para continuar ahorrando espacio en nuestros Blog, hoy os muestro otra forma de hacerlo y es colocando en el lateral las redes sociales de más auge en estos momentos (Facebook,Twitter,Google+,Pinteres,Youtube y nuestro feed).
Este gadget los muestra en el lateral del blog y con un efecto deslizante y al colocar el cursor sobre los iconos van a salir lentamente.
VER EJEMPLO
1.- Entrar en panel de administración - plantilla - buscar (f3 o ctsl+f) </head> y pega justo antes el siguiente script:
<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(){
$('.botones-sociales .social').mouseenter(function(){
$(this).stop();
$(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});
});
$('.botones-sociales .social').mouseleave(function(){
$(this).stop();
$(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});
});
});
</script>
2.- Entrar en panel de administración - Diseño - Añadir un gadget HTML/Javascript y pega el siguiente 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(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/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>
Cambiamos las url de nuestras redes sociales y listo.
Las dudas que te hayan quedado sobre este tutorial, por favor, déjamelas en el espacio de comentarios, te contestaré lo antes posible.