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:
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.
Y muchos más artículos interesantes si nos sigues en...
Las animaciones, las puedes hacer con el programa que quieras, siempre que el formato final sea .gif.
ResponderEliminarLo 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.
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
ResponderEliminarNo conozco el Corel Rave, pero supongo que tiene que tener alguna opción para transformar formatos.
ResponderEliminarEn 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...
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.
ResponderEliminarme gustaria que me ayudaras, ya que e intentado con varios y aun no e podido. codigos en otro comentario
=========Thumbnail para Foros========
ResponderEliminarFile: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]]
=========Link Directo========
ResponderEliminar>>>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
el que mas e usado es link directo, pero siempre que coloco la imagen no reproduce en el blog y se queda estatica,
ResponderEliminarsi 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
gracias oloman, perdon por descomponer el mensaje pero esque subir esos codigos era muy dificil.
ResponderEliminargracias (popeosorio)
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.
ResponderEliminarNo 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.
gracias oloman, comentario en tus enlazes!!!
ResponderEliminarSolo 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.?
ResponderEliminarMuchas gracias.
Anibal, esa opción es la que se explica en las dos últimas líneas de este mismo post.
ResponderEliminar¡Suerte!
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.
ResponderEliminarYo 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.
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.
ResponderEliminarGenial 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.
ResponderEliminarGraciassssss
El código para un botón que enlace con una gestor de correo y ponga la dirección de destino, es este Galileo:
ResponderEliminar<a href="mailto:ejemplo@oloblogger.es"><img src="URL_IMAGEN_BOTON"/></a>
eres la unica pagina de enlazaer botones que me a ayudado. miralo: www.cfasantfeliu.webnode.es
ResponderEliminarHola. 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?
ResponderEliminarGracias por la respuesta.
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
ResponderEliminarQuiero enlazar en mi pagina pero no se donde gusrdar los codigos para que aparescan en mi blog necesito ayuda porfavor
ResponderEliminar¿Enlazar qué, Diegowwe? ¿Una página dentro de un post? ¿Crear un blogroll?
ResponderEliminarPara 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.
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
ResponderEliminarHola 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<img alt="Rótulo" title="Rótulo" scr="http://imagen.jpg" />
ResponderEliminar¿Contesta esto a tu pregunta? :D
Si, es eso! pero en que parte de este codigo lo pongo?
ResponderEliminara href="enlace">
<img class="rollover" src="imagen" target="_blank"
Este comentario ha sido eliminado por el autor.
ResponderEliminarEn cualquier parte siempre que esté dentro de la apertura y el cierre del tag IMG. Ejemplo:
ResponderEliminar<img class="rollover" scr="http://imagen.jpg" target="_blank" alt="Rótulo" title="Rótulo" />
Gracias me quedo perfecto!!! :D
ResponderEliminarGRACIAS, SI K SIRVE!!
ResponderEliminarES 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.
ResponderEliminar! G R A C I A S ¡
http://oloblogger.blogspot.com/2008/01/crear-un-enlace-bpt.html
ResponderEliminarCasi al final se explica como hacer un enlace con una imagen y eso es precisamente un botón. ;)
Ya lo puse y me funciona perfecto
ResponderEliminarGracias
Buen Post y buen blogger. Yo apenas estoy comenzando
ResponderEliminarme gustaría paso preciso para hacer el enlace
ResponderEliminarNo entiendo tu pregunta
EliminarPor 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
ResponderEliminarOK Jhon, gracias. Veo que voy a tener que diseñar unos botones ;)
Eliminar