Alinear en horizontal varios iconos de redes sociales
-
Espero que no haya ningún tema abierto con este problema, porque me estoy volviendo loca, tengo muchas dudas, pero para no liarlo, iré preguntando según lo vaya haciendo.
Mi duda ahora es como insertar en la barra lateral los logos de varias redes sociales para que me sigan. Por ahora, creo haber conseguido poner las imagenes enlazados a sus diferentes sitios, pero lo que no sé es cómo hacer que salga uno detras de otro en fila y dirección horizontal. Algo así como lo que hay aquí (arriba-derecha)Yo estoy utilizando el widget de imagen, lo he intentado con el de texto, pero no me sale, a ver si me podeis ayudar
Gracias
El blog con el que necesito ayuda es (visible solo para usuarios conectados).
-
Quizá te interese saber como puse los iconos de Twitter, YouTube y Facebook en uno de los blogs de pruebas que tengo:
http://archivos2.wordpress.com/ -
Usando el widget de texto puedes introducir código HTML, de esa forma puedes colocar las imágenes y crear los vínculos hacía donde queras que se dirijan los lectores.
Con el widget de imagen solo te permite colocar una imagen a la vez.
-
Bueno, no me contestaste. Pero igual te digo el método.
a) tienes que usar el widget de texto, porque como bien te dice @karlita2115 el de imagen sólo permite poner una imagen.b) tienes que poner el código HTML para que aparezcan las imágenes y sean un enlace a las distintas páginas que correspondan
c) en los siguientes comentarios te pego el HTML y te explico para qué sirve cada etiqueta.
-
<a href="http://twitter.com" TARGET="_blank"><img src="http://www.buttonshut.com/Twitter-Buttons/Twitter-Buttons-46-94-.png" title="Facebook Buttons By ButtonsHut.com" alt="Facebook Buttons By ButtonsHut.com" width="50px" border="0" /></a> <a href="http://www.youtube.com" TARGET="_blank"><img src="http://www.buttonshut.com/Youtube-Buttons/youtube-badge-128x128 (565).png" title="Facebook Buttons By ButtonsHut.com" alt="Facebook Buttons By ButtonsHut.com" width="50px" border="0" /></a> <a href="http://www.facebook.com/" target="_blank"><img src="http://www.buttonshut.com/Facebook-Buttons/Facebook-Buttons-56-64-.png" title="Facebook Buttons By ButtonsHut.com" alt="Facebook Buttons By ButtonsHut.com" width="50px" border="0" /></a> -
Por un lado tenemos las etiquetas
<a href="http://loquesea.com" target="_blank"></a>
Son las que crean el enlace a la dirección que elijas. El atributo target=»_blank» hace que el enlace se abra en una nueva pestaña/ventana del navegador y es opcional.También tenemos
<img src="http://loquesea.com" title="Facebook Buttons By ButtonsHut.com" alt="Facebook Buttons By ButtonsHut.com" width="XXpx" border="0" />
que son las que hacen que se vea la imagen correspondiente. Los atributos title=»loquesea» alt=»loquesea» width=»XXpx» y border=»0″ son opcionales e indican en el caso de los dos últimos el ancho de la imagen y el marco o «borde», si lo tiene.Por último, tenemos
que genera un espacio y que lo usé para que las imágenes no salieran demasiado juntas. Puedes poner un espacio o más, dependiendo de cómo sean de grandes las imágenes y que tan ancha sea la columna en donde pongas el widget de texto.Y eso es todo.
-
Gracias. También estuve probando lo del widget de texto, pero no tenía muy claro el código y no me salía como quería, lo intento y te cuento
-
Muchas gracias, me quedó muy bien http://www.todocomunica.wordpress.com. Pero ahora me surge otra duda, cómo hacer que estas imagenes salgan en la parte de arriba de la cabecera, en la misma línea que el menú. Creo que es mediante css, que ya he comprado (no sé si me servirá de mucho) pero no tengo ni idea de cómo aplicarlo
Muchas gracias
-
Te equivocaste con el enlace que pusiste: el que vale es el que enlaza tu nombre de usuario
‘http://blogtodocomunica.wordpress.com/’Con respecto a las imágenes y el lugar en donde aparecen, hay un tema muy lindo que las tiene justo donde quieres, sin necesidad de poner ningún widget. Es el tema Notepad:
-
Si, ya he visto que algunos temas te lo incluyen, pero yo quería seguir con el que tengo ya que me gusta. No hay ninguna forma de cambiarlo?
-
Puse un código parecido al de a continuación en un widget de texto sin título en mi blog, para que los enlaces de las redes sociales estén arriba a la derecha.
<div style="position:relative;float:right;bottom:215px;text-align:right;"> <a href="http://www.twitter.com/carolinacleary" TARGET="_blank"><img src="http://www.buttonshut.com/Twitter-Buttons/Twitter-Buttons-70-10-.png" title="http://www.facebookloginhut.com/facebook-login/" alt="http://www.facebookloginhut.com/facebook-login/" width="30px" border="0" /></a></a> <a href="http://www.facebook.com/update_security_info.php?wizard=1#!/pages/Blog-TodoComunicacom/127217954015031" TARGET="_blank"><img src="http://www.buttonshut.com/Facebook-Buttons/Facebook-Buttons-59-68-.png" title="http://www.facebookloginhut.com/facebook-login/" alt="http://www.facebookloginhut.com/facebook-login/" width="30px" border="0" /></a></a> <a href="http://es.linkedin.com/in/carolinacleary/en" TARGET="_blank"><img src="http://www.buttonshut.com/LinkedIn-Buttons/linkedin-cracked-150x150.png" title="http://www.facebookloginhut.com/facebook-login/" alt="http://www.facebookloginhut.com/facebook-login/" width="30px" border="0" /></a> </div>Cambia las medidas (los #px) y prueba. Quizás funcione en tu caso. Saludos.
-
Yo tengo un problema parecido. Ya tengo añadidas las imágenes con código HTML, pero si muevo el widget o cambio de tamaño alguno (al tener más entradas o lo que sea), las imágenes se me montan en el siguiente widget.
He probado con position:relative pero no me lo soluciona. Actualmente tengo así el HTML:
-
@europio89: Hablas de paraisomotor.wordpress.com a lo que veo. ¿Quieres que el icono RSS esté en la zona de widgets? Entonces no es el mismo problema porque normalmente no necesitas «position:relative» en ese caso. Si quieres que los iconos estén fuera de la zona de widgets, es otro caso.
Otra cosa: cuando pegas código aquí en estos foros, debes hacerlo entre acentos graves (`) sino, como puedes ver, el sistema se «come» una parte del código. Gracias.
-
-
No me funciona airodyssey. Lo que hace es salirme lo que escribo en el propio blog. Además, no sé si la imagen se me cambia a donde yo quiero, es decir, a la parte superior derecha donde menú, no en la zona de widgets
De cualquier forma gracias.
-
Perdona airodyssey, SÍ que funciona. Lo había copiado mal. Muchas gracias
Cierro el tema, que creo que el tema de los botones, lo tengo solucionado -
Con respecto al Html que diste:
<img src=»http://www.buttonshut.com/Twitter-Buttons/Twitter-Buttons-46-94-.png» title=»Facebook Buttons By ButtonsHut.com» alt=»Facebook Buttons By ButtonsHut.com» width=»50px» border=»0″ /> <img src=»http://www.buttonshut.com/Youtube-Buttons/youtube-badge-128×128 (565).png» title=»Facebook Buttons By ButtonsHut.com» alt=»Facebook Buttons By ButtonsHut.com» width=»50px» border=»0″ /> <img src=»http://www.buttonshut.com/Facebook-Buttons/Facebook-Buttons-56-64-.png» title=»Facebook Buttons By ButtonsHut.com» alt=»Facebook Buttons By ButtonsHut.com» width=»50px» border=»0″ />Es posible centrar todo!porque me aparece a la izquiera!
Gracias -
Pusiste el código sin los acentos graves (`) y no salió bien. Recuerda que siempre tienes que encerrarlo entre dichos acentos, uno delante, otro al final.
En cuanto a centrarlo, lo puedes poner en un div:
<div align="center"><a href="http://twitter.com"><img src="http://www.buttonshut.com/Twitter-Buttons/Twitter-Buttons-46-94-.png" title="Facebook Buttons By ButtonsHut.com" alt="Facebook Buttons By ButtonsHut.com" width="50px" border="0" /></a> <a href="http://www.youtube.com"><img src="http://www.buttonshut.com/Youtube-Buttons/youtube-badge-128x128 (565).png" title="Facebook Buttons By ButtonsHut.com" alt="Facebook Buttons By ButtonsHut.com" width="50px" border="0" /></a> <a href="http://www.facebook.com/"><img src="http://www.buttonshut.com/Facebook-Buttons/Facebook-Buttons-56-64-.png" title="Facebook Buttons By ButtonsHut.com" alt="Facebook Buttons By ButtonsHut.com" width="50px" border="0" /></a></div>Pero yo en tu blog lo veo bien, no está a la izquierda.
- El debate ‘Alinear en horizontal varios iconos de redes sociales’ está cerrado y no admite más respuestas.
Foros WordPress.com en Español 