lunes, 21 de enero de 2013

Blog (2): Cómo hacer botones molones para el blog

Sé que mi blog es un caos, que igual escribo de arquitectura que lo hago de ropa. Sé que me iría mejor si me centrara en un tema pero resulta díficil hacerlo cuando, como yo, eres una persona que tiene mil cosas la mar de diferentes rondándole por la cabeza. En todo caso, entiendo que el que llegue a mi blog puede estar interesado en un tipo de entradas y en otras no, por eso y sobre todo por lo cuadriculada que soy, tenía la necesidad de hacer una especie de menu  en el que clasificar las entradas por temas.

Así que estuve investigando por la web y me encontré con varias soluciones a mi problema.

Por una parte, tenía la posibilidad de crear un menu CSS, basta con que busquéis en Google "menu builder" para que veáis la cantidad de páginas donde te crean un menu de forma gratuita. La mayoría de estas webs te permiten personalizar los menus modificando los colores y tal.. En todo caso, ví que estos menus eran funcionales y fáciles de hacer pero físicamente no resultan atractivos y, sobre todo, no veía que se identificaran conmigo ni con mi blog.

Fue entonces cuando caí en la cuenta de que yo lo que ansiaba era tener unos botones chulísimos que llevaran a los lectores de una sección a otra. Me acordé de que Aubrey (que tiene un blog genial y es una diosa del diseño de blogs) había compartido una serie de botones divinos que había hecho con Photoshop (no los ha hecho ella pero molan mucho y nos los enlaza) y, de hecho, me gustaron tanto que cogí uno de ellos para usar como botón de contacto, así que corriendo fui a mirar si había algo que me sirviera en su blog, pero el resultado fue negativo... Obviamente no se había dedicado a crear botones de menu con todas las temáticas posibles para que sus lectores pudiéramos usarlos. Tenía la posibilidad de enviar un e-mail a Aubrey contándole mi "drama" y rogándole que me los hiciera... pero no tengo tanta jeta ni creo que fuera la solución al verdadero problema: no sabía hacer los malditos botones!!!

Seguí investigando y encontré un blog en que me explicaban varias maneras de hacer mis ansiados botones y, de hecho, hasta me facilitaban unas plantillas molonas. Sin embargo,  cuando me puse a hacerlos me dí de cuenta de que las instruccciones eran geniales pero que yo no estaba acostumbrada a esas cosas y que me estaba costando horrores y, para colmo, los resultados que obtenía no eran, en absoluto, los deseados.

Así que se me ocurrió una manera hipersencilla de hacer unos botones funcionales, graciosos y, sobre todo, muy muy míos. Os voy a explicar los pasos a seguir:

1) Buscar un fondo molón para el botón en cuestión. Yo lo que hice fue ir a weheartit y buscar "background" y no veáis el montanazo de imágenes de fondo que me salieron.

búsqueda-weheartit-fondo-para-blog


2) Una vez ya tenía mi fondo del botón, fuí a PicMonkey, un editor de fotos online que es una maravillla y muy intuitivo a la hora de usarlo.

fondo-bailarinas-ballet-moustache


3) Para hacerlo fácil, decidí que quería unos botones rectangulares, ya sé que no es una forma muy original, pero con el fondo molón y usando una fuente chula podía suplirlo perfectamente. Conozco la anchura de mi barra lateral, así que decidí que la medida perfecta de mis botones era 270 px por 100 px y me puse a hacerlos de esa medida yendo a la opción de "crop" y señalando éstas como las medidas elegidas.

cómo-hacer-botones-para-menu-blog


4) Una vez ya tenía mi botón sólo me quedaba decorarlo. Como no soy una artista del diseño no quería empezar a hacer cosas raras y acabar liándola, por lo que me limité a, con el mismo programa,  escribir con una fuente chula el título de la sección. Como pista os digo que usé el tamaño 36.

como-hacer-botones-blog-picmonkey


5) Et voilà, ya tenía mi botón, sólo me quedaba guardarlo y ponerme a instalarlo en el blog. La instalación es muy muy sencilla, supongo que la mayoría lo sabéis hacer pero para los que no, simplemente clickad aquí que os lo explican mucho mejor de lo que yo jamás habría podido hacerlo.

botón-etiqueta-blog-moda

Supongo que, en realidad, he escrito la entrada que me habría gustado encontrar cuando andaba loca pensando en cómo apañar el caos de blog que tenía ;-)



Puedes seguirnos por Facebook o Bloglovin!! 





 banner-3-smukthings





42 comentarios:

  1. ¡Hola!

    Yo estoy en la misma situación que tu, ningún botón me convence y siempre estoy trasteando, asique este post me viene muuuuy bien ;)

    ¡Muchas gracias guapa!

    http://chic-aparejatriz.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Pero tú tienes muchos más conocimientos de diseño que yo... seguramente hasta manejas el photoshop ;) Gracias por pasarte!

      Eliminar
  2. Te ha quedado genial! Muchas gracias por toda la información!! En breve quiero organizar mejor el blog y personalizarlo.
    A mí me gusta que cada entrada trate de un tema, es más divertido no saber con qué nos vas a sorprender...

    UN beso

    ResponderEliminar
    Respuestas
    1. Pues ésta la manera más fácil que encontré de organizar los posts.. jejej, sí, este blog es una caja de sorpresas, pero bueno, unos días gusta a unos y otros a otros ;-) Gracias por el comentario!

      Eliminar
  3. Hola!! pues esta misma noche lo hago porque yo también estaba buscando un tutorial como agua de mayo y no había manera! me viene genial cuando lo vi esta mañana en twitter no veía el momento de leer el post entero...ya te contaré el resultado! te sigo por aquí también!
    Por cierto, ya que el tema de los tutoriales se te da bien, yo estoy buscando añadir tipos de letra para los posts, pero todo lo que veo es super complicado de instralar!! si encuentras algo sencillo (la tecnología y yo no somos grandes amigas) avísame please!
    Besos
    Elena

    ResponderEliminar
    Respuestas
    1. Seguro que te va bien, es muy muy sencillo! No tendrás el mejor menú del mundo pero sí, al menos, uno muy muy personalizado ;) Muchas gracias por comentar, bss!

      Eliminar
  4. Tutorial necesario y ya que no está por la red, has hecho muy bien en ayudándonos a los que siempre vamos perdidos!

    Y respecto a que cada entrada sea sobre un tema, nosotras también te comprendemos...Muchas ideas y necesidad de exponerlas :)

    Post muy útil.

    Besos
    Con la realidad en los talones

    ResponderEliminar
    Respuestas
    1. Gracias por explicarnos como diseñar botones chulis para ordenar blogs, estás en todo! Muy útil. Besos.

      Eliminar
    2. Jajaja, ayss, es que el otro día andaba loca... y pensé que habría algún friki como yo que necesitara una mano con estas cosas, muchas gracias por pasaros!

      Eliminar
  5. Me encanta el post!! Y me voy a poner manos a la obra porque yo también he estado buscando tutoriales de este tipo y ya es hora de colocar unos botoncitos en el blog.

    Besotes

    ResponderEliminar
    Respuestas
    1. Mucha suerte!! A mí es que era un tema que me traía de cabeza pero ya lo tengo medianamente organizando, besos y gracias por pasarte!

      Eliminar
  6. Gracias por el post!! de hecho, creo que te voy a copiar la idea descarado jajajaja. Mi blog también es un poco "revuelto" y necesito darle orden y concierto. Gracias de nuevo. Mil besos!

    ResponderEliminar
    Respuestas
    1. Jejeje, pues ya sabes, a copiar, que en esto la suerte es que no va a haber dos botones iguales ;-) Gracias a ti por pasarte ;-)

      Eliminar
  7. ¡Kajajakaja totalmente! ¿quién de nosotras no se vuelve loca con el diseño del blog? A mí tu post me viene de perlas porque nunca eztoy satisfecha con el layout... Voy a zambullirme en lo de los botones. Muchas gracias y un beso ;)

    ResponderEliminar
    Respuestas
    1. Jajaja, me alegro de no ser a la unica que le pasan estas cosas :-), bss!

      Eliminar
  8. ¡Kajajakaja totalmente! ¿quién de nosotras no se vuelve loca con el diseño del blog? A mí tu post me viene de perlas porque nunca eztoy satisfecha con el layout... Voy a zambullirme en lo de los botones. Muchas gracias y un beso ;)

    ResponderEliminar
  9. el diseño del blog es algo complicado y divertido a la vez, me ha encantado como explicas la manera de crear la imagen con la palabra moda, yo que soy diseñadora es dedicar tiempo y al final acabas desquiciado, muy buen post guapa, un 10!!!!!

    ResponderEliminar
    Respuestas
    1. Jajaj, pues tú eres una experta!! Yo es que de estas cosas entiendo muy poco, pero a veces se consigue sabiendo poco obtener resultados decentes! Eso sí, lo de diseñar bien un blog es muy muy chungo!!! Me alegro que te gustara, muchas gracias por pasarte!!

      Eliminar
  10. Me ha encantado este post! porque estoy pensando hacer algunos cambios en el blog entre ellos incluir las secciones que tengo previamente creadas.
    Me parece muy útil la información,PinkMonkey me parece super útil.
    Besitos feliz semana

    ResponderEliminar
    Respuestas
    1. Sí, PicMonkey es una maravilla, lo descubrí hará un mes y bufff, de la de apuros que me está sacando, además, es facilísimo de usar. Me alegro de que te gustara el post! Muchas gracias por comentar :-) Feliz semana!! Besos!

      Eliminar
  11. ¡¡Acabas de solucionarme un gran problema!! Muy buen post en serio.

    ResponderEliminar
    Respuestas
    1. Jejeje, me alegro de que te sirviera.. que un post guste es buena señal pero que sea útil es señal mucho mejor! Gracias por pasarte!!

      Eliminar
  12. Buenísimos consejos, la verdad que Pic Monkey es una maravilla para editar fotos de manera online, lo recomiendo siempre que puedo. Los botones te han quedado muy bien ;-)

    ResponderEliminar
    Respuestas
    1. Sí, PicMonkey me encantaa! Bueno, para no tener ni idea, los botones sirven para salir del paso, no?? Muchas gracias por pasarte por aquí!!

      Eliminar
  13. Hola!!!
    Pronto se nos hace una gran diseñadora gráfica! jajaja
    El PicMonkey es amor, pero ahora han puesto de pago algunos de los mejores efectos.
    Yo por suerte tengo a @miguelcm que me ayuda en todo esto! Pero no creas, con ayuditas como la tuya de hoy, se aprende un poquito más!

    XOXO
    Lady Wolff
    http://www.ladywolff.com/

    ResponderEliminar
    Respuestas
    1. jajaja, tú tienes al profesional en casa, de esto no necesitas ;-) Sí, me encanta el PicMonkey, eso sí, tuve la mala pata de descubrirlo hace poco pero para lo que lo uso, con lo gratis me basta! Muchísimas gracias por pasarte!

      Eliminar
  14. Yo quiero hacer lo mismo pero separando Street Style,Arte/Moda,Favourite Things,Tendencias y Ego posts,pero,ahora que nos has explicado paso a paso cómo hacer los botones,cosa que tampoco sabía yo,cómo separas en cada botón cada post??
    Alomejor estoy haciendo una pregunta de lo más ridícula,pero es que yo soy muy torpe.
    Muchas gracias por haber hecho este post!!
    Un beso!!
    www.ladycolors-ladycolors.blogspot.com

    ResponderEliminar
    Respuestas
    1. Jejej, creo que lo que te refieres es a cómo asignar a cada grupo de posts un botón, no? ES muy sencillo, tienes que agruparlos bajo la misma etiqueta y luego establecer que la imagen redirija al link que corresponde a la etiqueta. Te dejo un link en que está explicado genial, con fotos y todo!

      http://creativemindly.blogspot.com.es/2012/08/pon-botones-en-tu-blog-blogger.html

      Muchas gracias por pasarte!!

      Eliminar
  15. De clic en clic caigo por este blog y me pareció muy interesante este post, ya andaré visitando los links del blog Aubrey, el editor de fotos y demás. Fíjate que cuando nosotras nos decidimos a tener "etiquetas" en el blog, hice algo parecido con los recursos que contaba jeje, y así poco a poco hasta que terminé por dejando los que ahora tenemos, pero me llama más la atención las imágenes coloridas, y estar en constante modificación visual de un sitio. El tuyo es muy lindo, los tonos, matices que se ven y por supuesto contenido me ha gustado bastante.

    Claro que es interesante y más bueno hablar de todo un poco a tener a la audiencia aburrida en lo mismo. Creo yo.

    Saludos y espero regresar pronto por más post buenos como este.
    Abrazo!

    ResponderEliminar
    Respuestas
    1. Me alegro que te haya resultado útil el post. Me gusta tener un blog variado porque, en realidad, es reflejo de mí misma, pero entiendo que es más díficil conseguir unos lectores fieles cuando no sigues una línea uniforme.. En todo caso, es lo que hay!! Saludos y muchísimas gracias por comentar!

      Eliminar
  16. Gracias por el post!!! Creo que me va a ser muy útil!!! Te sigo guapa!

    Un besito

    ♥Raquel

    http://prettygoodandcheap.blogspot.com.es

    ResponderEliminar
  17. Te voy a poner un piso!!!
    Soy muy muy torpe, y eso que he dicho que aprendo a dominar HTML "porlagloriademimadre"...asi que tu post me va a servir mucho muchisimo!!
    Gracias por compartirlo!!
    Besotes!!

    ResponderEliminar
    Respuestas
    1. jajaja, qué exageradaa!! Bueno, ésto no tiene nada de HTML así que no hay excusas que valga!! Un beso!

      Eliminar
  18. Hola!! Te acabo de conocer por la fiesta de enlaces. me ha encantado el post, mil gracias, te sigo y me subscribo!!!
    Un beso,
    byLuch

    ResponderEliminar
    Respuestas
    1. Me alegro de que te gustara!! Muchas gracias por la viista!

      Eliminar
  19. Me encanta, yo ya puse dos! :))
    Lascosasdepi.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. Me alegro que te haya sido útil! Es genial pensar que lo que escribes sirve para algo :)

      Eliminar
  20. Mi gran duda es: ¿cómo hacéis para poner más de dos en línea? Porque lo veo en muchos blogs, y mira que lo he intentado, pero nada, ni idea.

    ResponderEliminar
    Respuestas
    1. No sé muy bien a que te refieres.. Quieres decir poner iconos todos en una tira, no?? En ese caso, mira este videotutorial que está superclaro (es muy sencillo de hacer)

      http://www.mamaquieroserblogger.com/2013/01/anadir-iconos-redes-sociales-blog.html

      Eliminar
    2. Si, justo era eso, ya sé lo que hacía mal, los hacía como gadgets separados, no todos en el mismo, y por eso no me dejaba poner más de dos en la misma fila, muchas gracias :)

      Eliminar
  21. Gracias por la info!! Muy buena y original!!

    Nosotras tenemos una tienda online de ropa www.todovestidos.es y hemos creado ahora nuestro blog! Te dejo el enlace para que le eches un vistazo a ver si te gusta!! Iremos actualizando todos los dias!

    http://hoylamodaerestu.blogspot.com.es/

    Un saludoooo!

    ResponderEliminar

Related Posts Plugin for WordPress, Blogger...
Pin It button on image hover