SlideShare una empresa de Scribd logo
1 de 85
TUTORIAL PARA CREAR UN BLOG
CON BLOGGER
Autor: Nacho Segovia

TUTORIAL DE BLOGGER (Nacho Segovia)

1
1. ¿Qué es un blog?.….............................................................................................................. 3
2. Tipos de blogs. .................................................................................................................... 3
3. Partes de un blog ................................................................................................................ 4
4. Estructura de una entrada o post …….................................................................................. 5
5. Blogger ………........................................................................................................................ 6
5.1. Crear una cuenta gmail ............................................................................................... 6
5.2. Entrando en Blogger …………………..…………………………………………………………………………. 7
5.3. Asignar un nombre al Blog .......................................................................................... 9
6. Crear una entrada o post .................................................................................................... 10
6.1. Añadir imágenes o vídeos …………………………………....................................................... 12
6.2. Añadir enlaces ............................................................................................................ 16
6.3. Comentarios de los lectores …………………………………..…………………………………………….. 17
7. Configuración del blog:Lo básico, Entradas y comentarios, Móvil y correo electrónico,
Idioma y formato, Preferencias para motores y Otros. …………….……………………………………... 18
7.1. Editar HTML …………………………………..…………………………………………………………………… 30
8. Diseño del blog……………………………………………………………………………………………………………… 32
8.1. Como agregar o quitar complementos a la página………………………………………………. 32
9. Estadísticas Visión general …………………………………………………………………………………………… 39
10. Google + …………………………………………………………………………………………………………………….. 40
11. Comentarios publicados …………………………………………………………………………………………….. 40
12. Páginas ............................................................................................................................. 41
13. Configuración de las entradas……………………………………………………………………………………… 42
14. Usos avanzados de Blogger…………………………………………………………………………………………. 43
14.1. Añadir aplicaciones 2.0 en nuestro blog …………………………………………………………… 43
14.2. Insertar archivos pdf, doc, xls, ppt, odf o rdf …………………………………………………….. 44
14.3. Insertar un Flash en el blog ………………………………………………………………………………. 46
14.4. Insertar audio en el blog …………………………………………………………………………………… 48
14.5. Agregar RSS al tu blog …………………………………………………………………………………….… 55
14.6. Agregar gadget de suscripcion al blog……………………………………………………………….. 57
14.7. Agregar botón ‘volver al inicio’ …………………………………………………………………………. 57
14.8. Agregar «Leer más» en una entrada…………………………………………………………………… 58
14.9. Cómo poner un menú horizontal desplegable HTML en Blogger………………………… 59
14.10. Como insertar Tablas en Blogger……………………………………………………………………….. 75
14.11. Como instalar Google Analytics …………………………………………………………………………. 77
14.12. Como inserrtar un Voki ……………………………………………………………………………………… 82
14.13. Como poner un chat en tu blog………………………………………………………………………….. 83
14.14. Como poner los iconos de las redes sociales en tu blog ……………………………….……. 84
15 Glosario de términos típicos en un blog ............................................................................. 85

2
1. ¿Qué es un blog?
Un blog es un sitio Web en donde uno o varios autores desarrollan contenidos. Los blogs también se conocen
como cuaderno de bitácora. La información se actualiza periódicamente y, los textos se plasman en forma
cronológica; primero aparece el más recientemente escrito.
En cada artículo de un blog, los lectores tienen la capacidad de dejar sus comentarios. A su vez, estos pueden
ser contestados por el autor de manera que se va creando un diálogo.
Nos sirven para lanzar mensajes que pueden llegar a mucha gente. Nos sirve para investigar sobre algún tema
en especial, con fines educativos, comunicarnos con amigos. Se pueden utilizar con fines personales o
profesionales.

2. Tipos de blogs
• Blog Personal
• Blog Temático
• Blog Profesional
• Blog Corporativo
Se han dado nombres a algunos blogs a partir de sus temáticas:
- Audioblogs. Dedicados a las galerías de ficheros de audio.
- Educablogs. Dedicados a la educación.
- Fotoblogs. Dedicados a las galerías de imágenes.
- Videoblogs. Dedicados a las galerías de ficheros de video.

TUTORIAL DE BLOGGER (Nacho Segovia)

3
3.
•

Partes de un Blog:

Se dividen en tres partes:

La cabecera o título del Blog.

Cabecera
• El menú lateral , en el
que, además de otros
posibles elementos suele
aparecer un listado de
categorías.
•

El post o entrada

menú lateral

entrada o post
TUTORIAL DE BLOGGER (Nacho Segovia)

4
4. Estructura de una entrada: puede ser variada, pero suele tener unos elementos
comunes, como:
Fecha
· La fecha de publicación del post
Título
· El título del post y la categoría a la
que pertenece .
· El cuerpo de la entrada, donde puede ir
una imagen, vídeo…
Cuerpo
· Comentario. Si el autor del post permita
a los usuarios dejar un comentario,
aparecerá un enlace para poder hacerlo .

Comentario

TUTORIAL DE BLOGGER (Nacho Segovia)

5
5. Blogger :

para poder usar blogger necesitamos una cuenta de correo gmail. Si alguien no sabe como
creársela puede ver este video tutorial que nos enseña paso a paso como hacerlo.

5.1. Crear una cuenta Gmail
También lo tienes en youtube, en este
enlace: vídeo
https://www.youtube.com/watch?v=BloMF6HPFms

TUTORIAL DE BLOGGER (Nacho Segovia)

6
5.2. Entrando en Blogger.
Puedes entrar de dos maneras: a) desde la página de Google (www.google.es) accediendo al enlace de
Aplicaciones
y haciendo clic en la opción Más

y aparece el icono de Blogger

b) Escribiendo en la barra de direcciones de nuestro navegador (recomiendo usar Chrome) :
https://www.blogger.com/
Elige la opción que te sea más fácil.
A continuación aparecerá una ventana para iniciar
sesión; simplemente pinchamos en Iniciar sesión:
Nombre y apellidos que
introdujimos al crear la
cuenta
Nuestra dirección de correo

Pinchamos en Iniciar sesión

TUTORIAL DE BLOGGER (Nacho Segovia)

7
Esta es la siguiente ventana que nos aparece:

Simplemente pinchamos
en el botón « Continuar
en Blogger «

TUTORIAL DE BLOGGER (Nacho Segovia)

8
Si ya hemos creado algún blog, aquí aparecería. En nuestro
caso pinchamos en ‘Nuevo Blog ’

5.3. Asignar un nombre al Blog. En la siguiente ventana que nos aparecerá , introducimos el título de
nuestro blog.
Tenemos que poner una dirección, intentando
que esté relacionada con nuestra temática (el
Propio Blogger nos indicará si está disponible o
No).
Y por último elige una plantilla. Más tarde podrás cambiarla y personalizar el blog.

Pulsa en Crear blog

TUTORIAL DE BLOGGER (Nacho Segovia)

9
Y nuestro blog está creado, listo para hacer entradas…

6. Crear una entrada.

Para hacer nuestra primera entrada pinchamos en el icono del lápiz
y nos aparece la ventana con el
editor para poner un título a la entrada, escribir el mensaje y más opciones que veremos más adelante como
insertar una imagen que simplemente requiere tener la imagen guardada y pinchar en el icono ‘ Inserta
imagen’…
Por último pinchar en
‘Publicar’

TUTORIAL DE BLOGGER (Nacho Segovia)

10
Cuando pinchamos en Publicar aparece una ventana para compartir nuestra
entrada en Google+ . De momento vamos a obviar esto y damos en ‘Cancelar’

Esta es la ventana que nos aparece tras pulsar en publicar

Pinchamos en Ver blog y veremos nuestro blog

TUTORIAL DE BLOGGER (Nacho Segovia)

11
Así ha quedado nuestro blog :
Tened en cuenta que no le
hemos puesto un fondo, ni
una cabecera, ni dimensiones… Es decir falta el DISEÑO

6.1. Añadir una imagen o un vídeo a nuestra entrada
Pinchamos en Acceder (vértice superior derecho)
Ahora en 1 entrada

Ahora en nuestra entrada
Y volvemos al editor del principio
TUTORIAL DE BLOGGER (Nacho Segovia)

12
Pinchamos en el icono Insertar imagen
Ahora en Elegir archivos

Nos aparece la ventana para buscar la imagen. La seleccionamos y aparece cargada para añadirla. Pulsamos en
Añadir las imágenes seleccionadas
Y veremos nuestra entrada con la imagen que hemos añadido:
Simplemente con pinchar en la imagen, sin soltar, la podemos
arrastar y colocar donde deseemos. También nos aparecen
opciones para cambiarla el tamaño, alinearla…

TUTORIAL DE BLOGGER (Nacho Segovia)

13
Procederemos igual para insertar un vídeo, aunque hay otras formas de poner un vídeo en nuestro blog
Pinchamos esta vez en el icono Insertar un vídeo
Seleccionamos el vídeo para subir (en este caso guardado en el disco duro). Tardará un poco, en función de la
duración y del formato en que lo tengamos. Y ya tendremos nuestro vídeo en la entrada.
Bastará con pinchar en Actualizar
Y Ver blog
Otra forma más simple, aunque no siempre disponible, es
pinchar debajo del vídeo en Compartir y si aparece debajo el
icono de Blogger y tenemos nuestro blog abierto, simplemente pinchamos en el icono
y nos redirige a nuestro
blog con la nueva entrada y el video insertado, listo para publicarlo:

TUTORIAL DE BLOGGER (Nacho Segovia)

14
Ya tenemos nuestra primera entrada con una imagen insertada y un vídeo:

TUTORIAL DE BLOGGER (Nacho Segovia)

15
6.2. Añadir enlaces
Para crear un vínculo y descargar archivos, acceder a URL, contactar
con correos etc. deberemos seleccionar el texto o imagen a la que
adjudicaremos el Vínculo, presionar en Enlace y rellenar con la dirección
a la que nos llevará al hacer clic sobre el .

Texto seleccionado
Pinchamos en Enlace

Se abre una ventana para introducir la URL donde queremos dirigir al
pinchar en el texto seleccionado.
También podemos redirigirlo a una dirección de correo.
Os aconsejo que activéis la casilla «abrir este enlace en una ventana
nueva». De esta manera el lector no se sale del blog…
Por último , click en Aceptar, Actualizar y Ver blog

TUTORIAL DE BLOGGER (Nacho Segovia)

16
6.3. Comentarios de los lectores
A no ser que solo queramos dar información en nuestro blog, es interesante la opción de permitir dejar
comentarios a los lectores.
Para ello, pinchamos en Acceder
, en nuestra entrada (de momento solo tenemos
una entrada) y así llegamos al editor de la entada. A la derecha tenemos el botón Opciones

Pinchamos en él y se despliegan las posibilidades de comentarios y de redacción de estos.

Click en Listo y ya está.

TUTORIAL DE BLOGGER (Nacho Segovia)

17
7. Configuración del blog.
Empezamos como siempre pinchando en Acceder (vértice superior derecho); veremos las entradas que
hayamos creado y a la derecha de estas, el botón con una flecha
indicando hacia abajo, que es Más opciones.
Más opciones

Pulsamos en esta y aparece un menú desplegable.

Pinchamos en la opción Configuración

TUTORIAL DE BLOGGER (Nacho Segovia)

18
Entramos en una página donde tenemos control de casi todo. Ahora nos vamos a centrar en Configuración y
sus posibilidades

TUTORIAL DE BLOGGER (Nacho Segovia)

19
Lo básico : podemos,
- Editar el título y cambiarlo
- Añadir ahora la descripción o
cambiarla…
- Dejar que nuestro blog sea visible
o invisible en la búsqueda en Internet
- Dirección del blog: Aquí cambiaremos la dirección de nuestro blog por otra,
si está disponible.
- Permisos:
Autores del blog: Podemos dejar que publiquen nuestros compañeros o alumnos.
Nosotros seríamos los administradores y
ellos serían los autores del blog.
El administrador tiene acceso total al blog.
Puede hacer cambios en el diseño y la
configuración; crear, editar y borrar cualquier entrada y cualquier comentario.
Un autor no tiene acceso a la configuración. Puede crear, editar y borrar sus entradas o los comentarios a
sus entradas.

Para crear autores sólo tenemos que hacer clic en AÑADIR AUTORES y escribir las direcciones separadas
de comas o cogerlas de nuestros contactos de Gmail.
TUTORIAL DE BLOGGER (Nacho Segovia)

20
Lectura del blog: Aquí decimos quien puede ver y leer nuestro blog. Cualquiera: cualquiera puede acceder a
nuestro blog. Sólo a los usuarios que yo elija: sólo podrán leerlo los usuarios que yo elija, pero antes tendrán
que identificarse que son ellos. Opción interesante cuando queremos proteger el contenido de nuestro blog.
Únicamente autores del blog: los autores serán los únicos que puedan ver el contenido, previa identificación.

Entradas y comentarios:
Mostrar un máximo de: cuantas entradas por
página queremos mostrar
Plantilla de las entradas: Apenás se usa...
Mostrar imágenes con Lightbox: una forma de
ver las imágenes. Recomiendo que sí.
Ubicación de los comentarios: lugar donde
queremos que aparezca la ventana de comentarios.
¿Quién puede comentar?:aconsejo: Cualquiera.
Moderación de comentarios: Se especifica
cuando se moderan los comentarios.
Si se habilita siempre, aparece una ventana
para poner un correo para que Blogger te avise
de que existe un comentario a moderar.
Mostrar verificación de palabras: dejarlo en no
, si moderas comentarios, y en sí , si no los
moderas.
Mostrar Backlinks: Enlaces en los lugares que
comparten esa entrada.
Mensaje del formulario de comentarios: para
dejar un texto que lea quien vaya a hacer un
comentario.
Hay que GUARDAR CONFIGURACIÓN (arriba a la derecha).

TUTORIAL DE BLOGGER (Nacho Segovia)

21
Móvil y correo electrónico :
Publicar entradas mediante correo electrónico: es una opción para permitir a la gente que pueda publicar
mandando un correo electrónico. Me parece un poco enrrevesado…

Correo para notificar los comentarios: Podemos
escribir hasta 10 direcciones de correo que
recibirán un correo cada vez que alguien deje un
comentario en nuestro blog.

No olvidéis pinchar en GUARDAR CONFIGURACIÓN.

TUTORIAL DE BLOGGER (Nacho Segovia)

22
Idioma y formato
Idioma: Idioma del blog.
Habilitar transliteración: Dejar inhabilitada.
Zona horaria: No olvidar configurar en nuestra
zona horaria.
Formato de cabecera de fecha: Forma en la que
deseamos ver la fecha de las entradas.
Formato de hora: Forma en la que deseamos ver
la hora.
Formato de hora de los comentarios: Forma en
la que deseamos ver la hora de los comentarios.

No olvidéis pinchar en GUARDAR CONFIGURACIÓN

TUTORIAL DE BLOGGER (Nacho Segovia)

23
Estas opciones las dejaría tal y como vienen por defecto

La única opción que encuentro útil es Herramientas del blog

Desde aquí podemos importar otro blog en este, exportar este para instalarlo en otro sitio (también lo
podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente).

TUTORIAL DE BLOGGER (Nacho Segovia)

24
7. Diseño del blog. tenemos que
ir a la pestaña PLANTILLA.

Nos aparecen numerosos tipos de
Plantillas (sencillo, vistas dinámicas,
Picture window, fantástico S.A., etc)

Pinchamos en Personalizar

TAMBIÉN PODEMOS ACCEDER AL DISEÑO DESDE
LA OPCIÓN DISEÑO, ENCIMA DE PLANTILLA

TUTORIAL DE BLOGGER (Nacho Segovia)

25
Desde aquí podremos cambiar la PLANTILLA, el FONDO, los AJUSTES DE ANCHO, el DISEÑO y algunos ajustes
AVANZADOS.

TUTORIAL DE BLOGGER (Nacho Segovia)

26
Plantilla:
Escogemos una plantilla o luego una subplantilla. Siempre podemos ver cómo va quedando en la parte
inferior. Para guardar, tenemos que dar a APLICAR AL BLOG.
Podemos volver en cualquier momento al escritorio de Blogger con el botón Volver a Blogger.

Fondo: Escogemos una imagen de fondo para nuestro blog y la gama de colores que va a tener.

TUTORIAL DE BLOGGER (Nacho Segovia)

27
Para seleccionar nuevos fondos o insertar el nuestro, tenemos que ir a la flecha de la derecha de la imagen
seleccionado en ese momento y se desplegará la galería.

Seleccionamos, click en Listo y Aplicamos al blog

TUTORIAL DE BLOGGER (Nacho Segovia)

28
Ajustar ancho:
Esta opción configura el ancho de la zona de entradas y de la columna o columnas.

Diseño: aquí elegimos la apariencia del blog: donde van a estar las columna con los complementos o gadget
y cómo va a ser el pie de página.
Es recomendable colocar la columna a la derecha.

No olvidéis siempre APLICAR AL BLOG.

TUTORIAL DE BLOGGER (Nacho Segovia)

29
Avanzado:
En la opción avanzado podemos hacer ajustes más detallados de tipo de letra y colores. Recordad que
siempre los podemos previsualizar abajo.

Una vez configurado todo, volvemos al escritorio con el botón VOLVER A BLOGGER.

7.1. EDITAR HTML: (solo para avanzados)
En la opción Plantilla encontramos el editor HTML. Aquí podemos modificar los parámetros que queramos, si
sabemos lenguaje HTML, podemos cargar una plantilla diseñada para Blogger que hayamos encontrado en
internet o copiar códigos que hay en internet
para hacer/poner diferentes cosas en nuestro
blog.

TUTORIAL DE BLOGGER (Nacho Segovia)

30
Vamos a poner una plantilla a través de HTML, de las que se encuentran en Internet. Para cambiar la plantilla
completa a nuestro blog iremos a internet, buscaremos “Plantillas para Blogger” y después de descargarla en
nuestro ordenador (se descarga en formato *.rar o *.zip), descomprimirla
Una vez descomprimido, veremos un archivo XML , lo abrimos con
WordPad o con el bloc de notas y lo pegamos en el cuadro de HTML de
Blogger sustituyendo así el que hubiera. Una página interesante con
plantillas para Blogger es http://btemplates.com/
Ejemplo: Archivo que me he descargado de esta página:
Una vez descomprimido, vemos el archivo XML.

Lo abro con WordPad y veo el código HTML .
Lo copio y lo pego en la caja de HTML de Blogger

Puedo hacer una «Vista previa de la plantilla» o directamente doy a Guardar plantilla

TUTORIAL DE BLOGGER (Nacho Segovia)

31
Esta sería una vista previa de la nueva plantilla copiada con HTML:

8. Diseño
8.1. Cómo agregar o quitar complementos a la página
Lo último que tenemos que hacer para terminar el diseño de nuestra página es poner o quitar elementos a
esta. Esos elementos se llaman GADGET (herramientas) y los podemos añadir o eliminar desde la opción
DISEÑO.

TUTORIAL DE BLOGGER (Nacho Segovia)

32
Por defecto suelen aparecer dos gadgets que son: Archivos del blog (las entradas del blog), y Datos personales
(los datos del autor del blog).Todo gadget lo podemos editar o eliminar (eliminar aparece cuando lo editamos). Los
gadget que aparecen en una página son los que les quiere el autor del blog. Es una elección muy personal. Hay
tres que yo considero importantes:
Cuadro de búsqueda: Importante para que se puedan encontrar cualquier entrada dentro del blog.Para agregar
uno, pinchamos en
Y aparece la ventana de los gadgets disponibles. Buscamos el que queremos y
pinchamos en el símbolo de
para añadirlo y veremos otra ventana para
Configurar el cuadro de busqueda:

TUTORIAL DE BLOGGER (Nacho Segovia)

33
Enlaces de suscripción: así tus lectores se pueden suscibir más fácilmente

Configuramos el título

Etiquetas: Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar rápidamente con el gadget de etiquetas.

Configuramos las etiquetas

TUTORIAL DE BLOGGER (Nacho Segovia)

34
Son también muy interesantes los gadgets: HTML (el gadget que tendremos que usar si queremos insertar
cualquier herramienta que venga descrito o escrito con código HTML), Páginas (para poder ver las páginas fijas
de nuestro blog) y Traductor (permite a las personas que te visitan traducir tu blog a distintos idiomas.). Los
gadgets se pueden mover en cualquier momento con sólo coger y arrastrar a cualquiera de las secciones en las
que dice gadget . También se puede configurar el apartado Entradas del blog.
Pinchando en Editar , podemos configurar las entradas del blog

TUTORIAL DE BLOGGER (Nacho Segovia)

35
Dentro de DISEÑO , ya hemos visto como añadir un gadget. Veamos como agregar un favicon.
Un FAVICON o favorite icon, es un pequeño icono que se se mostrara al lado del nombre del sitio web en caso de
que el usuario lo agregará a sus favoritos. Después, otros navegadores comenzaron a mostrar el favicon en la
barra de direcciones y junto al nombre de la pestaña del sitio web. Este icono, tradicionalmente tiene un tamaño
de 16 x 16 píxeles, aunque también se puede incluir con un tamaño de 32 x 32.

TUTORIAL DE BLOGGER (Nacho Segovia)

36
Podemos usar programas de diseño gráfico como Gimp o Photoshop, pero si no dominas estos programas o no
tienes mucho tiempo , podemos usar varios servicios online que nos faciliten la tarea. Uno de los más sencillos es
favicononline.es. Tienes un vídeotutorial en :
http://www.youtube.com/watch?v=LPvDnGc0Dvk&noredirect=1#t=16
Modificar la barra de navegación:
Pinchando en editar, Blogger nos da varias opciones

Modificar la cabecera: igualmente pinchando en Editar:
Actualmente la cabecera es la que viene por defecto con la plantilla. Voy a poner
una imagen como fondo de cabecera.

Puede que sea conveniente activar la casilla,
reducir hasta ajustar en caso de elegir una imagen demasiado grande Blogger la
ajustará. A continuación pinchamos en examinar y buscamos la imagen que
queremos poner (previamente tiene que estar guardada).
Por último dar en Guardar.

TUTORIAL DE BLOGGER (Nacho Segovia)

37
Aspecto de la cabecera antes y después de poner una imagen:
Antes

Después

Reconocimiento : si queremos poner derechos de autor a nuestro blog este es el sitio (parte más inferior de
DISEÑO ) .
Como siempre pinchando en editar:

TUTORIAL DE BLOGGER (Nacho Segovia)

38
9.Estadísticas, visión general.
Podemos ver las estadísticas por: días, por entradas más visitadas, desde qué países nos visitan…

Entradas:

TUTORIAL DE BLOGGER (Nacho Segovia)

39
10. Google + podemos vincular nuestro blog con nuestra cuenta de Google para que nos publique en nuestro
muro de Google cada vez que hacemos una entrada en el blog.

11. Comentarios publicados. podremos ver los comentarios Publicados, los que estén pendientes de
moderación y los que son Spam. También podremos aprobar, o suprimir los comentarios de los visitantes del
blog.

TUTORIAL DE BLOGGER (Nacho Segovia)

40
12. Páginas
Las páginas son como las entradas, pero estas no se ordenan en orden cronológico y no tienen etiquetas. Se
pueden realizar 10 páginas y se usan para poner contenido más estático en el blog.
Se puede crear una página como una entrada, o crear una página que sea un enlace a otro sitio web.

Pinchamos en Página nueva y elegimos esta vez ‘Página en blanco’. Hacemos una entrada y veremos:

Para que este visible la nueva página que hemos creado debemos pinchar en la flechita
de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles:
Así quedaría con la opción

TUTORIAL DE BLOGGER (Nacho Segovia)

41
13. Configuración de las entradas.
Las etiquetas : son palabras que resumen el tema de la entrada y ayudan a archivarlas, así, si tratas varios temas en tu
blog, encuadrando en las etiquetas correspondientes cada entrada, quien entre puede ver todo lo que has publicado
acerca de un mismo tema, de una vez.

Programar : permite que la entrada se publique automáticamente en el momento o que se publique en un día y hora.
Es atractivo si queremos cambiar el orden de las entradas ya publicadas o que una entrada se publique en el momento
que deseemos.

Opciones : nos permite admitir o no comentarios, cambiar el modo de redacción y
los saltos de línea.

TUTORIAL DE BLOGGER (Nacho Segovia)

42
14. Usos avanzados de Blogger :
14.1. Añadir aplicaciones 2.0 en nuestro blog:
Es una función muy interesante para el blog. Insertar vídeos, presentaciones, galerías de imágenes y otras aplicaciones 2.0 que encontramos en internet.
En todas estas aplicaciones podemos encontrar las palabras: INSERTAR, EMBED o COLOCAR EN TU WEB O BLOG.
Tenemos que coger el código que nos da la aplicación e insertarlo en la pestaña Edición de HTML.
Ejemplo insertando un vídeo desde youtube. Una vez elegido el vídeo que queremos insertar, debajo de él pinchamos en COMPARTIR, luego a INSERTAR, en TAMAÑO DE VÍDEO, escogemos PESONALIZAR y ponemos el ancho de
nuestro blog. Consejo: desactivar la casilla MOSTRAR
SUGERENCIAS … así no nos podrá ningún vídeo, no deseado,
al terminar. Por último, copiar el CÓDIGO HTML del vídeo.

Así quedaría nuestro vídeo insertado en el blog:

TUTORIAL DE BLOGGER (Nacho Segovia)

43
14.2. Insertar archivos pdf, doc, xls, ppt, odf o rdf
Como ya sabrás no es posible subir a Blogger archivos pdf, doc, xls, ppt, odf o rdf. Sin embargo sí es posible
incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs . Metodos:
Metodo 1 : entramos, por ejemplo, en www.calameo.com. Elegimos el archivo que queremos
Al pinchar en el archivo aparecen varias opciones: elegimos COMPARTIR.

Copiamos el código incrustado en HTML:

Y en nuestra entrada, en HTML, pegamos el código y le damos a publicar

TUTORIAL DE BLOGGER (Nacho Segovia)

44
En nuestro blog queda así:

Puedes cambiar las dimensiones de
presentación en el código HTML ,
ajustándolo al ancho de tu blog.

Metodo 2 : guardar el archivo en Google Drive. Basta que accedas a drive.google.com, entres en tu cuenta y
hagas click en el botón para subir archivos. Una vez subido haz click con el botón derecho del ratón en el
archivo en cuestión y elige «Abrir con... Google Drive Viever".

Abre «Archivo" en el menú superior y pulsa en "Embed (this PDF file)"
Se abrirá una ventana emergente que mostrará el código que debes copiar, y pegar
donde quieras ubicar el archivo incrustado. Recuerda que debe pegarse en el modo
HTML del editor de Blogger.
TUTORIAL DE BLOGGER (Nacho Segovia)

45
14.3. Insertar una animación flash (.SWF) en el blog
Los pasos que yo sigo son:
1) Descargo la animación flash.
2) Creo una nueva entrada y voy al editor HTML. Aquí introduzco el siguiente código:
<object width="400" height="100"><param name="movie" value=«URL DEL FLASH" /><param
name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param
name="wmode" value="transparent" /><embed src=" URL DEL FLASH " type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="400" height="100"
wmode="transparent"></embed></object>
3) Subo el flash a Google Sites: https://sites.google.com. Vemos dos
opciones Ver y Descargar. Pinchamos con botón derecho en Descargar:
del desplegable que aparece pincho en Copiar dirección del enlace.

4)Vuelvo a mi entrada y en el código que introduje cambio la URL por la dirección que se copió en el portapapeles, quedando así:
<object width="400" height="100"><param name="movie"
value="https://sites.google.com/site/nachopdi1/audio/flash.swf" /><param name="allowFullScreen"
value="true" /><param name="allowscriptaccess" value="always" /><param name="wmode" value="transparent"
/><embed src="https://sites.google.com/site/nachopdi1/audio/flash.swf" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="400" height="100" wmode="transparent"></embed>
</object>
Podemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)

TUTORIAL DE BLOGGER (Nacho Segovia)

46
14.4. Insertar un powerpoint en el blog
Primero subimos el powerpoint a Drive. Lo hacemos público.
Pinchamos en el archivo para verlo y ahora vamos a Archivo: Publicar en la web:
Click en «Iniciar la publicación» .
Aparece una ventana donde configurar el tamaño
del powerpoint, el tiempo de transiciones, etc…

Copiamos el código HTML.

Volvemos a nuestro blog, en el editor HTML pegamos el código y publicamos:

TUTORIAL DE BLOGGER (Nacho Segovia)

47
14.4. Insertar audio en el blog
Hay dos posibilidades:
a) Publicar un audio MP3 con JW Player en Blogger. Blogger no permite subir directamente archivos de audio a su
espacio. Entonces subimos el archivo MP3 a la cuenta personal en Google Sites para luego enlazar o embeber un
reproductor de audio que lo muestre. Nos descargamos de Internet el Configurador jwplayer.swf que posiblemente esté en .zip, lo descomprimimos en una carpeta del disco local.
Subimos a Google Sites los siguientes archivos:
- Reproductor jwplayer.swf
- Archivo de música a reproducir en .mp3.
- Imagen en .jpg (que se verá de inicio en el reproductor).

Debajo del Jwplayer que hemos subido hay un botón llamado Ver. Pinchamos en Ver. Se abre una pestaña nueva;
copiamos su URL y la pegamos en el Bloc de notas. Una vez pegada eliminamos el código basura que aparece detrás
de la extensión swf :

TUTORIAL DE BLOGGER (Nacho Segovia)

48
Hacemos lo mismo con los otros dos archivos (mp3 y jpg). En el caso del mp3 pinchamos con botón derecho en
Descargar y Copiar dirección de enlace.

Todo lo pegamos en el bloc de notas, borrando el código basura:

Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index

TUTORIAL DE BLOGGER (Nacho Segovia)

49
Se nos abre la página del JWPLAYER:

Seleccionamos la opción MP3 con imagen +
Barra de control debajo.
En Configuración básica pegaremos las URL que
están pegadas en el Bloc de notas. La URL del
Jwplayer en la casilla URL player swf , en la casilla
URL archivo la de nuestro mp3.
Para la imagen pinchamos en Configuración avanzada y debajo se abre OPCIONES DE ARCHIVO. En
El campo imagen pegamos la URL de nuestra
Imagen.

Bajamos abajo del todo y le damos a Recargar Reproductor

TUTORIAL DE BLOGGER (Nacho Segovia)

50
Nos habrá quedado así:

Copiamos el CÓDIGO EMBED
Nos vamos a nuestro blog, creamos una entrada, le damos título, pinchamos
en HTML Y dentro pegamos el código embed que acabamos de copiar:

Podemos modificar el tamaño del visor en los valores width y height.

TUTORIAL DE BLOGGER (Nacho Segovia)

51
Nuestro audio quedará parecido a esto:

TUTORIAL DE BLOGGER (Nacho Segovia)

52
b) Subir el archivo de audio a servicios Web 2.0 como GoEar o SoundCloud que proporcionan el
código embed para insertar un reproductor con audio en tu blog.
Entramos en: http://www.goear.com/
Una vez ya en la página, escribimos en el cuadro de búsqueda el artista y el título de la canción que queremos.
Seguidamente hacemos click con el botón izquierdo del ratón sobre "Buscar"
Se nos abre otra ventana con los resultados encontrados.

Hacemos click botón izquierdo del ratón
sobre la canción que deseemos...

Se nos abre otra ventana. En ella tenemos que pinchar en Compartir:

Se abre otra ventana. Copiamos el código que hay debajo de "Pon esta canción en tu web o blog"

TUTORIAL DE BLOGGER (Nacho Segovia)

53
Regresamos a nuestro blog. Hacemos una nueva entrada, le damos título y en HTML
pegamos el código copiado de Goear.
<iframe width="580" height="115"
src="http://www.goear.com/embed/sound/9952db9" marginheight="0" align="top"
scrolling="no" frameborder="0" hspace="0" vspace="0" allowfullscreen></iframe>
Publicar y listo

TUTORIAL DE BLOGGER (Nacho Segovia)

54
14.5. Agregar RSS al tu blog Es una forma de dar a conocer tus artículos en tu blog (RSS: Really Simple Syndication).
Además de eso, es muy cómodo suscribirse y cuando se publique una nueva entrada tu cliente RSS te alertara, eso
evita tener que estar visitando a menudo el sitio para ver si hay o no algo nuevo en el
Pasos: vamos a Diseño, click al botón "Añadir un gadget" y en la ventana que nos sale buscamos y
elegimos el gadget Feed.
Se abre la ventana para "Configurar feed"
Dejando momentáneamente esta ventana,
nos vamos a la página http://feedburner.google.com donde nos logearemos con nuestra cuenta gmail
y creamos un feed escribiendo la dirección de nuestro blog y click en "Next " .
Posiblemente te de a escoger entre Atom o RSS, en mi caso elijo RSS y le doy click al botón "Next" donde
feedburner nos dirá que ya el feed fue verificado .

TUTORIAL DE BLOGGER (Nacho Segovia)

55
Antes de dar en "Next" para terminar debemos copiar la dirección
de nuestro feed:

Un a vez copiada nos volvemos a la ventana de configuración del RSS
en Blogger donde la pegamos y damos click al botón Continuar.

En mi caso opto por activar las tres opciones de mostrar y
Click en Guardar

TUTORIAL DE BLOGGER (Nacho Segovia)

56
14.6. Agregar gadget de suscripcion al blog. Permite que tus lectores que se suscriban fácilmente a tu blog
mediante los lectores de feed conocidos. Pasos:
- Vamos a Diseño: Añadir un Gadget, y elegimos « Enlaces de suscripción»
Pinchamos en el
, le damos un título y Guardar

Y ya veríamos en nuestro blog la suscripción vía RSS:

14.7. Agregar botón ‘volver al inicio’ (a la parte de arriba de nuestra página) : Debemos tener en cuenta el color
de nuestra plantilla, y si el icono tiene un fondo blanco, o de otro color. Si es transparente, no tendremos ningún
problema. También tenemos que pensar en el tamaño.
Tiene que ser de dimensiones reducidas, para que no se solape con ninguna imagen ni gadget de la barra lateral.
Una vez tengamos claro qué icono vamos a utilizar, debe-mos subirlo a Google Sites, por ejemplo. Allí pinchamos
con derecho en Descargar y Copiar dirección de enlace
En Diseño inserta un gadget HTML y pega este código HTML :<a href='#' style='display
croll;position:fixed;bottom:0px;right:0px;' title='ARRIBA'><img src="Pega aquí la URL de tu imagen" /></a>
Pega donde pone "Pega aquí la URL de tu imagen" la URL de tu imagen y Guarda.

TUTORIAL DE BLOGGER (Nacho Segovia)

57
14.8. Agregar «Leer más» en medio de una entrada. Vamos a Diseño, en el cuerpo
del blog, de la entrada, pinchamos en Editar:
Aparece una ventana nueva y donde pone ‘ Texto del enlace de la página de entrada
escribimos LEER MÁS:
Bajamos abajo y damos en Guardar.
IMPORTANTE, ahora pinchar en Guardar
Disposición.

A continuación hacemos una entrada y
donde queramos partir la entrada, por la
razón que sea pinchamos en el icono
Insertar salto de línea:

Y seguimos escribiendo debajo. Al lector le aparecerá en ese salto de línea el ‘Leer más ‘ que antes introdujimos.
Damos en Guardar, Publicar y Ver blog .

Quedaría así :

TUTORIAL DE BLOGGER (Nacho Segovia)

58
14.9.Cómo poner un menú horizontal desplegable html en Blogger
Si utilizas plantillas pre diseñadas o dinámicas, es muy probable esto NO te funcione. Si quieres aplicarlo, ves al
menú > plantilla > y cambia tu plantilla actual a sencilla.
Paso 1: Nos vamos a Más Opciones: Diseño y eliminamos
el Gadget de Páginas, con Editar

y Eliminar:
Aceptar

Click en Guardar disposición:

En realidad no hemos eliminados las páginas siguen estando. Lo podemos
comprobar pinchando en Páginas:

TUTORIAL DE BLOGGER (Nacho Segovia)

59
Volemos a Diseño para añadir en esta zona un Gadget de HTML, pero no tenemos como hacerlo:

Tenemos que retocar la plantilla. Pinchamos en Plantilla y luego en Editor HTML:
Tenemos que buscar un código en el blog. El código a buscar es:
<div class='region-inner header-inner'> . Para ello ponemos el cursor dentro
del código existente y pulsamos Control+F. Aparece un cuadro de busqueda,
donde pegamos el código a buscar:

TUTORIAL DE BLOGGER (Nacho Segovia)

60
Y damos a Enter. Aparecerá coloreado:

Donde pone maxwidgets=‘1’ cambiamos el 1 por un 10 y donde pone showaddelement=‘no’ cambiamos el no
por yes. Donde pone locked= ‘true’ cambiamos true por false.

Tiene que quedar así:

Pinchamos en Guardar plantilla.
Volvemos al escritorio y de nuevo a Diseño y vemos que nos ha creado el gadget que necesitamos:

TUTORIAL DE BLOGGER (Nacho Segovia)

61
Vamos a insertar un código que generará nuestro menú desplegable. Pero hay que tener muy claro las páginas que
queremos tener en el menú y como se van a llamar. A modo de ejemplo mi página principal se va a llamar MI PRIMER
BLOG, una segunda página se llamará TIC y una tercera que se llamará TUTORIALES. Cada uno de estos nombres que
vamos a poner será una pestaña. El código es el siguiente :
<div id='mbwnavbar'>
<ul id='mbwnav'>
<li>
<a href='http://mitutorialblog.blogspot.com.es/'>MI PRIMER BLOG</a>
</li>
<li>
<a href='http://mitutorialblog.blogspot.com.es/p/blog-page.html'>TIC</a>
</li>
<li>
<a href='#'>TUTORIALES</a>
<ul>
<li><a href='#'>DESPLEGABLE1</a></li>
<li><a href='#'>DESPLEGABLE2</a></li>
</ul>
</li>
<li>
<a href='#'>OTRA PESTAÑA</a>
<ul>
<li><a href='#'>OTRO DESPLEGABLE1</a></li>
<li><a href='#'>OTRO DESPLEGABLE2</a></li>
</ul>
</li>
</ul>

LO QUE ESTÁ EN NEGRITA
ES LO QUE TIENES QUE PONER.
Y SERÁN EL NOMBRE DE CADA
PESTAÑA

</div>

TUTORIAL DE BLOGGER (Nacho Segovia)

62
Donde están las almohadillas tenemos que meter las URL de cada página, sustituyéndolas pero sin borrar nada más,
ni una coma. Veamos:
<a href='#'>MI PRIMER BLOG</a>
</li>
<li>
<a href='#'>TIC</a>
</li>
<li>
<a href='#'>TUTORIALES </a>
<ul>
<li><a href='#'>Categoria 1.1</a></li>
Al pinchar en la primera pestaña aparece su URL; la copiamos y la
pegamos en donde esta la almohadilla (este proceso con cada pestaña y su
URL) quedando por tanto el código así :
<li>
<a href='http://mitutorialblog.blogspot.com.es/'>MI PRIMER BLOG</a>
</li>
<li>
<a href='http://mitutorialblog.blogspot.com.es/p/blog-page.html'>TIC</a>
</li>
<li>
<a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a>
<ul>
<li><a

TUTORIAL DE BLOGGER (Nacho Segovia)

63
<li>
<a href='http://mitutorialblog.blogspot.com.es/'>MI PRIMER BLOG</a>
</li>
<li>
<a href='http://mitutorialblog.blogspot.com.es/p/blog-page.html'>TIC</a>
</li>
<li>
<a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a>
Veis que solo debajo de donde pone
<ul>
‘TUTORIALES’ hay más código. Este es el
<li><a href='#'>DESPLEGABLE1</a></li>
código que inserta los desplegables de la
<li><a href='#'>DESPLEGABLE2</a></li>
pestaña TUTORIALES.
</ul>
Ahora nos queda modificarlo. Primero le
</li>
daremos un nombre acorde a las
</ul>
etiquetas que hayamos puesto en la
</li>
<li>
<a href='#'>Categoria 2</a>
<ul>
<li><a href='#'>Categoria 2.1</a></li>
<li><a href='#'>Categoria 2.2</a></li>
</ul>

entrada que tengamos en la pestaña
TUTORIALES.
Cambio el nombre DESPLEGABLE1 por
Blog (que es una de mis etiquetas).
Cambio DESPLEGABLE2 por PDI , que es
otra etiqueta. Quedaría así:

<a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a>
<ul>
<li><a href='#'>Blog</a></li>
<li><a href='#'>PDI</a></li>
</ul>

TUTORIAL DE BLOGGER (Nacho Segovia)

64
Ahora volvemos al blog a buscar las etiquetas mencionadas. En la pestaña
TUTORIALES pincho debajo, en la etiqueta blog:

Al pinchar en blog, en la barra de direcciones aparecen las entradas que
hayamos hecho. Copiamos esa URL:

Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog:
<a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a>
<ul>
<li><a href='#'>Blog</a></li>
<li><a href='#'>PDI</a></li>
</ul>
Quedaría así: (hay que borrar la # )
<a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a>
<ul>
<li><a href='http://mitutorialblog.blogspot.com.es/search/label/blogs'>Blog</a></li>
<li><a href='#'>PDI</a></li>
</ul>

TUTORIAL DE BLOGGER (Nacho Segovia)

65
Ahora hacemos lo mismo para PDI; volvemos al blog pinchamos
ahora en la etiqueta PDI y copiamos su URL:

Esta URL la pegamos en lugar de la almohadilla que está justo
antes de PDI :
<a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a>
<ul>
<li><a href='http://mitutorialblog.blogspot.com.es/search/label/blogs'>Blog</a></li>
<li><a href='#'>PDI</a></li>
</ul>
Quedando así :
<a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a>
<ul>
<li><a href='http://mitutorialblog.blogspot.com.es/search/label/blogs'>Blog</a></li>
<li><a href='http://mitutorialblog.blogspot.com.es/search/label/PDI'>PDI</a></li>
</ul>
Ya tendríamos nuestro código casi listo.

TUTORIAL DE BLOGGER (Nacho Segovia)

66
El código quedaría así :
<div id='mbwnavbar'>
<ul id='mbwnav'>
<li>
<a href='http://mitutorialblog.blogspot.com.es/'>MI PRIMER BLOG</a>
</li>
<li>
<a href='http://mitutorialblog.blogspot.com.es/p/blog-page.html'>TIC</a>
</li>
<a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a>
<ul>
<li><a href='http://mitutorialblog.blogspot.com.es/search/label/blogs'>Blog</a></li>
<li><a href='http://mitutorialblog.blogspot.com.es/search/label/PDI'>PDI</a></li>
</ul>
</li>
<li>
<a href='#'>OTRA PESTAÑA</a>
Este código solo tienes que ponerlo si quieres poner
<ul>
<li><a href='#'>OTRO DESPLEGABLE1</a></li>
otra pestaña más, con dos desplegables. Si quieres
<li><a href='#'>OTRO DESPLEGABLE2</a></li>
añadir más pestañas copia el código de una de arriba,
</ul>
cambia el nombre y su URL; e igual si le quieres poner
</li>
desplegables…
</ul>
</div>

Copiamos el código y volvemos a Blogger. A Diseño:

TUTORIAL DE BLOGGER (Nacho Segovia)

67
Volvemos a Blogger, Diseño y la pegamos en el gadget que hemos creado:
Pinchamos en Añadir un gadget, e insertamos uno de
HTML.

Pegamos el código en contenido y no le ponemos título.
Pinchamos en Guardar

TUTORIAL DE BLOGGER (Nacho Segovia)

68
La barra ha quedado encima de la cabecera, simplemente pinchamos en ella y la arrastramos situándola debajo
de la cabecera:

Así:

Vamos a ver como está quedando hasta ahora. Ver blog (posiblemente F5) y vemos que no está quedando como
queremos:

Pero esto no es desplegable, así que tenemos que tocar el código
HTML. Tenemos que buscar este código: ]]></b:skin>
Vamos a Plantilla: Editar HTML y con el cursor dentro del código pulsamos Control+F. Dentro del cuadro de
busqueda que sale pegamos el código: ]]></b:skin> y Enter :

TUTORIAL DE BLOGGER (Nacho Segovia)

69
Encima de ]]></b:skin> dejamos espacio y pegamos el siguiente código:

/**MBW Navgation bar**/
#mbwnavbar {
background: #bdbfbf;
width: 850px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid;
height:35px;
}
#mbwnav {
margin: 0;
padding: 0;
}
#mbwnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbwnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
color: #FFF;
TUTORIAL DE BLOGGER (Nacho Segovia)

70
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbwnav li a:hover, #mbwnav li a:active {
background: #028490;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbwnav li {
float: left;
padding: 0;
}
#mbwnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbwnav li ul a {
width: 140px;
}
#mbwnav li ul ul {
margin: -25px 0 0 161px;
}
#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav li.sfhover ul ul ul { left: -999em;
TUTORIAL DE BLOGGER (Nacho Segovia)
}

71
#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li
li.sfhover ul {
left: auto;
}
#mbwnav li:hover, #mbwnav li.sfhover {
position: static;
}
#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
background: #028490;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbwnav li li a:hover, #mbwnavli li a:active {
background: #70b6bd;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
TUTORIAL DE BLOGGER (Nacho Segovia)

72
Ya está pegado:

Le damos a Guardar plantilla

Y vemos el blog:

A vosotros os saldrá una pestaña más llamada Categoría 2. Yo la eliminado borrando el código:

TUTORIAL DE BLOGGER (Nacho Segovia)

73
Si queréis cambiar los colores de las pestañas o de los desplegables lo tenéis que hacer en el código que
introdujisteis en los valores alfanuméricos que aparezcan después de la almohadilla:
En la página www.colorhexa.com metemos esos números
y nos dice a que color corresponde, y nos permite buscar
otros colores:

Si el ancho de la barra no es el que mejor se adecúa, al principio del código, en width , está puesto 850px
simplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta.

TUTORIAL DE BLOGGER (Nacho Segovia)

74
14.10.Cómo insertar tablas en Blogger.
El código básico para insertar una tabla es el siguiente:
<table border="1" cellpadding="4"><tbody>
<tr><td>Agua</td>
<td>Sal</td>
<td>Leche</td></tr>
<tr><td>Tarde</td>
<td>Noche</td>
<td>Día</td></tr>
<tr><td>Madrid</td>
<td>París</td>
<td>Roma</td></tr>
</tbody></table>
El resultado es este:

Agua Sal
Leche
Tarde Noche Día
Madrid París Roma

TUTORIAL DE BLOGGER (Nacho Segovia)

75
Si deseas insertar una fila más, agrega esta parte antes de </tbody></table>
<tr><td>Palabra 1</td>
<td>Palabra 2</td>
<td>Palabra 3</td></tr>
Del mismo modo si quisieras que cada fila tuviera más celdas entonces agrega las que quieras añadiendo las
palabras entre las etiquetas <td> </td> antes de cada </tr>
Si quieres modificar el borde de la tabla cambia el número que hay
detrás de cambiaborder="1" . Si lo quieres más grueso por un número
más alto, si lo dejas en "0" se quedará sin borde.
<table border="5" cellpadding="4">
<tbody><tr><td>Tabla con borde "5"</td></tr>
</tbody></table>
Para cambiar el color del borde de la tabla añadimos después de
<table el atributo bordercolor="green" el color lo puedes cambiar,
por ejemplo "red"

Este sería el resultado:

<table border="2" bordercolor="green" cellpadding="4">
<tbody><tr><td>Tabla con borde verde</td></tr>
</tbody></table>

TUTORIAL DE BLOGGER (Nacho Segovia)

76
14.11.Cómo instalar Google Analytics en el blog
Vamos a la página de Google Analytics, http://www.google.es/intl/es/analytics/ y como ya tenemos cuenta en gmail
pinchamos en Crear una cuenta. Hay que seguir tres pasos: 1º.- Registrarse
En el campo Nombre de cuenta ponemos el nombre de nuestro blog

En el campo Nombre del sitio web ponemos el nombre de nuestro blog y
debajo en URL del sitio web ponemos la URL de nuestro blog, borrando la
http que ya está puesta a la izquierda.
Ahora tenemos que decirle que tipo de blog tenemos en Categoría del sector,
yo he elegido Informática. Bajo más abajo y elijo la zona horaria (España,
Madrid) :

Le damos a Obtener ID de seguimiento

Aceptar los términos

TUTORIAL DE BLOGGER (Nacho Segovia)

77
Y nos aparece una ventana con un código HTML. Lo copiamos :

Volvemos al blog, Más opciones, DISEÑO.
Añadimos un gadget de HTML, donde
pegamos el código :

Le damos a Guardar y ya tenemos nuestro gadget:

TUTORIAL DE BLOGGER (Nacho Segovia)

78
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas
del blog):

Damos en Guardar disposición y nos vamos a Configuración: Otros y bajamos hasta Google Analytics:
Aquí tenemos que poner la ID de nuestro Analytics. Volvemos a
Google Analytics y la ID es esta:

La copiamos y la pegamos donde antes nos la
Pedía.

Le damos a Guardar configuración.

TUTORIAL DE BLOGGER (Nacho Segovia)

79
Volvemos a Google Analytics, pinchamos en el icono de la casita:
Le damos a guardar preferencias:

Y desde «Todos los datos de sitios web» podemos entrar en nuestra cuenta:
Si pinchamos en Tiempo real, Descripción general podemos ver
el tráfico en el blog. Como acabamos de
crearlo está a cero. Si volvéis al blog y hacéis
una visita veréis movimiento….

TUTORIAL DE BLOGGER (Nacho Segovia)

80
14.12.Cómo insertar un contador de visitas.
1. Ir a la página principal: http://contador-de-visitas.com
2. Elegir el estilo del contador en el desplegable.
Introducir el número de visitas inicial del contador.
3. Introducir la dirección del blog y OK.

Aparecerá una página con un botón que pone agregar a blogger. Al hacer click en este botón vamos a Blogger,
donde podemos cambiar el título del bloque que contendrá el contador de
visitas.

Le damos a añadir artilugio y ya está. Luego podemos cambiar la posición de nuestro contador a donde queramos.

TUTORIAL DE BLOGGER (Nacho Segovia)

81
14.12.Cómo insertar un Voki.
Entramos en www.voki.com y nos registramos . Pinchamos en Create a new voki
Luego en ‘Customize your character’
y pinchamos en el voki que nos guste:
Podemos cambiarle el color de los ijos, labios, ropa, etc …. Una vez hecho esto pinchamos
en Done :
Y ahora en ‘Text to speech’:
masculina o femenina)

Escribes lo que quieres que diga tu Voki (elige el idioma y voz
y pincha en Done.

Ahora en Publish:
Escribe un título y pincha en en Save:

La siguiente ventana te informa de que
Todo ha ido bien y das en Close
Te aparece un código embed, pinchas en Copy
Y ya solo queda volver al blog, añadir un gadget
HTML y pegar este código .

TUTORIAL DE BLOGGER (Nacho Segovia)

82
14.13.Cómo poner un chat en tu blog. Hay diferentes sitios que te proporcionan un chat gratuito para tu blog. Yo he
elegido CBOX. Entramos en: http://www.cbox.ws/ , nos registramos :
Nos llegará un mensaje de activación
a nuestro correo; pinchamos en el link y en la siguiente página introducimos la
URL de nuestro blog.
Nos aparece una nueva ventana con el código ya para pegar en nuestro blog.
Copiamos el código en un gadget de nuetro blog y listo.

TUTORIAL DE BLOGGER (Nacho Segovia)

83
14.13.Cómo poner los iconos de las redes sociales. Buscamos en imágenes d google los iconos que queremos.
Los descargamos y los subimos a Google Sites.
Entramos en DISEÑO de nuestro blog y añadimos un gadget de HTML. Aquí pegamos el siguiente código:
<a href='URL PAGINA FACEBOOK' target='_blank'><img src='URL IMAGEN ICONO FACEBOOK' width= ‘35px'
title='FACEBOOK' /></a>

Donde pone URL PAGINA FACEBOOK tenéis que poner la URL de la página a la que queréis que vaya al hacer
clic en el icono (en este caso de la Facebook), y donde pone URL IMAGEN ICONO FACEBOOK tenéis que poner
la URL de la imagen del icono que queréis poner. Esta URL la obtenéis yendo a Google Sites (donde habéis
subido el icono de facebook) pinchando con botón derecho en descargar y Copiar dirección de enlace (esa es la
URL del icono).
En width indicamos el tamaño de la imagen, en este caso 35 pixeles.
Lo podéis cambiar para que sean más grandes o pequeños a vuestro
gusto. Y a continuación está el título (FACEBOOK), que no es necesario
ponerlo, pero cuando pongamos varios códigos, así sabremos cuál es
cuál fácilmente.
Una vez puestas las URL en el código, damos a Guardar y tenemos el
icono de Facebook enlazado a nuestra página de Facebook. Si queremos poner de más redes sociales iríamos insertando el mismo código
con las URL correspondientes…

TUTORIAL DE BLOGGER (Nacho Segovia)

84
15. Glosario de términos habituales creando un blog.
Contenido: la información que publicas en tu blog. Texto, páginas web
(html), imágenes, fotos, videos…
Servidor: donde se publica el contenido del blog y permite que este accesible por todo el mundo.
También se llaman hosts.
URL: se refiere al texto que identifica a una página web. Normalmente empieza por "http:/...".
Enlace, vínculo, hipervínculo: normalmente aparecen en azul y si se les pincha le llevan al usuario a
otra página.
Post: se refiere a la publicación de un artículo o entrada nueva en un blog
Template: es la platilla o diseño gráfico más otros atributos (enlaces y otros recursos en las barras
laterales).
RSS /Atom. Métodos de sindicación de contenidos que permiten la informar a los interesados de su
actualización o nuevos contenidos.
Adsense: Programa de monetización de Google Inc para propietarios de blog o webs.
Blogroll: Es una lista de enlaces que un blogger recomienda…
Banner: Anuncio publicitario que se inserta en una página web.
Google Plus: Red social de Google .
Podcast: Transmisión de contenido multimedia en un blog.
Sidebar: Barra lateral, izquierda o derecha, de un blog.
Widget: Código que añade una funcionalidad automáticamente sin necesidad de escribir el código. El
termino en Blogger es “Gadget”.
TUTORIAL DE BLOGGER (Nacho Segovia)

85

Más contenido relacionado

La actualidad más candente

Cuadros EBAU (MURCIA) FUA II
Cuadros  EBAU (MURCIA) FUA IICuadros  EBAU (MURCIA) FUA II
Cuadros EBAU (MURCIA) FUA IIMara Mira
 
Análise da serigrafia de Marilyn Monroe
Análise da serigrafia de Marilyn MonroeAnálise da serigrafia de Marilyn Monroe
Análise da serigrafia de Marilyn MonroeMaria Maló
 
Temas: Musica EBAU (MURCIA) FUAII
Temas: Musica EBAU (MURCIA) FUAIITemas: Musica EBAU (MURCIA) FUAII
Temas: Musica EBAU (MURCIA) FUAIIMara Mira
 
Exposición cezanne
Exposición cezanneExposición cezanne
Exposición cezanneosx
 
Las edades de la mirada 2013 logosfera obras
Las edades de la mirada 2013 logosfera obrasLas edades de la mirada 2013 logosfera obras
Las edades de la mirada 2013 logosfera obrasMartín Weimer
 
Picasso EBAU (MURCIA) FUA II
Picasso EBAU (MURCIA) FUA IIPicasso EBAU (MURCIA) FUA II
Picasso EBAU (MURCIA) FUA IIMara Mira
 
Maquinas de imágenes
Maquinas de imágenesMaquinas de imágenes
Maquinas de imágeneseaeapp
 
Aula 10 - Primeiros Filmes Sonoros
Aula 10 - Primeiros Filmes SonorosAula 10 - Primeiros Filmes Sonoros
Aula 10 - Primeiros Filmes Sonorosismaelfurtado
 
Gauguin postimpressionism 3
Gauguin postimpressionism 3Gauguin postimpressionism 3
Gauguin postimpressionism 3Serena Tanchella
 

La actualidad más candente (17)

Cuadros EBAU (MURCIA) FUA II
Cuadros  EBAU (MURCIA) FUA IICuadros  EBAU (MURCIA) FUA II
Cuadros EBAU (MURCIA) FUA II
 
Michelângelo Slide
Michelângelo SlideMichelângelo Slide
Michelângelo Slide
 
Análise da serigrafia de Marilyn Monroe
Análise da serigrafia de Marilyn MonroeAnálise da serigrafia de Marilyn Monroe
Análise da serigrafia de Marilyn Monroe
 
Bauhaus
BauhausBauhaus
Bauhaus
 
Guernica ampliado
Guernica ampliadoGuernica ampliado
Guernica ampliado
 
Temas: Musica EBAU (MURCIA) FUAII
Temas: Musica EBAU (MURCIA) FUAIITemas: Musica EBAU (MURCIA) FUAII
Temas: Musica EBAU (MURCIA) FUAII
 
Pós - Impressionismo
Pós - ImpressionismoPós - Impressionismo
Pós - Impressionismo
 
Exposición cezanne
Exposición cezanneExposición cezanne
Exposición cezanne
 
Las edades de la mirada 2013 logosfera obras
Las edades de la mirada 2013 logosfera obrasLas edades de la mirada 2013 logosfera obras
Las edades de la mirada 2013 logosfera obras
 
Picasso EBAU (MURCIA) FUA II
Picasso EBAU (MURCIA) FUA IIPicasso EBAU (MURCIA) FUA II
Picasso EBAU (MURCIA) FUA II
 
Maquinas de imágenes
Maquinas de imágenesMaquinas de imágenes
Maquinas de imágenes
 
Aula 10 - Primeiros Filmes Sonoros
Aula 10 - Primeiros Filmes SonorosAula 10 - Primeiros Filmes Sonoros
Aula 10 - Primeiros Filmes Sonoros
 
Cubismo
CubismoCubismo
Cubismo
 
Gauguin postimpressionism 3
Gauguin postimpressionism 3Gauguin postimpressionism 3
Gauguin postimpressionism 3
 
Pop Art em Resumo
Pop Art em ResumoPop Art em Resumo
Pop Art em Resumo
 
Vermeer
VermeerVermeer
Vermeer
 
Vik Muniz Pgc Final
Vik Muniz Pgc FinalVik Muniz Pgc Final
Vik Muniz Pgc Final
 

Destacado

Tres bandas integración competencias clave. alfonso cortés alegre
Tres bandas integración competencias clave. alfonso cortés alegreTres bandas integración competencias clave. alfonso cortés alegre
Tres bandas integración competencias clave. alfonso cortés alegreAlfonso Cortes Alegre
 
El nuevo currículo lomce y el trabajo por competencias. alfonso cortés. mayo1...
El nuevo currículo lomce y el trabajo por competencias. alfonso cortés. mayo1...El nuevo currículo lomce y el trabajo por competencias. alfonso cortés. mayo1...
El nuevo currículo lomce y el trabajo por competencias. alfonso cortés. mayo1...Alfonso Cortes Alegre
 
Lomce Guia del Departamento de Educación de Aragón.
Lomce Guia del Departamento de Educación de Aragón.Lomce Guia del Departamento de Educación de Aragón.
Lomce Guia del Departamento de Educación de Aragón.Alfonso Cortes Alegre
 
A. las competencias basicas- alfonso cortés 2014.2
A. las competencias basicas- alfonso cortés 2014.2A. las competencias basicas- alfonso cortés 2014.2
A. las competencias basicas- alfonso cortés 2014.2Alfonso Cortes Alegre
 
Programas educativos europeos. Máster E.S. UPNA_201016
Programas educativos europeos. Máster E.S. UPNA_201016Programas educativos europeos. Máster E.S. UPNA_201016
Programas educativos europeos. Máster E.S. UPNA_201016Javier Muñoz Nieva
 
Presentaciones lomce-primaria. Antonia MArtínez Vallejo. Granada
Presentaciones lomce-primaria. Antonia MArtínez Vallejo. GranadaPresentaciones lomce-primaria. Antonia MArtínez Vallejo. Granada
Presentaciones lomce-primaria. Antonia MArtínez Vallejo. GranadaAlfonso Cortes Alegre
 
Orden de currículo de Aragón. Junio 2014
Orden de currículo de Aragón. Junio 2014Orden de currículo de Aragón. Junio 2014
Orden de currículo de Aragón. Junio 2014Alfonso Cortes Alegre
 
Meristation: Análisis de un cibermedio
Meristation: Análisis de un cibermedioMeristation: Análisis de un cibermedio
Meristation: Análisis de un cibermediothewindoor
 
La violencia en el fútbol español
La violencia en el fútbol españolLa violencia en el fútbol español
La violencia en el fútbol españoltuchens
 
"Estudio de Hábitos del Usuario de Internet en México 2015" AMIPCI
"Estudio de Hábitos del Usuario de Internet en México 2015" AMIPCI"Estudio de Hábitos del Usuario de Internet en México 2015" AMIPCI
"Estudio de Hábitos del Usuario de Internet en México 2015" AMIPCILucia Charles
 
Competencia digital y Alfabetizacion 2.0
Competencia digital y Alfabetizacion 2.0Competencia digital y Alfabetizacion 2.0
Competencia digital y Alfabetizacion 2.0Manuel Area
 
Las tics como mediadoras de los procesos de aprendizaje leon
Las tics  como mediadoras de los  procesos de aprendizaje leonLas tics  como mediadoras de los  procesos de aprendizaje leon
Las tics como mediadoras de los procesos de aprendizaje leonUniversidad Veracruzana
 
Audiencias activas: Análisis del doble check azul de WhatsApp
Audiencias activas: Análisis del doble check azul de WhatsApp Audiencias activas: Análisis del doble check azul de WhatsApp
Audiencias activas: Análisis del doble check azul de WhatsApp Digitalytal Unizar
 
Práctica 1 Comunicación digital
Práctica 1 Comunicación digitalPráctica 1 Comunicación digital
Práctica 1 Comunicación digitalLeyre Ruiz Acín
 
De las TIC a las TAC
De las TIC a las TAC De las TIC a las TAC
De las TIC a las TAC Marta Urdiain
 
Uso educativo de los blogs
Uso educativo de los blogsUso educativo de los blogs
Uso educativo de los blogsIsidro Vidal
 
Qué es una linea de tiempo
Qué es una linea de tiempoQué es una linea de tiempo
Qué es una linea de tiempogeomaster9
 

Destacado (20)

Tres bandas integración competencias clave. alfonso cortés alegre
Tres bandas integración competencias clave. alfonso cortés alegreTres bandas integración competencias clave. alfonso cortés alegre
Tres bandas integración competencias clave. alfonso cortés alegre
 
El nuevo currículo lomce y el trabajo por competencias. alfonso cortés. mayo1...
El nuevo currículo lomce y el trabajo por competencias. alfonso cortés. mayo1...El nuevo currículo lomce y el trabajo por competencias. alfonso cortés. mayo1...
El nuevo currículo lomce y el trabajo por competencias. alfonso cortés. mayo1...
 
Lomce Guia del Departamento de Educación de Aragón.
Lomce Guia del Departamento de Educación de Aragón.Lomce Guia del Departamento de Educación de Aragón.
Lomce Guia del Departamento de Educación de Aragón.
 
A. las competencias basicas- alfonso cortés 2014.2
A. las competencias basicas- alfonso cortés 2014.2A. las competencias basicas- alfonso cortés 2014.2
A. las competencias basicas- alfonso cortés 2014.2
 
Programas educativos europeos. Máster E.S. UPNA_201016
Programas educativos europeos. Máster E.S. UPNA_201016Programas educativos europeos. Máster E.S. UPNA_201016
Programas educativos europeos. Máster E.S. UPNA_201016
 
Trabajo pasteleria
Trabajo pasteleriaTrabajo pasteleria
Trabajo pasteleria
 
Presentaciones lomce-primaria. Antonia MArtínez Vallejo. Granada
Presentaciones lomce-primaria. Antonia MArtínez Vallejo. GranadaPresentaciones lomce-primaria. Antonia MArtínez Vallejo. Granada
Presentaciones lomce-primaria. Antonia MArtínez Vallejo. Granada
 
Orden de currículo de Aragón. Junio 2014
Orden de currículo de Aragón. Junio 2014Orden de currículo de Aragón. Junio 2014
Orden de currículo de Aragón. Junio 2014
 
Cte planea 2015
Cte planea 2015Cte planea 2015
Cte planea 2015
 
Meristation: Análisis de un cibermedio
Meristation: Análisis de un cibermedioMeristation: Análisis de un cibermedio
Meristation: Análisis de un cibermedio
 
La violencia en el fútbol español
La violencia en el fútbol españolLa violencia en el fútbol español
La violencia en el fútbol español
 
"Estudio de Hábitos del Usuario de Internet en México 2015" AMIPCI
"Estudio de Hábitos del Usuario de Internet en México 2015" AMIPCI"Estudio de Hábitos del Usuario de Internet en México 2015" AMIPCI
"Estudio de Hábitos del Usuario de Internet en México 2015" AMIPCI
 
Competencia digital y Alfabetizacion 2.0
Competencia digital y Alfabetizacion 2.0Competencia digital y Alfabetizacion 2.0
Competencia digital y Alfabetizacion 2.0
 
Las tics como mediadoras de los procesos de aprendizaje leon
Las tics  como mediadoras de los  procesos de aprendizaje leonLas tics  como mediadoras de los  procesos de aprendizaje leon
Las tics como mediadoras de los procesos de aprendizaje leon
 
Audiencias activas: Análisis del doble check azul de WhatsApp
Audiencias activas: Análisis del doble check azul de WhatsApp Audiencias activas: Análisis del doble check azul de WhatsApp
Audiencias activas: Análisis del doble check azul de WhatsApp
 
Práctica 1 Comunicación digital
Práctica 1 Comunicación digitalPráctica 1 Comunicación digital
Práctica 1 Comunicación digital
 
De las TIC a las TAC
De las TIC a las TAC De las TIC a las TAC
De las TIC a las TAC
 
Acuerdo 592 (resumen)
Acuerdo 592 (resumen)Acuerdo 592 (resumen)
Acuerdo 592 (resumen)
 
Uso educativo de los blogs
Uso educativo de los blogsUso educativo de los blogs
Uso educativo de los blogs
 
Qué es una linea de tiempo
Qué es una linea de tiempoQué es una linea de tiempo
Qué es una linea de tiempo
 

Similar a Tutorial para crear un blog con Blogger

Similar a Tutorial para crear un blog con Blogger (20)

Tutorial avanzado blog
Tutorial avanzado blogTutorial avanzado blog
Tutorial avanzado blog
 
Tutorial blog avanzado
Tutorial blog avanzadoTutorial blog avanzado
Tutorial blog avanzado
 
Como crear-un-blog
Como crear-un-blogComo crear-un-blog
Como crear-un-blog
 
Tutorial blogger
Tutorial bloggerTutorial blogger
Tutorial blogger
 
Actividad 13
Actividad 13Actividad 13
Actividad 13
 
Manual blogger
Manual bloggerManual blogger
Manual blogger
 
Tutorial blogger
Tutorial bloggerTutorial blogger
Tutorial blogger
 
Tutorial blogger
Tutorial bloggerTutorial blogger
Tutorial blogger
 
Tutorial blogger
Tutorial bloggerTutorial blogger
Tutorial blogger
 
Blog blogger
Blog bloggerBlog blogger
Blog blogger
 
Guia para crear bloggers
Guia para crear bloggersGuia para crear bloggers
Guia para crear bloggers
 
Tutorial: Crear un blog en blogger
Tutorial: Crear un blog en bloggerTutorial: Crear un blog en blogger
Tutorial: Crear un blog en blogger
 
Blog blogger
Blog bloggerBlog blogger
Blog blogger
 
Blog blogger
Blog bloggerBlog blogger
Blog blogger
 
Como crear un blog en blogger
Como crear un blog en bloggerComo crear un blog en blogger
Como crear un blog en blogger
 
Blog blogger
Blog bloggerBlog blogger
Blog blogger
 
blogger
bloggerblogger
blogger
 
Blog blogger
Blog bloggerBlog blogger
Blog blogger
 
Blog blogger
Blog bloggerBlog blogger
Blog blogger
 
Como crear un blog en blogger.com
Como crear un blog en blogger.comComo crear un blog en blogger.com
Como crear un blog en blogger.com
 

Más de cascadas

Cuestionarios tipos de preguntas
Cuestionarios tipos de preguntasCuestionarios tipos de preguntas
Cuestionarios tipos de preguntascascadas
 
Conociendo Windows 10
Conociendo Windows 10Conociendo Windows 10
Conociendo Windows 10cascadas
 
Mini-Tutorial de aspectos importantes de Moodle 2.6
Mini-Tutorial de aspectos importantes de Moodle 2.6Mini-Tutorial de aspectos importantes de Moodle 2.6
Mini-Tutorial de aspectos importantes de Moodle 2.6cascadas
 
Como insertar una presentación automática de fotos en un blog, wiki, etc
Como insertar una presentación automática de fotos en un blog, wiki, etcComo insertar una presentación automática de fotos en un blog, wiki, etc
Como insertar una presentación automática de fotos en un blog, wiki, etccascadas
 
COMO CREAR UN MENÚ DESPLEGABLE EN TU BLOG
COMO CREAR UN MENÚ DESPLEGABLE EN TU BLOGCOMO CREAR UN MENÚ DESPLEGABLE EN TU BLOG
COMO CREAR UN MENÚ DESPLEGABLE EN TU BLOGcascadas
 
Tutorial como crear un cuestionario en moodle
Tutorial como crear un cuestionario en moodleTutorial como crear un cuestionario en moodle
Tutorial como crear un cuestionario en moodlecascadas
 
Tutorial notebook
Tutorial notebookTutorial notebook
Tutorial notebookcascadas
 
SOLUCIÓN A CÓDIGO DE ERROR: 0X80070002
SOLUCIÓN A CÓDIGO DE ERROR: 0X80070002SOLUCIÓN A CÓDIGO DE ERROR: 0X80070002
SOLUCIÓN A CÓDIGO DE ERROR: 0X80070002cascadas
 
Apagado de windows 7 automáticamente
Apagado de windows 7 automáticamenteApagado de windows 7 automáticamente
Apagado de windows 7 automáticamentecascadas
 
TUTORIAL PARA CREAR UN AULA VIRTUAL
TUTORIAL PARA CREAR UN AULA VIRTUALTUTORIAL PARA CREAR UN AULA VIRTUAL
TUTORIAL PARA CREAR UN AULA VIRTUALcascadas
 

Más de cascadas (10)

Cuestionarios tipos de preguntas
Cuestionarios tipos de preguntasCuestionarios tipos de preguntas
Cuestionarios tipos de preguntas
 
Conociendo Windows 10
Conociendo Windows 10Conociendo Windows 10
Conociendo Windows 10
 
Mini-Tutorial de aspectos importantes de Moodle 2.6
Mini-Tutorial de aspectos importantes de Moodle 2.6Mini-Tutorial de aspectos importantes de Moodle 2.6
Mini-Tutorial de aspectos importantes de Moodle 2.6
 
Como insertar una presentación automática de fotos en un blog, wiki, etc
Como insertar una presentación automática de fotos en un blog, wiki, etcComo insertar una presentación automática de fotos en un blog, wiki, etc
Como insertar una presentación automática de fotos en un blog, wiki, etc
 
COMO CREAR UN MENÚ DESPLEGABLE EN TU BLOG
COMO CREAR UN MENÚ DESPLEGABLE EN TU BLOGCOMO CREAR UN MENÚ DESPLEGABLE EN TU BLOG
COMO CREAR UN MENÚ DESPLEGABLE EN TU BLOG
 
Tutorial como crear un cuestionario en moodle
Tutorial como crear un cuestionario en moodleTutorial como crear un cuestionario en moodle
Tutorial como crear un cuestionario en moodle
 
Tutorial notebook
Tutorial notebookTutorial notebook
Tutorial notebook
 
SOLUCIÓN A CÓDIGO DE ERROR: 0X80070002
SOLUCIÓN A CÓDIGO DE ERROR: 0X80070002SOLUCIÓN A CÓDIGO DE ERROR: 0X80070002
SOLUCIÓN A CÓDIGO DE ERROR: 0X80070002
 
Apagado de windows 7 automáticamente
Apagado de windows 7 automáticamenteApagado de windows 7 automáticamente
Apagado de windows 7 automáticamente
 
TUTORIAL PARA CREAR UN AULA VIRTUAL
TUTORIAL PARA CREAR UN AULA VIRTUALTUTORIAL PARA CREAR UN AULA VIRTUAL
TUTORIAL PARA CREAR UN AULA VIRTUAL
 

Último

PLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADO
PLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADOPLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADO
PLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADOMARIBEL DIAZ
 
Actividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 EducacionActividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 Educacionviviantorres91
 
Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.monthuerta17
 
HISPANIDAD - La cultura común de la HISPANOAMERICA
HISPANIDAD - La cultura común de la HISPANOAMERICAHISPANIDAD - La cultura común de la HISPANOAMERICA
HISPANIDAD - La cultura común de la HISPANOAMERICAJesus Gonzalez Losada
 
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...Carol Andrea Eraso Guerrero
 
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).hebegris04
 
BITÁCORA DE ESTUDIO DE PROBLEMÁTICA. TUTORÍA V. PDF 2 UNIDAD.pdf
BITÁCORA DE ESTUDIO DE PROBLEMÁTICA. TUTORÍA V. PDF 2 UNIDAD.pdfBITÁCORA DE ESTUDIO DE PROBLEMÁTICA. TUTORÍA V. PDF 2 UNIDAD.pdf
BITÁCORA DE ESTUDIO DE PROBLEMÁTICA. TUTORÍA V. PDF 2 UNIDAD.pdfsolidalilaalvaradoro
 
4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE 9-4-24 (1).docx
4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE     9-4-24 (1).docx4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE     9-4-24 (1).docx
4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE 9-4-24 (1).docxMagalyDacostaPea
 
PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2
PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2
PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2Eliseo Delgado
 
Fichas de matemática DE PRIMERO DE SECUNDARIA.pdf
Fichas de matemática DE PRIMERO DE SECUNDARIA.pdfFichas de matemática DE PRIMERO DE SECUNDARIA.pdf
Fichas de matemática DE PRIMERO DE SECUNDARIA.pdfssuser50d1252
 
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO YESSENIA 933623393 NUEV...
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO  YESSENIA 933623393 NUEV...IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO  YESSENIA 933623393 NUEV...
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO YESSENIA 933623393 NUEV...YobanaZevallosSantil1
 
ENSEÑAR ACUIDAR EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
ENSEÑAR ACUIDAR  EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.ENSEÑAR ACUIDAR  EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
ENSEÑAR ACUIDAR EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.karlazoegarciagarcia
 
Amor o egoísmo, esa es la cuestión por definir.pdf
Amor o egoísmo, esa es la cuestión por definir.pdfAmor o egoísmo, esa es la cuestión por definir.pdf
Amor o egoísmo, esa es la cuestión por definir.pdfAlejandrino Halire Ccahuana
 
DIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJO
DIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJODIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJO
DIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJOLeninCariMogrovejo
 
5° Proyecto 13 Cuadernillo para proyectos
5° Proyecto 13 Cuadernillo para proyectos5° Proyecto 13 Cuadernillo para proyectos
5° Proyecto 13 Cuadernillo para proyectosTrishGutirrez
 
NUEVO PLAN Y PROGRAMAS DE ESTUDIO 2022.pdf
NUEVO PLAN Y PROGRAMAS DE ESTUDIO  2022.pdfNUEVO PLAN Y PROGRAMAS DE ESTUDIO  2022.pdf
NUEVO PLAN Y PROGRAMAS DE ESTUDIO 2022.pdfEDNAMONICARUIZNIETO
 

Último (20)

PLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADO
PLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADOPLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADO
PLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADO
 
Aedes aegypti + Intro to Coquies EE.pptx
Aedes aegypti + Intro to Coquies EE.pptxAedes aegypti + Intro to Coquies EE.pptx
Aedes aegypti + Intro to Coquies EE.pptx
 
Unidad 2 | Teorías de la Comunicación | MCDIU
Unidad 2 | Teorías de la Comunicación | MCDIUUnidad 2 | Teorías de la Comunicación | MCDIU
Unidad 2 | Teorías de la Comunicación | MCDIU
 
Actividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 EducacionActividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 Educacion
 
Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.
 
HISPANIDAD - La cultura común de la HISPANOAMERICA
HISPANIDAD - La cultura común de la HISPANOAMERICAHISPANIDAD - La cultura común de la HISPANOAMERICA
HISPANIDAD - La cultura común de la HISPANOAMERICA
 
¿Amor o egoísmo? Esa es la cuestión.pptx
¿Amor o egoísmo? Esa es la cuestión.pptx¿Amor o egoísmo? Esa es la cuestión.pptx
¿Amor o egoísmo? Esa es la cuestión.pptx
 
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
 
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
 
Sesión ¿Amor o egoísmo? Esa es la cuestión
Sesión  ¿Amor o egoísmo? Esa es la cuestiónSesión  ¿Amor o egoísmo? Esa es la cuestión
Sesión ¿Amor o egoísmo? Esa es la cuestión
 
BITÁCORA DE ESTUDIO DE PROBLEMÁTICA. TUTORÍA V. PDF 2 UNIDAD.pdf
BITÁCORA DE ESTUDIO DE PROBLEMÁTICA. TUTORÍA V. PDF 2 UNIDAD.pdfBITÁCORA DE ESTUDIO DE PROBLEMÁTICA. TUTORÍA V. PDF 2 UNIDAD.pdf
BITÁCORA DE ESTUDIO DE PROBLEMÁTICA. TUTORÍA V. PDF 2 UNIDAD.pdf
 
4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE 9-4-24 (1).docx
4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE     9-4-24 (1).docx4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE     9-4-24 (1).docx
4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE 9-4-24 (1).docx
 
PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2
PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2
PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2
 
Fichas de matemática DE PRIMERO DE SECUNDARIA.pdf
Fichas de matemática DE PRIMERO DE SECUNDARIA.pdfFichas de matemática DE PRIMERO DE SECUNDARIA.pdf
Fichas de matemática DE PRIMERO DE SECUNDARIA.pdf
 
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO YESSENIA 933623393 NUEV...
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO  YESSENIA 933623393 NUEV...IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO  YESSENIA 933623393 NUEV...
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO YESSENIA 933623393 NUEV...
 
ENSEÑAR ACUIDAR EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
ENSEÑAR ACUIDAR  EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.ENSEÑAR ACUIDAR  EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
ENSEÑAR ACUIDAR EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
 
Amor o egoísmo, esa es la cuestión por definir.pdf
Amor o egoísmo, esa es la cuestión por definir.pdfAmor o egoísmo, esa es la cuestión por definir.pdf
Amor o egoísmo, esa es la cuestión por definir.pdf
 
DIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJO
DIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJODIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJO
DIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJO
 
5° Proyecto 13 Cuadernillo para proyectos
5° Proyecto 13 Cuadernillo para proyectos5° Proyecto 13 Cuadernillo para proyectos
5° Proyecto 13 Cuadernillo para proyectos
 
NUEVO PLAN Y PROGRAMAS DE ESTUDIO 2022.pdf
NUEVO PLAN Y PROGRAMAS DE ESTUDIO  2022.pdfNUEVO PLAN Y PROGRAMAS DE ESTUDIO  2022.pdf
NUEVO PLAN Y PROGRAMAS DE ESTUDIO 2022.pdf
 

Tutorial para crear un blog con Blogger

  • 1. TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor: Nacho Segovia TUTORIAL DE BLOGGER (Nacho Segovia) 1
  • 2. 1. ¿Qué es un blog?.….............................................................................................................. 3 2. Tipos de blogs. .................................................................................................................... 3 3. Partes de un blog ................................................................................................................ 4 4. Estructura de una entrada o post …….................................................................................. 5 5. Blogger ………........................................................................................................................ 6 5.1. Crear una cuenta gmail ............................................................................................... 6 5.2. Entrando en Blogger …………………..…………………………………………………………………………. 7 5.3. Asignar un nombre al Blog .......................................................................................... 9 6. Crear una entrada o post .................................................................................................... 10 6.1. Añadir imágenes o vídeos …………………………………....................................................... 12 6.2. Añadir enlaces ............................................................................................................ 16 6.3. Comentarios de los lectores …………………………………..…………………………………………….. 17 7. Configuración del blog:Lo básico, Entradas y comentarios, Móvil y correo electrónico, Idioma y formato, Preferencias para motores y Otros. …………….……………………………………... 18 7.1. Editar HTML …………………………………..…………………………………………………………………… 30 8. Diseño del blog……………………………………………………………………………………………………………… 32 8.1. Como agregar o quitar complementos a la página………………………………………………. 32 9. Estadísticas Visión general …………………………………………………………………………………………… 39 10. Google + …………………………………………………………………………………………………………………….. 40 11. Comentarios publicados …………………………………………………………………………………………….. 40 12. Páginas ............................................................................................................................. 41 13. Configuración de las entradas……………………………………………………………………………………… 42 14. Usos avanzados de Blogger…………………………………………………………………………………………. 43 14.1. Añadir aplicaciones 2.0 en nuestro blog …………………………………………………………… 43 14.2. Insertar archivos pdf, doc, xls, ppt, odf o rdf …………………………………………………….. 44 14.3. Insertar un Flash en el blog ………………………………………………………………………………. 46 14.4. Insertar audio en el blog …………………………………………………………………………………… 48 14.5. Agregar RSS al tu blog …………………………………………………………………………………….… 55 14.6. Agregar gadget de suscripcion al blog……………………………………………………………….. 57 14.7. Agregar botón ‘volver al inicio’ …………………………………………………………………………. 57 14.8. Agregar «Leer más» en una entrada…………………………………………………………………… 58 14.9. Cómo poner un menú horizontal desplegable HTML en Blogger………………………… 59 14.10. Como insertar Tablas en Blogger……………………………………………………………………….. 75 14.11. Como instalar Google Analytics …………………………………………………………………………. 77 14.12. Como inserrtar un Voki ……………………………………………………………………………………… 82 14.13. Como poner un chat en tu blog………………………………………………………………………….. 83 14.14. Como poner los iconos de las redes sociales en tu blog ……………………………….……. 84 15 Glosario de términos típicos en un blog ............................................................................. 85 2
  • 3. 1. ¿Qué es un blog? Un blog es un sitio Web en donde uno o varios autores desarrollan contenidos. Los blogs también se conocen como cuaderno de bitácora. La información se actualiza periódicamente y, los textos se plasman en forma cronológica; primero aparece el más recientemente escrito. En cada artículo de un blog, los lectores tienen la capacidad de dejar sus comentarios. A su vez, estos pueden ser contestados por el autor de manera que se va creando un diálogo. Nos sirven para lanzar mensajes que pueden llegar a mucha gente. Nos sirve para investigar sobre algún tema en especial, con fines educativos, comunicarnos con amigos. Se pueden utilizar con fines personales o profesionales. 2. Tipos de blogs • Blog Personal • Blog Temático • Blog Profesional • Blog Corporativo Se han dado nombres a algunos blogs a partir de sus temáticas: - Audioblogs. Dedicados a las galerías de ficheros de audio. - Educablogs. Dedicados a la educación. - Fotoblogs. Dedicados a las galerías de imágenes. - Videoblogs. Dedicados a las galerías de ficheros de video. TUTORIAL DE BLOGGER (Nacho Segovia) 3
  • 4. 3. • Partes de un Blog: Se dividen en tres partes: La cabecera o título del Blog. Cabecera • El menú lateral , en el que, además de otros posibles elementos suele aparecer un listado de categorías. • El post o entrada menú lateral entrada o post TUTORIAL DE BLOGGER (Nacho Segovia) 4
  • 5. 4. Estructura de una entrada: puede ser variada, pero suele tener unos elementos comunes, como: Fecha · La fecha de publicación del post Título · El título del post y la categoría a la que pertenece . · El cuerpo de la entrada, donde puede ir una imagen, vídeo… Cuerpo · Comentario. Si el autor del post permita a los usuarios dejar un comentario, aparecerá un enlace para poder hacerlo . Comentario TUTORIAL DE BLOGGER (Nacho Segovia) 5
  • 6. 5. Blogger : para poder usar blogger necesitamos una cuenta de correo gmail. Si alguien no sabe como creársela puede ver este video tutorial que nos enseña paso a paso como hacerlo. 5.1. Crear una cuenta Gmail También lo tienes en youtube, en este enlace: vídeo https://www.youtube.com/watch?v=BloMF6HPFms TUTORIAL DE BLOGGER (Nacho Segovia) 6
  • 7. 5.2. Entrando en Blogger. Puedes entrar de dos maneras: a) desde la página de Google (www.google.es) accediendo al enlace de Aplicaciones y haciendo clic en la opción Más y aparece el icono de Blogger b) Escribiendo en la barra de direcciones de nuestro navegador (recomiendo usar Chrome) : https://www.blogger.com/ Elige la opción que te sea más fácil. A continuación aparecerá una ventana para iniciar sesión; simplemente pinchamos en Iniciar sesión: Nombre y apellidos que introdujimos al crear la cuenta Nuestra dirección de correo Pinchamos en Iniciar sesión TUTORIAL DE BLOGGER (Nacho Segovia) 7
  • 8. Esta es la siguiente ventana que nos aparece: Simplemente pinchamos en el botón « Continuar en Blogger « TUTORIAL DE BLOGGER (Nacho Segovia) 8
  • 9. Si ya hemos creado algún blog, aquí aparecería. En nuestro caso pinchamos en ‘Nuevo Blog ’ 5.3. Asignar un nombre al Blog. En la siguiente ventana que nos aparecerá , introducimos el título de nuestro blog. Tenemos que poner una dirección, intentando que esté relacionada con nuestra temática (el Propio Blogger nos indicará si está disponible o No). Y por último elige una plantilla. Más tarde podrás cambiarla y personalizar el blog. Pulsa en Crear blog TUTORIAL DE BLOGGER (Nacho Segovia) 9
  • 10. Y nuestro blog está creado, listo para hacer entradas… 6. Crear una entrada. Para hacer nuestra primera entrada pinchamos en el icono del lápiz y nos aparece la ventana con el editor para poner un título a la entrada, escribir el mensaje y más opciones que veremos más adelante como insertar una imagen que simplemente requiere tener la imagen guardada y pinchar en el icono ‘ Inserta imagen’… Por último pinchar en ‘Publicar’ TUTORIAL DE BLOGGER (Nacho Segovia) 10
  • 11. Cuando pinchamos en Publicar aparece una ventana para compartir nuestra entrada en Google+ . De momento vamos a obviar esto y damos en ‘Cancelar’ Esta es la ventana que nos aparece tras pulsar en publicar Pinchamos en Ver blog y veremos nuestro blog TUTORIAL DE BLOGGER (Nacho Segovia) 11
  • 12. Así ha quedado nuestro blog : Tened en cuenta que no le hemos puesto un fondo, ni una cabecera, ni dimensiones… Es decir falta el DISEÑO 6.1. Añadir una imagen o un vídeo a nuestra entrada Pinchamos en Acceder (vértice superior derecho) Ahora en 1 entrada Ahora en nuestra entrada Y volvemos al editor del principio TUTORIAL DE BLOGGER (Nacho Segovia) 12
  • 13. Pinchamos en el icono Insertar imagen Ahora en Elegir archivos Nos aparece la ventana para buscar la imagen. La seleccionamos y aparece cargada para añadirla. Pulsamos en Añadir las imágenes seleccionadas Y veremos nuestra entrada con la imagen que hemos añadido: Simplemente con pinchar en la imagen, sin soltar, la podemos arrastar y colocar donde deseemos. También nos aparecen opciones para cambiarla el tamaño, alinearla… TUTORIAL DE BLOGGER (Nacho Segovia) 13
  • 14. Procederemos igual para insertar un vídeo, aunque hay otras formas de poner un vídeo en nuestro blog Pinchamos esta vez en el icono Insertar un vídeo Seleccionamos el vídeo para subir (en este caso guardado en el disco duro). Tardará un poco, en función de la duración y del formato en que lo tengamos. Y ya tendremos nuestro vídeo en la entrada. Bastará con pinchar en Actualizar Y Ver blog Otra forma más simple, aunque no siempre disponible, es pinchar debajo del vídeo en Compartir y si aparece debajo el icono de Blogger y tenemos nuestro blog abierto, simplemente pinchamos en el icono y nos redirige a nuestro blog con la nueva entrada y el video insertado, listo para publicarlo: TUTORIAL DE BLOGGER (Nacho Segovia) 14
  • 15. Ya tenemos nuestra primera entrada con una imagen insertada y un vídeo: TUTORIAL DE BLOGGER (Nacho Segovia) 15
  • 16. 6.2. Añadir enlaces Para crear un vínculo y descargar archivos, acceder a URL, contactar con correos etc. deberemos seleccionar el texto o imagen a la que adjudicaremos el Vínculo, presionar en Enlace y rellenar con la dirección a la que nos llevará al hacer clic sobre el . Texto seleccionado Pinchamos en Enlace Se abre una ventana para introducir la URL donde queremos dirigir al pinchar en el texto seleccionado. También podemos redirigirlo a una dirección de correo. Os aconsejo que activéis la casilla «abrir este enlace en una ventana nueva». De esta manera el lector no se sale del blog… Por último , click en Aceptar, Actualizar y Ver blog TUTORIAL DE BLOGGER (Nacho Segovia) 16
  • 17. 6.3. Comentarios de los lectores A no ser que solo queramos dar información en nuestro blog, es interesante la opción de permitir dejar comentarios a los lectores. Para ello, pinchamos en Acceder , en nuestra entrada (de momento solo tenemos una entrada) y así llegamos al editor de la entada. A la derecha tenemos el botón Opciones Pinchamos en él y se despliegan las posibilidades de comentarios y de redacción de estos. Click en Listo y ya está. TUTORIAL DE BLOGGER (Nacho Segovia) 17
  • 18. 7. Configuración del blog. Empezamos como siempre pinchando en Acceder (vértice superior derecho); veremos las entradas que hayamos creado y a la derecha de estas, el botón con una flecha indicando hacia abajo, que es Más opciones. Más opciones Pulsamos en esta y aparece un menú desplegable. Pinchamos en la opción Configuración TUTORIAL DE BLOGGER (Nacho Segovia) 18
  • 19. Entramos en una página donde tenemos control de casi todo. Ahora nos vamos a centrar en Configuración y sus posibilidades TUTORIAL DE BLOGGER (Nacho Segovia) 19
  • 20. Lo básico : podemos, - Editar el título y cambiarlo - Añadir ahora la descripción o cambiarla… - Dejar que nuestro blog sea visible o invisible en la búsqueda en Internet - Dirección del blog: Aquí cambiaremos la dirección de nuestro blog por otra, si está disponible. - Permisos: Autores del blog: Podemos dejar que publiquen nuestros compañeros o alumnos. Nosotros seríamos los administradores y ellos serían los autores del blog. El administrador tiene acceso total al blog. Puede hacer cambios en el diseño y la configuración; crear, editar y borrar cualquier entrada y cualquier comentario. Un autor no tiene acceso a la configuración. Puede crear, editar y borrar sus entradas o los comentarios a sus entradas. Para crear autores sólo tenemos que hacer clic en AÑADIR AUTORES y escribir las direcciones separadas de comas o cogerlas de nuestros contactos de Gmail. TUTORIAL DE BLOGGER (Nacho Segovia) 20
  • 21. Lectura del blog: Aquí decimos quien puede ver y leer nuestro blog. Cualquiera: cualquiera puede acceder a nuestro blog. Sólo a los usuarios que yo elija: sólo podrán leerlo los usuarios que yo elija, pero antes tendrán que identificarse que son ellos. Opción interesante cuando queremos proteger el contenido de nuestro blog. Únicamente autores del blog: los autores serán los únicos que puedan ver el contenido, previa identificación. Entradas y comentarios: Mostrar un máximo de: cuantas entradas por página queremos mostrar Plantilla de las entradas: Apenás se usa... Mostrar imágenes con Lightbox: una forma de ver las imágenes. Recomiendo que sí. Ubicación de los comentarios: lugar donde queremos que aparezca la ventana de comentarios. ¿Quién puede comentar?:aconsejo: Cualquiera. Moderación de comentarios: Se especifica cuando se moderan los comentarios. Si se habilita siempre, aparece una ventana para poner un correo para que Blogger te avise de que existe un comentario a moderar. Mostrar verificación de palabras: dejarlo en no , si moderas comentarios, y en sí , si no los moderas. Mostrar Backlinks: Enlaces en los lugares que comparten esa entrada. Mensaje del formulario de comentarios: para dejar un texto que lea quien vaya a hacer un comentario. Hay que GUARDAR CONFIGURACIÓN (arriba a la derecha). TUTORIAL DE BLOGGER (Nacho Segovia) 21
  • 22. Móvil y correo electrónico : Publicar entradas mediante correo electrónico: es una opción para permitir a la gente que pueda publicar mandando un correo electrónico. Me parece un poco enrrevesado… Correo para notificar los comentarios: Podemos escribir hasta 10 direcciones de correo que recibirán un correo cada vez que alguien deje un comentario en nuestro blog. No olvidéis pinchar en GUARDAR CONFIGURACIÓN. TUTORIAL DE BLOGGER (Nacho Segovia) 22
  • 23. Idioma y formato Idioma: Idioma del blog. Habilitar transliteración: Dejar inhabilitada. Zona horaria: No olvidar configurar en nuestra zona horaria. Formato de cabecera de fecha: Forma en la que deseamos ver la fecha de las entradas. Formato de hora: Forma en la que deseamos ver la hora. Formato de hora de los comentarios: Forma en la que deseamos ver la hora de los comentarios. No olvidéis pinchar en GUARDAR CONFIGURACIÓN TUTORIAL DE BLOGGER (Nacho Segovia) 23
  • 24. Estas opciones las dejaría tal y como vienen por defecto La única opción que encuentro útil es Herramientas del blog Desde aquí podemos importar otro blog en este, exportar este para instalarlo en otro sitio (también lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente). TUTORIAL DE BLOGGER (Nacho Segovia) 24
  • 25. 7. Diseño del blog. tenemos que ir a la pestaña PLANTILLA. Nos aparecen numerosos tipos de Plantillas (sencillo, vistas dinámicas, Picture window, fantástico S.A., etc) Pinchamos en Personalizar TAMBIÉN PODEMOS ACCEDER AL DISEÑO DESDE LA OPCIÓN DISEÑO, ENCIMA DE PLANTILLA TUTORIAL DE BLOGGER (Nacho Segovia) 25
  • 26. Desde aquí podremos cambiar la PLANTILLA, el FONDO, los AJUSTES DE ANCHO, el DISEÑO y algunos ajustes AVANZADOS. TUTORIAL DE BLOGGER (Nacho Segovia) 26
  • 27. Plantilla: Escogemos una plantilla o luego una subplantilla. Siempre podemos ver cómo va quedando en la parte inferior. Para guardar, tenemos que dar a APLICAR AL BLOG. Podemos volver en cualquier momento al escritorio de Blogger con el botón Volver a Blogger. Fondo: Escogemos una imagen de fondo para nuestro blog y la gama de colores que va a tener. TUTORIAL DE BLOGGER (Nacho Segovia) 27
  • 28. Para seleccionar nuevos fondos o insertar el nuestro, tenemos que ir a la flecha de la derecha de la imagen seleccionado en ese momento y se desplegará la galería. Seleccionamos, click en Listo y Aplicamos al blog TUTORIAL DE BLOGGER (Nacho Segovia) 28
  • 29. Ajustar ancho: Esta opción configura el ancho de la zona de entradas y de la columna o columnas. Diseño: aquí elegimos la apariencia del blog: donde van a estar las columna con los complementos o gadget y cómo va a ser el pie de página. Es recomendable colocar la columna a la derecha. No olvidéis siempre APLICAR AL BLOG. TUTORIAL DE BLOGGER (Nacho Segovia) 29
  • 30. Avanzado: En la opción avanzado podemos hacer ajustes más detallados de tipo de letra y colores. Recordad que siempre los podemos previsualizar abajo. Una vez configurado todo, volvemos al escritorio con el botón VOLVER A BLOGGER. 7.1. EDITAR HTML: (solo para avanzados) En la opción Plantilla encontramos el editor HTML. Aquí podemos modificar los parámetros que queramos, si sabemos lenguaje HTML, podemos cargar una plantilla diseñada para Blogger que hayamos encontrado en internet o copiar códigos que hay en internet para hacer/poner diferentes cosas en nuestro blog. TUTORIAL DE BLOGGER (Nacho Segovia) 30
  • 31. Vamos a poner una plantilla a través de HTML, de las que se encuentran en Internet. Para cambiar la plantilla completa a nuestro blog iremos a internet, buscaremos “Plantillas para Blogger” y después de descargarla en nuestro ordenador (se descarga en formato *.rar o *.zip), descomprimirla Una vez descomprimido, veremos un archivo XML , lo abrimos con WordPad o con el bloc de notas y lo pegamos en el cuadro de HTML de Blogger sustituyendo así el que hubiera. Una página interesante con plantillas para Blogger es http://btemplates.com/ Ejemplo: Archivo que me he descargado de esta página: Una vez descomprimido, vemos el archivo XML. Lo abro con WordPad y veo el código HTML . Lo copio y lo pego en la caja de HTML de Blogger Puedo hacer una «Vista previa de la plantilla» o directamente doy a Guardar plantilla TUTORIAL DE BLOGGER (Nacho Segovia) 31
  • 32. Esta sería una vista previa de la nueva plantilla copiada con HTML: 8. Diseño 8.1. Cómo agregar o quitar complementos a la página Lo último que tenemos que hacer para terminar el diseño de nuestra página es poner o quitar elementos a esta. Esos elementos se llaman GADGET (herramientas) y los podemos añadir o eliminar desde la opción DISEÑO. TUTORIAL DE BLOGGER (Nacho Segovia) 32
  • 33. Por defecto suelen aparecer dos gadgets que son: Archivos del blog (las entradas del blog), y Datos personales (los datos del autor del blog).Todo gadget lo podemos editar o eliminar (eliminar aparece cuando lo editamos). Los gadget que aparecen en una página son los que les quiere el autor del blog. Es una elección muy personal. Hay tres que yo considero importantes: Cuadro de búsqueda: Importante para que se puedan encontrar cualquier entrada dentro del blog.Para agregar uno, pinchamos en Y aparece la ventana de los gadgets disponibles. Buscamos el que queremos y pinchamos en el símbolo de para añadirlo y veremos otra ventana para Configurar el cuadro de busqueda: TUTORIAL DE BLOGGER (Nacho Segovia) 33
  • 34. Enlaces de suscripción: así tus lectores se pueden suscibir más fácilmente Configuramos el título Etiquetas: Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar rápidamente con el gadget de etiquetas. Configuramos las etiquetas TUTORIAL DE BLOGGER (Nacho Segovia) 34
  • 35. Son también muy interesantes los gadgets: HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con código HTML), Páginas (para poder ver las páginas fijas de nuestro blog) y Traductor (permite a las personas que te visitan traducir tu blog a distintos idiomas.). Los gadgets se pueden mover en cualquier momento con sólo coger y arrastrar a cualquiera de las secciones en las que dice gadget . También se puede configurar el apartado Entradas del blog. Pinchando en Editar , podemos configurar las entradas del blog TUTORIAL DE BLOGGER (Nacho Segovia) 35
  • 36. Dentro de DISEÑO , ya hemos visto como añadir un gadget. Veamos como agregar un favicon. Un FAVICON o favorite icon, es un pequeño icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregará a sus favoritos. Después, otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestaña del sitio web. Este icono, tradicionalmente tiene un tamaño de 16 x 16 píxeles, aunque también se puede incluir con un tamaño de 32 x 32. TUTORIAL DE BLOGGER (Nacho Segovia) 36
  • 37. Podemos usar programas de diseño gráfico como Gimp o Photoshop, pero si no dominas estos programas o no tienes mucho tiempo , podemos usar varios servicios online que nos faciliten la tarea. Uno de los más sencillos es favicononline.es. Tienes un vídeotutorial en : http://www.youtube.com/watch?v=LPvDnGc0Dvk&noredirect=1#t=16 Modificar la barra de navegación: Pinchando en editar, Blogger nos da varias opciones Modificar la cabecera: igualmente pinchando en Editar: Actualmente la cabecera es la que viene por defecto con la plantilla. Voy a poner una imagen como fondo de cabecera. Puede que sea conveniente activar la casilla, reducir hasta ajustar en caso de elegir una imagen demasiado grande Blogger la ajustará. A continuación pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada). Por último dar en Guardar. TUTORIAL DE BLOGGER (Nacho Segovia) 37
  • 38. Aspecto de la cabecera antes y después de poner una imagen: Antes Después Reconocimiento : si queremos poner derechos de autor a nuestro blog este es el sitio (parte más inferior de DISEÑO ) . Como siempre pinchando en editar: TUTORIAL DE BLOGGER (Nacho Segovia) 38
  • 39. 9.Estadísticas, visión general. Podemos ver las estadísticas por: días, por entradas más visitadas, desde qué países nos visitan… Entradas: TUTORIAL DE BLOGGER (Nacho Segovia) 39
  • 40. 10. Google + podemos vincular nuestro blog con nuestra cuenta de Google para que nos publique en nuestro muro de Google cada vez que hacemos una entrada en el blog. 11. Comentarios publicados. podremos ver los comentarios Publicados, los que estén pendientes de moderación y los que son Spam. También podremos aprobar, o suprimir los comentarios de los visitantes del blog. TUTORIAL DE BLOGGER (Nacho Segovia) 40
  • 41. 12. Páginas Las páginas son como las entradas, pero estas no se ordenan en orden cronológico y no tienen etiquetas. Se pueden realizar 10 páginas y se usan para poner contenido más estático en el blog. Se puede crear una página como una entrada, o crear una página que sea un enlace a otro sitio web. Pinchamos en Página nueva y elegimos esta vez ‘Página en blanco’. Hacemos una entrada y veremos: Para que este visible la nueva página que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles: Así quedaría con la opción TUTORIAL DE BLOGGER (Nacho Segovia) 41
  • 42. 13. Configuración de las entradas. Las etiquetas : son palabras que resumen el tema de la entrada y ayudan a archivarlas, así, si tratas varios temas en tu blog, encuadrando en las etiquetas correspondientes cada entrada, quien entre puede ver todo lo que has publicado acerca de un mismo tema, de una vez. Programar : permite que la entrada se publique automáticamente en el momento o que se publique en un día y hora. Es atractivo si queremos cambiar el orden de las entradas ya publicadas o que una entrada se publique en el momento que deseemos. Opciones : nos permite admitir o no comentarios, cambiar el modo de redacción y los saltos de línea. TUTORIAL DE BLOGGER (Nacho Segovia) 42
  • 43. 14. Usos avanzados de Blogger : 14.1. Añadir aplicaciones 2.0 en nuestro blog: Es una función muy interesante para el blog. Insertar vídeos, presentaciones, galerías de imágenes y otras aplicaciones 2.0 que encontramos en internet. En todas estas aplicaciones podemos encontrar las palabras: INSERTAR, EMBED o COLOCAR EN TU WEB O BLOG. Tenemos que coger el código que nos da la aplicación e insertarlo en la pestaña Edición de HTML. Ejemplo insertando un vídeo desde youtube. Una vez elegido el vídeo que queremos insertar, debajo de él pinchamos en COMPARTIR, luego a INSERTAR, en TAMAÑO DE VÍDEO, escogemos PESONALIZAR y ponemos el ancho de nuestro blog. Consejo: desactivar la casilla MOSTRAR SUGERENCIAS … así no nos podrá ningún vídeo, no deseado, al terminar. Por último, copiar el CÓDIGO HTML del vídeo. Así quedaría nuestro vídeo insertado en el blog: TUTORIAL DE BLOGGER (Nacho Segovia) 43
  • 44. 14.2. Insertar archivos pdf, doc, xls, ppt, odf o rdf Como ya sabrás no es posible subir a Blogger archivos pdf, doc, xls, ppt, odf o rdf. Sin embargo sí es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs . Metodos: Metodo 1 : entramos, por ejemplo, en www.calameo.com. Elegimos el archivo que queremos Al pinchar en el archivo aparecen varias opciones: elegimos COMPARTIR. Copiamos el código incrustado en HTML: Y en nuestra entrada, en HTML, pegamos el código y le damos a publicar TUTORIAL DE BLOGGER (Nacho Segovia) 44
  • 45. En nuestro blog queda así: Puedes cambiar las dimensiones de presentación en el código HTML , ajustándolo al ancho de tu blog. Metodo 2 : guardar el archivo en Google Drive. Basta que accedas a drive.google.com, entres en tu cuenta y hagas click en el botón para subir archivos. Una vez subido haz click con el botón derecho del ratón en el archivo en cuestión y elige «Abrir con... Google Drive Viever". Abre «Archivo" en el menú superior y pulsa en "Embed (this PDF file)" Se abrirá una ventana emergente que mostrará el código que debes copiar, y pegar donde quieras ubicar el archivo incrustado. Recuerda que debe pegarse en el modo HTML del editor de Blogger. TUTORIAL DE BLOGGER (Nacho Segovia) 45
  • 46. 14.3. Insertar una animación flash (.SWF) en el blog Los pasos que yo sigo son: 1) Descargo la animación flash. 2) Creo una nueva entrada y voy al editor HTML. Aquí introduzco el siguiente código: <object width="400" height="100"><param name="movie" value=«URL DEL FLASH" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="wmode" value="transparent" /><embed src=" URL DEL FLASH " type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="100" wmode="transparent"></embed></object> 3) Subo el flash a Google Sites: https://sites.google.com. Vemos dos opciones Ver y Descargar. Pinchamos con botón derecho en Descargar: del desplegable que aparece pincho en Copiar dirección del enlace. 4)Vuelvo a mi entrada y en el código que introduje cambio la URL por la dirección que se copió en el portapapeles, quedando así: <object width="400" height="100"><param name="movie" value="https://sites.google.com/site/nachopdi1/audio/flash.swf" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="wmode" value="transparent" /><embed src="https://sites.google.com/site/nachopdi1/audio/flash.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="100" wmode="transparent"></embed> </object> Podemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto) TUTORIAL DE BLOGGER (Nacho Segovia) 46
  • 47. 14.4. Insertar un powerpoint en el blog Primero subimos el powerpoint a Drive. Lo hacemos público. Pinchamos en el archivo para verlo y ahora vamos a Archivo: Publicar en la web: Click en «Iniciar la publicación» . Aparece una ventana donde configurar el tamaño del powerpoint, el tiempo de transiciones, etc… Copiamos el código HTML. Volvemos a nuestro blog, en el editor HTML pegamos el código y publicamos: TUTORIAL DE BLOGGER (Nacho Segovia) 47
  • 48. 14.4. Insertar audio en el blog Hay dos posibilidades: a) Publicar un audio MP3 con JW Player en Blogger. Blogger no permite subir directamente archivos de audio a su espacio. Entonces subimos el archivo MP3 a la cuenta personal en Google Sites para luego enlazar o embeber un reproductor de audio que lo muestre. Nos descargamos de Internet el Configurador jwplayer.swf que posiblemente esté en .zip, lo descomprimimos en una carpeta del disco local. Subimos a Google Sites los siguientes archivos: - Reproductor jwplayer.swf - Archivo de música a reproducir en .mp3. - Imagen en .jpg (que se verá de inicio en el reproductor). Debajo del Jwplayer que hemos subido hay un botón llamado Ver. Pinchamos en Ver. Se abre una pestaña nueva; copiamos su URL y la pegamos en el Bloc de notas. Una vez pegada eliminamos el código basura que aparece detrás de la extensión swf : TUTORIAL DE BLOGGER (Nacho Segovia) 48
  • 49. Hacemos lo mismo con los otros dos archivos (mp3 y jpg). En el caso del mp3 pinchamos con botón derecho en Descargar y Copiar dirección de enlace. Todo lo pegamos en el bloc de notas, borrando el código basura: Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index TUTORIAL DE BLOGGER (Nacho Segovia) 49
  • 50. Se nos abre la página del JWPLAYER: Seleccionamos la opción MP3 con imagen + Barra de control debajo. En Configuración básica pegaremos las URL que están pegadas en el Bloc de notas. La URL del Jwplayer en la casilla URL player swf , en la casilla URL archivo la de nuestro mp3. Para la imagen pinchamos en Configuración avanzada y debajo se abre OPCIONES DE ARCHIVO. En El campo imagen pegamos la URL de nuestra Imagen. Bajamos abajo del todo y le damos a Recargar Reproductor TUTORIAL DE BLOGGER (Nacho Segovia) 50
  • 51. Nos habrá quedado así: Copiamos el CÓDIGO EMBED Nos vamos a nuestro blog, creamos una entrada, le damos título, pinchamos en HTML Y dentro pegamos el código embed que acabamos de copiar: Podemos modificar el tamaño del visor en los valores width y height. TUTORIAL DE BLOGGER (Nacho Segovia) 51
  • 52. Nuestro audio quedará parecido a esto: TUTORIAL DE BLOGGER (Nacho Segovia) 52
  • 53. b) Subir el archivo de audio a servicios Web 2.0 como GoEar o SoundCloud que proporcionan el código embed para insertar un reproductor con audio en tu blog. Entramos en: http://www.goear.com/ Una vez ya en la página, escribimos en el cuadro de búsqueda el artista y el título de la canción que queremos. Seguidamente hacemos click con el botón izquierdo del ratón sobre "Buscar" Se nos abre otra ventana con los resultados encontrados. Hacemos click botón izquierdo del ratón sobre la canción que deseemos... Se nos abre otra ventana. En ella tenemos que pinchar en Compartir: Se abre otra ventana. Copiamos el código que hay debajo de "Pon esta canción en tu web o blog" TUTORIAL DE BLOGGER (Nacho Segovia) 53
  • 54. Regresamos a nuestro blog. Hacemos una nueva entrada, le damos título y en HTML pegamos el código copiado de Goear. <iframe width="580" height="115" src="http://www.goear.com/embed/sound/9952db9" marginheight="0" align="top" scrolling="no" frameborder="0" hspace="0" vspace="0" allowfullscreen></iframe> Publicar y listo TUTORIAL DE BLOGGER (Nacho Segovia) 54
  • 55. 14.5. Agregar RSS al tu blog Es una forma de dar a conocer tus artículos en tu blog (RSS: Really Simple Syndication). Además de eso, es muy cómodo suscribirse y cuando se publique una nueva entrada tu cliente RSS te alertara, eso evita tener que estar visitando a menudo el sitio para ver si hay o no algo nuevo en el Pasos: vamos a Diseño, click al botón "Añadir un gadget" y en la ventana que nos sale buscamos y elegimos el gadget Feed. Se abre la ventana para "Configurar feed" Dejando momentáneamente esta ventana, nos vamos a la página http://feedburner.google.com donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la dirección de nuestro blog y click en "Next " . Posiblemente te de a escoger entre Atom o RSS, en mi caso elijo RSS y le doy click al botón "Next" donde feedburner nos dirá que ya el feed fue verificado . TUTORIAL DE BLOGGER (Nacho Segovia) 55
  • 56. Antes de dar en "Next" para terminar debemos copiar la dirección de nuestro feed: Un a vez copiada nos volvemos a la ventana de configuración del RSS en Blogger donde la pegamos y damos click al botón Continuar. En mi caso opto por activar las tres opciones de mostrar y Click en Guardar TUTORIAL DE BLOGGER (Nacho Segovia) 56
  • 57. 14.6. Agregar gadget de suscripcion al blog. Permite que tus lectores que se suscriban fácilmente a tu blog mediante los lectores de feed conocidos. Pasos: - Vamos a Diseño: Añadir un Gadget, y elegimos « Enlaces de suscripción» Pinchamos en el , le damos un título y Guardar Y ya veríamos en nuestro blog la suscripción vía RSS: 14.7. Agregar botón ‘volver al inicio’ (a la parte de arriba de nuestra página) : Debemos tener en cuenta el color de nuestra plantilla, y si el icono tiene un fondo blanco, o de otro color. Si es transparente, no tendremos ningún problema. También tenemos que pensar en el tamaño. Tiene que ser de dimensiones reducidas, para que no se solape con ninguna imagen ni gadget de la barra lateral. Una vez tengamos claro qué icono vamos a utilizar, debe-mos subirlo a Google Sites, por ejemplo. Allí pinchamos con derecho en Descargar y Copiar dirección de enlace En Diseño inserta un gadget HTML y pega este código HTML :<a href='#' style='display croll;position:fixed;bottom:0px;right:0px;' title='ARRIBA'><img src="Pega aquí la URL de tu imagen" /></a> Pega donde pone "Pega aquí la URL de tu imagen" la URL de tu imagen y Guarda. TUTORIAL DE BLOGGER (Nacho Segovia) 57
  • 58. 14.8. Agregar «Leer más» en medio de una entrada. Vamos a Diseño, en el cuerpo del blog, de la entrada, pinchamos en Editar: Aparece una ventana nueva y donde pone ‘ Texto del enlace de la página de entrada escribimos LEER MÁS: Bajamos abajo y damos en Guardar. IMPORTANTE, ahora pinchar en Guardar Disposición. A continuación hacemos una entrada y donde queramos partir la entrada, por la razón que sea pinchamos en el icono Insertar salto de línea: Y seguimos escribiendo debajo. Al lector le aparecerá en ese salto de línea el ‘Leer más ‘ que antes introdujimos. Damos en Guardar, Publicar y Ver blog . Quedaría así : TUTORIAL DE BLOGGER (Nacho Segovia) 58
  • 59. 14.9.Cómo poner un menú horizontal desplegable html en Blogger Si utilizas plantillas pre diseñadas o dinámicas, es muy probable esto NO te funcione. Si quieres aplicarlo, ves al menú > plantilla > y cambia tu plantilla actual a sencilla. Paso 1: Nos vamos a Más Opciones: Diseño y eliminamos el Gadget de Páginas, con Editar y Eliminar: Aceptar Click en Guardar disposición: En realidad no hemos eliminados las páginas siguen estando. Lo podemos comprobar pinchando en Páginas: TUTORIAL DE BLOGGER (Nacho Segovia) 59
  • 60. Volemos a Diseño para añadir en esta zona un Gadget de HTML, pero no tenemos como hacerlo: Tenemos que retocar la plantilla. Pinchamos en Plantilla y luego en Editor HTML: Tenemos que buscar un código en el blog. El código a buscar es: <div class='region-inner header-inner'> . Para ello ponemos el cursor dentro del código existente y pulsamos Control+F. Aparece un cuadro de busqueda, donde pegamos el código a buscar: TUTORIAL DE BLOGGER (Nacho Segovia) 60
  • 61. Y damos a Enter. Aparecerá coloreado: Donde pone maxwidgets=‘1’ cambiamos el 1 por un 10 y donde pone showaddelement=‘no’ cambiamos el no por yes. Donde pone locked= ‘true’ cambiamos true por false. Tiene que quedar así: Pinchamos en Guardar plantilla. Volvemos al escritorio y de nuevo a Diseño y vemos que nos ha creado el gadget que necesitamos: TUTORIAL DE BLOGGER (Nacho Segovia) 61
  • 62. Vamos a insertar un código que generará nuestro menú desplegable. Pero hay que tener muy claro las páginas que queremos tener en el menú y como se van a llamar. A modo de ejemplo mi página principal se va a llamar MI PRIMER BLOG, una segunda página se llamará TIC y una tercera que se llamará TUTORIALES. Cada uno de estos nombres que vamos a poner será una pestaña. El código es el siguiente : <div id='mbwnavbar'> <ul id='mbwnav'> <li> <a href='http://mitutorialblog.blogspot.com.es/'>MI PRIMER BLOG</a> </li> <li> <a href='http://mitutorialblog.blogspot.com.es/p/blog-page.html'>TIC</a> </li> <li> <a href='#'>TUTORIALES</a> <ul> <li><a href='#'>DESPLEGABLE1</a></li> <li><a href='#'>DESPLEGABLE2</a></li> </ul> </li> <li> <a href='#'>OTRA PESTAÑA</a> <ul> <li><a href='#'>OTRO DESPLEGABLE1</a></li> <li><a href='#'>OTRO DESPLEGABLE2</a></li> </ul> </li> </ul> LO QUE ESTÁ EN NEGRITA ES LO QUE TIENES QUE PONER. Y SERÁN EL NOMBRE DE CADA PESTAÑA </div> TUTORIAL DE BLOGGER (Nacho Segovia) 62
  • 63. Donde están las almohadillas tenemos que meter las URL de cada página, sustituyéndolas pero sin borrar nada más, ni una coma. Veamos: <a href='#'>MI PRIMER BLOG</a> </li> <li> <a href='#'>TIC</a> </li> <li> <a href='#'>TUTORIALES </a> <ul> <li><a href='#'>Categoria 1.1</a></li> Al pinchar en la primera pestaña aparece su URL; la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestaña y su URL) quedando por tanto el código así : <li> <a href='http://mitutorialblog.blogspot.com.es/'>MI PRIMER BLOG</a> </li> <li> <a href='http://mitutorialblog.blogspot.com.es/p/blog-page.html'>TIC</a> </li> <li> <a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a> <ul> <li><a TUTORIAL DE BLOGGER (Nacho Segovia) 63
  • 64. <li> <a href='http://mitutorialblog.blogspot.com.es/'>MI PRIMER BLOG</a> </li> <li> <a href='http://mitutorialblog.blogspot.com.es/p/blog-page.html'>TIC</a> </li> <li> <a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a> Veis que solo debajo de donde pone <ul> ‘TUTORIALES’ hay más código. Este es el <li><a href='#'>DESPLEGABLE1</a></li> código que inserta los desplegables de la <li><a href='#'>DESPLEGABLE2</a></li> pestaña TUTORIALES. </ul> Ahora nos queda modificarlo. Primero le </li> daremos un nombre acorde a las </ul> etiquetas que hayamos puesto en la </li> <li> <a href='#'>Categoria 2</a> <ul> <li><a href='#'>Categoria 2.1</a></li> <li><a href='#'>Categoria 2.2</a></li> </ul> entrada que tengamos en la pestaña TUTORIALES. Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas). Cambio DESPLEGABLE2 por PDI , que es otra etiqueta. Quedaría así: <a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a> <ul> <li><a href='#'>Blog</a></li> <li><a href='#'>PDI</a></li> </ul> TUTORIAL DE BLOGGER (Nacho Segovia) 64
  • 65. Ahora volvemos al blog a buscar las etiquetas mencionadas. En la pestaña TUTORIALES pincho debajo, en la etiqueta blog: Al pinchar en blog, en la barra de direcciones aparecen las entradas que hayamos hecho. Copiamos esa URL: Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog: <a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a> <ul> <li><a href='#'>Blog</a></li> <li><a href='#'>PDI</a></li> </ul> Quedaría así: (hay que borrar la # ) <a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a> <ul> <li><a href='http://mitutorialblog.blogspot.com.es/search/label/blogs'>Blog</a></li> <li><a href='#'>PDI</a></li> </ul> TUTORIAL DE BLOGGER (Nacho Segovia) 65
  • 66. Ahora hacemos lo mismo para PDI; volvemos al blog pinchamos ahora en la etiqueta PDI y copiamos su URL: Esta URL la pegamos en lugar de la almohadilla que está justo antes de PDI : <a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a> <ul> <li><a href='http://mitutorialblog.blogspot.com.es/search/label/blogs'>Blog</a></li> <li><a href='#'>PDI</a></li> </ul> Quedando así : <a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a> <ul> <li><a href='http://mitutorialblog.blogspot.com.es/search/label/blogs'>Blog</a></li> <li><a href='http://mitutorialblog.blogspot.com.es/search/label/PDI'>PDI</a></li> </ul> Ya tendríamos nuestro código casi listo. TUTORIAL DE BLOGGER (Nacho Segovia) 66
  • 67. El código quedaría así : <div id='mbwnavbar'> <ul id='mbwnav'> <li> <a href='http://mitutorialblog.blogspot.com.es/'>MI PRIMER BLOG</a> </li> <li> <a href='http://mitutorialblog.blogspot.com.es/p/blog-page.html'>TIC</a> </li> <a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a> <ul> <li><a href='http://mitutorialblog.blogspot.com.es/search/label/blogs'>Blog</a></li> <li><a href='http://mitutorialblog.blogspot.com.es/search/label/PDI'>PDI</a></li> </ul> </li> <li> <a href='#'>OTRA PESTAÑA</a> Este código solo tienes que ponerlo si quieres poner <ul> <li><a href='#'>OTRO DESPLEGABLE1</a></li> otra pestaña más, con dos desplegables. Si quieres <li><a href='#'>OTRO DESPLEGABLE2</a></li> añadir más pestañas copia el código de una de arriba, </ul> cambia el nombre y su URL; e igual si le quieres poner </li> desplegables… </ul> </div> Copiamos el código y volvemos a Blogger. A Diseño: TUTORIAL DE BLOGGER (Nacho Segovia) 67
  • 68. Volvemos a Blogger, Diseño y la pegamos en el gadget que hemos creado: Pinchamos en Añadir un gadget, e insertamos uno de HTML. Pegamos el código en contenido y no le ponemos título. Pinchamos en Guardar TUTORIAL DE BLOGGER (Nacho Segovia) 68
  • 69. La barra ha quedado encima de la cabecera, simplemente pinchamos en ella y la arrastramos situándola debajo de la cabecera: Así: Vamos a ver como está quedando hasta ahora. Ver blog (posiblemente F5) y vemos que no está quedando como queremos: Pero esto no es desplegable, así que tenemos que tocar el código HTML. Tenemos que buscar este código: ]]></b:skin> Vamos a Plantilla: Editar HTML y con el cursor dentro del código pulsamos Control+F. Dentro del cuadro de busqueda que sale pegamos el código: ]]></b:skin> y Enter : TUTORIAL DE BLOGGER (Nacho Segovia) 69
  • 70. Encima de ]]></b:skin> dejamos espacio y pegamos el siguiente código: /**MBW Navgation bar**/ #mbwnavbar { background: #bdbfbf; width: 850px; color: #FFF; margin: 0px; padding: 0; position: relative; border-top:0px solid; height:35px; } #mbwnav { margin: 0; padding: 0; } #mbwnav ul { float: left; list-style: none; margin: 0; padding: 0; } #mbwnav li { list-style: none; margin: 0; padding: 0; border-left:1px solid #333; border-right:1px solid #333; height:35px; } #mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited { color: #FFF; TUTORIAL DE BLOGGER (Nacho Segovia) 70
  • 71. display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #mbwnav li a:hover, #mbwnav li a:active { background: #028490; color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px; } #mbwnav li { float: left; padding: 0; } #mbwnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #mbwnav li ul a { width: 140px; } #mbwnav li ul ul { margin: -25px 0 0 161px; } #mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav li.sfhover ul ul ul { left: -999em; TUTORIAL DE BLOGGER (Nacho Segovia) } 71
  • 72. #mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul { left: auto; } #mbwnav li:hover, #mbwnav li.sfhover { position: static; } #mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited { background: #028490; width: 120px; color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px dotted #333; } #mbwnav li li a:hover, #mbwnavli li a:active { background: #70b6bd; color: #FFF; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } TUTORIAL DE BLOGGER (Nacho Segovia) 72
  • 73. Ya está pegado: Le damos a Guardar plantilla Y vemos el blog: A vosotros os saldrá una pestaña más llamada Categoría 2. Yo la eliminado borrando el código: TUTORIAL DE BLOGGER (Nacho Segovia) 73
  • 74. Si queréis cambiar los colores de las pestañas o de los desplegables lo tenéis que hacer en el código que introdujisteis en los valores alfanuméricos que aparezcan después de la almohadilla: En la página www.colorhexa.com metemos esos números y nos dice a que color corresponde, y nos permite buscar otros colores: Si el ancho de la barra no es el que mejor se adecúa, al principio del código, en width , está puesto 850px simplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta. TUTORIAL DE BLOGGER (Nacho Segovia) 74
  • 75. 14.10.Cómo insertar tablas en Blogger. El código básico para insertar una tabla es el siguiente: <table border="1" cellpadding="4"><tbody> <tr><td>Agua</td> <td>Sal</td> <td>Leche</td></tr> <tr><td>Tarde</td> <td>Noche</td> <td>Día</td></tr> <tr><td>Madrid</td> <td>París</td> <td>Roma</td></tr> </tbody></table> El resultado es este: Agua Sal Leche Tarde Noche Día Madrid París Roma TUTORIAL DE BLOGGER (Nacho Segovia) 75
  • 76. Si deseas insertar una fila más, agrega esta parte antes de </tbody></table> <tr><td>Palabra 1</td> <td>Palabra 2</td> <td>Palabra 3</td></tr> Del mismo modo si quisieras que cada fila tuviera más celdas entonces agrega las que quieras añadiendo las palabras entre las etiquetas <td> </td> antes de cada </tr> Si quieres modificar el borde de la tabla cambia el número que hay detrás de cambiaborder="1" . Si lo quieres más grueso por un número más alto, si lo dejas en "0" se quedará sin borde. <table border="5" cellpadding="4"> <tbody><tr><td>Tabla con borde "5"</td></tr> </tbody></table> Para cambiar el color del borde de la tabla añadimos después de <table el atributo bordercolor="green" el color lo puedes cambiar, por ejemplo "red" Este sería el resultado: <table border="2" bordercolor="green" cellpadding="4"> <tbody><tr><td>Tabla con borde verde</td></tr> </tbody></table> TUTORIAL DE BLOGGER (Nacho Segovia) 76
  • 77. 14.11.Cómo instalar Google Analytics en el blog Vamos a la página de Google Analytics, http://www.google.es/intl/es/analytics/ y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta. Hay que seguir tres pasos: 1º.- Registrarse En el campo Nombre de cuenta ponemos el nombre de nuestro blog En el campo Nombre del sitio web ponemos el nombre de nuestro blog y debajo en URL del sitio web ponemos la URL de nuestro blog, borrando la http que ya está puesta a la izquierda. Ahora tenemos que decirle que tipo de blog tenemos en Categoría del sector, yo he elegido Informática. Bajo más abajo y elijo la zona horaria (España, Madrid) : Le damos a Obtener ID de seguimiento Aceptar los términos TUTORIAL DE BLOGGER (Nacho Segovia) 77
  • 78. Y nos aparece una ventana con un código HTML. Lo copiamos : Volvemos al blog, Más opciones, DISEÑO. Añadimos un gadget de HTML, donde pegamos el código : Le damos a Guardar y ya tenemos nuestro gadget: TUTORIAL DE BLOGGER (Nacho Segovia) 78
  • 79. Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog): Damos en Guardar disposición y nos vamos a Configuración: Otros y bajamos hasta Google Analytics: Aquí tenemos que poner la ID de nuestro Analytics. Volvemos a Google Analytics y la ID es esta: La copiamos y la pegamos donde antes nos la Pedía. Le damos a Guardar configuración. TUTORIAL DE BLOGGER (Nacho Segovia) 79
  • 80. Volvemos a Google Analytics, pinchamos en el icono de la casita: Le damos a guardar preferencias: Y desde «Todos los datos de sitios web» podemos entrar en nuestra cuenta: Si pinchamos en Tiempo real, Descripción general podemos ver el tráfico en el blog. Como acabamos de crearlo está a cero. Si volvéis al blog y hacéis una visita veréis movimiento…. TUTORIAL DE BLOGGER (Nacho Segovia) 80
  • 81. 14.12.Cómo insertar un contador de visitas. 1. Ir a la página principal: http://contador-de-visitas.com 2. Elegir el estilo del contador en el desplegable. Introducir el número de visitas inicial del contador. 3. Introducir la dirección del blog y OK. Aparecerá una página con un botón que pone agregar a blogger. Al hacer click en este botón vamos a Blogger, donde podemos cambiar el título del bloque que contendrá el contador de visitas. Le damos a añadir artilugio y ya está. Luego podemos cambiar la posición de nuestro contador a donde queramos. TUTORIAL DE BLOGGER (Nacho Segovia) 81
  • 82. 14.12.Cómo insertar un Voki. Entramos en www.voki.com y nos registramos . Pinchamos en Create a new voki Luego en ‘Customize your character’ y pinchamos en el voki que nos guste: Podemos cambiarle el color de los ijos, labios, ropa, etc …. Una vez hecho esto pinchamos en Done : Y ahora en ‘Text to speech’: masculina o femenina) Escribes lo que quieres que diga tu Voki (elige el idioma y voz y pincha en Done. Ahora en Publish: Escribe un título y pincha en en Save: La siguiente ventana te informa de que Todo ha ido bien y das en Close Te aparece un código embed, pinchas en Copy Y ya solo queda volver al blog, añadir un gadget HTML y pegar este código . TUTORIAL DE BLOGGER (Nacho Segovia) 82
  • 83. 14.13.Cómo poner un chat en tu blog. Hay diferentes sitios que te proporcionan un chat gratuito para tu blog. Yo he elegido CBOX. Entramos en: http://www.cbox.ws/ , nos registramos : Nos llegará un mensaje de activación a nuestro correo; pinchamos en el link y en la siguiente página introducimos la URL de nuestro blog. Nos aparece una nueva ventana con el código ya para pegar en nuestro blog. Copiamos el código en un gadget de nuetro blog y listo. TUTORIAL DE BLOGGER (Nacho Segovia) 83
  • 84. 14.13.Cómo poner los iconos de las redes sociales. Buscamos en imágenes d google los iconos que queremos. Los descargamos y los subimos a Google Sites. Entramos en DISEÑO de nuestro blog y añadimos un gadget de HTML. Aquí pegamos el siguiente código: <a href='URL PAGINA FACEBOOK' target='_blank'><img src='URL IMAGEN ICONO FACEBOOK' width= ‘35px' title='FACEBOOK' /></a> Donde pone URL PAGINA FACEBOOK tenéis que poner la URL de la página a la que queréis que vaya al hacer clic en el icono (en este caso de la Facebook), y donde pone URL IMAGEN ICONO FACEBOOK tenéis que poner la URL de la imagen del icono que queréis poner. Esta URL la obtenéis yendo a Google Sites (donde habéis subido el icono de facebook) pinchando con botón derecho en descargar y Copiar dirección de enlace (esa es la URL del icono). En width indicamos el tamaño de la imagen, en este caso 35 pixeles. Lo podéis cambiar para que sean más grandes o pequeños a vuestro gusto. Y a continuación está el título (FACEBOOK), que no es necesario ponerlo, pero cuando pongamos varios códigos, así sabremos cuál es cuál fácilmente. Una vez puestas las URL en el código, damos a Guardar y tenemos el icono de Facebook enlazado a nuestra página de Facebook. Si queremos poner de más redes sociales iríamos insertando el mismo código con las URL correspondientes… TUTORIAL DE BLOGGER (Nacho Segovia) 84
  • 85. 15. Glosario de términos habituales creando un blog. Contenido: la información que publicas en tu blog. Texto, páginas web (html), imágenes, fotos, videos… Servidor: donde se publica el contenido del blog y permite que este accesible por todo el mundo. También se llaman hosts. URL: se refiere al texto que identifica a una página web. Normalmente empieza por "http:/...". Enlace, vínculo, hipervínculo: normalmente aparecen en azul y si se les pincha le llevan al usuario a otra página. Post: se refiere a la publicación de un artículo o entrada nueva en un blog Template: es la platilla o diseño gráfico más otros atributos (enlaces y otros recursos en las barras laterales). RSS /Atom. Métodos de sindicación de contenidos que permiten la informar a los interesados de su actualización o nuevos contenidos. Adsense: Programa de monetización de Google Inc para propietarios de blog o webs. Blogroll: Es una lista de enlaces que un blogger recomienda… Banner: Anuncio publicitario que se inserta en una página web. Google Plus: Red social de Google . Podcast: Transmisión de contenido multimedia en un blog. Sidebar: Barra lateral, izquierda o derecha, de un blog. Widget: Código que añade una funcionalidad automáticamente sin necesidad de escribir el código. El termino en Blogger es “Gadget”. TUTORIAL DE BLOGGER (Nacho Segovia) 85