MyBB-Es.com     Personalización y configuración de los foros MyBB     Tutoriales / Guías    

[Tutorial] Social Buttons [Fixed & Deslizantes]

Páginas (5): 1 2 3 4 5   
Jean Pierre   20 Feb, 2014, 1:48 pm
#1
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:

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

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

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

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

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

jQuery(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});

recomiendo 210 cuando lo usen de lado izquierdo, de modo que quería así:

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:
Espero les haya gustado y si tienen dudas con mucho gusto preguntar, saludos Rolleyes
Última modificación: 20 Feb, 2014, 2:53 pm por Jean Pierre.
  
Pilar1977   20 Feb, 2014, 2:15 pm
#2
(20 Feb, 2014, 1:48 pm)Jean Pierre escribió:
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:

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

.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: 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;
}

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:

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



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.

Vista Previa:
Spoiler:
Espero les haya gustado y si tienen dudas con mucho gusto preguntar, saludos Rolleyes

Como siempre encantadisima con tus trabajos Jean.

Pero tiene un pequeño error cuando pones los iconos en la derecha, si te fijas youtube y pinterest no se expande, se queda el icono quieto, solo se mueve la barra..
Saludossssss y 1 millon de gracias
  
 Responder
Jean Pierre   20 Feb, 2014, 2:24 pm
#3
Última modificación: 20 Feb, 2014, 2:55 pm por Jean Pierre.
  
 Responder
storm   20 Feb, 2014, 3:26 pm
#4
Última modificación: 20 Feb, 2014, 3:27 pm por storm.
  
 Responder
Jean Pierre   20 Feb, 2014, 3:32 pm
#5
  
 Responder
storm   20 Feb, 2014, 3:45 pm
#6
Me da error, me sale esto:
Última modificación: 20 Feb, 2014, 4:35 pm por storm.
  
 Responder
Jean Pierre   20 Feb, 2014, 3:55 pm
#7
  
 Responder
storm   20 Feb, 2014, 3:58 pm
#8
Joder lo he puesto en plantillas no en estilo, voy a cambiarlo y te digo.
- - - Actualizado - - -
Me sale así:
Última modificación: 20 Feb, 2014, 4:34 pm por storm.
  
 Responder
Jean Pierre   20 Feb, 2014, 4:07 pm
#9
(20 Feb, 2014, 3:58 pm)storm escribió: Joder lo he puesto en plantillas no en estilo, voy a cambiarlo y te digo.
- - - Actualizado - - -
Me sale así:
[Imagen: 21mu6gg.png]

Sí, ya veo, lo he notado ahorita que entré a tu foro, pero es porque la imagen que subiste mas-icons.png son de dimensiones pequeñas, no subiste la imagen original que dejé en el tema sino una redimensionada con menor tamaño, sube la original y reemplaza por el que tienes actualmente.

Luego de eso tendría que ver cómo se ve para darte las ediciones de código CSS en ciertos puntos para una buena alineación.
  
 Responder
storm   20 Feb, 2014, 4:11 pm
#10
Y cómo descargo la imagen de forma correcta, yo le doy botón derecho, guardar imagen como..
Se hace de otra forma?¿
  
 Responder
Páginas (5): 1 2 3 4 5   
Tema anterior      Tema siguiente
  
 Contáctanos
 Equipo del foro
 MyBB-Es.com - Soporte para los Foros MyBB en Español
 Volver arriba
 Marcar foros como leídos
 Sindicación RSS
 Ayuda
Powered By MyBB, © 2002-2025 MyBB Group.
Made with by Curves UI.