Tutorial blogger.
-
Upload
burundisneta -
Category
Technology
-
view
572 -
download
3
description
Transcript of Tutorial blogger.
![Page 1: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/1.jpg)
Contenido:
1. Crear un blog en Blogger
2. Cómo personalizar la apariencia del blog
3. Agregar chat al blog
4. Agregar un CBOX a nuestro blog
Realizado por: Yeni Velázquez Guzmán
![Page 3: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/3.jpg)
Para comenzar a crear el blog debemos seleccionar
con un clic la opción Comenzar que nos muestra la
ventana.
![Page 4: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/4.jpg)
Para poder crear un Blog primeramente debemos crear
una cuenta de google. No hace falta pero conviene
tenerla si queremos acceder a todas sus herramientas, y
para ello hay que rellenar formulario como el de a
continuación y seleccionar Continuar.
![Page 5: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/5.jpg)
En dado caso que ya se cuente con una cuenta de
google lo único que se debe hacer es seleccionar la
opción iniciar sesión y seguir con los pasos que a con-
tinuación se mostraran.
![Page 6: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/6.jpg)
En la siguiente ventana podremos ponerle un nombre a
nuestro Blog y el URL que tendrá; para confirma que no
existe debemos comprobar si esta disponible sino debemos
de buscar otra.
![Page 7: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/7.jpg)
Después de encontrar un URL disponible escribiremos las
2 palabras que nos aparece en la ventana para después
darle clic en Continuar.
![Page 8: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/8.jpg)
Por último, tendremos que elegir una plantilla, que es el diseño
general del blog. Elegiremos la que más nos guste, pero más
adelante podremos cambiarla siempre que queramos. Ya
elegida la plantilla daremos clic en Continuar.
![Page 9: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/9.jpg)
Listo.. Ya lograste crear tu Blog
![Page 10: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/10.jpg)
Ya creado el Blog podremos personalizarlo dando clic
en la opción Personalizar su apariencia.
![Page 11: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/11.jpg)
En la siguiente ventana podremos cambiar la plantilla
que escogimos anteriormente por un otra que sea de
nuestro agrado o podemos dejarla con la que tenia.
![Page 12: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/12.jpg)
En la opción Fondo podremos modificar la gama de
colores que tendrá nuestro Blog incluso podremos
ponerle una imagen de fondo. Podremos utilizar nuestra
imaginación y crear la combinación que mas te guste.
![Page 13: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/13.jpg)
En la opción ajustar ancho podremos elegir el tamaño que
tendrá nuestro Blog. Si queremos que el blog aparezca
completo en toda la pantalla o solamente en una peque-
ña parte. Podremos ajustar también el tamaño de la barra
lateral del Blog.
![Page 14: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/14.jpg)
Siguiendo tenemos la opción de Diseño en la cual
podremos modificar las plantillas que tendrá el
cuerpo de nuestro Blog y también podremos cambiar
el diseño del pie de pagina.
![Page 15: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/15.jpg)
Después personalizaremos en la opción Avanzado la gama
de colores y el tipo de letra que tendrá nuestro Blog. Empe-
zaremos tipo de letra y color del texto que tendrá el cuerpo
del Blog.
![Page 16: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/16.jpg)
En la opción Background encontraras la gama de colores
que podrás modificar a tu gusto poniéndole color al
fondo exterior y superior y el color de Borde que elijas.
![Page 17: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/17.jpg)
En la opción Enlaces podremos cambiar los colores de los
links (Enlaces) que insertemos en nuestro Blog. Modificar
desde el color del enlace hasta el color que tendrá
cuando coloque el curso o ratón sobre el.
![Page 18: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/18.jpg)
En esta ventana podremos elegir la fuente y el color del
texto que queramos para el Blog. Selecciona los que mas
guste.
![Page 19: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/19.jpg)
En este apartado podremos cambiar el color de la
descripción del Blog
![Page 20: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/20.jpg)
En la siguiente opción podremos cambiar la apariencia del
Texto de la pantalla. Con tan solo buscar una fuente u un
Color.
![Page 21: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/21.jpg)
Esta opción tiene como finalidad cambiarle el formato al
fondo de las pestañas podre usar una combinación
Agradable para tu Blog.
![Page 22: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/22.jpg)
En las siguientes opciones podremos cambiar la fuente y
el color de texto del titulo de entrada.
![Page 23: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/23.jpg)
En esta ventana podremos modificar el tipo de fuente,
color de texto y color del biselado del titulo de Gatget.
![Page 24: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/24.jpg)
Por ultimo podremos cambiar la apariencia de los acentos,
alternando los colores y modificando el color del biselado.
![Page 25: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/25.jpg)
Para finalizar con el proceso daremos clic en la opción
aplicar al Blog para que guarde los cambios que hayamos
Realizado y para observar los cambios seleccionaremos
Ver blog.
![Page 26: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/26.jpg)
En esta pagina podrás encontrar plantillas prediseñadas
que podrás descargar y aplicarlas a tu Blog para ponerle
otro toque diferente a la apariencia.
![Page 27: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/27.jpg)
Para comenzar debemos elegir una plantilla que nos guste
y hacer clic en la opción que dice Dowload para
comenzar a descargarla.
![Page 28: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/28.jpg)
En esta ventanita seleccionaremos la opción Guardar
para que podamos hacer uso de la plantilla,
especificaremos la ubicación donde la guardaremos y
esperaremos a que termine la descarga .
![Page 29: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/29.jpg)
El siguiente paso será descomprimir el archivo.
![Page 30: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/30.jpg)
Para poder insertar la plantilla descargada primero
debemos ir a nuestro Blog y seleccionar la opción diseño .
![Page 31: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/31.jpg)
Nos aparecerá la siguiente ventana donde
seleccionaremos la opción de edición HTML y la siguiente
opción a la que daremos clic será a Examinar.
![Page 32: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/32.jpg)
Abierta la siguiente ventana seleccionaremos la ubicación
del archivo que descomprimimos y damos doble clic
a la carpeta y después nos abrirá otras dos carpetas de las
cuales abriremos la que nos muestre el nombre de la
Plantilla que hemos elegido y daremos clic en Abrir.
![Page 33: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/33.jpg)
Ya abierta la carpeta seleccionaremos el archivo que este
en formato XML es el que nos servirá para insertar la plantilla.
El siguiente paso será dar en clic la opción Subir ya
seleccionado el archivo.
![Page 34: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/34.jpg)
Siguiendo seleccionaremos la opción mantener widgtes
para finalizar se guardaran los cambios y seleccionaremos
Vista Previa para ver como quedo insertada nuestra plantilla
en el Blog.
![Page 35: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/35.jpg)
Listo.. Nuestra plantilla se inserto correctamente así es
como se vera en el Blog.
Antes
Después
![Page 36: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/36.jpg)
Primero que nada accederemos a una pagina de internet
Y entraremos al buscador de Google y enseguida
teclearemos la palabra XAT y seleccionaremos la primera
opción.
![Page 37: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/37.jpg)
Abierta nuestra pagina en las pestañitas nos aparecen
Varias opciones seleccionaremos la que dice Widgets
![Page 38: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/38.jpg)
En la siguiente ventana daremos clic en la opción Get a
Free chat box now. Y a continuación nos aparecerá otra
otra ventana en donde viene varias opciones de fondos
Para la ventana del Chat, seleccionaremos la que mas
nos guste
![Page 39: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/39.jpg)
Como siguiente paso copiaremos el código que nos
Aparece en el apartado que dice Embed Code
![Page 40: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/40.jpg)
Ahora regresaremos a la pagina de Blogger y daremos
Clic en la opción Diseño y nos abrirá otra pagina donde
daremos clic en añadir un Gadget
![Page 41: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/41.jpg)
En la siguiente ventana elegiremos la opción que dice
HTML/ Javascript después nos abrirá otra ventana donde
podremos configurar el titulo de nuestro Gadget y le
pondremos por nombre Chat.
![Page 42: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/42.jpg)
Continuaremos dando clic derecho en el apartado de
contenido y seleccionaremos la opción Pegar. Enseguida
Insertara el código que habíamos copiado con
Anterioridad y guardaremos los cambios.
![Page 43: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/43.jpg)
Guardados los cambios hacemos clic en la opción ver
Blog para cerciorarnos que el ejercicio se ha realizado
con éxito.
![Page 44: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/44.jpg)
Al igual que en el Chat, para agregar un Cbox necesitas ir
al buscador de Google y teclear la palabra Cbox, elegir
la primera opción que nos muestra.
![Page 45: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/45.jpg)
Ya abierta la pagina daremos un clic en la pestaña Sig Up
para registrarnos y poner añadir el Cbox a nuestro Blog.
Debemos de rellenar el formulario como nos marca
a continuación, aceptamos las condiciones y damos clic
Create my Cbox.
![Page 46: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/46.jpg)
Una vez creada nuestra cuenta iniciaremos Sesión para
comenzar a agregar el Cbox. El primer paso comienza
dándole clic a la pestaña Publish.
![Page 47: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/47.jpg)
En la siguiente pantalla nos muestra el URL de nuestro Blog
y el código, ahí no haremos ningún cambio será hasta la
parte de abajo donde seleccionaremos la opción Fine-tune
its layout
![Page 48: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/48.jpg)
En esta sección modificaremos el tamaño de ancho de la
ventana de nuestro Cbox a 300 px y seleccionaremos la
Opción Guardar o Save.
![Page 49: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/49.jpg)
A continuación seleccionaremos otra vez la opción
Publish! A continuación nos aparecerá una ventana
con el link de nuestro Blog y en la parte de abajo de
la ventana daremos clic en la opción Custumise colours
and fonts
![Page 50: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/50.jpg)
En estas ventanas personalizaremos nuestro Cbox
cambiándole los colores al terminar daremos clic
en la opción Apply para guardar los cambios.
![Page 51: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/51.jpg)
Después volveremos a seleccionar la opción Publish! Y nos
arrojara una ventana donde seleccionaremos y copiaremos
con el clic derecho todo el código que nos aparece para
generar nuestro Cbox.
![Page 52: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/52.jpg)
Después de copiar el código iremos a nuestro Blog y
seleccionaremos la pestaña diseño en ella elegiremos
añadir un Gadget.
![Page 53: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/53.jpg)
En la ventana que nos abre después buscaremos la
opción HTML/JAVASCRIPT y le daremos clic en la siguiente
ventana elegiremos un nombre para nuestro Gadget.
![Page 54: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/54.jpg)
Después de elegir el titulo en la opción Contenido daremos
clic derecho y elegiremos la opción pegar y enseguida nos
aparecerá el código que copiamos con anterioridad.
![Page 55: Tutorial blogger.](https://reader033.fdocuments.co/reader033/viewer/2022042505/54bcea234a7959c56c8b457f/html5/thumbnails/55.jpg)
Listo nuestro Cbox quedo agregado a nuestro Blog,
Seleccionaremos la opción Guardar y por ultimo Ver Blog
para ver si se han efectuados los cambios.