Agrega Tu Botón De Blogger

agrega-tu-boton-de-blogger

Hola, hola como siempre antes de comenzar espero se encuentren muy bien. Hoy para esta segunda entrega de la semana va a hacer sobre un tutorial muy sencillo para agregar el botón de seguidores en blogger.

Blogger ofrece su propio gadget de seguidores o sería como su propia red social de seguidores donde solo lo tienen que agregar a su lista de lectura o blogs que siguen para visitar o leer su contenido cada vez que publiquen alguna entrada en su blog. El gadget de seguidores es como este:



gadget de seguidores


Para agregarlo son pasos muy sencillos y con este tutorial lo van a encontrar el paso a paso de este gadget muy bien explicado.

AGREGA TU BOTÓN DE BLOGGER

Este tutorial será muy sencillo porque con un sencillo código ustedes podrán agregar su botón de blogger. Pero antes de entrar en materia el enlace para hacer todo este proceso será como este:

https://www.blogger.com/follow.g?blogID=429245244043313810 

El enlace es de color negro y el ID para seguir al blog es el color rojo, pero aquí hay una pregunta al aire ¿Cuál es mi ID? Conocerlo es un proceso muy sencillo.

Para conocer el ID de su blog y lo encontrarán ilustrado en la siguiente imagen. Al entrar a su área en blogger solo deberán revisar la url y encontrarán el ID de su blog  así como se ilustra en el primer ID de la primer imagen y es el mismo ID en el enlace de seguir al blog en la segunda imagen: 


Solo se sería cambiar el ID de mi blog por el ID de su blog en el enlace que mostré aquí arriba, para agregar el enlace para seguir a su blog. 

LOS BOTONES
La dinámica la he variado un poco con los botones en este tutorial porque en este entrega los botones vienen con la url del botón y la medida del botón es 150 px de ancho por 150 px de altura y son los siguientes:

imagen-1
https://4.bp.blogspot.com/-Omv61KKKzkk/WLeXKrfVMoI/AAAAAAAADGA/bzNdLTjrjmoz79CrSmXt8-GvtSWdREB1gCLcB/s1600/imagen-1.png

imagen-2
https://3.bp.blogspot.com/-K9LUWQfdStI/WLeXK-EPLJI/AAAAAAAADGI/8nggpG6fHN0m1cmal7mct4_V0zu3B_lCACLcB/s1600/imagen-2.png

imagen-3
https://2.bp.blogspot.com/-p3atFJ8v7Yg/WLeXK_FiXQI/AAAAAAAADGE/RpJbQ1wcD64AMcoJJZ-xRDpmqvLUo42PgCLcB/s1600/imagen-3.png

imagen-4
https://4.bp.blogspot.com/-JhWPFRzl-10/WLeXrI0WhII/AAAAAAAADGc/_EaVO_Mx8Bg_DMDcTZKw5qOcG7dpB-v8gCLcB/s1600/imagen-4.png

imagen-5
https://3.bp.blogspot.com/-szVUCpY_ZV4/WLeXK0C18vI/AAAAAAAADGM/nwRLl7H794gqT6P7872hUdkpebl9Vz4qACLcB/s1600/imagen-5.png

imagen-6
https://2.bp.blogspot.com/-V3ULZrJoQiI/WLeXLCiwMQI/AAAAAAAADGY/M-5LVZvZ9xouXUNB0M-f4rwjq40lV85nQCLcB/s1600/imagen-6.png

imagen-7
https://2.bp.blogspot.com/-HAHDGWhBux4/WLeXLLKHV0I/AAAAAAAADGQ/ve4tfxwvS346gkcGC-PWXf004W4h9GGTwCLcB/s1600/imagen-7.png

imagen-8
https://2.bp.blogspot.com/-qf9bqs0WpVQ/WLeXuELDP8I/AAAAAAAADGg/7BLnHF_ER2cErP2fD6gW3nEoplT2_k2ygCLcB/s1600/imagen-8.png

imagen-9
https://3.bp.blogspot.com/-hYfGPO_UY6c/WLeXLWGroAI/AAAAAAAADGU/28WPjd2TL986ObNW6dcKVRliwuwOPlO2gCLcB/s1600/imagen-9.png

imagen-10
https://3.bp.blogspot.com/-dboOt5bEqUA/WLeXKiwEWXI/AAAAAAAADF8/mk40UBHlMSEm18ruj36qskc7x3mvEH0gQCLcB/s1600/imagen-10.png

imagen-11
https://2.bp.blogspot.com/-_E5Chtq2eOw/WLeXKgmXkBI/AAAAAAAADF4/Mvf9rdisQbEERgCCl3M17LLU0vchiUTqQCLcB/s1600/imagen-11.png

imagen-12
https://3.bp.blogspot.com/-16n9eLTYoIY/WLeXwH1eyVI/AAAAAAAADGk/9QJCzK3ke6MAnvCHIeiS_O9LYIN9qb1NgCLcB/s1600/imagen-12.png

EL CÓDIGO

<center style="text-align: center;">
<img border="0" src="aquí la url de tu imagen" />
<div class="separator" style="clear: both; text-align: center; font-size: 16px;">
<a href="Aquí el enlace de tu ID" rel="nofollow" target="_blank">Aquí va tu texto</a></div>
</center>



El código es muy sencillo y lo que tienes que editar es lo siguiente:

aquí la url de tu imagen: Aquí agregan la url de su imagen.
center: La alineación del texto lo podrán cambiar left, right.
16: Aumentan o disminuyen el tamaño del texto
Aquí el enlace de tu ID: Agregan su enlace.
Aquí va tu texto: Lo cambian por su texto.

El resultado será como la siguiente:


El siguiente paso es ir a Diseño oprimen Añadir un gadget y buscan HTML/Javascript y pegan su código, guardan sus cambios y listo. Un tutorial muy sencillo, fácil y rápido con un resultado muy chulo.

Hoy no me enrollo más con el tema y espero que este tutorial muy chulo y sencillo sea de ayuda yo los espero en la próxima entrega y no se olviden en recomendar la entrada o el blog en sus redes sociales favoritas porque esto ayuda mucho al blog. Cuéntame en los comentarios... ¿Qué te pareció el tutorial?... ¿Fácil o difícil?... 


2 comentarios:

  1. Bien explicado y sencillo. Gracias ya lo he añadido en el mio. Saludos.

    ResponderEliminar
    Respuestas
    1. Gracias a ti por comentar y me alegra saber que fue de ayuda y muy sencillo.
      Saludos :D

      Eliminar