Tutorial para crear un blog con blogger

85
TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor: Nacho Segovia TUTORIAL DE BLOGGER (Nacho Segovia) 1

description

Tutorial para crear un blog con Blogger desde cero. Hay apartados para avanzados. Creo que podéis encontrar respuesta a la mayoría de las dudas que se os presenten a la hora de crear un blog o de intentar agregar algo avanzado.

Transcript of Tutorial para crear un blog con blogger

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

TUTORIAL DE BLOGGER (Nacho Segovia) 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) 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

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:

TUTORIAL DE BLOGGER (Nacho Segovia) 8

Simplemente pinchamos

en el botón « Continuar

en Blogger «

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 po-

drá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…

TUTORIAL DE BLOGGER (Nacho Segovia) 10

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’

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 dimensio-

nes… 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

TUTORIAL DE BLOGGER (Nacho Segovia) 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…

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, simplemen-

te pinchamos en el icono

y nos redirige a nuestro

blog con la nueva entra-

da 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

TUTORIAL DE BLOGGER (Nacho Segovia) 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á.

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í cambiare-

mos la dirección de nuestro blog por otra,

si está disponible.

- Permisos:

Autores del blog: Podemos dejar que pu-

bliquen 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 cual-

quier 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

TUTORIAL DE BLOGGER (Nacho Segovia) 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 comen- tarios. ¿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).

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

TUTORIAL DE BLOGGER (Nacho Segovia) 24

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).

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

TUTORIAL DE BLOGGER (Nacho Segovia) 26

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

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.

TUTORIAL DE BLOGGER (Nacho Segovia) 27

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

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.

TUTORIAL DE BLOGGER (Nacho Segovia) 29

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.

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:

TUTORIAL DE BLOGGER (Nacho Segovia) 32

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.

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ápi-damente 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

TUTORIAL DE BLOGGER (Nacho Segovia) 38

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:

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 aplica-ciones 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 pincha-

mos 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 portapa-peles, 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 posiblemen-te 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

TUTORIAL DE BLOGGER (Nacho Segovia) 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 avan-

zada 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

El código que integra el reproductor y el vídeo en la

página es:

<embed src="jwplayer.swf" width="384" height="312" allowfullscreen="true" flashvars="file=video.flv&image=captura.jpg"></embed>

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

TUTORIAL DE BLOGGER (Nacho Segovia) 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) 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

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> LO QUE ESTÁ EN NEGRITA <li> ES LO QUE TIENES QUE PONER. <a href='http://mitutorialblog.blogspot.com.es/p/blog-page.html'>TIC</a> Y SERÁN EL NOMBRE DE CADA </li> PESTAÑA <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>

</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> <ul> <li><a href='#'>DESPLEGABLE1</a></li>

<li><a href='#'>DESPLEGABLE2</a></li>

</ul>

</li>

</ul> </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>

TUTORIAL DE BLOGGER (Nacho Segovia)

Veis que solo debajo de donde pone ‘TUTORIALES’ hay más código. Este es el código que inserta los desplegables de la pestaña TUTORIALES. Ahora nos queda modificarlo. Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la 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í:

64

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

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>

<ul>

<li><a href='#'>OTRO DESPLEGABLE1</a></li>

<li><a href='#'>OTRO DESPLEGABLE2</a></li>

</ul>

</li>

</ul>

</div>

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

TUTORIAL DE BLOGGER (Nacho Segovia) 67

Este código solo tienes que ponerlo si quieres poner otra pestaña más, con dos desplegables. Si quieres añadir más pestañas copia el código de una de arriba, cambia el nombre y su URL; e igual si le quieres poner desplegables…

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:

TUTORIAL DE BLOGGER (Nacho Segovia) 75

Agua Sal Leche

Tarde Noche Día

Madrid París Roma

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"

<table border="2" bordercolor="green" cellpadding="4">

<tbody><tr><td>Tabla con borde verde</td></tr>

</tbody></table>

TUTORIAL DE BLOGGER (Nacho Segovia) 76

Este sería el resultado:

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’: Escribes lo que quieres que diga tu Voki (elige el idioma y voz masculina o femenina) 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 quere-

mos 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