Social Buttons [Fixed & Deslizantes]
Buen día comunidad, vengo con un sencillo tutorial para integrar lo que se conoce como Social Buttons (botones de redes sociales) a sus foros con un efecto deslizante agradable, y a su vez éste permanecerá fijo en cualquier parte de sus foros estando así a disposición de cualquier visitante a darle click en el momento que desee, ocupando un espacio mínimo lateral en la página para así no afectar el contenido principal de las páginas de sus foros.
Bien, antes de seguir quiero decirles que el tema se deriva de un tema de soporte que creó storm el cual lo pueden encontrar aquí.
Bien una vez teniendo referencia de dónde surge todo esto, empecemos con el tutorial.
1. Vamos a nuestro ACP y nos ubicamos en la siguiente dirección: ACP >> Estilos y Plantillas >> Plantillas >> (selecciona tu theme) >> Plantillas sin grupo >> headerinclude
Y van a cargar jQuery y jQuery UI respectivamente, les dejo los códigos a agregar:
Código:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js'></script>IMPORTANTE: Si ya tienes jQuery en tu foro, no hay necesidad de que lo vuelvas a agregar, solo te quedaría agregar jQuery UI.
2. Ahora nos ubicamos en: ACP >> Estilos y Plantillas >> Estilos >> (selecciona tu theme) >> Agregar hoja de estilo
Y llenaremos los campos de la siguiente manera (Nota: Si sabes cómo funciona esto puedes llenar los campos a tu gusto, las especificaciones son para usuarios que no tienen nociones de cómo hacer esto)
Nombre del archivo: socialbuttons.css
Adjunto a: Marcamos Globalmente y en la parte de abajo marcamos Escribir mi propio código
Al haber marcado Escribir mi propio código nos aparecerá un campo de texto grande grande, es allí en donde vamos a pegar el siguiente código:
Código PHP:
<?php
.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(images/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: right -177px;
}
.izquierda #youtube-btn span {
background-position: right -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;
}
Y finalizamos dando click en Guardar hoja de estilos.
3. Ahora vamos a agregar el código que hará que estos botones aparezcan en nuestro foro, para eso vamos a: ACP >> Estilos y Plantillas >> Plantillas >> cabecera >> header
Y al final pegamos el siguiente código:
Código PHP:
<?php
<script type='text/javascript'>
jQuery.noConflict();
jQuery(window).load(function(){
jQuery('.botones-sociales .social').mouseenter(function(){
jQuery(this).stop();
jQuery(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});
});
jQuery('.botones-sociales .social').mouseleave(function(){
jQuery(this).stop();
jQuery(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});
});
});
</script>
<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>
Finalizamos guardando los cambios.
4. Y no menos importante y sí siendo el paso más sencillo vamos a agregar la siguiente imagen dentro de nuestra carpeta images de nuestro FTP con el nombre tal cual está.
[attachment=1535]
Finalizamos guardando los cambios y listo, con esto ya deberíamos ver en nuestro index los botones de redes sociales deslizantes cuyo efecto se notará al pasar el cursor del mouse sobre estos.
Datos Adicionales
Pueden utilizar esta barra de botones sociales tanto de lado izquierdo como de lado derecho, para ello solo van a su plantilla header en donde colocaron el código, y buscan esto:
Código PHP:
<?php
<div class='botones-sociales derecha hidden-phone hidden-tablet'>
Para emplearlo de lado izquierdo, cambiar derecha por izquierda y tendrán los social buttons de lado izquierdo en sus foros, de modo que les quedaría así
Código PHP:
<?php
<div class='botones-sociales izquierda hidden-phone hidden-tablet'>
Y si notan un problema con la alineación al momento de pasar el cursor del mouse sobre los botones regresar a la plantilla header y jugar con el width de esta línea de código.
Código PHP:
<?php
jQuery(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});
recomiendo 210 cuando lo usen de lado izquierdo, de modo que quería así:
Código PHP:
<?php
jQuery(this).animate({width:'210'}, 500, 'easeOutBounce',function(){});
Y si luego quieren volverlo a usar de lado derecho, regresar el valor del width a 160.
Vista Previa:
[spoiler]
![[Imagen: 2cqe.png]](http://img833.imageshack.us/img833/7104/2cqe.png)
![[Imagen: CMOp6PO.png]](http://i.imgur.com/CMOp6PO.png)
![[Imagen: WZXiRyk.png]](http://i.imgur.com/WZXiRyk.png)
[/spoiler]
Espero les haya gustado y si tienen dudas con mucho gusto preguntar, saludos [/spoiler]
![[Imagen: 21mu6gg.png]](http://i60.tinypic.com/21mu6gg.png)