Botones para enlazar | Oloblogger Si quieres poner un botón para que otros enlacen tu blog, lo primero que tienes que hacer es diseñarlo. Para eso hay multitud de páginas en ...

7 de mayo de 2007

Botones para enlazar

Si quieres poner un botón para que otros enlacen tu blog, lo primero que tienes que hacer es diseñarlo. Para eso hay multitud de páginas en la red que te permiten hacerlo on-line.

Mi recomendación es que cojas el Paintbrush, Photoshop, Fireworks, Picture It, Photofiltre, Corel...o cualquier otro programa que tengas a mano de diseño gráfico y des rienda suelta a tu imaginación. Realmente sólo se trata de hacer un dibujo con los motivos y colores que tu quieras.

Lo que realmente lo transforma en un botón, es el código html que tienes que añadirle al colocarlo en alguna página.

Esto es un enlace normal, COSICAS de oloman cuyo código es este...

<a href="http://oloman-cosicas.blogspot.com">COSICAS de oloman</a>

Sólo hay que sustituir la URL a dónde enlazar y el texto que quieres que aparezca para que salga como tú quieras.

Para hacer un enlace con una imagen, en este caso, un botón, primero tienes que subirla a algún servidor de imágenes especializado (Flirck, Pixalia, etc.) o al propio de tu blog, copiando luego la dirección que te den. El resultado es éste:

Accede a Cosicas

Y el código correspodiente sería:

<a href="http://oloman-cosicas.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9FjqEckcY5T_5FrX2g-ZYJj6-lPC_nrwP07zU-TUASCkGc5VvKC7YHyKVRk9g365Wd7hoIWjRFvdff1WNXInSwfed_WxHy-jXW8DBBSEYskefKU8rigNvjqQKeCvD9-QgwOmae-cXxJ8/s400/boton1+88x31+jpg.jpg" border="0" /></a>

Igual que antes, cambias la URL por la tuya y la dirección de la imagen por la que copiaste cuando la subiste.

Si quieres facilitar el código de tu botón para otros, puedes usar los comandos <textarea> </textarea> poniendo entre ambos el código correspondiente para que se vea así y sea fácil copiarlo:

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

37 comentarios :

  1. Las animaciones, las puedes hacer con el programa que quieras, siempre que el formato final sea .gif.
    Lo que ocurre es que, por un motivo que desconozco, los gif alojados en Blogger pierden la animación.
    Solución: Creas tu gif y lo subes a otro servidor de imágenes tipo Flickr.
    Luego lo colocas en tu página o en una entrada en concreto haciendo referencia a su dirección.

    ResponderEliminar
  2. hola oloman nuevamente, la imagen que ise en corel rave, como la puedo pasar a .GIF, no encuentro ningnu programa que me haga esto, espero me ayudes. gracias

    ResponderEliminar
  3. No conozco el Corel Rave, pero supongo que tiene que tener alguna opción para transformar formatos.

    En un principio, lp único que tienes que hacer es buscar la opcion Guardar Como (Save As) y seleccionar el formato .gif.

    En Photoshop, por ejemplo, viene como Guardar Optimizada Como...

    ResponderEliminar
  4. oloman, ya cree la imagen .gif gracias, ahora el problema es que cuando la subo a un servidor me salen muchos codigos y no se cual usar.

    me gustaria que me ayudaras, ya que e intentado con varios y aun no e podido. codigos en otro comentario

    ResponderEliminar
  5. =========Thumbnail para Foros========
    File:banerrunescap.gif
    [[URL=http://zubela.com//out.php?i=13222_banerrunescap.gif]][[IMG]]http://zubela.com//out.php?t=13222_banerrunescap.gif[[//IMG]][[//URL]]
    [[URL=http://zubela.com]]Subir Imagenes[[//URL]]

    ResponderEliminar
  6. =========Link Directo========

    >>>File:banerrunescap.gif
    http://zubela.com/out.php?i=13222_banerrunescap.gif


    =========Html Clickeable========
    este codigo no me lo dejo subir



    me costo mucho trabajo subir los codigos, y los tube que modificar duplicando codigos

    en resumen son 3:

    Thumbnail para Foros
    Html Clickeable
    Link Directo

    ResponderEliminar
  7. el que mas e usado es link directo, pero siempre que coloco la imagen no reproduce en el blog y se queda estatica,

    si me podrias ayudar para ver cual es el codigo que debo elegir, como hacer la caja de enlaze a http://runescape-latinos.com con la muestra incluida aparte del text box.

    espero tu respuesta y explicacion.

    resumen:
    1. que codigo elijo
    2. porque la imagen montada desde un servidor externo no reproduce en my blog
    3. como puedo crear la muestra del text box, el codigo, ya que no me funciona

    ResponderEliminar
  8. gracias oloman, perdon por descomponer el mensaje pero esque subir esos codigos era muy dificil.

    gracias (popeosorio)

    ResponderEliminar
  9. Vale. En este enlace tienes una explicación completa de como poner una imagen para que sirva de enlace. Hace referencia a un botón para enlazar, pero donde dice "botón", bien puede decir "imagen". El mecanismo es el mismo.

    No obstante, te hago un resumen...
    Para mostrar el código de enlace a través de una imagen tienes que poner esto (ya compruebas tú como se ve)

    <textarea>
    <a href="http://runescape-latinos.com" border="0" /><img src="http://zubela.com/out.php?i=13222_banerrunescap.gif"/></a>
    </textarea>

    Esto es para facilitar el código a otros. Si lo que quieres es poner tú la imagen en tu web, lo escribes igual pero sin las etiquetas

    <textarea> y
    </textarea>

    Cuando quieras que sea otra imagen, cambias la dirección de la imagen dentro de la etiqueta IMG SRC por la que sea, y cuando se trate de cambiar la dirección del enlace, pues lo mismo pero con la dirección de la etiqueta A HREF

    Creo que ya no tendrás más problemas. Lo tienes todo... ¿o no?.
    Saludos.

    ResponderEliminar
  10. gracias oloman, comentario en tus enlazes!!!

    ResponderEliminar
  11. Solo tengo una duda. ¿Como creas la opción esa donde puedes poner tu enlace para que alguien más lo copie así de fácil, es decir, que está disponible para que cualquiera de clic y la copie.?
    Muchas gracias.

    ResponderEliminar
  12. Anibal, esa opción es la que se explica en las dos últimas líneas de este mismo post.

    ¡Suerte!

    ResponderEliminar
  13. Super!!!! muchisimas gracias, busque por mucho tiempo la manera de como enlazar un boton y no entendia hasta que me tope con tu pagina y la explicacion mas que excelente. Coloque tu boton de enlace en mi pagina para que como otros como yo no se compliquen tanto la vida.

    Yo no me complique la vida subiendo en servidores de imagnes, lo primero que hice fue subir la imagen a mi blog y la publique, con tecla derecha del mouse sobre la imagen, propiedades y copie la direccion de URL. Para no perderla la copie en un word. Copie tu codigo, y los remplaze por mis URL y el de la imagen, volvi a editar la entrada y copie el codigo y listo!! Mas facil no puede ser.

    ResponderEliminar
  14. Eso último es precisamente lo que quería decir en el post, cuando comentaba lo de alojar la imagen en un servicio especializado o en el propio blog.

    ResponderEliminar
  15. Genial he podido crear iconos,aunque claro de momento no te llevan a ningun sitio.¿Sabes cómo hacer que al pinchar en mail, se abra la cuenta para escribir el que quiera ponerse en contacto?.Arriba sí sale en la imagen @, pero lo he hecho con un programa a parte.(era por dejar todos los iconos iguales.
    Graciassssss

    ResponderEliminar
  16. El código para un botón que enlace con una gestor de correo y ponga la dirección de destino, es este Galileo:
    <a href="mailto:ejemplo@oloblogger.es"><img src="URL_IMAGEN_BOTON"/></a>

    ResponderEliminar
  17. eres la unica pagina de enlazaer botones que me a ayudado. miralo: www.cfasantfeliu.webnode.es

    ResponderEliminar
  18. Hola. Gracias por este espacio. Tengo una pregunta no tanto relacionada con los botones e imagenes, sino con como hiciste para incluir los codigos de las imagenes y el enlace de texto en un post? cuando intento copiar los codigos en un post, para dejarlo como "pagina de enlaces" me dice que HTML invalido. En fin, como hiciste esta "pagina" donde estan todas estos enlaces?
    Gracias por la respuesta.

    ResponderEliminar
  19. Luifer, vuelve a leer el último párrafo de esta misma entrada. Es ahí dónde se indica. Para otros usos ver Publicar código en una entrada

    ResponderEliminar
  20. Quiero enlazar en mi pagina pero no se donde gusrdar los codigos para que aparescan en mi blog necesito ayuda porfavor

    ResponderEliminar
  21. ¿Enlazar qué, Diegowwe? ¿Una página dentro de un post? ¿Crear un blogroll?

    Para lo primero mira esto y para lo segundo, tienes que crear un nuevo gadget desde Elementos de Página que se llama precisamente Lista de Blogs. Hay otra variante más sencilla que se llma Lista de Enlaces.

    ResponderEliminar
  22. Hola oloman,te quiero decir que fuiste de una gran ayuda y tu blog esta re bueno, mañana empiezo con los botones porque me toy bajando el photoshop:) ya que lo tenia pero formatee y perdi todo :@ buen muchas gracias. www.descargarloquequieres.blogspot.com

    ResponderEliminar
  23. Hola Oloman! no si ya lo habrán preguntado, es que no lo encontré en el blog. Quisiera saber como hacer para que cuando posiciono el cursor sobre la imagen me aprezca la descripcion de la misma, al igual que lo tienes en tus enlaces. Como se hace esto??? gracias!!

    ResponderEliminar
  24. <img alt="Rótulo" title="Rótulo" scr="http://imagen.jpg" />

    ¿Contesta esto a tu pregunta? :D

    ResponderEliminar
  25. Si, es eso! pero en que parte de este codigo lo pongo?
    a href="enlace">
    <img class="rollover" src="imagen" target="_blank"

    ResponderEliminar
  26. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  27. En cualquier parte siempre que esté dentro de la apertura y el cierre del tag IMG. Ejemplo:
    <img class="rollover" scr="http://imagen.jpg" target="_blank" alt="Rótulo" title="Rótulo" />

    ResponderEliminar
  28. Gracias me quedo perfecto!!! :D

    ResponderEliminar
  29. ES BUENO ME AYUDO EN ALGO PERO LA VERDAD ME GUSTARIA QUE MOSTRARAS COMO HACER UN LINK A MI BOTON TENGO UN PROBLEMA CON ESO NO SE COMO DECLARAR LOS COMANDOS Y APARTE SOY NUEVA EN ESTAS COSAS SI ERES TAN AMABLE DE PONER UN EJEMPLO CON IMAGENES TE LO AGRADESCO BYE.

    ! G R A C I A S ¡

    ResponderEliminar
  30. http://oloblogger.blogspot.com/2008/01/crear-un-enlace-bpt.html

    Casi al final se explica como hacer un enlace con una imagen y eso es precisamente un botón. ;)

    ResponderEliminar
  31. Ya lo puse y me funciona perfecto
    Gracias

    ResponderEliminar
  32. Buen Post y buen blogger. Yo apenas estoy comenzando

    ResponderEliminar
  33. me gustaría paso preciso para hacer el enlace

    ResponderEliminar
  34. Por mucho tiempo he seguido este blog, y día a día he ido mejorando mi página, realmente te agradezco mucho Oloman, ya tienes un enlace en mi blog al igual que potro. ;) si quieres checalo, esta al final en la parte izquierda :D www.sonidosdenotas.blogspot.com

    ResponderEliminar
    Respuestas
    1. OK Jhon, gracias. Veo que voy a tener que diseñar unos botones ;)

      Eliminar