martes, 11 de febrero de 2014

Alineado de iconos de redes sociales (PARTE 2)

Hola a todos,

Siguiendo con el tutorial que me pidió Cuquidolls, hoy os traigo la segunda parte de cómo alinear iconos/botones de redes sociales. Ya sabéis que estoy intentando no meterme en código HTML y probablemente haya alguna forma mejor para hacerlo pero creo que ésta es una de las fáciles y si algo es fácil, ¿por qué no hacerlo? Ahora ya que sabemos cómo conocer la url de nuestras imágenes sólo nos queda poner los iconos.

El primer paso para poder insertar los iconos en el blog es acceder, en la parte derecha de la lista de navegación, en la sección de Diseño y posteriormente pulsar sobre el acceso Añadir un gadget.


Alineado de iconos en blog



Al pulsar sobre el link de Añadir un Gadget, se abrirá una ventana emergente para poder insertarlo. Esta ventana es igual a la que aparece en la siguiente imagen.



Alineado de botones en blog



Ahora, estando dentro de la ventana emergente, buscamos la sección cuyo título es HTML/Javascript, tal y como se ve en la siguiente imagen.



Alineado de iconos en blog



A partir de ahí, aparecerá una ventana emergente con título Configurar HTML/Javascript. Hay que tener en cuenta que en la pantalla tendrá que aparecer el mensaje de Formato RTF.



Alineado de botones en blog



Y ahora es cuando entra en juego lo que aprendimos en la entrada anterior del blog, conocer la url de nuestros iconos los cuales estarán previamente subidos en nuestro blog (pero sin ser publicados).

Personalmente en mi blog he añadido tres iconos, para email, Facebook y Twitter pero se pueden añadir los iconos que se quiera siempre y cuando tengan un tamaño adecuado y quepan donde se quieran meter.


Primeramente hay que recordar que el código HTML generado para nuestro icono de mariposa era el siguiente:



<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh12KuDJ4q-imWYLxWTVbN4M5zEUa7HrpN7a7-E_wcwiDr33YGmCkLiXappRjVuLol0YfTG13SD1b3PfkHOFbWhEaEGm1TNezEXQib6rhoDhIq2yGd7joGRihvueeMzVYHNhznTG-9vWG8/s1600/mariposa.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh12KuDJ4q-imWYLxWTVbN4M5zEUa7HrpN7a7-E_wcwiDr33YGmCkLiXappRjVuLol0YfTG13SD1b3PfkHOFbWhEaEGm1TNezEXQib6rhoDhIq2yGd7joGRihvueeMzVYHNhznTG-9vWG8/s1600/mariposa.png" /></a>

Hay que tener en cuenta que lo realmente importante para nosotros es la dirección que aparece dentro de la etiqueta href y que está en color negro.  Cada uno tendrá una diferente.

A continuación, para cada uno de los iconos (email, Facebook y Twitter) se introducirán los siguientes códigos en la ventana emergente con título Configurar HTML/Javascript.


  • Código de Email:  Cambiar lascosasdefimo@gmail.com por la dirección de correo dónde quieres que seas contactado y la dirección de la imagen de la propiedad src por la dirección de tu icono.
<a href="mailto:lascosasdefimo@gmail.com" title="Correo Electrónico">
    <img border="0"
 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh12KuDJ4q-imWYLxWTVbN4M5zEUa7HrpN7a7-E_wcwiDr33YGmCkLiXappRjVuLol0YfTG13SD1b3PfkHOFbWhEaEGm1TNezEXQib6rhoDhIq2yGd7joGRihvueeMzVYHNhznTG-9vWG8/s1600/mariposa.png"
/>
</a>

  • Código de Facebook:  Cambiar la dirección que aparece en href por la de tu página de Facebook y la dirección de la imagen de la propiedad src por la dirección de tu icono (exactamente igual que en el paso anterior).
<a href="https://www.facebook.com/lascosasdefimo" title="Facebook">
     <img border="0"
 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh12KuDJ4q-imWYLxWTVbN4M5zEUa7HrpN7a7-E_wcwiDr33YGmCkLiXappRjVuLol0YfTG13SD1b3PfkHOFbWhEaEGm1TNezEXQib6rhoDhIq2yGd7joGRihvueeMzVYHNhznTG-9vWG8/s1600/mariposa.png" />
</a>


  • Código de Twitter:  Cambiar la dirección que aparece en href por la de tu página de Twitter y la dirección de la imagen de la propiedad src por la dirección de tu icono (exactamente igual que en los dos pasos anteriores).
<a href="https://twitter.com/lascosasdefimo" title="Twitter">
     <img border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh12KuDJ4q-imWYLxWTVbN4M5zEUa7HrpN7a7-E_wcwiDr33YGmCkLiXappRjVuLol0YfTG13SD1b3PfkHOFbWhEaEGm1TNezEXQib6rhoDhIq2yGd7joGRihvueeMzVYHNhznTG-9vWG8/s1600/mariposa.png" />
</a>




Dentro de la ventana con título Configurar HTML/Javascript mostrada previamente, se tendrá que añadir los tres conjuntos del código tal y como indica la siguiente imagen.


Alineado de botones en blog


Es importante saber que si los iconos que han sido creados son grandes y no caben alineados dentro del espacio que se ha asignado para ello, se tendrán que añadir dos propiedades dentro de la etiqueta HTML <img> que son width="..." height="...".  Se podrán modificar como se quiera para poder llegar a un diseño óptimo.  Por ejemplo, mi código lo he modificado y tengo el siguiente HTML.

<a href="mailto:lascosasdefimo@gmail.com" title="Correo Electrónico"><br />    <img border="0" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh12KuDJ4q-imWYLxWTVbN4M5zEUa7HrpN7a7-E_wcwiDr33YGmCkLiXappRjVuLol0YfTG13SD1b3PfkHOFbWhEaEGm1TNezEXQib6rhoDhIq2yGd7joGRihvueeMzVYHNhznTG-9vWG8/s1600/mariposa.png" width="60" /></a>


A continuación, pulsaremos sobre el texto Formato RTF y aparecerán entonces, en la venta, los iconos que se han añadido.


Alineado de botones en blog



Para alinearlos, basta con posicionarte al lado de los botones y darle a la tecla de suprimir para que queden alineados.


Alineado de botones para blogger


Para finalizar, pulsar sobre el botón de Guardar.  Para poder ver los resultados, pulsar sobre el botón de Vista Previa y se podrá ver cómo ha quedado.  Así me ha quedado a mí :)


Alineado de iconos en blogger



Y hasta aquí, eso es todo.  Espero que os pueda ayudar a configurar mejor vuestro blog.  Si tenéis alguna duda, ya sabéis que os podéis poner en contacto conmigo en lascosasdefimo@gmail.com

Buenas noches y besos para todos.

domingo, 9 de febrero de 2014

Alineado de iconos de redes sociales (PARTE 1)

Hola a todos,

Hoy os traigo una entrada dedicada a Cuquidolls, que me pidió ayuda para poder poner los iconos de las redes sociales alineados en blogger. Intenté explicarle algo que fuese fácil de hacer para que no entrase mucho en el mundo del código HTML.

Para empezar, tenéis que saber cómo subir las imágenes de los iconos dentro de nuestro blog para luego conocer la url que lleva asociada.  Con esto, sabiendo la url, se podrán introducir en nuestro blog sin temor a que sean eliminadas y nos fastidien el diseño de nuestra página.

Yo, para hacer los iconos del blog utilicé la página online Picmonkey, fue todo un descubrimiento y creo que está muy bien para hacer cosas rápidas.


PASO 1.- CÓMO SUBIR LAS IMÁGENES Y CONOCER SU URL

Primeramente tendremos que pulsar sobre el icono que sirve para insertar una imagen.

Alineado de iconos Blogger



Entonces saldrá una ventana emergente para poder subir las imágenes que tienes 

Alineado de iconos Blogger

Después de hacerlo y subir las fotos, se quedarán reflejadas en la entrada que estás escribiendo. Yo he subido una foto que hará de ejemplo para esta entrada, una imagen que se llama mariposa.png creada con Picmonkey. Hasta ahora ya sé que los pasos son los típicos que se hacen cuando se suben las fotos y que está chupado pero... ¿quién dijo que esto iba a ser difícil? :P


Alineado de iconos Blogger


Bien, cuando ya tenemos las fotos subidas, en la página principal de la creación de la entrada, tendremos que pulsar sobre la opción de HTML para ver el código y así saber la dirección de dónde exactamente se encuentra nuestra imagen.


Alineado de iconos Blogger



Como sabemos que nuestra imagen se llama mariposa.png, buscamos en la página dicho nombre y lo encontraremos en el código.

Alineado de iconos Blogger


El código que tenemos de nuestra imagen será del estilo a ésta:


<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh12KuDJ4q-imWYLxWTVbN4M5zEUa7HrpN7a7-E_wcwiDr33YGmCkLiXappRjVuLol0YfTG13SD1b3PfkHOFbWhEaEGm1TNezEXQib6rhoDhIq2yGd7joGRihvueeMzVYHNhznTG-9vWG8/s1600/mariposa.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh12KuDJ4q-imWYLxWTVbN4M5zEUa7HrpN7a7-E_wcwiDr33YGmCkLiXappRjVuLol0YfTG13SD1b3PfkHOFbWhEaEGm1TNezEXQib6rhoDhIq2yGd7joGRihvueeMzVYHNhznTG-9vWG8/s1600/mariposa.png" /></a>


Habrá que guardar este código porque será necesario para añadir nuestros iconos.

Y hasta aquí el primer paso para añadir los iconos alineados de las redes sociales. Espero  que os haya parecido fácil he intentado hacerlo lo más asequible posible.

Muchas gracias. Saludos para todos.