gadgets imprescindibles blogger

Añadir Gadgets en Blogger TUTORIAL

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

MI LIBRO

TU PROPIO ÉXITO

DESARROLLO PERSONAL Y BRANDING

Consigue tu ejemplar con ejercicios e ilustraciones.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments