12/6/13

Como poner un boton de blog con cajita de código

No sé si habéis visto el botón que tengo en el lateral de mi blog, justo debajo del titulito "¡Ponme en tu blog!":

Personalizacion de Blogs

Ese botoncito es por si alguna buena samaritana quiere hacerme el favor de poner mi botón en su blog.

Lo único que tenéis que hacer es copiar el código que viene en la cajita, ir a vuestro blog - Añadir gadget HTML, pegar el código y Guardar.

¡Voilà!

Blanca encantada que le hacéis un poco de propaganda... :)

¿Pero bien, qué pasa si alguna buena samaritana quisiera haceros propaganda a vosotras?

Bueno, pues que cuanto más fácil se lo pongáis, más probabilidades de que encontréis una tendréis :)

¿Cómo poner un botón con cajita con código en vuestro blog?


Es suuuuuuper fácil.

Y más fácil aún con esta herramienta que os voy a descubrir.

Pre-pasos:

A) Diseñáis vuestro botón (si no tenéis aún la guía de PicMonkey podéis pedir una aquí - es gratuita)

B) Alojáis vuestro botón, ya que vais a necesitar la URL luego (más sobre esto en el Curso Dos para blogueras)

Y luego:

1) Pincháis aquí

2) Rellenáis los campos:


Vamos a ver cómo rellenarlos:

✎ En el primero ponéis el título de vuestro blog

✎ En el segundo la URL de vuestro blog

✎ En el tercero la URL de vuestro botón (pre-paso B)

✎ En Container type, si usáis Blogger, tenéis que pinchar el que dice Textarea

✎ Los colores, podéis poner los que queráis. Yo le cambio el fondo porque me gusta más blanco que gris, pero bueno, podéis poner lo que queráis.

✎ La altura y ancho, el que queráis también (dependiendo de vuestra columna también, yo por ejemplo para este blog le pondría pues 200 de ancho y 100 de alto)

✎ Open in a new window? Yes (y es que encima de que nos hacen publi, no vamos a hacerles que se vayan de su blog al nuestro, mejor que se abra en una ventana nueva ;)

3) Y le damos a Preview:


4) Si nos gusta, pues genial. Le damos a Get Code y copiamos el código que sale en la caja:


5) Ya lo tenemos. Ahora vamos a nuestro blog, le damos a Añadir gadget - HTML - y pegamos el código.


¡Tachán!

Ya tenéis el botón con cajita en vuestro blog, para que si alguien quiere poner el botón en su blog, sólo tenga que copiar el código de la cajita y ya está.

Por supuesto, si alguien quiere poner el mío, es más que bienvenido... ;)

Mil besos,

P.D. Una semana solooooooo

¡¡El miércoles que viene sale, por fin, el curso de Redes Sociales!!

Ya os he dicho que os compensaré con una ofertilla por el retraso... Estad atentas porque será una oferta sólo para las seguidoras y seguidores más fieles :)


Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

53 comentarios

  1. Ala! Qué bien!
    A mi no me va a hacer propaganda nadie, pero está muy bien saber cómo ponerlo!

    Un besoo

    ResponderEliminar
  2. Muchas gracias, como siempre súper bien explicado :D

    https://tiffet.es

    ResponderEliminar
  3. Muchas gracias Blanca, una amiga ya me había hecho el gif pero no sabía cómo poner la "caja" como la tuya. Ya lo tengo instalado en mi blog: http://elrincondelaurag.blogspot.com.es/ siguiendo tus instrucciones. Verás que también tengo tu botón "subir" y he seguido varios de tus consejos. Espero te guste mi blog. Un saludo, Laura.

    ResponderEliminar
  4. Lo único que agregaría Blanca, es que preferentemente la imágen sea cuadradita de 150 x 150 pixeles como lo hace la mayoría. Tengo varios de estos botoncitos en mi página de "Link Parties" y la obsesiva en mi se pone de mal humor cuando uno de ellos tiene una forma distinta que me corta la armonía de la tabla! jaja :o)

    ResponderEliminar
  5. Me gusta mucho esta idea ^_^

    Voy a diseñarme un cartelito guay para ponerlo en el blog!!

    Un besote :)

    ResponderEliminar
  6. Te sigo desde hace un tiempecito...pero en esta última semana te leo tooooodos los días (aunq no soy mucho de comentar). Me encanta como explicas las cosas, ya que de esa manera se entienden mucho mejor...Estoy siguiendo tus consejos para mi nuevo blog...ya que el anterior lo empecé pero el diseño no me gusta nada...y con este nuevo quiero q el diseño sea bonito dsd el principio...asi que de nuevo muchas gracias por todos tus consejos!!!

    ResponderEliminar
  7. Hace tiempo que quería saber esto. Eres una especie de bruja que adivina mis pensamientos!! Mil millones de gracias.
    Muuaaaakkk

    ResponderEliminar
  8. ¡Qué interesante!
    Por ahora no tengo idea de utilizarlo pero está bien saber cómo se puede hacer :)
    Un beso!

    ResponderEliminar
  9. Ay, qué chulo! No sabía ni que existía esto, jajaja! Que mal voy... :(
    Si consigo diseñar algo así de cuco, lo intentaré!
    Un besote

    ResponderEliminar
  10. A mi tampoco me va a dar nadie publi, pero me encanta ese botón.
    Muchas gracias!!!

    Ana
    Cocinitas

    ResponderEliminar
  11. oohhhhh!!! Que bien!!! Era una duda que tenía, gracias!

    ResponderEliminar
  12. ¡genial! yo lo he usado siempre en los blogs que he tenido y la verdad es que facilita un montón las cosas :)

    Pero me limitaba a modificar el código que me pasaba mi hermano jejeje no tenía ni idea de que existía una web que te lo hacía metiendo tus datos, ¡que descubrimiento!

    Besotes, preciosa ;)

    ResponderEliminar
  13. Me encanta! No sabía como hacerlo! Muchas gracias por la información! Un beso

    ResponderEliminar
  14. Ahora mismo te hago un pedestal! jajaja puede sonar exagerado, pero llevo un tiempo intentando hacerlo, siguiendo varios tutoriales y nada, siempre me quedaba el cuadro vacío! y ya estaba de los nervios. Si no he seguido 30 tutoriales no he seguido ninguno y en TODOS me ha pasado lo mismo: cuadro en blanco...

    Ayer mismo lo volví a intentar y otra vez nada! estuve a punto de enviarte un mensaje para que me ayudaras, pero no quise molestarte. Y hoy entro y lo explicas, me debes de haber leído la mente jajaja

    Besos y muchísimas gracias!! Ya lo he puesto y va genial :)

    ResponderEliminar
  15. Va bien poner un botón de estos para intercambiar enlaces :)

    Besos!

    ResponderEliminar
  16. Jajajaja, Blanca desde que tuviste tus dudas de publicaciones publicas más que antes. Por cierto, yo soy seguidora fiel y tengo todos tus cursos supongo que tendré descuentillo no??? Besos. Yolanda.

    ResponderEliminar
  17. Hola Blanca , ya puse el cuadradito en mi blog !!!!!

    ciaooooo y gracias por tanta información !!!
    Andrea

    ResponderEliminar
  18. ¡Me guardo el post porque es muy útil! Que guay el curso de redes. Seguro que está genial. Veré la oferta cuando salga de trabajar ;)
    Besos.

    ResponderEliminar
  19. Hola Blanca, ya lo he hecho, no creo que nadie me añada pero me encanta la idea, mira como me ha quedado, está genial tu aporte, mil gracias, por tus posts. XD Mariona
    http://tallersmariavictrix.blogspot.com.es/

    ResponderEliminar
  20. Hola Blanca,

    te he recomendado en mi blog, tal y como indicas, copiando tu código pero no he podido, al copiar el código y pegarlo, sale esto:

    "- See more at: http://personalizaciondeblogs.blogspot.com.es/2013/06/poner-boton-blog-con-cajita-codigo.html#more"

    Finalmente he tecleado el código a mano y tachán: http://tallersmariavictrix.blogspot.com.es/
    eres mi primera bloguera recomendada, tus post son muy útiles

    muchas gracias
    Mariona

    ResponderEliminar
  21. Desde luego, desde que te conocí me he hecho adicta a tu blog, ¡me lo estoy leyendo enterito!

    y desde luego miraré el curso de redes.
    Besos
    www.cuquicosas.es

    ResponderEliminar
  22. Desde luego me he hecho adicta a tu blog, ¡me lo estoy leyendo enterito !

    Estaré pendiente del curso de redes.
    Besos

    www.cuquicosas.es

    ResponderEliminar
  23. Es genial, gracias por compartirlo! :)
    Todo lo que nos cuentas es muy interesante :)

    BesitoS!

    ResponderEliminar
  24. Gracias por la información. Deseando que salga el curso de redes. Besos

    ResponderEliminar
  25. Hola! Muchas gracias por tus ideas, la verdad es que lo explicas todo de maravilla. Te quería agradecer todo lo que haces por las bloggers que no saben del tema diseño y personalización así que te he dejado un premio en mi blog. No hace falta que hagas las preguntas con la entrada y todo .Pero bueno, quería agradecerte como te digo de alguna manera. Un saludo enorme y enhorabuena por tu trabajo! :)

    ResponderEliminar
  26. Cuando yo descubrí este mail y vi la petición de poner el código en mi blog lo fui a hacer y como no me daba cuenta de que estaba en HTML (yo el HTML no lo uso) simplemente me fui al inicio del blog, copie la dirección (www.personalizaciondeblogs.blogspot.com) y lo añadí en mi lista de blogroll. Eso también funciona. Carmen

    ResponderEliminar
  27. Al menos de momento no tengo intención de hacerme este botón, pero te agradezco infinitamente toda la sabiduría bloguera q nos regalas en tus posts. Nos lo pones todo tan fácil...
    Un beso

    ResponderEliminar
  28. ufffff tento que decir blanca..que aun lo bien que explicas todo..lohice en un momento, jaja pero todavia no he conseguido centrarlo..mm he cambiado el margin en html..y los pixeles..tmabien he editado la barra de fondo con edicion avanzada..y aun..queda un pelin descentrado..a ver si pudes decirme algo..gracias...ah..!!! por supuesto que te agregue..un saludo y felicidades

    ResponderEliminar
  29. Hola Blanca
    Hace relativamente poco que te sigo y tengo que reconocer que te encontré gracias a uno de estos botoncitos que otra seguidora tuya tenía en su blog, a partir de ahí he empezado a leerte y tengo que reconocer que he vuelto a activar mi blog (lo tenía "abandonado", NO, lo siguiente), convirtiéndose en casí una obsesión el ir mejorándolo y el leer y leer sobre el tema.
    Después de todo este royo, darte las gracias por tus conocimientos y opiniones y animarte a que sigas con esta labor.
    Yo puedo decir (o por lo menos mi blog lo haría) que hay un antes y un después de conocerte y empezar a leerte.
    Un abrazo y por supuesto seguimos en contacto


    ResponderEliminar
  30. muchas gracias siempre lo habia buscadooo te debo un monton! me encanto tu blog muchas gracias por darnos tus tips!!

    ResponderEliminar
  31. Muchas gracias, siempre es bueno saber estas cosas.

    ResponderEliminar
  32. Y pensar que yo todo lo hacia con HTML, de seguro me ahorro par de minutitos con este link, mil gracias! :)

    P.D. Desde ayer te estoy leyendo el blog poco a poco, has conseguido sin duda alguna otra fan. :D

    ResponderEliminar
  33. Lo del código en mi blog lo veo precipitado aún (llevo solo un mes con el blog y no creo que deba recomendarme nadie jeje) pero tù ya estás en un lugar destacado. No veas lo que estoy aprendiendo contigo. Pásate por mi blog y échate un vistazo!
    http://uncolumpioeneljardin.blogspot.com.es/#

    ResponderEliminar
  34. oh mi Dios no sabes cuanto te amo (okno exagere XD) Gracias llevaba buscando esto hace rato y no me salia gracias :D

    ResponderEliminar
  35. ¡Mil gracias! Y no exagero te lo juro... LLevo buscando éste tutorial pues como un mes desde que tengo mi banners y todos los explicaban muy mal o el código no estaba bien.. Y vienes tú y me regalas el cielo.
    Mil gracias enserio.
    Besos.

    ResponderEliminar
  36. Me encanta tu blog y me está sirviendo de mucho en el mio http://elrinconcicodelanovia.blogspot.com.es/ así que he puesto tu botoncito...:D

    ResponderEliminar
  37. Mil gracias, ya lo agregue mi propio código, tus tips son geniales y muy prácticos.

    ResponderEliminar
  38. No sabes cuánto me ayudaste! Muchísimas gracias, no sé cómo podría haberlo hecho sola :)

    ResponderEliminar
  39. Gracias Debbie! n.n. Me ayudo muchisimo!! Lo puse pero no se ve el texto, en cambio, en las entradas si se ve :|.
    Bueno, igual gracias! n.n.

    ResponderEliminar
  40. Hola! Una pregunta, porque cuando le hago click a mi botón no se redirecciona a mi blog, no sucede nada.

    ResponderEliminar
  41. Quiero darte las gracias amiga, lo había buscado mucho, y no lo encontraba, gracias estoy aprendiendo mucho, con tus consejos, un saludo grande desde Montevideo Uruguay,

    ResponderEliminar
  42. Me ha encantado la entrada y me chifla tu blog! He puesto tu botoncito en el mío http://princessandowlstories.blogspot.com, que aunque es muy humilde y aun estoy algo verde (en cuanto tenga un poquito de tiempo me pillo uno de tus cursos que pintan genial) lo hago con mucho cariño e ilusión

    ResponderEliminar
  43. Me ha gustado el link que has puesto al principio, muy divertido. Yo tengo un boton ya listo que pone Enlazame y te lleva directamente a instalarlo en tu blog, me lo diseño una chica.
    Gracias por los tutoriales tan faciles, me gusta mucho leerte (creo que lo he dicho antes muchas veces, pero no me canso de repetirlo) y se que estos comentarios te suviran un poco de animo.
    Un saludo.

    ResponderEliminar
  44. Hola he puesto un enlace de mi blog al tuyo me ha sido de gran ayuda tu post!! saludos
    http://stylemarian.blogspot.com.es/

    ResponderEliminar
  45. Ale, ya te tengo en mi blog, espero que te sigan muchas mas blogueras :) gracias por todas tus entradas!!! voy en busca de la entrada de como poner el boton de insta, face, google+ y ahora no la encuentro!!! agrrrrr ejejeje, un beso!!!!

    ResponderEliminar
  46. Ya te tengo en mi blog!!! gracias por toda la ayuda que me das con mi blog :)

    ResponderEliminar
  47. Hola, buenas lo primero es que me encanta tu blog.
    Lo segundo es que tengo dos preguntas.

    1° Es posible poner botones en las paginas del mismo blog ?

    2° es posible poner otro bloque de apartados en blogger ?

    Mi url www.marsureste.blogspot.com
    Gracias por adelantado

    PD.: tienes un magnifico blog

    ResponderEliminar
  48. aqui lesdejo mi pagina espero lesgustes CUALQUIER DUDA ME DEJAN SUS COMENTARIOS
    http://notiencalle.blogspot.com/

    ResponderEliminar
  49. Muy interesante y util el post, muchas gracias por todos los recursos me han sido de mucha utilidad, y desde ya pondre tu imagen en mi blog, saludos

    ResponderEliminar
  50. Cada tutorial que encuentro en tu blog me funciona a la perfección. Te estoy siguiendo, saludos!!!!

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.