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