Cerrar Ventana

Algunas cookies de este sitio son esenciales, y el sitio no funcionará como se espera sin ellas. Estas cookies se establecen en el momento de enviar un formulario, inicie sesión o interactuar con el sitio realizando una acción que va más allá de hacer clic en un simple enlace.


Leer Más

Descarga MyBB 1.8.12
SoporteMyBB tiene un total de 803 temas de soporte. 10 quedan aún por resolver, 151 han quedado obsoletos y 642 han sido resueltos.

Hola invitado, aún no tienes una cuenta? Regístrate gratis desde aqui !!! Como registrado podrás obtener puntos para adquirir los mejores plugins de nuestro sitio.
Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Creador del tema: Jean PierreSocial Buttons [Fixed & Deslizantes]
Iniciado por: Jean Pierre

 Jean Pierre
High Hopes


Registrados


Estado: Desconectado
Mensajes:290
Temas:24
Registro:12 Jan 2014
Reputación: 116
Gracias dados22Gracias recibidos117NacionalidadPeru
Bombilla  7 Marzo 2014, 22:55 -
#1
5
Mejor respuesta del mensaje Social Buttons [Fixed & Deslizantes]
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.

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:

No puedes ver estos contenidos como invitado
 

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:

No puedes ver estos contenidos como invitado

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:

No puedes ver estos contenidos como invitado

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.

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:

No puedes ver estos contenidos como invitado

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í

No puedes ver estos contenidos como invitado

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.

No puedes ver estos contenidos como invitado

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

No puedes ver estos contenidos como invitado

Y si luego quieren volverlo a usar de lado derecho, regresar el valor del width a 160.

Vista Previa:
Mostrar ContenidoSpoiler:
Espero les haya gustado y si tienen dudas con mucho gusto preguntar, saludos Confundidomile:
Última modificación: 19 Septiembre 2014, 00:57 por Jean Pierre.
 jpbravo
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:22
Temas:3
Registro:20 Jan 2014
Reputación: 0
Gracias dados1Gracias recibidos0Nacionalidad
7 Marzo 2014, 23:17 -
#2
0
Muchas garcías por el aporte , no tendrás las imágenes por casualidad ? .
salu2
 Jean Pierre
High Hopes


Registrados


Estado: Desconectado
Mensajes:290
Temas:24
Registro:12 Jan 2014
Reputación: 116
Gracias dados22Gracias recibidos117NacionalidadPeru
7 Marzo 2014, 23:23 -
#3
0
@ jpbravo imágenes de qué? Gran sonrisa este tutorial emplea 1 sola imagen que está adjuntada en el tema, revisa bien y lo podrás descargar sin problemas.
 jpbravo
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:22
Temas:3
Registro:20 Jan 2014
Reputación: 0
Gracias dados1Gracias recibidos0Nacionalidad
7 Marzo 2014, 23:26 -
#4
0
(7 Marzo 2014, 23:23 )Jean Pierre escribió: @ jpbravo imágenes de qué? Gran sonrisa este tutorial emplea 1 sola imagen que está adjuntada en el tema, revisa bien y lo podrás descargar sin problemas.

Tienes toda la razón , no la veía con el fondo blanco , muchas gracias .
salu2
 Iñaki
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:42
Temas:3
Registro:14 Apr 2013
Reputación: 6
Gracias dados25Gracias recibidos6NacionalidadSpain
20 Marzo 2014, 19:42 -
#5
0
Muy buen tutorial amigo, la verdad ayer lo implanté en mi foro pero este tutorial lo encontré por Internet y no me funcionaba, por ello le pregunté a Dark Neo si tenía algún conflicto de JS porque tampoco me iba un menú de navegación y lo dejé a medio hacer, hoy me pasé por aquí como bien me dijo y veo un buen tutorial mucho más claro que los que encontré por Internet y aquí me indicaste lo del conflicto que JS que ya me lo olía jajaja, me gustan muchos tus aportes espero que no sea el último. Un saludo amigo!
 Whiteneo
Beta Tester


Beta Testers


Estado: Desconectado
Mensajes:3,478
Temas:273
Registro:11 Mar 2014
Reputación: 1,982
Gracias dados521Gracias recibidos1,978NacionalidadMexico
20 Marzo 2014, 23:20 -
#6
1
De echo como vi que lo estabas implementando en tu sitio, creo que con el tutorial te irá perfecto ya que es sobre el cual esta realizada la parte de las redes sociales de este sitio como pueden ver Gran sonrisa.

Asi que simplemente paso para que vean que son temas interesantes y vamos a ir por más poco a poco Gran sonrisa.
 wingchun13
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:1
Temas:0
Registro:17 Sep 2014
Reputación: 0
Gracias dados6Gracias recibidos0NacionalidadAaland
19 Septiembre 2014, 00:52 -
#7
0
y la imagen??? no la encuentro :S
 Jean Pierre
High Hopes


Registrados


Estado: Desconectado
Mensajes:290
Temas:24
Registro:12 Jan 2014
Reputación: 116
Gracias dados22Gracias recibidos117NacionalidadPeru
19 Septiembre 2014, 00:58 -
#8
1
(19 Septiembre 2014, 00:52 )wingchun13 escribió: y la imagen??? no la encuentro :S

Parece que al actualizar el foro a MyBB 1.8 se perdió la imagen o se modificó al attachment, pero ya lo resubí, espero te sea útil Sonrisa

Saludos.
 storm
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:165
Temas:19
Registro:07 Mayo 2014
Reputación: 7
Gracias dados22Gracias recibidos7Nacionalidad
16 Noviembre 2015, 20:17 -
#9
0
Una gran duda, revivo el tema porque me surge la idea de añadir una pestaña para instagram.
Cómo podría hacerlo?¿ Muchas gracias.
 UnionYoruba
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:33
Temas:4
Registro:13 Oct 2015
Reputación: 2
Gracias dados19Gracias recibidos2NacionalidadVenezuela
17 Noviembre 2015, 19:06 -
#10
0
Se e muy bien, te felicito @ Jean Pierre




Usuarios navegando en este tema: 1 invitado(s)