Insertar botones de redes sociales en Blogger

Como os comentaba en clase, Blogger tiene sus cosas buenas y malas con respecto a WordPress… en este caso, algo malo es que no tiene un gadget o widget para las redes sociales, pero con unas pocas nociones de html podemos insertarlo sin problemas:



facebook

Siguenos en Google +

Siguenos en Blogger

Siguenos en Blogger

Siguenos en WordPress

Youtube

Siguenos en Pinterest





Evidentemente tendrás que cambiar donde pone https://www.blogger.com/DIRECCION_PAGINA_FACEBOOK por ejemplo por tu correspondiente dirección de tu página de facebook y así con el resto. La red social que no te interese, tan solo borras el código dentro de y listo.

Cómo crear una cabecera para nuestro Blog

El proceso de creación de una cabecera puede ser algo complejo, existiendo empresas especializadas que cobran por ello. Nosotros, como principiantes en el mundo Blogger, evidentemente no vamos a pagar un duro, y vamos a crear nuestra propia portada.
Vamos a distinguir dos formas de hacerla, directamente desde nuestro ordenador con un programa de diseño, como puede ser Gimp, que es gratuito y podemos descargarnos desde su web: 

Simplemente vamos a la sección «Descargar Gimp y seleccionamos la versión para nuestro sistema operativo, que me imagino que en la mayoría será Windows. En el caso de que estéis trabajado con Linux o en Centros Guadalinfo (como es nuestro caso), tenéis el programa previamente instalado, con lo que solo tenéis que abrirlo y empezar a trabajar.
Lo primero de todo y que personalmente resulta algo molesto, es el tema de la distribución de las ventanas sueltas por el escritorio, que puede liar un poco. 
Para solucionar este aspecto, nos vamos a Ventanas –> Modo de ventana única y así obtendremos un aspectos más normalizado, y al que estamos más acostumbrados.
Después de esto, como os comentaba en clase, para una primera aproximación, es buscar una imagen que nos guste como cabecera del blog que que tenga unas proporciones más anchas que altas, es decir: si hemos configurado nuestro blog para que tenga una anchura total de 1200 px, lo suyo sería configurar una imágen de 1200×250. Para ello, lo primero de todo es buscar una imagen que se adecue a nuestro blog y la descargamos a nuestro ordenador.
Como ejemplo vamos a suponer un blog de consejos para el hogar, en google buscamos imágenes con esa terminología y nos hemos descargado una imagen que inicialmente tiene unas proporciones de 800×533. Ahora vamos a adecuarla al tamaño que hemos comentado anteriormente:
  • Arrastramos la imagen dentro de Gimp para editarla
  • Nos vamos al menú Imagen –> Escalar Imagen, pulsamos sobre un simbolito de la cadena que hay entre las dos imágenes y que significa que el tamaño está proporcionado (lo desmarcamos para poder poner nuestro tamaño sin problemas)

  • Una vez hecho lo anterior, le damos a Escala, y ya nuestra imagen tendrá el tamaño deseado.
  • Ahora nos vamos a Archivo –> Exportar como… y ahí guardamos o exportamos nuestra imagen con la extensión .jpg que se supone que es la que te sugiere por defecto.

Hecho lo anterior se supone que es el proceso más básico para crear una cabecera, pero lo suyo es que nuestra cabecera, aparte de la imagen, contenga el nombre de nuestro blog. Para ello en el menú de la izquierda, buscamos un icono con una letra A, que es para insertar un cuadro de texto. Lo primero de todo es seleccionar el área donde vas a colocar tu texto, lo escribes y luego en el menú que te aparece a la izquierda, configuras el tipo de letra, tamaño, color y posición:
Como resumen:
Partimos de una imagen inicial a la que cambiamos el tamaño:

Obteniendo como resultado:

Para mejorarla un poco más, añadimos el nombre de nuestro blog y lo que se nos ocurra:

Como puedes ver, el resultado final la imagen elegida de fondo está un poco opaca, para que el texto se pueda leer mejor (que es lo que nos interesa). Para ello, y sin entrar en grandes explicaciones, verás que en la parte derecha existen como 3 items con un ojo (capas) los cuales corresponden a los tres elementos añadidos en nuestra cabecera (2 textos y una imagen de fondo), seleccionamos el correspondiente a la imagen, y un poco más arriba, vemos que hay una especie de menú que pone Opacidad. Simplemente, reducimos el valor a uno que consideres adecuado.
Si lo anterior te ha resultado muy complicado, siempre puedes utilizar programas más sencillos vía web como es el caso de Canva:

Insertando Gadgets en nuestro Blog

Los Gadgets son artilugios o módulos que se añaden a una web para realizar algo concreto o mostrar algo especial. Como herramientas nos pueden ser muy útiles.

Hay muchísimos y su número va creciendo día a día. Conviene probarlos previamente porque puede que no se adapten a lo que queremos. La mayoría suelen contar con distintas opciones para configurar el tamaño, color, fuente, opciones de presentación..

Puedes insertar los gadgets que quieras en tu blog, pero sin pasarte, puesto que eso influirá en el tiempo de carga de la página. Los que te recomiendo que uses ahora mismo son:

GADGET: Etiquetas

Ahora Mismo estás empezando a crear el blog y tendrás muy pocas entradas, pero imagínate que cuando escribes, dentro de la temática de tu blog quieres diferenciar distintas secciones: por ejemplo, un blog de rutas por la montaña, unas pueden ser a pie, otras en bicicleta, otras simplemente en coche…… La forma de diferenciarlas, sería añadiendo distintas etiquetas a cada una de las rutas. Y esto para qué sirve??? Pues para facilitar la búsqueda (entre otros) a los usuarios de vuestro blog, puesto que habrá unos que están sólo interesados en las rutas con bicicleta, u otros que les guste más el senderismo…. es una manera fácil de hacer un filtrado. Y los usuarios de blogs o webs lo tienen en cuenta.

GADGET: Archivo del blog

Este es otro Gadget interesante porque nos permite tener nuestras publicaciones ordenadas por meses y por años.

GADGET: Entradas populares

Nos muestra una lista de nuestras publicaciones que más visitas han recibido a lo largo del tiempo

GADGET: Estadísticas

Donde podemos configurar para que se muestre el número de páginas que han sido visitadas en nuestro blog, es decir, la audiencia. Aunque este es un dato que podemos ver con más detalle si entramos en el apartado «Estadísticas» dentro del menú principal….

GADGET: FACEBOOK


Otro Gadget interesante es el de Facebook, para añadirlo es un pelín más complejo que para los gadgets anteriores. A continuación explico como se hace:
Lo primero de todo es tener creada una página de Facebook, para ello deberás tener una cuenta personal de facebook y a partir de ella, crear tu página.
 Si no eres usuario de esta red social, te recomiendo que te hagas, porque si bien no te interesa compartir fotos, ni escribir en tu muro, facebook se ha convertido en un portal para dar publicidad de forma gratuita a tu negocio, web, etc, consultar noticias, buscar empleo, etc. No es meramente una red social de «cotilleo» como todavía pueden pensar algunas personas.
Una vez que nos hemos dado de alta o logueado, nos vamos a la parte superior derecha, y clickeamos en una pestaña que es como una flecha mirando hacia abajo donde nos aparecerá el menú de configuración de facebook, y don de la primera opción es la de crear una nueva página:
Lo primero es seleccionar el tipo de página del que se trata, para ello, deberemos de tener claro la finalidad de esta, en el caso concreto de hacer publicidad a nuestro blog, os aconsejo que seleccionemos: Causa o comunidad, aunque si bien estás pensando enfocar el blog a tu negocio, podrías seleccionar: Empresa….
Nos pide que pongamos el nombre de la comunidad, en este caso, ponemos el mismo que le pusimos a nuestro blog (el largo), y le damos al botón: Empezar
Lo más importante ahora mismo, son añadir una foto de portada (que os recomiendo uséis la misma que la cabecera de nuestro blog) y una foto de perfil, que deberá de ser algo que defina a nuestro blog:
En Gimp, podemos hacer una tentativa de logo, o podemos visitar páginas como freeelogoservices.com (que de gratis la verdad es que tienen poco, porque siempre a la hora de guardar nuestro diseño nos piden que paguemos)

Después de esto, y no menos importante, lo que vamos a hacer es cambiar el nombre o la dirección que facebook le asigna por defecto a nuestra página, que si te dás cuenta, contiene una gran cantidad de números imposibles de recordar:

Para ello, en el menú de la izquierda, donde aparece el nombre que le hemos dado a nuestra página, vamos a seleccionar el apartado Información,

Y dentro de este apartado pulsamos sobre «Crear nombre de usuario de la página«

Para comprobarlo:

Una vez configurada la página de facebook, nos vamos a:
Y donde pone URL de la página de Facebook, copiamos y pegamos nuestra dirección personalizada que hemos obtenido en el paso anterior:

Pulsamos el botón «Obtener código», y seleccionamos IFrame:

Copiamos todo ese código seleccionandolo, botón derecho del ratón y copiar, y nos vamos a nuestro blog a Diseño y añadimos un Gadget, donde queremos que aparezcan nuestros «Megusta» de facebook….. El gadget en cuestión es el de: HTML/JavaScript (como siempre, le damos al +) y en la ventana que nos sale pegamos el código que previamente hemos copiado.

Le damos a guardar, y comprobamos el resultado dándole a Ver Blog.

Como puedes ver, el resultado no es el esperado, puesto que se sale del ancho del blog. Lo que podemos hacer es aumentar el ancho de la columna derecha, por ejemplo a 300 y si con eso no es suficiente, editar el Gadget recién creado, y donde pone «width«, cambiar el valor (que por defecto es de 340 a 240, y con eso obtendríamos un resultado perfecto: