Aprende como hacer una Barra Social para compartir tus redes sociales desde tu sitio web. – HTML y CSS

Share on Pinterest
Comparte con tus amigos










Enviar

Es muy importante hoy en día y mas que nunca antes tener presencia en redes sociales con tu sitio web, marca o empresa. Es por eso que hoy en este tutorial te enseñare como hacer la famosa barra social vertical que esta fija a pantalla y sigue al usuario a todas partes.

Así que empecemos, el código en realidad es muy sencillo, no necesitamos nada mas que HTML, y CSS asi de simple.

Todo lo que necesitamos es un div con una lista dentro y en cada elemento li una etiqueta a con una clase, pero mejor veamoslo en el código que es mas sencillo entenderlo asi.

	<div class="social">
		<ul>
			<li><a href="http://www.facebook.com/falconmasters" target="_blank" class="icon-facebook"></a></li>
			<li><a href="http://www.twitter.com/falconmasters" target="_blank" class="icon-twitter"></a></li>
			<li><a href="http://www.googleplus.com/falconmasters" target="_blank" class="icon-googleplus"></a></li>
			<li><a href="http://www.pinterest.com/falconmasters" target="_blank" class="icon-pinterest"></a></li>
			<li><a href="mailto:contacto@falconmasters.com" class="icon-mail"></a></li>
		</ul>
	</div>

Aquí hay varias cosas de que hablar, la primera es que he puesto el atributo target="_blank" para que cuando el usuario acceda al link este se abra en una nueva pestaña y asi no abandone tu sitio, muchas personas no lo recomiendan pero todo el mundo lo hace.

La segunda cosa que tenemos que observar es la class que le he agregado, cada class repesenta un icono, este icono lo agregamos con fuentes, asi como vimos en este tutorial:

Como utilizar iconos para sitio web mediante fuentes y CSS

Pasemos con el código CSS:

.social {
	position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
	left: 0; /* Establecemos la barra en la izquierda */
	top: 200px; /* Bajamos la barra 200px de arriba a abajo */
	z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}

	.social ul {
		list-style: none;
	}

	.social ul li a {
		display: inline-block;
		color:#fff;
		background: #000;
		padding: 10px 15px;
		text-decoration: none;
		-webkit-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
	}

	.social ul li .icon-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
	.social ul li .icon-twitter {background: #00abf0;}
	.social ul li .icon-googleplus {background: #d95232;}
	.social ul li .icon-pinterest {background: #ae181f;}
	.social ul li .icon-mail {background: #666666;}

	.social ul li a:hover {
		background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
		padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
	}

En el código anterior he puesto comentarios explicando mas claramente para que usamos cada propiedad, pero en resumen lo que hicimos fue establecer una posición fija para la barra con position:fixed; También le dimos a cada elemento a un estilo de botón, le agregamos animaciones e hicimos que cuando el usuario pasara el mouse incrementara el espacio interior del botón y el color de fondo.

Con esto ya lo tendríamos, cabe aclarar una cosa y es que esta barra no funciona si la deseas posicionar a la derecha, puedes quitar left:0; y poner right:0; esto la moverá a la derecha, pero al pasar el mouse tendrás un error, si quieres tenerla a la derecha tendrás que quitarle el padding al hover.

Como hacer una Barra Social (vertical y fija a pantalla) con HTML y CSS3

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

144 respuestas a “Como hacer una Barra Social (vertical y fija a pantalla) con HTML y CSS3”

  1. Henry Reid dice:

    Disculpa, ando en el diseño de una página y me encuentro en lo de una galería y un reproductor de música, será que puedas hacer un tutorial de lingthbox o fancybox para ayudarme a comprender todo esto

  2. Snoopy diaz dice:

    ¿La propiedad ‘box-sizing’ en el selector universal es para que se haga uso de el en todos los elementos?

    Excelente el tuto.

  3. ISAID REYES MARTINEZ dice:

    ya pude incrustarla con éxito en mi wordpress, muchas gracias

  4. Jair Romero dice:

    Hola que tal! como puedo hacer una barra de redes sociales como la que tienes en esta página en forma horizontal? agradezco tu pronta respuesta

  5. timo dice:

    pork en el lado right no funciona igual que en el left??

  6. Óscar D Rosales Rostrán dice:

    Hola falcon podrias explicar como haces para usar el api de facebook?

  7. Roberto Aparicio Delgado dice:

    Hola buenas , he visto tu tutorial, lo he imitado y en mi pagina (viendo el resultado en chrome) se me abre las pestañas a ambos lados ; como puedo solucionarlo?

  8. Alexander alvarado carranza dice:

    Hola men quisiera que hagas un tuto con la barra vertical que tienes en tu pagina ojala pudieras ayudar Gracias …….Respondeee :c

  9. Victor Fernandez Guajardo dice:

    Hola!! Excelente tutorial. Mira quise aplicar lo que enseñaste en mi página, pero le pasa esto y no sé porqué…

    http://www.beeplop.cl/panel%20deslizable/index4.html

    Muchas Gracias.

  10. Negaosite dice:

    Muy buena Falcon , pero siguiendo , ¿puedes hacer un tutorial para crear una barra de búsqueda funcional, con resultados, enlaces, imágenes , etc .. ???

  11. Negaosite dice:

    Falcon , cómo crear un sistema de contacto como el de su página web : -?

  12. Negaosite dice:

    ¿Cómo agrego este sistema de comentarios y mi sitio, sólo con el código ??

  13. Geriito dice:

    Buenas yo consegui poner la barra social pero me gustaria ponerla en el lado derecho de la pantalla y que el efecto se haga al reves y yevo varios dias probando en el codigo css y no lo consigo alguien podria decirme como.

  14. Geriito dice:

    Ya lei la aclaracion para tenerla a la derecha gracias!!

  15. Nahuel Silva dice:

    falcon me pasas el codigo completo porque tengo problemas al poner los iconos plz

  16. Nahuel Silva dice:

    Ya solucione el problema gracias :)

  17. Yaimara dice:

    Hola necesito encontrar la class donde se encuentra los iconos, se hace referencia a un tutorial pero no lo encuentro, por favor podría decirme donde lo puedo encontrar. Gracias y espero que me puedan ayudar.

  18. Yaimara dice:

    Holaaaaaaaaaaa, necesito ayudaaaaaa, la class donde se encuentra los iconos, se hace referencia a un tutorial
    pero no lo encuentro, por favor podría decirme donde lo puedo
    encontrar?

  19. Sis Rob dice:

    Excelentes tutoriales Carlos, me han sido de mucha utilidad, espero hagas un video tutorial en donde nos enseñes a sacar los numeros con las Apis de facebook, twitter, etc.
    gracias de antemano
    tu sitio es elegante.

  20. Renato Fuentes Roque dice:

    Hola Carlos, podrias dar un tutorial de como hacer que aparezca el contador de las veces que se ha compartido la pagina, eso de lo que dices al principio de este video, te lo agradeceria mucho, gracias.

  21. Uriel Gonzalez dice:

    Amigo me sale morado los iconos pero no me sale con color ¿nose cual es el problema? elegi los iconos de yahoo! google-plus facebook y twitter pero no me sale con estilos

  22. Marcelo Acevedo dice:

    Carlos, y si quiero que el hover sea diferente en cada coso.

  23. Bruno dice:

    Usted construyó este sitio con WordPress ?? Falcon

  24. Edson Emmanuel Quim dice:

    hola con una consulta fíjate que logre construir el menú desplegable animado , pero cuando la visualizo en el navegador no me aparecen los iconos a que se deberá? subí todas las carpetas a mi servidor, lo curiosos es que cuando visualizo la pagina en mi editor web si me aparecen los iconos solo cuando trato de visualizarla desde el navegador no me muestra los iconos, supongo que la carpeta en donde se encuentran los iconos es la que se llama fonts? o estoy equivocado revise el código y todo esta bien podrías darle una mirada de como me quedo por favor te lo agradecería mucho http://www.pruebachat.site40.net

  25. Jeffer DLCV dice:

    amigo, hice todo bien pero el unico detalle es que el de facebook esta sobresaliente y los demas estan en posicion normal. que hago?

  26. Franklin Paulino dice:

    Falcon me intereso mucho la barra social, pero todavia me gustaria mejorarla mas, en el caso del mail mas bien, si me podrias decir como le hago, te lo agradeceria infinitamente. Saludos desde Rep. Dom.

  27. bryan dice:

    Falcon sera que me podrias ayudar con esto no se porque los iconos me aparecen azules no entiendo ayudame porfavor tengo que terminar mi pagina web entre unos dias porfavor es una tarea final porfavor ayudame

  28. Victor Jose Hernandez Medina dice:

    Soy nuevo en esto pero me interesa aprender todo de paginas web, aunque estoy estudiando ingenieria en sistema y utilisamos sql server con visual studio pero necesito modificar una pagina web de una pequeña empresa en donde trabajo y me gustaria que me ayudaras bueno si no es mucha molestia. gracias por permitirnos ver tus videos.

  29. Lenin Palacios dice:

    Excelente presentación. Me podrías ayudar con el código que se necesita para saber la cantidad de me gusta que le han dado a la página en facebook y otras redes sociales; me es sumamente importante, ya que lo necesito para una página que estoy haciendo, he leido hasta la documentación que facebook da, pero no me funciona.

    Muchas gracias…

  30. Lenin Palacios dice:

    Se puede hacer ese menú pero horizontalmente?

  31. Carito dice:

    hola, es excelente este tutorial. lo hice en el index y salió perfecto, pero cuando quiero agregarlo a las otras portadas del menu de navegación solo aparecen unos puntitos indicativos de los íconos pero no aparece el menú. podrías ayudarme? mil gracias!!

  32. anderson dice:

    no me salen los iconos y cuando voy a la pagina de Icomoon me sale entypo+

  33. Gabriel Gonzalez dice:

    me podrias explicar como hago para que cada vez que el mouse se posicione sobre el icono de facebook o twitter me aparezca el numero de veces que se ha compartido la pagin

  34. Sebastian Chitiva dice:

    gracias men

  35. Samu Musso dice:

    Buenisimo unos retoques y de cabeza a mi web :D.
    Muchas gracias Falcon

  36. Thalita Menezes da Silva dice:

    como faço para fazer essa barra lateral que de pra curtir direto como link direto

  37. Rodrigo Tomé dice:

    Falcon podrías decirme como hacer esta barra pero con las apis para que te ponga el numero de personas que lo han compartido? Graciass

  38. Agustin Boyro dice:

    Buenas Falcon, recién copie y pegue los códigos sin ningún problema, sin embargo me queda un espacio entre cada uno de los iconos y la barra me queda separada, te quería pedir ayuda para corregirlo ya que es bastante feo a la vista.

  39. Ania Brs dice:

    Muchísimas gracias por subir tus tutoriales y cursos de verdad he aprendido increíble ;)

  40. Luis Eduardo Duran dice:

    excelente tutorial hermano una abrazo desde Venezuela…

  41. Luis Eduardo Duran dice:

    amigo hice todo tal cual y funciona perfecto cuando lo integro con mi web no se ven los iconos los coloque tal cual en la carpeta fonts y y las rutas correctas y nada, a que se debera esto? podrias ayudarme?

  42. Gustavo dice:

    muy buenos tutoriales! estoy empezando a meterme en bootstrap y me has resuelto muchisimas dudas, con respecto a éste video, como puedo hacer para que muestre un texto al pasar el mouse sobre el botón? justo como el que tienes en tu página. Gracias por el apoyo :D

  43. oweimar dice:

    Buenas tarde me gustaria saber como colocar el contador en la barra.

  44. diana dice:

    Gracias aunque a lo primero no entendia como hacerlo lo logre muchas gracias por el tutorial

  45. Kevin dice:

    Disculpa Falcón cómo logro poner los números al lado de la barra social

  46. Andrè Lopez dice:

    para insertar el contador a los botones podrias exponer un poco ese tema me interesa si no es mucha la molestia … excelente tutorial e aprendido mucho con tus videos

  47. trafc4580 dice:

    Thank you.
    excellent tutorial.

  48. Cameron Ursic Brown dice:

    Pregunta, como puedo ajustar esa barra verticalmente? y que este en la parte superior de mi web.

  49. Design Web San Migue dice:

    Hola Falcon Masters, lo primero agradecerte por tus tutoriales, son magníficos. Mi pregunta: esta misma barra social se puede hacer horizontal?, si es así me puedes detallar como se hace. La necesito para un cliente. Desde ya muchas gracias

  50. Pako dice:

    amigos … por que a pesar de que utilizo el atributo … … el contenido de mi pagina se visualiza en portugues!!?? … que debo hacer para solucionarlo…!!!

  51. jhoan dice:

    másters falcón con esto e estado muy inquieto mejorando tu grandioso diseño
    saludos desde Colombia creo que tu algún día vas ha estar trabajando en la Google

  52. Hiking waraira dice:

    como puedo subir los íconos manualmente.. saludos

  53. fabian payares dice:

    carlos arturo, como hago para que aparezcan los iconos? ya pegue el html y el css, pero no aparecen los iconos

  54. Stevenson Salazar Aranguren dice:

    Hola, gracias por el tutorial!!
    me sirvio perfecto!. pero… una pregunta.. cuando la veo en celulares.. como haces para que desaparezca?
    es decir para RESPONSIVE no se vea?
    gracias de antemano

  55. Ruben dice:

    Saludos!
    Muchísimas gracias, excelente me ha servido de mucho este post! ….Ahora bien, mi pregunta es como hacer para que al hacerse response cambie de horizontal a vertical su posición o que no se muestre?

  56. Julio Cantero dice:

    genial…

  57. juan Carlos dice:

    Buen dia, esta Muy Bueno el tutotial, pero mi pregunta es la siguiente. Hice todos los pasos y los meti a mi BLOG, pero los iconos no se ven, funciona todo perfecto pero los iconos no se ven. En donde debo alojar los iconos para este Caso???, te agradeceria inmensamente , Muchas gracias

  58. Joseph dice:

    me gustaria saber como haces para quitar la barra social vertical cuando la vez desde el movil porque es un poco molesto tenerla fija todo el tiempo

    • Miguel Matos dice:

      creo haber leído sobre esto, y en el caso del móvil se establece un «media query» para los tamaños del móvil con el div, se le establece la propiedad visibility a «none» y con ello se ‘esconde’ literalmente la barra. Y con la propiedad «display:none», ésta desaparece y su espacio es ocupado por el contenido que le sigue.

  59. djcrazy dice:

    Buen día.
    Seguí tus indicaciones y ya quedó, pero tengo una duda, ¿cómo puedo integrarlo en una plantilla de joomla?
    Gracias.

  60. Ale x dice:

    Muchas gracias por el aporte… tengo una duda, Como puedo agregarle los iconos y el contador de visitas?

  61. Carlos Alcca dice:

    muy bien explicado y muy util para una home page, Gracias!!!!

  62. Armando De La Madrid Flores dice:

    Excelentes vídeos mis felicitaciones, aqui esta lo que yo eh echo con tus tutoriales.

  63. claudia dice:

    Me gustaria saber que es lo que tengo que hacer para poder meter la barra social & el menu juntos , al hacerlo en la barra se me cambian los iconos por los del menu… ayuda por favor

  64. Yop dice:

    hola, que gran aporte, solo tengo un problema cuando ingreso el codigo en sublime textal momento de cargar el archivo html me arroja la animacion ,los colores y todo , pero los iconos no, solo se ven unos cuadros pequeños en su lugar, me ayudarias porfavor

    • Rafael Tavarez dice:

      trata subir el nivel de la ruta:

      font-family: ‘icomoon’;

      src: url(‘../fonts/icomoon.eot?db25nn’);

      src: url(‘../fonts/icomoon.eot?db25nn#iefix’) format(‘embedded-opentype’),

      url(‘../fonts/icomoon.ttf?db25nn’) format(‘truetype’),

      url(‘../fonts/icomoon.woff?db25nn’) format(‘woff’),

      url(‘../fonts/icomoon.svg?db25nn#icomoon’) format(‘svg’);

    • Jorge Manuel dice:

      Es por la ruta de tu carpeta fonts que no reconoce los iconos creo(no se si ya lo habras solucionado vale mas tarde que nunca xd)

  65. Eduardo Iván Angeles dice:

    Que show oigan que propiedades cambio para pasar la barra pero del lado derecho

  66. Duvan Andres Moreno Parra dice:

    y si quisiera ponerle un boton ala barra de redes sociales que me los oculte y luego otro botón que me lo muestre de nuevo

  67. Fernando López dice:

    Llevo unos tres años sí no mal recuerdo, viendo sus tutoriales. Recien vuelvo a visitar su página Sr. Carlos Arturo. Me llevo su tutorial para aplicarlo a un cliente que requiere una barra social. Le hice unas cuantas modificaciones para que sea responsive.

    Gracias por todo, me ha ayudado mucho y gracias a sus tutoriales empece a hacer $$$. Aquí les dejo mi barra, echenle un viztaso: https://www.libertytest.es/

  68. Jesús Garcia May dice:

    esta padre no se complica uno la vida en visual studio o eclipse

  69. mariO alvarez dice:

    El efecto hover no funciona, pues se mueve toda la barra, bastante raro.
    Les grabé un video a ver si saben ayudarme. No entiendo. : (

    Link del video: https://youtu.be/qBJArPpq8zI

  70. Anthony Sira dice:

    Hola. Ya puse la barra, todo excelente, muchas gracias. Pero me gustaría pasarla al superior de la pagina, que en vez de estar en la izquierda este en el centro arriba. HELP please, muchas gracias, saludos.

  71. Armando Jose Cabarcas dice:

    Hola todos!
    Quisiera saber como meterle el icono «dibujito» del «F» de Facebook, para que mi pagina se vea mejor por supuesto…
    Alguien podria ayudarme?
    Gracias!:)

  72. Armando Jose Cabarcas dice:

    Es la barra que tiene a la izquierda esta pagina…lo que hace que uno se relacione por ejemplo con el Facebook Twitter u otros…necesito los iconos para ello!

  73. obionez dice:

    hola que tal como estan, me gustaria saber como hacer que mi barra se oculte cuando se abra en dispositivo moviles.
    mi barra funciona perfecto pero al reducir la resolucion,…

  74. Leonardo cubillos dice:

    oye como hago para que se oculte la barra con el boton que tu tienes en tu pagina ¡ help please

  75. Edymar Perez dice:

    Hola Carlos Arturo, como haría si ni me salen los iconos.? todo lo demás funciona… Necesito ayudaaaaa por favor

  76. Icarus fly dice:

    Hola! intersante articulo. Pero tengo dos problemas. El primero, es que los iconos me aparecen separados entre si.
    El otro problema que tengo, es que pese a que le cambio las direcciones de facebook, correos y otras, me dirige siempre a tu página de falconmasteres. No se que más hacer para corregir eso.
    Saludos.

  77. AlexLikeRock dice:

    es ridiculo tenes que hacer tanto alboroto por meter los iconos,facebook,twitter,G+,etc. tan facil como:

    para poner los iconos, meten una imagen. de 15px por 15px de formato PNG a el folder «iconos»
    y metes la imagen
    entre las « »

    y cambio el destino de falconmasters a «debian»

    el codigo HTML

    —Antes—

    —Despues—




  78. Jose Gomez dice:

    Hola Carlos he creado una página web con bootstrap,
    como puedo agregar un formulario de comentarios como el tuyo, por ahora tengo puesto, el de html comment box,
    gracias. http://jlg.net84.net/music.html

  79. Yeferson Rojas dice:

    Hola;excelente documental,Me gustaría saber como puedo colocar los números que salen en cada icono del menú GRACIAS

  80. Mangel AM dice:

    Hola una pregunta. Cómo puedo hacer para que la barra se oculte cuando este desde mi móvil?

    • Adán González dice:

      Creo que con agregar esto en el css basta para definir a partir de qué dimensión quieres que desaparezca:
      @media only screen and (max-width: 768px) {
      .social{
      display: none;
      }
      }

  81. Mangel AM dice:

    Hola. Me gustaría saber cúal es el código que usas para que la barra no se vea en vista móvil. Por favor.

  82. francis dice:

    hye hermano, eres un master de verdad, muy buen tutorial, la verdad me resulta hacerlo facil desde mi pc, el problema esta que en intentado ponerlo en mi blog y ahi me sale otra cosa no se me cargan los iconos de la redes sociales que descarge de ICONMOON. me gustaria saber como puede hacer que me funcione en mis blogs. porque me gusta la idea.. dejame saber por favor los paso que debo dar.

  83. Mario Javier Veliz dice:

    muchisimas gracias me sirvio de mucho!!!!

  84. Javier Abad dice:

    Hola! Podrian decirme si el codigo funciona para blogger y donde lo inserto exactamente. Gracias

  85. Carol Sanchez dice:

    hermoso…..

  86. Jesus Varela Colls dice:

    amigo.. gracias por tus tutoriales, he aprendido mucho.. saludos desde venezuela… … pero tengo un problema aqui…. no esta al 100% al costado.. que seria? y de que tamaño tienen que ser los iconos? osea cuantos PX?

  87. Omar Elias dice:

    Hey falcon, buenos tutos, te tengo una pregunta: ¿se puede alinear esta barra a la derecha? ¿como se podría hacer?

    • Adán González dice:

      dentro de .social{} cambias «left:0;» por «right: 0;» y dentro de .social ul li a{} agregas «float:right;» Jaksja no sé si sea correcto, pero a mí me funcionó :v suerte..

  88. NiKolas Jvq Vargas dice:

    no me sirve, la hice en asp.net y no me salen las imagenes

  89. Brando Castro Campos dice:

    disculpen alguien le fallo en el google chrome?
    saludos

  90. Argraphic Bogota dice:

    Buen dia, gracias por tus tutoriales primero que todo, han sido de gran ayuda. Con respecto a este, tengo un problemita, cuando lo edito y pruebo en mi pc se ve bien, pero al subirlo al servidor, al pasar el mouse sobre una de las redes automaticamente todas las demás se van hacia el frente, no se porque sucede. Gracias de antemano.

  91. Jesus Marin Chuo dice:

    hermano no se ve nada

  92. Alberto Ayala dice:

    Saludos… principalmente te felicito por tus aportes y por todos los videos que en lo personal de estan ayudando mucho.
    Acabo de ver como 4 de tus tutoriales y los 4 me han salido bien.
    Tengo una consulta… en la Social Bar… en tu pagina… veo que tiene una flechita para ocultar la barra… mi pregunta es… Como se hace ese truco?? quiero aplicarlo a una pagina en la cual estoy trabajando.

    Te agradezco tu ayuda, te dejo mi correo para esperar tu respuesta ya sea con el codigo .css o algo mas.

    Gracias y bendiciones.

    Mi correo: lionheart2503@gmail.com

  93. Alberto Ayala dice:

    Buenos dias… me gustaria saber cual es el codigo en css para colocar el boton que oculta la barra… veo que aca en la pagina esta esa opcion y me gustaria aplicarla a un ejemplo que estoy realizando.

    Si alguien lo ha hecho me gustaria y estaria agradecido con el aporte.

    Bendiciones a todos.

  94. Edwinson Smith Cordova Chavez dice:

    como puedo hacerlo pero para la mano derecha amigos y para que el agrandado se de para la izquierda

  95. Edwinson Smith Cordova Chavez dice:

    como puedo hacerlo pero para la mano derecha amigos y para que el agrandado se de para la izquierda

    • Adán González dice:

      dentro de .social{} cambias «left:0;» por «right: 0;» y dentro de .social ul li a{} agregas «float:right;» Jaksja no sé si sea correcto, pero a mí me funcionó :v suerte.

  96. Adán González dice:

    Hola Jaja tengo un problema: la barra no me queda completamente pegada a la izquierda. No sé por qué, pero cuando la pongo del lado derecho sí queda bien pegada y funciona correctamente. Alguien sabe qué puedo hacer para solucionarlo?

  97. La idea es buena, practica y sencilla, pero podrias arreglarla para que funcione también a la derecha, y para que el link sea directamente de LIKE a la red sin salir y menos abrir otra VENTANA…?

    Desde ya muchas gracias, el aporte es prometedor

  98. Ma Fer Martínez dice:

    Hola! recien veo tu tutorial y es muy bueno pero no sé porqué pongo todos los codigos en «estilos.css» y no salen….

  99. JmgcTechnology dice:

    hola me gustaria saber el codigo html que esta utilizando en este post debajo del video, donde abre otra ventana sin dejar de ver nuestra pagina gracias

  100. JOSÉ Claro Echeverry dice:

    tengo una pregunta y pues la verdad soy nuevo en esto, pero después de tener creada la carpeta de la barra social, como hago para subirla a mi pagina en wordpress a mi tema mas bien ???? no se como, agradesco ayuda en este tema

  101. Juan Carlos S dice:

    no me sale :s

  102. juan camilo valencia villanuev dice:

    gracias por el aporte, funciona muy bien

  103. Ing. Iñaki Monteverde dice:

    Como corrijo que en móviles en safari no me muestra la barra social.

  104. Miguel Espeso dice:

    Hola, ya de je un comentario en youtube, pero me a surgido una duda y es como podia ocultar manualmente la barra social.
    Se que ya tiene tiempo el tutorial, a ver si tengo suerte que me respondas.
    Gracias por tus contribuciones.

  105. Enrique Ojeda dice:

    He buscado un tutorial «sencillo» que me permita exibir en mi pagina un Menu vertical que facilte la navegacion interna independientemente sea o no fija…Que cumpla el objetivo primario como es llevar alusuario a la pagina que desea ingrezar. Pregunto: ¿Puedo sustituir las imagenes por un indice o nombre del contenido a buscar?

  106. Daniel Morales Loaiza dice:

    Hermano muchas gracias por el aporte usted a sido luz en la oscuridad para mi

  107. Yorlincuas dice:

    no me salen los icon que sera

  108. Misael Rios dice:

    buenas tardes… felicitaciones por tus tutoriales yo realice la vertical barra social y quedo muy buena… ahora como puedo insertar esa barra a mi pagina web que esta construida con wordpress… muchas gracias

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Aprende con nuestros cursos

React y Firebase: El Curso Completo, Práctico y desde Cero

React y Firebase: Curso Completo, Práctico y desde Cero

En este curso aprenderás React desde lo mas básico y paso por paso hasta un nivel avanzado donde podrás crear sitios y aplicaciones web reales.

Inicia el curso

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 5: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso