Con este tutorial aprenderás a:
- Armar un widget para BLOGGER con nuestras identidades en las Redes sociales
- Configurar links de los íconos
- Configurar mensaje al pasar el mouse
2. OBJETIVOS DEL
TUTORIAL
- Armar un widget para BLOGGER con
nuestras identidades en las Redes sociales
- Configurar links de los íconos
- Configurar mensaje al pasar el mouse
3. Armar un widget para
BLOGGER con nuestras
identidades en las Redes
sociales
4. Acceder al “escritorio” de
nuestra cuenta en BLOGGER y
hacer click en “diseño” (del
blog que queremos agregar los
íconos)
5. Hacer click en
“Añadir un gadget”. Elegir
el lugar donde ubicarlo.
BLOGGER nos permite
ubicar gadgets en distintas
columnas y ubicaciones
6. Recorrer la lista de gadget y
encontrar
“HTML/Javascript”. Luego
hacer click en el botón +
8. Copiar en el campo de
contenido el siguiente texto.
NOTA: Si bien este es un
ejemplo, la estructura del
código HTML nos sirve para
luego editarla
9. Editar el texto que está
seleccionado y teclear la
dirección URL a la que va ir
el botón. Puede ser un canal
en Youtube, un usuario de
Facebook, etc
10. Editar el texto que está
seleccionado y teclear la
dirección URL donde se
encuentra la imagen del
ícono.
En nuestro caso, la subimos a
Imageshack (un sitio gratuito
para subir imágenes)
NOTA: Recomendamos que
la resolución de los íconos
sea de 32 x 32 píxeles,
tamaño ideal para que
entren en las columnas de
nuestro blog
11. Editar el texto que está
seleccionado y teclear el
mensaje que va a aparecer
cuando pasemos con el
mouse sobre el botón
!!!
Acá termina el código para
hacer un botón sólo
12. Es interesante hacer varios
íconos en la columna.
Para eso, copiamos el
código del primer ícono y lo
pegamos debajo. Luego,
editamos el código de cada
uno de los íconos,
cambiándole la URL, la
imagen y el mensaje al pasar
el mouse.
Es decir, repetimos el
proceso de edición del
primer ícono para el resto
17. En la ventana de diseño
hacer click en
“Diseño de pie de página”
18. En la “barra lateral izquierda” (en
nuestro caso tenemos los íconos en esta
columna) aumentar tamaño en píxeles
(expresado en números) o correr un poco
la barra hacia el lado del “Máx.”
Debajo de esta ventana de configuración
tenemos una vista previa de nuestro blog
que refleja los cambios realizados
19. Por último, cuando estemos
conformes con el tamaño de la
columna le damos click a
“aplicar al blog”