Documentos de Académico
Documentos de Profesional
Documentos de Cultura
CLASE 3
5. Blogger
5.1. Conceptualización
5.2. Iniciar la aplicación
5.3. Crear un blog
5.3.1. Crear una cuenta
5.3.2. Asignar nombre al blog
5.3.3. Escoger plantilla de inicio
5.4. Entorno del sitio nuevo
5.4.1. Pestaña creación de entradas
5.4.2. Pestaña Configuración
5.4.3. Pestaña Diseño
5.4.3.1. Editar título
5.4.3.2. Editar entradas del blog
5.4.3.3. Complementos
5.4.3.4. Añadir un gadget
5.5. Vista previa
5.6. Diseñador de plantillas
5.7. Acceder a nuestro blog
2
Página
Clase 3
5. BLOGGER
5.1. CONCEPTUALIZACIÓN
[1]
[2]
Para comenzar debemos abrir nuestro navegador Internet Explorer, e ingresar al sitio
https://www.blogger.com/
Nos aparece la siguiente página, con una descripción de los servicios que ofrece Blogger y
las formas de acceder a diseñar nuestro blog.
[3]
[4]
[5]
Luego de hacer Clic en el enlace Crear un Blog, nos aparecen diferentes formularios, en
donde debemos diligenciar todos los campos de los siguientes pasos.
En este paso se registran algunos datos básicos, con el fin de identificarnos para
modificar nuestros blogs o publicar la información.
5
Página
Imagen 6. Formulario de Creación Cuenta Google
[6]
También asignamos una dirección URL, a través de la cual nuestros visitantes ingresarán
directamente. 6
Página
Imagen 7. Asignación de Nombre del Blog
ESTABLECEMOS EL
TÍTULO DEL BLOG
ESTABLECEMOS LA
DIRECCIÓN URL
[7] CLIC EN
CONTINUAR
7 Página
Imagen 8. Modelos de Plantillas
[8]
[9]
Tenemos muchas herramientas para empezar a formar nuestro Blog. Estas herramientas
vienen en forma de pestañas. A continuación describiremos algunos de los elementos más
importantes.
8
Página
5.4.1. PESTAÑA CREACIÓN DE ENTRADAS
[10]
El Área de escritura es muy similar a la que utilizamos para enviar correos electrónicos,
donde tenemos un espacio para digitar el título de nuestra publicación o Post. Por
ejemplo, vamos a crear nuestra primera publicación acerca de uno los Portales
Interactivos ETB, de la siguiente manera.
[11]
[12]
1. Tipo de Fuente
2. Tamaño de Fuente
3. Negrita y Cursiva
4. Color de Texto
5. Alineación de texto
6. Viñetas
7. Corrección
ortográfica
10
[13]
Página
[14]
[15]
[16]
[17]
Si pulsamos el botón Insertar Imagen nos aparecerá una ventana donde podemos buscar
nuestra imagen a través del botón Examinar, o de lo contrario es posible digitar la
12
[18]
Si pulsamos el botón Insertar Video, nos aparecerá una ventana donde podemos buscar
nuestro video con el botón Examinar. Podemos asignar un título a nuestro video, y al
terminar debemos aceptar los términos y condiciones. Por último hacemos Clic en Subir
Video.
Imagen 19. Añadir Video a entrada de Blog
[19]
13
No olvidemos hacer clic nuevamente en la opción Publicar, para que tome los cambios
Página
realizados. Podemos dar clic en Ver Entrada para verificar el éxito de nuestro diseño.
Imagen 20. Modelo de Publicación con Imagen, Texto y Video
[20]
14
Página
Imagen 21. Pestaña Configuración
[21]
En el diseño podemos detallar un pequeño boceto o mapa, de cómo se ubicarán todas las
secciones de nuestro Blog.
[22]
A continuación veremos algunos elementos que podemos configurar con la opción editar.
Podemos
hacer una
descripción
del blog
También
añadir
imágenes
que están
guardadas
o copiando
el enlace
de la
página Ajustamos
Web la ubicación
de la
imagen
[23]
Ya hemos aprendido a insertar publicaciones o post, pero al hacer clic en editar, nos
aparece una ventana como la siguiente, en donde podemos configurar algunas de las
opciones de todas nuestras publicaciones.
Por ejemplo desde esta ventana podemos: Establecer la cantidad de publicaciones que se
muestran en pantalla, la privacidad al momento de publicar un elemento, botones para
compartir, entre otros. Para fijar los cambios al finalizar, debemos hacer clic en el botón
guardar.
17Página
Imagen 24. Cuadro de edición de Publicaciones o Post.
A través de
los cuadros
de selección,
activamos o
desactivamo
s las
opciones.
Podemos
ordenar los
elementos de
nuestras
publicaciones,
arrastrándolo
s con clic
sostenido
[24]
5.4.3.3. Complementos
Los complementos son unos pequeños cuadros que aparecen en nuestro Blog, y que
18
[25]
Estas fichas se pueden mover a diferentes partes del blog, haciendo Clic sostenido sobre
ellas. Es decir no necesariamente deben estar unidas, y cada una tiene su propia opción
de editar.
[26]
[27]
20
[28]
Página
5.4.3.4. Añadir un Gadget
Un Gadget es una pequeña aplicación que tiene funciones específicas muy útiles que se
pueden añadir a cualquier Blog o sitio WEB. Estas funciones están relacionadas con
servicios de imágenes, animaciones, barras de búsqueda entre otros.
Si no nos gusta ninguno de los que aparecen en el listado, podemos elegir entre las
demás categorías: Lo básico, Destacados, Más Populares, Más Gadgets, y desplazarnos
hacia abajo con la barra de desplazamiento.
21
[29]
Página
Existen cientos de Gadgets, y podemos añadir los que queramos a nuestra plantilla.
Vamos a tomar como ejemplo algunos Gadgets muy usados, y lo añadiremos en la opción
Añadir un Gadget, que se encuentra debajo del Título.
Imagen 30. Insertar Gadget de Imagen
[30]
[31]
[32]
Al terminar nos aparece una vista previa. Si es de nuestro agrado, hacemos Clic en
Guardar, o de lo contrario hacemos clic en Eliminar Imagen y buscamos otra que nos
guste más.
Continuamos añadiendo otro gadget encima de los complementos, pero esta vez
revisemos el de una Presentación.
[33]
Página
Al pulsar el símbolo de añadir , aparecerá una ventana en la cual debemos diligenciar
los datos correspondientes a la presentación.
[34]
[35]
Podemos segur insertando muchos mas Gadgets, y dar a nuestro Blog un aspecto
moderno y agradable.
[36]
Se abrirá una ventana donde veremos nuestro blog, como si fueramos visitantes. Aunque
no permite hacer cambios directamente desde la ventana, si nos permite observar y tomar
decisiones con respecto a cambios o modificaciones, tanto del diseño como de las
Publicaciones.
26
Página
Imagen 37. Vista Previa del Blog
[37]
Para realizar los cambios correspondientes, solo debemos cerrar la ventana de Vista Previa
y continuar en la pestaña de Diseño.
[38]
Inmediatamente nos carga una nueva ventana, mediante la cual podemos establecer
nuevas plantillas o colores que hagan más llamativo y agradable nuestro Blog.
Encontramos cuatro opciones en la parte superior, y una vista preliminar que nos indica la
forma en que se vería nuestro blog con los cambios aplicados.
[39]
la ventana.
Imagen 40. Opción Plantillas del diseñador de Plantillas
[40]
29
Página
[41]
Opción Diseño: Podemos reestructurar las secciones o marcos, modificando
tambien la cantidad o dirección de las columnas, y también ajustando un
nuevo ancho dentro del tema.
Esta opción
Imagen 42. Diseño del cuerpo del Blog
permite
configurar
nuevamente
las secciones o
marcos, con
sólo hacer clic
[42] sobre el
modelo
adecuado.
[45]
31
Página
[46]
5.7. ACCEDER A NUESTRO BLOG
Creado nuestro blog, podemos visitarlo y decirle a nuestros amigos que accedan a él. Para
lo anterior debemos abrir nuestro navegador de Internet, y en el cuadro de dirección
digitar la URL que le asignamos al crear el blog. En este caso, el blog es:
http://miblogetb.blogspot.com
Si lo que queremos es entrar como autores para editar nuestro blog, lo hacemos a través
de www.blogger.com. Validamos nuestros datos de usuario y contraseña (de nuestra
cuenta google) y podemos empezar a hacer nuestros ajustes.
32
Página
Referencias
1
Imagen tomada del blog: Ni adentro ni afuera [consultado 23 jul. 2010]. Disponible en
< http://adentroyafuera.wordpress.com/>
2
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en
<https://www.blogger.com/start?hl=es>
3
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en <https://www.blogger.com/start>
4
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en <https://www.blogger.com/start>
5
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en <http://www.blogger.com/create-
blog.do>
6
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en <http://www.blogger.com/create-
blog.do>
7
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en < http://www.blogger.com/create-
blog.do>
8
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en <http://www.blogger.com/create-
blog.do >
9
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en <http://www.blogger.com/create-
blog.do >
10
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en <http://www.blogger.com/create-
blog.do>
11
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en <http://www.blogger.com/post-
create.g?blogID=4061954048395576510 >
12
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en <http://www.blogger.com/post-
create.g?blogID=4061954048395576510 >
13
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en <http://www.blogger.com/post-
create.g?blogID=4061954048395576510 >
14
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en <http://www.blogger.com/post-
create.g?blogID=4061954048395576510>
15
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en
< http://miblogetb.blogspot.com/2010/07/el-veinte-de-julio.html>
16
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en
< http://miblogetb.blogspot.com/2010/07/el-veinte-de-julio.html>
17
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en
< http://miblogetb.blogspot.com/2010/07/el-veinte-de-julio.html>
18
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en
< http://miblogetb.blogspot.com/2010/07/el-veinte-de-julio.html>
19
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en
< http://www.blogger.com/rearrange?blogID=4061954048395576510 >
20
Imagen tomada de: Blogger [consultado 23 jul. 2010]. Disponible en <http://www.blogger.com/post-
edit.g?blogID=4061954048395576510&postID=3548327371854541459 >
21
Imagen tomada de: Blogger [consultado 26 jul. 2010]. Disponible en
<http://miblogetb.blogspot.com/2010/07/el-veinte-de-julio.html >
22
Imagen tomada de: Blogger [consultado 26 jul. 2010]. Disponible en
<http://miblogetb.blogspot.com/2010/07/el-veinte-de-julio.html >
23
Imagen tomada de: Blogger [consultado 26 jul. 2010]. Disponible en
<http://www.blogger.com/rearrange?blogID=4061954048395576510 >
24
Imagen tomada de: Blogger [consultado 26 jul. 2010]. Disponible en
<http://www.blogger.com/rearrange?blogID=4061954048395576510&action=editWidget§ionId=main&
33
widgetType=null&widgetId=Blog1 >
25
Imagen tomada de: Blogger [consultado 26 jul. 2010]. Disponible en
Página
<http://www.blogger.com/rearrange?blogID=4061954048395576510 >
26
Imagen tomada de: Blogger [consultado 26 jul. 2010]. Disponible en
< http://www.blogger.com/rearrange?blogID=4061954048395576510 >
27
Imagen tomada de: Blogger [consultado 26 jul. 2010]. Disponible en
< http://www.blogger.com/rearrange?blogID=4061954048395576510 >
28
Imagen tomada de: Blogger [consultado 26 jul. 2010]. Disponible en
< http://www.blogger.com/rearrange?blogID=4061954048395576510 >
29
Imagen tomada de: Blogger [consultado 26 jul. 2010]. Disponible en < http://www.blogger.com/choose-
gadget?blogID=4061954048395576510§ionId=crosscol>
30
Imagen tomada de: Blogger [consultado 26 jul. 2010]. Disponible en
<http://www.blogger.com/rearrange?blogID=4061954048395576510§ionId=crosscol&action=editWidg
et&widgetType=Image&referrer=directory >
31
Imagen tomada de: Blogger [consultado 26 jul. 2010]. Disponible en
<http://www.blogger.com/rearrange?blogID=4061954048395576510§ionId=crosscol&action=editWidg
et&widgetType=Image&referrer=directory>
32
Imagen tomada de: Blogger [consultado 26 jul. 2010]. Disponible en
<http://www.blogger.com/rearrange?blogID=4061954048395576510§ionId=crosscol&action=editWidg
et&widgetType=Image&referrer=directory >
33
Imagen tomada de: Blogger [consultado 26 jul. 2010]. Disponible en
<http://www.blogger.com/rearrange?blogID=4061954048395576510§ionId=crosscol&action=editWidg
et&widgetType=Image&referrer=directory >
34
Imagen tomada de: Blogger [consultado 26 jul. 2010]. Disponible en
<http://www.blogger.com/rearrange?blogID=4061954048395576510§ionId=crosscol&action=editWidg
et&widgetType=Image&referrer=directory >
35
Imagen tomada de: Blogger [consultado 26 jul. 2010]. Disponible en
<http://www.blogger.com/rearrange?blogID=4061954048395576510§ionId=crosscol&action=editWidg
et&widgetType=Image&referrer=directory >
36
Imagen tomada de: Blogger [consultado 26 jul. 2010]. Disponible en
<http://www.blogger.com/rearrange?blogID=4061954048395576510§ionId=crosscol&action=editWidg
et&widgetType=Image&referrer=directory >
37
Imagen tomada de: Blogger [consultado 26 jul. 2010]. Disponible en
<http://www.blogger.com/rearrange?blogID=4061954048395576510§ionId=crosscol&action=editWidg
et&widgetType=Image&referrer=directory >
38
Imagen tomada de: Blogger [consultado 26 jul. 2010]. Disponible en
<http://www.blogger.com/rearrange?blogID=4061954048395576510§ionId=crosscol&action=editWidg
et&widgetType=Image&referrer=directory >
39
Imagen tomada de: Blogger [consultado 27 jul. 2010]. Disponible en
< http://www.blogger.com/template-editor.g?blogID=4061954048395576510 >
40
Imagen tomada de: Blogger [consultado 27 jul. 2010]. Disponible en <http://www.blogger.com/template-
editor.g?blogID=4061954048395576510 >
41
Imagen tomada de: Blogger [consultado 27 jul. 2010]. Disponible en <http://www.blogger.com/template-
editor.g?blogID=4061954048395576510 >
42
Imagen tomada de: Blogger [consultado 27 jul. 2010]. Disponible en <http://www.blogger.com/template-
editor.g?blogID=4061954048395576510 >
43
Imagen tomada de: Blogger [consultado 27 jul. 2010]. Disponible en <http://www.blogger.com/template-
editor.g?blogID=4061954048395576510 >
44
Imagen tomada de: Blogger [consultado 27 jul. 2010]. Disponible en <http://www.blogger.com/template-
editor.g?blogID=4061954048395576510 >
45
Imagen tomada de: Blogger [consultado 27 jul. 2010]. Disponible en <http://www.blogger.com/template-
editor.g?blogID=4061954048395576510 >
34
46
Imagen tomada de: Blogger [consultado 27 jul. 2010]. Disponible en <http://www.blogger.com/template-
editor.g?blogID=4061954048395576510 >
Página
Programa Masificación de TIC
Empresa de Telecomunicaciones de Bogotá ETB S.A. ESP
www.portalesinteractivos.etb.com.co
2010
Autor
Andrés Arévalo Espejo
Mauricio Cuevas Olaya
Omar Medina Lara
Jhon Bernal Gómez
Revisión de contenidos
Gonzalo Monroy Pirazan
Revisión de estilo
Andrea Sandoval Rojas
Diseño y diagramación
Luis Fernando Parra Corredor
35
Página
Este documento ha sido realizado para el uso de los operadores de los Portales
Interactivos de la Empresa de Telecomunicaciones de Bogotá ETB S.A. ESP. Su uso está
sujeto a las políticas de operación de los Portales Interactivos.
2010.
36
Página