gadgets imprescindibles blogger

Añadir Gadgets en Blogger TUTORIAL

Gadgets imprescindibles para añadir en Blogger

En este post vamos a añadir gadgets imprescindibles para nuestro blog. Además te facilito un código para profesionalizar y crear un apartado Sobre Mi atractivo.  

No todos los gadgets que encontramos en Blogger son necesarios, de hecho la mayoría no son recomendables.   

Sin embargo existen algunos imprescindibles que ayudarán en la navegación de tus lectores y en las impresiones que estos/as tengan de tu blog.  

Por cierto, ¿Sabías que no existe diferencia entre una web y un blog? En realidad el blog es una parte de la web. Con lo cual cuando tenemos un blog estamos reduciendo mucho nuestras posibilidades de ganar dinero con él. Lo que es profesional es tener una web, con tu apartado de servicios y presentación como Marca Personal. Aunque solo monetices el contenido de tu blog esto sería lo más recomendable.

No me lio más y te dejo con la clase y recuerda que al final del post tienes el vídeo-tutorial

Añadir gadgets de entradas populares

→ Vamos a Diseño

→ Luego vamos a darle a Añadir Gagdet en el sidebar.

→ Buscamos Entradas Populares y le damos clic.

→ Aparecemos en la ventana del gadget con opciones para personalizar. Elegimos lo que queramos.  

→ Le damos a Guardar.

* Si lo queremos mover de sitio, solo tenemos que pinchar y arrastrar hacia donde lo queramos dejar.

ACTUALIZACIÓN

hasta hace poco no se podía editar gran cosa en este gadget en cuanto a diseño, pero gracias a Oloman, del blog Oloblogger , esto ya es posible.   De forma muy simple,  pero importante, dejaremos nuestro gadget de post populares personalizado y con una mejora en su imagen notable.   Te dejo el post que tiene la explicación sobre Cambiar el tamaño de las imágenes en el gadget de entradas populares de Blogger y un vídeo para que te resulte más sencillo 🙂

Añadir gadgets sobre mí

→ Repetimos los 3 primeros pasos del anterior apartado pero esta vez buscamos HTML/Javascript.

→ En el Título escribimos Sobre mi o aquello que queramos.

→ En el cuadro grande de texto, pegamos el siguiente código y modificamos lo que está señalizado por nuestros propios datos.

*Cuidaros de no eliminar las comillas. (si no sabes copiar tu dirección de imagen,  que pone URL de tu imagen , mira este vídeo)  

<div><center><a href='LA URL DE TU BLOG'><img src="URL de tu imagen" /></a></center></div>

<div style=''><p  style=" word-wrap: break-word; clear: both; text-align: justify; color:#8fb59e; font-size:10px;letter-spacing:2px;font-family: 'Arial';text-transform:uppercase; line-height:130%;padding-top:-30px;">TEXTO que quieras redactar</p> </div>

<div style='padding-top:15px;padding-bottom:10px;'><center><a href='URL DE TU FACEBOOK'><img src="https://4.bp.blogspot.com/-q06XCRlFTnI/VvwvWrXIFGI/AAAAAAAAFa0/elgVWvhqT7ArC3RKubZm9AI1btLhJ5NfA/s1600/FACEBOOK-azul.png" title="Facebook"/>

<a href='URL de tu Twitter'><img src="https://3.bp.blogspot.com/-KAedXhvU40s/VvwvXJAwLXI/AAAAAAAAFbI/YXiUwHRLOW0vErj_SgNUuC4wtChzG62mA/s1600/TWITTER-azul.png" title="Twitter"/></a>

<a href='URL de tu Instagram'><img src="https://2.bp.blogspot.com/-WzB2kUx0Tw4/VvwvWi3cv-I/AAAAAAAAFa8/l05iu94cgxASrB79g75jGisi08LW0ut0w/s1600/INSTAGRAM-azul.png" title="Instagram"/></a>

<a href='URL de tu Pinterest'><img src="https://3.bp.blogspot.com/-_twn5_vkMyA/VvwvXJNKyrI/AAAAAAAAFbE/lmvF4VuL4LY-OyaiW0OVu-4mKy1VkCcrQ/s1600/PINTEREST-azul.png" title="Pinterest"/></a>

<a href='URL de tu Google+'><img src="https://4.bp.blogspot.com/-LVDC0EXksFU/VvwvWshSDsI/AAAAAAAAFa4/j6NUZf9lSDgdsqqOdjXnxk21ONxDYrCvw/s1600/GOOGLEPLUS3-azul.png" title="Google+"/></a>

</a></center></div>
  •  Se puede personalizar de esta manera:   
    • color:#8fb59e; el color del texto.  
    • font-size:10px;  mide el tamaño de las letras.  
    • letter-spacing:2px;  mide la distancia entre cada caracteres /letras.  
    • font-family: ‘Arial’; Tipografía o Fuente de la letra.  
    • text-transform:uppercase; cambia a mayúsculas, lowercase cambia a minúsculas y si lo eliminas saldrá tal cual lo escribas.  
    • line-height:130%; este porcentaje mide la distancia entre líneas/frases.  
  • Una vez preparado lo pegamos en el cuadro del gadget que hemos abierto, el HTML/Javascript y le damos a Guardar.    

Si te fijas solo hay 6 etiquetas div 3 que abren <div o bien <div> y 3 que cierran </div>  Cada contenido dentro de esas partes es una parte del Sobre Mi , en este código que te facilito están en este orden:  

<div> IMAGEN</div>

<div TEXTO </div>

<div> REDES SOCIALES </div>   Si lo que quieres es cambiar de posición los elementos, solo tendrás que cortar desde el <div> que abre hasta el </div> que cierra del elemento que quieres mover y pegarlo encima o debajo del elemento que prefieras. Cualquier duda me dejas un comentario 😉

<div> REDES SOCIALES </div>  

Si lo que quieres es cambiar de posición los elementos, solo tendrás que cortar desde el <div> que abre hasta el </div> que cierra del elemento que quieres mover y pegarlo encima o debajo del elemento que prefieras. Cualquier duda me dejas un comentario 😉

Añadir gadgets de suscripción por e-mail

ACTUALIZACIÓN

Por la última ley de protección de datos no te recomiendo seguir estos pasos sino más bien creando una cuenta en Mailerlite. Aquí tienes un Tutorial

  1. Repetimos los 3 primeros pasos del primer apartado pero esta vez buscamos Seguir por correo electrónico.
  2. Cambiamos el Título si queremos.
  3. Guardamos y listo.  
  4. Si quieres cambiar su posición en el sidebar solo tienes que hacer clic y arrastrar a donde quieras.

¿Ya se ha terminado? Pues sí, otra clase más completada! Ya estamos más cerca de terminar.

En la siguiente clase veremos cómo eliminar Suscribirse a entradas (Atom) ¿Qué te parece? 

Haz clic en la siguiente imagen para ver todas las clases del curso gratis 🙂

Comparte

CONSIGUE

LA VIDA QUE DESEAS

GRACIAS A UN NEGOCIO ONLINE RENTABLE

Disfruta de mi curso gratuito “Cómo tener un Negocio Online Rentable no solo económicamente”, en el que comparto las áreas más importantes a trabajar para conseguir la vida que deseas con tu Emprendimiento Online.

Interacciones con los lectores

29 comentarios

  1. María José

    Muy Buenas!

    Me ha salido a la primera. Y eso que lo he intentado con otros gadgets y jamás me salía. Enhorabuena! Pero me gustaría que el texto no esté justificado si no alineado a la derecha porque crea unos espacios muy feos.

  2. Meraki

    Me está encantando tu curso. Literalmente me estás salvado! Me llevo fatal con Blogger y pierdo la paciencia porque a veces siento que todo me sale mal y no hay manera de que me funcione… pero me estás ayudando muchísimo y quiero darte las gracias.

    Justo en esta parte del curso hay algo que me ha costado entender y es dónde te habías ido para cambiar el código fuente… he tenido que ir en el vídeo para adelante y para atrás unas cuantas veces hasta que me di cuenta de que estabas en "Tema" ("plantilla" en tu vídeo) y ahí podía editar el html. Además al usar un Mac las cosas son un pelón distintas… pero me voy apañando.

    Un millón de gracias!!

    • Cecy Vilar

      Hola! No sabes que gran ayuda me estas dando para entender como funcionan las cosas!
      Sinceramente tus vídeos resultan sencillos y muy didácticos para quienes, al menos en mi caso, no cazamos ni una.

      ¿Puedo consultar donde subes las fotos para conseguir luego el URL?

      Muchas gracias de antemano!

    • Mónica Lemos

      Hola Cccy, en el post pone que mires un vídeo donde lo explico. Generalmente yo las guardo en una entrada que no se publica nunca y tampoco se puede eliminar ni nada. Entonces en edición con cargo la imagen y luego le doy a copiar dirección de imagen. Y listo!

      Muchas gracias por tus palabras!! me ayudan mucho!
      Ánimo con eso!
      Saludos

  3. barbara manzanares

    Hola Mónica! diosos tus cursos, por cierto, de no ser por ellos prrobablemente no tendría blog alguno.
    Tengo una pregunta, no sé si me puedas ayudar un poco, en caso de que en el wadget de post populares quiera que salga únicamente la imagen, sin texto, ¿cómo le podría hacer?
    Y otra cosita, me he fijado que en varios blogs, el wadget de etiquetas, encuadran las palabras, y se ve más limpio de esa manera que en vez de tenerlo en lista u nube ¿no sabrás de casualidad como hacerlo?
    Gracias por adelantado, y disculpa las molestias!

  4. Juan Reyes

    Hola Monica, me encanta tu forma de explicar y detallar tus videos tutoriales. Estoy aplicando todos tus tips. Ahora me encuentro con el Gadget "Sobre Mi", pero me gustaría que los enlaces de las redes sociales abran en una ventana nueva. Me ayudas? Saludos

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *