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.
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.
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.
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.
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:
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.
- 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.
- 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).
- 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).
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.
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 continuación, pulsaremos sobre el texto Formato RTF y aparecerán entonces, en la venta, los iconos que se han añadido.
Para alinearlos, basta con posicionarte al lado de los botones y darle a la tecla de suprimir para que queden alineados.
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í :)
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.
