Poner iconos de redes sociales en BLOGGER
-
Upload
jauchu -
Category
Self Improvement
-
view
22.152 -
download
5
description
Transcript of Poner iconos de redes sociales en BLOGGER
![Page 1: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/1.jpg)
![Page 2: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/2.jpg)
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
![Page 3: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/3.jpg)
Armar un widget para BLOGGER con nuestras
identidades en las Redes sociales
![Page 4: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/4.jpg)
Acceder al “escritorio” de nuestra cuenta en BLOGGER y hacer click en “diseño”
(del blog que queremos agregar los íconos)
![Page 5: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/5.jpg)
Hacer click en “Añadir un gadget”. Elegir el lugar donde
ubicarlo. BLOGGER nos permite ubicar gadgets en distintas columnas y
ubicaciones
![Page 6: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/6.jpg)
Recorrer la lista de gadget y encontrar
“HTML/Javascript”. Luego hacer click en el
botón +
![Page 7: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/7.jpg)
Escribir un título en el campo de arriba
![Page 8: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/8.jpg)
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
![Page 9: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/9.jpg)
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
![Page 10: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/10.jpg)
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
![Page 11: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/11.jpg)
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
![Page 12: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/12.jpg)
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
![Page 13: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/13.jpg)
Cuando terminamos de editar todo el código del gadget hacemos
click en el botón “Guardar”
![Page 14: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/14.jpg)
Si al haber finalizado la creación del gadget vemos
que algunos íconos no quedan en la misma línea, debemos ajustar el tamaño
de la columna
![Page 15: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/15.jpg)
Para eso hacemos click en
“Diseñador de plantillas”
![Page 16: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/16.jpg)
Dentro del diseñador de plantillas hacer click en
“Diseño”
![Page 17: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/17.jpg)
En la ventana de diseño hacer click en
“Diseño de pie de página”
![Page 18: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/18.jpg)
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
![Page 19: Poner iconos de redes sociales en BLOGGER](https://reader031.fdocument.pub/reader031/viewer/2022020718/559254e71a28ab7a628b4692/html5/thumbnails/19.jpg)
Por último, cuando estemos conformes con el tamaño de la columna le damos
click a “aplicar al blog”