tutorial para crear un blog con blogger
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
TUTORIAL DE BLOGGER (Nacho Segovia) 1
TUTORIAL PARA CREAR UN BLOG CON BLOGGERAutor Nacho Segovia
2
1 iquestQueacute es un bloghellip 3 2 Tipos de blogs 33 Partes de un blog 4 4 Estructura de una entrada o post helliphellip 5 5 Blogger helliphelliphellip 6 51 Crear una cuenta gmail 6 52 Entrando en Blogger helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 7 53 Asignar un nombre al Blog 9 6 Crear una entrada o post 10 61 Antildeadir imaacutegenes o viacutedeos helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 12 62 Antildeadir enlaces 16 63 Comentarios de los lectores helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 177 Configuracioacuten del blogLo baacutesico Entradas y comentarios Moacutevil y correo electroacutenicoIdioma y formato Preferencias para motores y Otros helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 18 71 Editar HTML helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 308 Disentildeo del bloghelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 32 81 Como agregar o quitar complementos a la paacuteginahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 329 Estadiacutesticas Visioacuten general helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 3910 Google + helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 4011 Comentarios publicados helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 4012 Paacuteginas 41 13 Configuracioacuten de las entradashelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 4214 Usos avanzados de Bloggerhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 43 141 Antildeadir aplicaciones 20 en nuestro blog helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 43 142 Insertar archivos pdf doc xls ppt odf o rdf helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 44 143 Insertar un Flash en el blog helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 46 144 Insertar audio en el blog helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 48 145 Agregar RSS al tu blog helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 55 146 Agregar gadget de suscripcion al bloghelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 57 147 Agregar botoacuten lsquovolver al iniciorsquo helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 57 148 Agregar laquoLeer maacutesraquo en una entradahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 58 149 Coacutemo poner un menuacute horizontal desplegable HTML en Bloggerhelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 59 1410 Como insertar Tablas en Bloggerhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 75 1411 Como instalar Google Analytics helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 77 1412 Como inserrtar un Voki helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 82 1413 Como poner un chat en tu bloghelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 83 1414 Como poner los iconos de las redes sociales en tu blog helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 8415 Glosario de teacuterminos tiacutepicos en un blog 85
TUTORIAL DE BLOGGER (Nacho Segovia) 3
1 iquestQueacute es un blogUn blog es un sitio Web en donde uno o varios autores desarrollan contenidos Los blogs tambieacuten se conocen como cuaderno de bitaacutecora La informacioacuten se actualiza perioacutedicamente y los textos se plasman en forma cronoloacutegica primero aparece el maacutes recientemente escrito En cada artiacuteculo 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 diaacutelogo Nos sirven para lanzar mensajes que pueden llegar a mucha gente Nos sirve para investigar sobre alguacuten tema en especial con fines educativos comunicarnos con amigos Se pueden utilizar con fines personales o profesionales
2 Tipos de blogsbull Blog Personalbull Blog Temaacuteticobull Blog Profesionalbull Blog CorporativoSe han dado nombres a algunos blogs a partir de sus temaacuteticas
- Audioblogs Dedicados a las galeriacuteas de ficheros de audio - Educablogs Dedicados a la educacioacuten- Fotoblogs Dedicados a las galeriacuteas de imaacutegenes - Videoblogs Dedicados a las galeriacuteas de ficheros de video
TUTORIAL DE BLOGGER (Nacho Segovia) 4
3 Partes de un Blog Se dividen en tres partes
bull La cabecera o tiacutetulo del Blog Cabecera
bull El menuacute lateral en el que ademaacutes de otros posibles elementos sueleaparecer un listado decategoriacuteas
bull El post o entrada
menuacute 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
Fechamiddot La fecha de publicacioacuten del post
Tiacutetulomiddot El tiacutetulo del post y la categoriacutea a laque pertenece
middot El cuerpo de la entrada donde puede ir una imagen viacutedeohellip Cuerpo
middot Comentario Si el autor del post permita a los usuarios dejar un comentario apareceraacute un enlace para poder hacerlo
Comentario
TUTORIAL DE BLOGGER (Nacho Segovia) 6
5 Blogger para poder usar blogger necesitamos una cuenta de correo gmail Si alguien no sabe como creaacutersela puede ver este video tutorial que nos ensentildea paso a paso como hacerlo
51 Crear una cuenta Gmail
Tambieacuten lo tienes en youtube en este enlace viacutedeo
httpswwwyoutubecomwatchv=BloMF6HPFms
2
1 iquestQueacute es un bloghellip 3 2 Tipos de blogs 33 Partes de un blog 4 4 Estructura de una entrada o post helliphellip 5 5 Blogger helliphelliphellip 6 51 Crear una cuenta gmail 6 52 Entrando en Blogger helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 7 53 Asignar un nombre al Blog 9 6 Crear una entrada o post 10 61 Antildeadir imaacutegenes o viacutedeos helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 12 62 Antildeadir enlaces 16 63 Comentarios de los lectores helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 177 Configuracioacuten del blogLo baacutesico Entradas y comentarios Moacutevil y correo electroacutenicoIdioma y formato Preferencias para motores y Otros helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 18 71 Editar HTML helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 308 Disentildeo del bloghelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 32 81 Como agregar o quitar complementos a la paacuteginahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 329 Estadiacutesticas Visioacuten general helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 3910 Google + helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 4011 Comentarios publicados helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 4012 Paacuteginas 41 13 Configuracioacuten de las entradashelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 4214 Usos avanzados de Bloggerhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 43 141 Antildeadir aplicaciones 20 en nuestro blog helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 43 142 Insertar archivos pdf doc xls ppt odf o rdf helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 44 143 Insertar un Flash en el blog helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 46 144 Insertar audio en el blog helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 48 145 Agregar RSS al tu blog helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 55 146 Agregar gadget de suscripcion al bloghelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 57 147 Agregar botoacuten lsquovolver al iniciorsquo helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 57 148 Agregar laquoLeer maacutesraquo en una entradahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 58 149 Coacutemo poner un menuacute horizontal desplegable HTML en Bloggerhelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 59 1410 Como insertar Tablas en Bloggerhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 75 1411 Como instalar Google Analytics helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 77 1412 Como inserrtar un Voki helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 82 1413 Como poner un chat en tu bloghelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 83 1414 Como poner los iconos de las redes sociales en tu blog helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip 8415 Glosario de teacuterminos tiacutepicos en un blog 85
TUTORIAL DE BLOGGER (Nacho Segovia) 3
1 iquestQueacute es un blogUn blog es un sitio Web en donde uno o varios autores desarrollan contenidos Los blogs tambieacuten se conocen como cuaderno de bitaacutecora La informacioacuten se actualiza perioacutedicamente y los textos se plasman en forma cronoloacutegica primero aparece el maacutes recientemente escrito En cada artiacuteculo 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 diaacutelogo Nos sirven para lanzar mensajes que pueden llegar a mucha gente Nos sirve para investigar sobre alguacuten tema en especial con fines educativos comunicarnos con amigos Se pueden utilizar con fines personales o profesionales
2 Tipos de blogsbull Blog Personalbull Blog Temaacuteticobull Blog Profesionalbull Blog CorporativoSe han dado nombres a algunos blogs a partir de sus temaacuteticas
- Audioblogs Dedicados a las galeriacuteas de ficheros de audio - Educablogs Dedicados a la educacioacuten- Fotoblogs Dedicados a las galeriacuteas de imaacutegenes - Videoblogs Dedicados a las galeriacuteas de ficheros de video
TUTORIAL DE BLOGGER (Nacho Segovia) 4
3 Partes de un Blog Se dividen en tres partes
bull La cabecera o tiacutetulo del Blog Cabecera
bull El menuacute lateral en el que ademaacutes de otros posibles elementos sueleaparecer un listado decategoriacuteas
bull El post o entrada
menuacute 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
Fechamiddot La fecha de publicacioacuten del post
Tiacutetulomiddot El tiacutetulo del post y la categoriacutea a laque pertenece
middot El cuerpo de la entrada donde puede ir una imagen viacutedeohellip Cuerpo
middot Comentario Si el autor del post permita a los usuarios dejar un comentario apareceraacute un enlace para poder hacerlo
Comentario
TUTORIAL DE BLOGGER (Nacho Segovia) 6
5 Blogger para poder usar blogger necesitamos una cuenta de correo gmail Si alguien no sabe como creaacutersela puede ver este video tutorial que nos ensentildea paso a paso como hacerlo
51 Crear una cuenta Gmail
Tambieacuten lo tienes en youtube en este enlace viacutedeo
httpswwwyoutubecomwatchv=BloMF6HPFms
TUTORIAL DE BLOGGER (Nacho Segovia) 3
1 iquestQueacute es un blogUn blog es un sitio Web en donde uno o varios autores desarrollan contenidos Los blogs tambieacuten se conocen como cuaderno de bitaacutecora La informacioacuten se actualiza perioacutedicamente y los textos se plasman en forma cronoloacutegica primero aparece el maacutes recientemente escrito En cada artiacuteculo 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 diaacutelogo Nos sirven para lanzar mensajes que pueden llegar a mucha gente Nos sirve para investigar sobre alguacuten tema en especial con fines educativos comunicarnos con amigos Se pueden utilizar con fines personales o profesionales
2 Tipos de blogsbull Blog Personalbull Blog Temaacuteticobull Blog Profesionalbull Blog CorporativoSe han dado nombres a algunos blogs a partir de sus temaacuteticas
- Audioblogs Dedicados a las galeriacuteas de ficheros de audio - Educablogs Dedicados a la educacioacuten- Fotoblogs Dedicados a las galeriacuteas de imaacutegenes - Videoblogs Dedicados a las galeriacuteas de ficheros de video
TUTORIAL DE BLOGGER (Nacho Segovia) 4
3 Partes de un Blog Se dividen en tres partes
bull La cabecera o tiacutetulo del Blog Cabecera
bull El menuacute lateral en el que ademaacutes de otros posibles elementos sueleaparecer un listado decategoriacuteas
bull El post o entrada
menuacute 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
Fechamiddot La fecha de publicacioacuten del post
Tiacutetulomiddot El tiacutetulo del post y la categoriacutea a laque pertenece
middot El cuerpo de la entrada donde puede ir una imagen viacutedeohellip Cuerpo
middot Comentario Si el autor del post permita a los usuarios dejar un comentario apareceraacute un enlace para poder hacerlo
Comentario
TUTORIAL DE BLOGGER (Nacho Segovia) 6
5 Blogger para poder usar blogger necesitamos una cuenta de correo gmail Si alguien no sabe como creaacutersela puede ver este video tutorial que nos ensentildea paso a paso como hacerlo
51 Crear una cuenta Gmail
Tambieacuten lo tienes en youtube en este enlace viacutedeo
httpswwwyoutubecomwatchv=BloMF6HPFms
TUTORIAL DE BLOGGER (Nacho Segovia) 4
3 Partes de un Blog Se dividen en tres partes
bull La cabecera o tiacutetulo del Blog Cabecera
bull El menuacute lateral en el que ademaacutes de otros posibles elementos sueleaparecer un listado decategoriacuteas
bull El post o entrada
menuacute 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
Fechamiddot La fecha de publicacioacuten del post
Tiacutetulomiddot El tiacutetulo del post y la categoriacutea a laque pertenece
middot El cuerpo de la entrada donde puede ir una imagen viacutedeohellip Cuerpo
middot Comentario Si el autor del post permita a los usuarios dejar un comentario apareceraacute un enlace para poder hacerlo
Comentario
TUTORIAL DE BLOGGER (Nacho Segovia) 6
5 Blogger para poder usar blogger necesitamos una cuenta de correo gmail Si alguien no sabe como creaacutersela puede ver este video tutorial que nos ensentildea paso a paso como hacerlo
51 Crear una cuenta Gmail
Tambieacuten lo tienes en youtube en este enlace viacutedeo
httpswwwyoutubecomwatchv=BloMF6HPFms
TUTORIAL DE BLOGGER (Nacho Segovia) 5
4 Estructura de una entrada puede ser variada pero suele tener unos elementos comunes como
Fechamiddot La fecha de publicacioacuten del post
Tiacutetulomiddot El tiacutetulo del post y la categoriacutea a laque pertenece
middot El cuerpo de la entrada donde puede ir una imagen viacutedeohellip Cuerpo
middot Comentario Si el autor del post permita a los usuarios dejar un comentario apareceraacute un enlace para poder hacerlo
Comentario
TUTORIAL DE BLOGGER (Nacho Segovia) 6
5 Blogger para poder usar blogger necesitamos una cuenta de correo gmail Si alguien no sabe como creaacutersela puede ver este video tutorial que nos ensentildea paso a paso como hacerlo
51 Crear una cuenta Gmail
Tambieacuten lo tienes en youtube en este enlace viacutedeo
httpswwwyoutubecomwatchv=BloMF6HPFms
TUTORIAL DE BLOGGER (Nacho Segovia) 6
5 Blogger para poder usar blogger necesitamos una cuenta de correo gmail Si alguien no sabe como creaacutersela puede ver este video tutorial que nos ensentildea paso a paso como hacerlo
51 Crear una cuenta Gmail
Tambieacuten lo tienes en youtube en este enlace viacutedeo
httpswwwyoutubecomwatchv=BloMF6HPFms
TUTORIAL DE BLOGGER (Nacho Segovia) 7
52 Entrando en BloggerPuedes entrar de dos maneras a) desde la paacutegina de Google (wwwgooglees) accediendo al enlace de Aplicaciones y haciendo clic en la opcioacuten Maacutes
y aparece el icono de Blogger
b) Escribiendo en la barra de direcciones de nuestro navegador (recomiendo usar Chrome) httpswwwbloggercom Elige la opcioacuten que te sea maacutes faacutecilA continuacioacuten apareceraacute una ventana para iniciarsesioacuten simplemente pinchamos en Iniciar sesioacuten
Nombre y apellidos que introdujimos al crear la cuenta
Nuestra direccioacuten de correo
Pinchamos en Iniciar sesioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 8
Esta es la siguiente ventana que nos aparece
Simplemente pinchamos en el botoacuten laquo Continuar en Blogger laquo
TUTORIAL DE BLOGGER (Nacho Segovia) 9
Si ya hemos creado alguacuten blog aquiacute apareceriacutea En nuestro caso pinchamos en lsquoNuevo Blog rsquo
53 Asignar un nombre al Blog En la siguiente ventana que nos apareceraacute introducimos el tiacutetulo de nuestro blogTenemos que poner una direccioacuten intentandoque esteacute relacionada con nuestra temaacutetica (elPropio Blogger nos indicaraacute si estaacute disponible oNo)
Y por uacuteltimo elige una plantilla Maacutes tarde po-draacutes cambiarla y personalizar el blog
Pulsa en Crear blog
TUTORIAL DE BLOGGER (Nacho Segovia) 10
Y nuestro blog estaacute creado listo para hacer entradashellip
6 Crear una entrada Para hacer nuestra primera entrada pinchamos en el icono del laacutepiz y nos aparece la ventana con el editor para poner un tiacutetulo a la entrada escribir el mensaje y maacutes opciones que veremos maacutes adelante como insertar una imagen que simplemente requiere tener la imagen guardada y pinchar en el icono lsquo Inserta imagenrsquohellip
Por uacuteltimo pinchar enlsquoPublicarrsquo
TUTORIAL DE BLOGGER (Nacho Segovia) 11
Cuando pinchamos en Publicar aparece una ventana para compartir nuestra entrada en Google+ De momento vamos a obviar esto y damos en lsquoCancelarrsquo
Esta es la ventana que nos aparece tras pulsar en publicar
Pinchamos en Ver blog y veremos nuestro blog
TUTORIAL DE BLOGGER (Nacho Segovia) 12
Asiacute ha quedado nuestro blog
Tened en cuenta que no lehemos puesto un fondo ni una cabecera ni dimensio-neshellip Es decir falta el DISENtildeO
61 Antildeadir una imagen o un viacutedeo a nuestra entradaPinchamos en Acceder (veacutertice superior derecho)
Ahora en 1 entrada
Ahora en nuestra entrada
Y volvemos al editor del principio
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 antildeadirla Pulsamos en Antildeadir las imaacutegenes seleccionadas
Y veremos nuestra entrada con la imagen que hemos antildeadido
Simplemente con pinchar en la imagen sin soltar la podemos arrastar y colocar donde deseemos Tambieacuten nos aparecen opciones para cambiarla el tamantildeo alinearlahellip
TUTORIAL DE BLOGGER (Nacho Segovia) 14
Procederemos igual para insertar un viacutedeo aunque hay otras formas de poner un viacutedeo en nuestro blogPinchamos esta vez en el icono Insertar un viacutedeoSeleccionamos el viacutedeo para subir (en este caso guardado en el disco duro) Tardaraacute un poco en funcioacuten de la duracioacuten y del formato en que lo tengamos Y ya tendremos nuestro viacutedeo en la entrada
Bastaraacute con pinchar en Actualizar
Y Ver blog
Otra forma maacutes simple aunque no siempre disponible es pinchar debajo del viacutedeo 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) 15
Ya tenemos nuestra primera entrada con una imagen insertada y un viacutedeo
TUTORIAL DE BLOGGER (Nacho Segovia) 16
62 Antildeadir enlacesPara crear un viacutenculo y descargar archivos acceder a URL contactar con correos etc deberemos seleccionar el texto o imagen a la que adjudicaremos el Viacutenculo presionar en Enlace y rellenar con la direccioacuten a la que nos llevaraacute 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 seleccionadoTambieacuten podemos redirigirlo a una direccioacuten de correo
Os aconsejo que activeacuteis la casilla laquoabrir este enlace en una ventana nuevaraquo De esta manera el lector no se sale del bloghellip
Por uacuteltimo click en Aceptar Actualizar y Ver blog
TUTORIAL DE BLOGGER (Nacho Segovia) 17
63 Comentarios de los lectoresA no ser que solo queramos dar informacioacuten en nuestro blog es interesante la opcioacuten de permitir dejar comentarios a los lectores Para ello pinchamos en Acceder en nuestra entrada (de momento solo tenemosuna entrada) y asiacute llegamos al editor de la entada A la derecha tenemos el botoacuten Opciones
Pinchamos en eacutel y se despliegan las posibilidades de comentarios y de redaccioacuten de estos
Click en Listo y ya estaacute
TUTORIAL DE BLOGGER (Nacho Segovia) 18
7 Configuracioacuten del blogEmpezamos como siempre pinchando en Acceder (veacutertice superior derecho) veremos las entradas que hayamos creado y a la derecha de estas el botoacuten con una flechaindicando hacia abajo que es Maacutes opciones
Maacutes opciones
Pulsamos en esta y aparece un menuacute desplegable
Pinchamos en la opcioacuten Configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 19
Entramos en una paacutegina donde tenemos control de casi todo Ahora nos vamos a centrar en Configuracioacuten y sus posibilidades
TUTORIAL DE BLOGGER (Nacho Segovia) 20
Lo baacutesico podemos
-Editar el tiacutetulo y cambiarlo- Antildeadir ahora la descripcioacuten o cambiarlahellip - Dejar que nuestro blog sea visibleo invisible en la buacutesqueda en Internet
- Direccioacuten del blog Aquiacute cambiare-mos la direccioacuten de nuestro blog por otrasi estaacute disponible - Permisos Autores del blog Podemos dejar que pu-bliquen nuestros compantildeeros o alumnos Nosotros seriacuteamos los administradores y ellos seriacutean los autores del blogEl administrador tiene acceso total al blogPuede hacer cambios en el disentildeo y la configuracioacuten crear editar y borrar cual-quier entrada y cualquier comentarioUn autor no tiene acceso a la configuracioacuten Puede crear editar y borrar sus entradas o los comentarios asus entradas
Para crear autores soacutelo tenemos que hacer clic en ANtildeADIR AUTORES y escribir las direcciones separadasde comas o cogerlas de nuestros contactos de Gmail
TUTORIAL DE BLOGGER (Nacho Segovia) 21
Lectura del blog Aquiacute decimos quien puede ver y leer nuestro blog Cualquiera cualquiera puede acceder a nuestro blog Soacutelo a los usuarios que yo elija soacutelo podraacuten leerlo los usuarios que yo elija pero antes tendraacuten que identificarse que son ellos Opcioacuten interesante cuando queremos proteger el contenido de nuestro blog Uacutenicamente autores del blog los autores seraacuten los uacutenicos que puedan ver el contenido previa identificacioacuten
Entradas y comentariosMostrar un maacuteximo de cuantas entradas por paacutegina queremos mostrarPlantilla de las entradas Apenaacutes se usaMostrar imaacutegenes con Lightbox una forma dever las imaacutegenes Recomiendo que siacuteUbicacioacuten de los comentarios lugar dondequeremos que aparezca la ventana de comen-tariosiquestQuieacuten puede comentaraconsejo CualquieraModeracioacuten de comentarios Se especifica cuando se moderan los comentarios Si se habilita siempre aparece una ventana para poner un correo para que Blogger te avisede que existe un comentario a moderar Mostrar verificacioacuten de palabras dejarlo en no si moderas comentarios y en siacute si no losmoderasMostrar Backlinks Enlaces en los lugares que comparten esa entradaMensaje del formulario de comentarios paradejar un texto que lea quien vaya a hacer uncomentarioHay que GUARDAR CONFIGURACIOacuteN (arriba a la derecha)
TUTORIAL DE BLOGGER (Nacho Segovia) 22
Moacutevil y correo electroacutenico Publicar entradas mediante correo electroacutenico es una opcioacuten para permitir a la gente que pueda publicar mandando un correo electroacutenico Me parece un poco enrrevesadohellip
Correo para notificar los comentarios Podemos escribir hasta 10 direcciones de correo que recibiraacuten un correo cada vez que alguien deje un comentario en nuestro blog
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 23
Idioma y formato
Idioma Idioma del blogHabilitar transliteracioacuten Dejar inhabilitadaZona horaria No olvidar configurar en nuestra zona horariaFormato de cabecera de fecha Forma en la que deseamos ver la fecha de las entradasFormato de hora Forma en la que deseamos ver la horaFormato de hora de los comentarios Forma enla que deseamos ver la hora de los comentarios
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 24
Estas opciones las dejariacutea tal y como vienen por defecto
La uacutenica opcioacuten que encuentro uacutetil es Herramientas del blog
Desde aquiacute podemos importar otro blog en este exportar este para instalarlo en otro sitio (tambieacuten lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente)
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 8
Esta es la siguiente ventana que nos aparece
Simplemente pinchamos en el botoacuten laquo Continuar en Blogger laquo
TUTORIAL DE BLOGGER (Nacho Segovia) 9
Si ya hemos creado alguacuten blog aquiacute apareceriacutea En nuestro caso pinchamos en lsquoNuevo Blog rsquo
53 Asignar un nombre al Blog En la siguiente ventana que nos apareceraacute introducimos el tiacutetulo de nuestro blogTenemos que poner una direccioacuten intentandoque esteacute relacionada con nuestra temaacutetica (elPropio Blogger nos indicaraacute si estaacute disponible oNo)
Y por uacuteltimo elige una plantilla Maacutes tarde po-draacutes cambiarla y personalizar el blog
Pulsa en Crear blog
TUTORIAL DE BLOGGER (Nacho Segovia) 10
Y nuestro blog estaacute creado listo para hacer entradashellip
6 Crear una entrada Para hacer nuestra primera entrada pinchamos en el icono del laacutepiz y nos aparece la ventana con el editor para poner un tiacutetulo a la entrada escribir el mensaje y maacutes opciones que veremos maacutes adelante como insertar una imagen que simplemente requiere tener la imagen guardada y pinchar en el icono lsquo Inserta imagenrsquohellip
Por uacuteltimo pinchar enlsquoPublicarrsquo
TUTORIAL DE BLOGGER (Nacho Segovia) 11
Cuando pinchamos en Publicar aparece una ventana para compartir nuestra entrada en Google+ De momento vamos a obviar esto y damos en lsquoCancelarrsquo
Esta es la ventana que nos aparece tras pulsar en publicar
Pinchamos en Ver blog y veremos nuestro blog
TUTORIAL DE BLOGGER (Nacho Segovia) 12
Asiacute ha quedado nuestro blog
Tened en cuenta que no lehemos puesto un fondo ni una cabecera ni dimensio-neshellip Es decir falta el DISENtildeO
61 Antildeadir una imagen o un viacutedeo a nuestra entradaPinchamos en Acceder (veacutertice superior derecho)
Ahora en 1 entrada
Ahora en nuestra entrada
Y volvemos al editor del principio
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 antildeadirla Pulsamos en Antildeadir las imaacutegenes seleccionadas
Y veremos nuestra entrada con la imagen que hemos antildeadido
Simplemente con pinchar en la imagen sin soltar la podemos arrastar y colocar donde deseemos Tambieacuten nos aparecen opciones para cambiarla el tamantildeo alinearlahellip
TUTORIAL DE BLOGGER (Nacho Segovia) 14
Procederemos igual para insertar un viacutedeo aunque hay otras formas de poner un viacutedeo en nuestro blogPinchamos esta vez en el icono Insertar un viacutedeoSeleccionamos el viacutedeo para subir (en este caso guardado en el disco duro) Tardaraacute un poco en funcioacuten de la duracioacuten y del formato en que lo tengamos Y ya tendremos nuestro viacutedeo en la entrada
Bastaraacute con pinchar en Actualizar
Y Ver blog
Otra forma maacutes simple aunque no siempre disponible es pinchar debajo del viacutedeo 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) 15
Ya tenemos nuestra primera entrada con una imagen insertada y un viacutedeo
TUTORIAL DE BLOGGER (Nacho Segovia) 16
62 Antildeadir enlacesPara crear un viacutenculo y descargar archivos acceder a URL contactar con correos etc deberemos seleccionar el texto o imagen a la que adjudicaremos el Viacutenculo presionar en Enlace y rellenar con la direccioacuten a la que nos llevaraacute 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 seleccionadoTambieacuten podemos redirigirlo a una direccioacuten de correo
Os aconsejo que activeacuteis la casilla laquoabrir este enlace en una ventana nuevaraquo De esta manera el lector no se sale del bloghellip
Por uacuteltimo click en Aceptar Actualizar y Ver blog
TUTORIAL DE BLOGGER (Nacho Segovia) 17
63 Comentarios de los lectoresA no ser que solo queramos dar informacioacuten en nuestro blog es interesante la opcioacuten de permitir dejar comentarios a los lectores Para ello pinchamos en Acceder en nuestra entrada (de momento solo tenemosuna entrada) y asiacute llegamos al editor de la entada A la derecha tenemos el botoacuten Opciones
Pinchamos en eacutel y se despliegan las posibilidades de comentarios y de redaccioacuten de estos
Click en Listo y ya estaacute
TUTORIAL DE BLOGGER (Nacho Segovia) 18
7 Configuracioacuten del blogEmpezamos como siempre pinchando en Acceder (veacutertice superior derecho) veremos las entradas que hayamos creado y a la derecha de estas el botoacuten con una flechaindicando hacia abajo que es Maacutes opciones
Maacutes opciones
Pulsamos en esta y aparece un menuacute desplegable
Pinchamos en la opcioacuten Configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 19
Entramos en una paacutegina donde tenemos control de casi todo Ahora nos vamos a centrar en Configuracioacuten y sus posibilidades
TUTORIAL DE BLOGGER (Nacho Segovia) 20
Lo baacutesico podemos
-Editar el tiacutetulo y cambiarlo- Antildeadir ahora la descripcioacuten o cambiarlahellip - Dejar que nuestro blog sea visibleo invisible en la buacutesqueda en Internet
- Direccioacuten del blog Aquiacute cambiare-mos la direccioacuten de nuestro blog por otrasi estaacute disponible - Permisos Autores del blog Podemos dejar que pu-bliquen nuestros compantildeeros o alumnos Nosotros seriacuteamos los administradores y ellos seriacutean los autores del blogEl administrador tiene acceso total al blogPuede hacer cambios en el disentildeo y la configuracioacuten crear editar y borrar cual-quier entrada y cualquier comentarioUn autor no tiene acceso a la configuracioacuten Puede crear editar y borrar sus entradas o los comentarios asus entradas
Para crear autores soacutelo tenemos que hacer clic en ANtildeADIR AUTORES y escribir las direcciones separadasde comas o cogerlas de nuestros contactos de Gmail
TUTORIAL DE BLOGGER (Nacho Segovia) 21
Lectura del blog Aquiacute decimos quien puede ver y leer nuestro blog Cualquiera cualquiera puede acceder a nuestro blog Soacutelo a los usuarios que yo elija soacutelo podraacuten leerlo los usuarios que yo elija pero antes tendraacuten que identificarse que son ellos Opcioacuten interesante cuando queremos proteger el contenido de nuestro blog Uacutenicamente autores del blog los autores seraacuten los uacutenicos que puedan ver el contenido previa identificacioacuten
Entradas y comentariosMostrar un maacuteximo de cuantas entradas por paacutegina queremos mostrarPlantilla de las entradas Apenaacutes se usaMostrar imaacutegenes con Lightbox una forma dever las imaacutegenes Recomiendo que siacuteUbicacioacuten de los comentarios lugar dondequeremos que aparezca la ventana de comen-tariosiquestQuieacuten puede comentaraconsejo CualquieraModeracioacuten de comentarios Se especifica cuando se moderan los comentarios Si se habilita siempre aparece una ventana para poner un correo para que Blogger te avisede que existe un comentario a moderar Mostrar verificacioacuten de palabras dejarlo en no si moderas comentarios y en siacute si no losmoderasMostrar Backlinks Enlaces en los lugares que comparten esa entradaMensaje del formulario de comentarios paradejar un texto que lea quien vaya a hacer uncomentarioHay que GUARDAR CONFIGURACIOacuteN (arriba a la derecha)
TUTORIAL DE BLOGGER (Nacho Segovia) 22
Moacutevil y correo electroacutenico Publicar entradas mediante correo electroacutenico es una opcioacuten para permitir a la gente que pueda publicar mandando un correo electroacutenico Me parece un poco enrrevesadohellip
Correo para notificar los comentarios Podemos escribir hasta 10 direcciones de correo que recibiraacuten un correo cada vez que alguien deje un comentario en nuestro blog
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 23
Idioma y formato
Idioma Idioma del blogHabilitar transliteracioacuten Dejar inhabilitadaZona horaria No olvidar configurar en nuestra zona horariaFormato de cabecera de fecha Forma en la que deseamos ver la fecha de las entradasFormato de hora Forma en la que deseamos ver la horaFormato de hora de los comentarios Forma enla que deseamos ver la hora de los comentarios
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 24
Estas opciones las dejariacutea tal y como vienen por defecto
La uacutenica opcioacuten que encuentro uacutetil es Herramientas del blog
Desde aquiacute podemos importar otro blog en este exportar este para instalarlo en otro sitio (tambieacuten lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente)
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 9
Si ya hemos creado alguacuten blog aquiacute apareceriacutea En nuestro caso pinchamos en lsquoNuevo Blog rsquo
53 Asignar un nombre al Blog En la siguiente ventana que nos apareceraacute introducimos el tiacutetulo de nuestro blogTenemos que poner una direccioacuten intentandoque esteacute relacionada con nuestra temaacutetica (elPropio Blogger nos indicaraacute si estaacute disponible oNo)
Y por uacuteltimo elige una plantilla Maacutes tarde po-draacutes cambiarla y personalizar el blog
Pulsa en Crear blog
TUTORIAL DE BLOGGER (Nacho Segovia) 10
Y nuestro blog estaacute creado listo para hacer entradashellip
6 Crear una entrada Para hacer nuestra primera entrada pinchamos en el icono del laacutepiz y nos aparece la ventana con el editor para poner un tiacutetulo a la entrada escribir el mensaje y maacutes opciones que veremos maacutes adelante como insertar una imagen que simplemente requiere tener la imagen guardada y pinchar en el icono lsquo Inserta imagenrsquohellip
Por uacuteltimo pinchar enlsquoPublicarrsquo
TUTORIAL DE BLOGGER (Nacho Segovia) 11
Cuando pinchamos en Publicar aparece una ventana para compartir nuestra entrada en Google+ De momento vamos a obviar esto y damos en lsquoCancelarrsquo
Esta es la ventana que nos aparece tras pulsar en publicar
Pinchamos en Ver blog y veremos nuestro blog
TUTORIAL DE BLOGGER (Nacho Segovia) 12
Asiacute ha quedado nuestro blog
Tened en cuenta que no lehemos puesto un fondo ni una cabecera ni dimensio-neshellip Es decir falta el DISENtildeO
61 Antildeadir una imagen o un viacutedeo a nuestra entradaPinchamos en Acceder (veacutertice superior derecho)
Ahora en 1 entrada
Ahora en nuestra entrada
Y volvemos al editor del principio
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 antildeadirla Pulsamos en Antildeadir las imaacutegenes seleccionadas
Y veremos nuestra entrada con la imagen que hemos antildeadido
Simplemente con pinchar en la imagen sin soltar la podemos arrastar y colocar donde deseemos Tambieacuten nos aparecen opciones para cambiarla el tamantildeo alinearlahellip
TUTORIAL DE BLOGGER (Nacho Segovia) 14
Procederemos igual para insertar un viacutedeo aunque hay otras formas de poner un viacutedeo en nuestro blogPinchamos esta vez en el icono Insertar un viacutedeoSeleccionamos el viacutedeo para subir (en este caso guardado en el disco duro) Tardaraacute un poco en funcioacuten de la duracioacuten y del formato en que lo tengamos Y ya tendremos nuestro viacutedeo en la entrada
Bastaraacute con pinchar en Actualizar
Y Ver blog
Otra forma maacutes simple aunque no siempre disponible es pinchar debajo del viacutedeo 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) 15
Ya tenemos nuestra primera entrada con una imagen insertada y un viacutedeo
TUTORIAL DE BLOGGER (Nacho Segovia) 16
62 Antildeadir enlacesPara crear un viacutenculo y descargar archivos acceder a URL contactar con correos etc deberemos seleccionar el texto o imagen a la que adjudicaremos el Viacutenculo presionar en Enlace y rellenar con la direccioacuten a la que nos llevaraacute 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 seleccionadoTambieacuten podemos redirigirlo a una direccioacuten de correo
Os aconsejo que activeacuteis la casilla laquoabrir este enlace en una ventana nuevaraquo De esta manera el lector no se sale del bloghellip
Por uacuteltimo click en Aceptar Actualizar y Ver blog
TUTORIAL DE BLOGGER (Nacho Segovia) 17
63 Comentarios de los lectoresA no ser que solo queramos dar informacioacuten en nuestro blog es interesante la opcioacuten de permitir dejar comentarios a los lectores Para ello pinchamos en Acceder en nuestra entrada (de momento solo tenemosuna entrada) y asiacute llegamos al editor de la entada A la derecha tenemos el botoacuten Opciones
Pinchamos en eacutel y se despliegan las posibilidades de comentarios y de redaccioacuten de estos
Click en Listo y ya estaacute
TUTORIAL DE BLOGGER (Nacho Segovia) 18
7 Configuracioacuten del blogEmpezamos como siempre pinchando en Acceder (veacutertice superior derecho) veremos las entradas que hayamos creado y a la derecha de estas el botoacuten con una flechaindicando hacia abajo que es Maacutes opciones
Maacutes opciones
Pulsamos en esta y aparece un menuacute desplegable
Pinchamos en la opcioacuten Configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 19
Entramos en una paacutegina donde tenemos control de casi todo Ahora nos vamos a centrar en Configuracioacuten y sus posibilidades
TUTORIAL DE BLOGGER (Nacho Segovia) 20
Lo baacutesico podemos
-Editar el tiacutetulo y cambiarlo- Antildeadir ahora la descripcioacuten o cambiarlahellip - Dejar que nuestro blog sea visibleo invisible en la buacutesqueda en Internet
- Direccioacuten del blog Aquiacute cambiare-mos la direccioacuten de nuestro blog por otrasi estaacute disponible - Permisos Autores del blog Podemos dejar que pu-bliquen nuestros compantildeeros o alumnos Nosotros seriacuteamos los administradores y ellos seriacutean los autores del blogEl administrador tiene acceso total al blogPuede hacer cambios en el disentildeo y la configuracioacuten crear editar y borrar cual-quier entrada y cualquier comentarioUn autor no tiene acceso a la configuracioacuten Puede crear editar y borrar sus entradas o los comentarios asus entradas
Para crear autores soacutelo tenemos que hacer clic en ANtildeADIR AUTORES y escribir las direcciones separadasde comas o cogerlas de nuestros contactos de Gmail
TUTORIAL DE BLOGGER (Nacho Segovia) 21
Lectura del blog Aquiacute decimos quien puede ver y leer nuestro blog Cualquiera cualquiera puede acceder a nuestro blog Soacutelo a los usuarios que yo elija soacutelo podraacuten leerlo los usuarios que yo elija pero antes tendraacuten que identificarse que son ellos Opcioacuten interesante cuando queremos proteger el contenido de nuestro blog Uacutenicamente autores del blog los autores seraacuten los uacutenicos que puedan ver el contenido previa identificacioacuten
Entradas y comentariosMostrar un maacuteximo de cuantas entradas por paacutegina queremos mostrarPlantilla de las entradas Apenaacutes se usaMostrar imaacutegenes con Lightbox una forma dever las imaacutegenes Recomiendo que siacuteUbicacioacuten de los comentarios lugar dondequeremos que aparezca la ventana de comen-tariosiquestQuieacuten puede comentaraconsejo CualquieraModeracioacuten de comentarios Se especifica cuando se moderan los comentarios Si se habilita siempre aparece una ventana para poner un correo para que Blogger te avisede que existe un comentario a moderar Mostrar verificacioacuten de palabras dejarlo en no si moderas comentarios y en siacute si no losmoderasMostrar Backlinks Enlaces en los lugares que comparten esa entradaMensaje del formulario de comentarios paradejar un texto que lea quien vaya a hacer uncomentarioHay que GUARDAR CONFIGURACIOacuteN (arriba a la derecha)
TUTORIAL DE BLOGGER (Nacho Segovia) 22
Moacutevil y correo electroacutenico Publicar entradas mediante correo electroacutenico es una opcioacuten para permitir a la gente que pueda publicar mandando un correo electroacutenico Me parece un poco enrrevesadohellip
Correo para notificar los comentarios Podemos escribir hasta 10 direcciones de correo que recibiraacuten un correo cada vez que alguien deje un comentario en nuestro blog
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 23
Idioma y formato
Idioma Idioma del blogHabilitar transliteracioacuten Dejar inhabilitadaZona horaria No olvidar configurar en nuestra zona horariaFormato de cabecera de fecha Forma en la que deseamos ver la fecha de las entradasFormato de hora Forma en la que deseamos ver la horaFormato de hora de los comentarios Forma enla que deseamos ver la hora de los comentarios
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 24
Estas opciones las dejariacutea tal y como vienen por defecto
La uacutenica opcioacuten que encuentro uacutetil es Herramientas del blog
Desde aquiacute podemos importar otro blog en este exportar este para instalarlo en otro sitio (tambieacuten lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente)
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 10
Y nuestro blog estaacute creado listo para hacer entradashellip
6 Crear una entrada Para hacer nuestra primera entrada pinchamos en el icono del laacutepiz y nos aparece la ventana con el editor para poner un tiacutetulo a la entrada escribir el mensaje y maacutes opciones que veremos maacutes adelante como insertar una imagen que simplemente requiere tener la imagen guardada y pinchar en el icono lsquo Inserta imagenrsquohellip
Por uacuteltimo pinchar enlsquoPublicarrsquo
TUTORIAL DE BLOGGER (Nacho Segovia) 11
Cuando pinchamos en Publicar aparece una ventana para compartir nuestra entrada en Google+ De momento vamos a obviar esto y damos en lsquoCancelarrsquo
Esta es la ventana que nos aparece tras pulsar en publicar
Pinchamos en Ver blog y veremos nuestro blog
TUTORIAL DE BLOGGER (Nacho Segovia) 12
Asiacute ha quedado nuestro blog
Tened en cuenta que no lehemos puesto un fondo ni una cabecera ni dimensio-neshellip Es decir falta el DISENtildeO
61 Antildeadir una imagen o un viacutedeo a nuestra entradaPinchamos en Acceder (veacutertice superior derecho)
Ahora en 1 entrada
Ahora en nuestra entrada
Y volvemos al editor del principio
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 antildeadirla Pulsamos en Antildeadir las imaacutegenes seleccionadas
Y veremos nuestra entrada con la imagen que hemos antildeadido
Simplemente con pinchar en la imagen sin soltar la podemos arrastar y colocar donde deseemos Tambieacuten nos aparecen opciones para cambiarla el tamantildeo alinearlahellip
TUTORIAL DE BLOGGER (Nacho Segovia) 14
Procederemos igual para insertar un viacutedeo aunque hay otras formas de poner un viacutedeo en nuestro blogPinchamos esta vez en el icono Insertar un viacutedeoSeleccionamos el viacutedeo para subir (en este caso guardado en el disco duro) Tardaraacute un poco en funcioacuten de la duracioacuten y del formato en que lo tengamos Y ya tendremos nuestro viacutedeo en la entrada
Bastaraacute con pinchar en Actualizar
Y Ver blog
Otra forma maacutes simple aunque no siempre disponible es pinchar debajo del viacutedeo 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) 15
Ya tenemos nuestra primera entrada con una imagen insertada y un viacutedeo
TUTORIAL DE BLOGGER (Nacho Segovia) 16
62 Antildeadir enlacesPara crear un viacutenculo y descargar archivos acceder a URL contactar con correos etc deberemos seleccionar el texto o imagen a la que adjudicaremos el Viacutenculo presionar en Enlace y rellenar con la direccioacuten a la que nos llevaraacute 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 seleccionadoTambieacuten podemos redirigirlo a una direccioacuten de correo
Os aconsejo que activeacuteis la casilla laquoabrir este enlace en una ventana nuevaraquo De esta manera el lector no se sale del bloghellip
Por uacuteltimo click en Aceptar Actualizar y Ver blog
TUTORIAL DE BLOGGER (Nacho Segovia) 17
63 Comentarios de los lectoresA no ser que solo queramos dar informacioacuten en nuestro blog es interesante la opcioacuten de permitir dejar comentarios a los lectores Para ello pinchamos en Acceder en nuestra entrada (de momento solo tenemosuna entrada) y asiacute llegamos al editor de la entada A la derecha tenemos el botoacuten Opciones
Pinchamos en eacutel y se despliegan las posibilidades de comentarios y de redaccioacuten de estos
Click en Listo y ya estaacute
TUTORIAL DE BLOGGER (Nacho Segovia) 18
7 Configuracioacuten del blogEmpezamos como siempre pinchando en Acceder (veacutertice superior derecho) veremos las entradas que hayamos creado y a la derecha de estas el botoacuten con una flechaindicando hacia abajo que es Maacutes opciones
Maacutes opciones
Pulsamos en esta y aparece un menuacute desplegable
Pinchamos en la opcioacuten Configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 19
Entramos en una paacutegina donde tenemos control de casi todo Ahora nos vamos a centrar en Configuracioacuten y sus posibilidades
TUTORIAL DE BLOGGER (Nacho Segovia) 20
Lo baacutesico podemos
-Editar el tiacutetulo y cambiarlo- Antildeadir ahora la descripcioacuten o cambiarlahellip - Dejar que nuestro blog sea visibleo invisible en la buacutesqueda en Internet
- Direccioacuten del blog Aquiacute cambiare-mos la direccioacuten de nuestro blog por otrasi estaacute disponible - Permisos Autores del blog Podemos dejar que pu-bliquen nuestros compantildeeros o alumnos Nosotros seriacuteamos los administradores y ellos seriacutean los autores del blogEl administrador tiene acceso total al blogPuede hacer cambios en el disentildeo y la configuracioacuten crear editar y borrar cual-quier entrada y cualquier comentarioUn autor no tiene acceso a la configuracioacuten Puede crear editar y borrar sus entradas o los comentarios asus entradas
Para crear autores soacutelo tenemos que hacer clic en ANtildeADIR AUTORES y escribir las direcciones separadasde comas o cogerlas de nuestros contactos de Gmail
TUTORIAL DE BLOGGER (Nacho Segovia) 21
Lectura del blog Aquiacute decimos quien puede ver y leer nuestro blog Cualquiera cualquiera puede acceder a nuestro blog Soacutelo a los usuarios que yo elija soacutelo podraacuten leerlo los usuarios que yo elija pero antes tendraacuten que identificarse que son ellos Opcioacuten interesante cuando queremos proteger el contenido de nuestro blog Uacutenicamente autores del blog los autores seraacuten los uacutenicos que puedan ver el contenido previa identificacioacuten
Entradas y comentariosMostrar un maacuteximo de cuantas entradas por paacutegina queremos mostrarPlantilla de las entradas Apenaacutes se usaMostrar imaacutegenes con Lightbox una forma dever las imaacutegenes Recomiendo que siacuteUbicacioacuten de los comentarios lugar dondequeremos que aparezca la ventana de comen-tariosiquestQuieacuten puede comentaraconsejo CualquieraModeracioacuten de comentarios Se especifica cuando se moderan los comentarios Si se habilita siempre aparece una ventana para poner un correo para que Blogger te avisede que existe un comentario a moderar Mostrar verificacioacuten de palabras dejarlo en no si moderas comentarios y en siacute si no losmoderasMostrar Backlinks Enlaces en los lugares que comparten esa entradaMensaje del formulario de comentarios paradejar un texto que lea quien vaya a hacer uncomentarioHay que GUARDAR CONFIGURACIOacuteN (arriba a la derecha)
TUTORIAL DE BLOGGER (Nacho Segovia) 22
Moacutevil y correo electroacutenico Publicar entradas mediante correo electroacutenico es una opcioacuten para permitir a la gente que pueda publicar mandando un correo electroacutenico Me parece un poco enrrevesadohellip
Correo para notificar los comentarios Podemos escribir hasta 10 direcciones de correo que recibiraacuten un correo cada vez que alguien deje un comentario en nuestro blog
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 23
Idioma y formato
Idioma Idioma del blogHabilitar transliteracioacuten Dejar inhabilitadaZona horaria No olvidar configurar en nuestra zona horariaFormato de cabecera de fecha Forma en la que deseamos ver la fecha de las entradasFormato de hora Forma en la que deseamos ver la horaFormato de hora de los comentarios Forma enla que deseamos ver la hora de los comentarios
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 24
Estas opciones las dejariacutea tal y como vienen por defecto
La uacutenica opcioacuten que encuentro uacutetil es Herramientas del blog
Desde aquiacute podemos importar otro blog en este exportar este para instalarlo en otro sitio (tambieacuten lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente)
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 11
Cuando pinchamos en Publicar aparece una ventana para compartir nuestra entrada en Google+ De momento vamos a obviar esto y damos en lsquoCancelarrsquo
Esta es la ventana que nos aparece tras pulsar en publicar
Pinchamos en Ver blog y veremos nuestro blog
TUTORIAL DE BLOGGER (Nacho Segovia) 12
Asiacute ha quedado nuestro blog
Tened en cuenta que no lehemos puesto un fondo ni una cabecera ni dimensio-neshellip Es decir falta el DISENtildeO
61 Antildeadir una imagen o un viacutedeo a nuestra entradaPinchamos en Acceder (veacutertice superior derecho)
Ahora en 1 entrada
Ahora en nuestra entrada
Y volvemos al editor del principio
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 antildeadirla Pulsamos en Antildeadir las imaacutegenes seleccionadas
Y veremos nuestra entrada con la imagen que hemos antildeadido
Simplemente con pinchar en la imagen sin soltar la podemos arrastar y colocar donde deseemos Tambieacuten nos aparecen opciones para cambiarla el tamantildeo alinearlahellip
TUTORIAL DE BLOGGER (Nacho Segovia) 14
Procederemos igual para insertar un viacutedeo aunque hay otras formas de poner un viacutedeo en nuestro blogPinchamos esta vez en el icono Insertar un viacutedeoSeleccionamos el viacutedeo para subir (en este caso guardado en el disco duro) Tardaraacute un poco en funcioacuten de la duracioacuten y del formato en que lo tengamos Y ya tendremos nuestro viacutedeo en la entrada
Bastaraacute con pinchar en Actualizar
Y Ver blog
Otra forma maacutes simple aunque no siempre disponible es pinchar debajo del viacutedeo 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) 15
Ya tenemos nuestra primera entrada con una imagen insertada y un viacutedeo
TUTORIAL DE BLOGGER (Nacho Segovia) 16
62 Antildeadir enlacesPara crear un viacutenculo y descargar archivos acceder a URL contactar con correos etc deberemos seleccionar el texto o imagen a la que adjudicaremos el Viacutenculo presionar en Enlace y rellenar con la direccioacuten a la que nos llevaraacute 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 seleccionadoTambieacuten podemos redirigirlo a una direccioacuten de correo
Os aconsejo que activeacuteis la casilla laquoabrir este enlace en una ventana nuevaraquo De esta manera el lector no se sale del bloghellip
Por uacuteltimo click en Aceptar Actualizar y Ver blog
TUTORIAL DE BLOGGER (Nacho Segovia) 17
63 Comentarios de los lectoresA no ser que solo queramos dar informacioacuten en nuestro blog es interesante la opcioacuten de permitir dejar comentarios a los lectores Para ello pinchamos en Acceder en nuestra entrada (de momento solo tenemosuna entrada) y asiacute llegamos al editor de la entada A la derecha tenemos el botoacuten Opciones
Pinchamos en eacutel y se despliegan las posibilidades de comentarios y de redaccioacuten de estos
Click en Listo y ya estaacute
TUTORIAL DE BLOGGER (Nacho Segovia) 18
7 Configuracioacuten del blogEmpezamos como siempre pinchando en Acceder (veacutertice superior derecho) veremos las entradas que hayamos creado y a la derecha de estas el botoacuten con una flechaindicando hacia abajo que es Maacutes opciones
Maacutes opciones
Pulsamos en esta y aparece un menuacute desplegable
Pinchamos en la opcioacuten Configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 19
Entramos en una paacutegina donde tenemos control de casi todo Ahora nos vamos a centrar en Configuracioacuten y sus posibilidades
TUTORIAL DE BLOGGER (Nacho Segovia) 20
Lo baacutesico podemos
-Editar el tiacutetulo y cambiarlo- Antildeadir ahora la descripcioacuten o cambiarlahellip - Dejar que nuestro blog sea visibleo invisible en la buacutesqueda en Internet
- Direccioacuten del blog Aquiacute cambiare-mos la direccioacuten de nuestro blog por otrasi estaacute disponible - Permisos Autores del blog Podemos dejar que pu-bliquen nuestros compantildeeros o alumnos Nosotros seriacuteamos los administradores y ellos seriacutean los autores del blogEl administrador tiene acceso total al blogPuede hacer cambios en el disentildeo y la configuracioacuten crear editar y borrar cual-quier entrada y cualquier comentarioUn autor no tiene acceso a la configuracioacuten Puede crear editar y borrar sus entradas o los comentarios asus entradas
Para crear autores soacutelo tenemos que hacer clic en ANtildeADIR AUTORES y escribir las direcciones separadasde comas o cogerlas de nuestros contactos de Gmail
TUTORIAL DE BLOGGER (Nacho Segovia) 21
Lectura del blog Aquiacute decimos quien puede ver y leer nuestro blog Cualquiera cualquiera puede acceder a nuestro blog Soacutelo a los usuarios que yo elija soacutelo podraacuten leerlo los usuarios que yo elija pero antes tendraacuten que identificarse que son ellos Opcioacuten interesante cuando queremos proteger el contenido de nuestro blog Uacutenicamente autores del blog los autores seraacuten los uacutenicos que puedan ver el contenido previa identificacioacuten
Entradas y comentariosMostrar un maacuteximo de cuantas entradas por paacutegina queremos mostrarPlantilla de las entradas Apenaacutes se usaMostrar imaacutegenes con Lightbox una forma dever las imaacutegenes Recomiendo que siacuteUbicacioacuten de los comentarios lugar dondequeremos que aparezca la ventana de comen-tariosiquestQuieacuten puede comentaraconsejo CualquieraModeracioacuten de comentarios Se especifica cuando se moderan los comentarios Si se habilita siempre aparece una ventana para poner un correo para que Blogger te avisede que existe un comentario a moderar Mostrar verificacioacuten de palabras dejarlo en no si moderas comentarios y en siacute si no losmoderasMostrar Backlinks Enlaces en los lugares que comparten esa entradaMensaje del formulario de comentarios paradejar un texto que lea quien vaya a hacer uncomentarioHay que GUARDAR CONFIGURACIOacuteN (arriba a la derecha)
TUTORIAL DE BLOGGER (Nacho Segovia) 22
Moacutevil y correo electroacutenico Publicar entradas mediante correo electroacutenico es una opcioacuten para permitir a la gente que pueda publicar mandando un correo electroacutenico Me parece un poco enrrevesadohellip
Correo para notificar los comentarios Podemos escribir hasta 10 direcciones de correo que recibiraacuten un correo cada vez que alguien deje un comentario en nuestro blog
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 23
Idioma y formato
Idioma Idioma del blogHabilitar transliteracioacuten Dejar inhabilitadaZona horaria No olvidar configurar en nuestra zona horariaFormato de cabecera de fecha Forma en la que deseamos ver la fecha de las entradasFormato de hora Forma en la que deseamos ver la horaFormato de hora de los comentarios Forma enla que deseamos ver la hora de los comentarios
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 24
Estas opciones las dejariacutea tal y como vienen por defecto
La uacutenica opcioacuten que encuentro uacutetil es Herramientas del blog
Desde aquiacute podemos importar otro blog en este exportar este para instalarlo en otro sitio (tambieacuten lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente)
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 12
Asiacute ha quedado nuestro blog
Tened en cuenta que no lehemos puesto un fondo ni una cabecera ni dimensio-neshellip Es decir falta el DISENtildeO
61 Antildeadir una imagen o un viacutedeo a nuestra entradaPinchamos en Acceder (veacutertice superior derecho)
Ahora en 1 entrada
Ahora en nuestra entrada
Y volvemos al editor del principio
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 antildeadirla Pulsamos en Antildeadir las imaacutegenes seleccionadas
Y veremos nuestra entrada con la imagen que hemos antildeadido
Simplemente con pinchar en la imagen sin soltar la podemos arrastar y colocar donde deseemos Tambieacuten nos aparecen opciones para cambiarla el tamantildeo alinearlahellip
TUTORIAL DE BLOGGER (Nacho Segovia) 14
Procederemos igual para insertar un viacutedeo aunque hay otras formas de poner un viacutedeo en nuestro blogPinchamos esta vez en el icono Insertar un viacutedeoSeleccionamos el viacutedeo para subir (en este caso guardado en el disco duro) Tardaraacute un poco en funcioacuten de la duracioacuten y del formato en que lo tengamos Y ya tendremos nuestro viacutedeo en la entrada
Bastaraacute con pinchar en Actualizar
Y Ver blog
Otra forma maacutes simple aunque no siempre disponible es pinchar debajo del viacutedeo 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) 15
Ya tenemos nuestra primera entrada con una imagen insertada y un viacutedeo
TUTORIAL DE BLOGGER (Nacho Segovia) 16
62 Antildeadir enlacesPara crear un viacutenculo y descargar archivos acceder a URL contactar con correos etc deberemos seleccionar el texto o imagen a la que adjudicaremos el Viacutenculo presionar en Enlace y rellenar con la direccioacuten a la que nos llevaraacute 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 seleccionadoTambieacuten podemos redirigirlo a una direccioacuten de correo
Os aconsejo que activeacuteis la casilla laquoabrir este enlace en una ventana nuevaraquo De esta manera el lector no se sale del bloghellip
Por uacuteltimo click en Aceptar Actualizar y Ver blog
TUTORIAL DE BLOGGER (Nacho Segovia) 17
63 Comentarios de los lectoresA no ser que solo queramos dar informacioacuten en nuestro blog es interesante la opcioacuten de permitir dejar comentarios a los lectores Para ello pinchamos en Acceder en nuestra entrada (de momento solo tenemosuna entrada) y asiacute llegamos al editor de la entada A la derecha tenemos el botoacuten Opciones
Pinchamos en eacutel y se despliegan las posibilidades de comentarios y de redaccioacuten de estos
Click en Listo y ya estaacute
TUTORIAL DE BLOGGER (Nacho Segovia) 18
7 Configuracioacuten del blogEmpezamos como siempre pinchando en Acceder (veacutertice superior derecho) veremos las entradas que hayamos creado y a la derecha de estas el botoacuten con una flechaindicando hacia abajo que es Maacutes opciones
Maacutes opciones
Pulsamos en esta y aparece un menuacute desplegable
Pinchamos en la opcioacuten Configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 19
Entramos en una paacutegina donde tenemos control de casi todo Ahora nos vamos a centrar en Configuracioacuten y sus posibilidades
TUTORIAL DE BLOGGER (Nacho Segovia) 20
Lo baacutesico podemos
-Editar el tiacutetulo y cambiarlo- Antildeadir ahora la descripcioacuten o cambiarlahellip - Dejar que nuestro blog sea visibleo invisible en la buacutesqueda en Internet
- Direccioacuten del blog Aquiacute cambiare-mos la direccioacuten de nuestro blog por otrasi estaacute disponible - Permisos Autores del blog Podemos dejar que pu-bliquen nuestros compantildeeros o alumnos Nosotros seriacuteamos los administradores y ellos seriacutean los autores del blogEl administrador tiene acceso total al blogPuede hacer cambios en el disentildeo y la configuracioacuten crear editar y borrar cual-quier entrada y cualquier comentarioUn autor no tiene acceso a la configuracioacuten Puede crear editar y borrar sus entradas o los comentarios asus entradas
Para crear autores soacutelo tenemos que hacer clic en ANtildeADIR AUTORES y escribir las direcciones separadasde comas o cogerlas de nuestros contactos de Gmail
TUTORIAL DE BLOGGER (Nacho Segovia) 21
Lectura del blog Aquiacute decimos quien puede ver y leer nuestro blog Cualquiera cualquiera puede acceder a nuestro blog Soacutelo a los usuarios que yo elija soacutelo podraacuten leerlo los usuarios que yo elija pero antes tendraacuten que identificarse que son ellos Opcioacuten interesante cuando queremos proteger el contenido de nuestro blog Uacutenicamente autores del blog los autores seraacuten los uacutenicos que puedan ver el contenido previa identificacioacuten
Entradas y comentariosMostrar un maacuteximo de cuantas entradas por paacutegina queremos mostrarPlantilla de las entradas Apenaacutes se usaMostrar imaacutegenes con Lightbox una forma dever las imaacutegenes Recomiendo que siacuteUbicacioacuten de los comentarios lugar dondequeremos que aparezca la ventana de comen-tariosiquestQuieacuten puede comentaraconsejo CualquieraModeracioacuten de comentarios Se especifica cuando se moderan los comentarios Si se habilita siempre aparece una ventana para poner un correo para que Blogger te avisede que existe un comentario a moderar Mostrar verificacioacuten de palabras dejarlo en no si moderas comentarios y en siacute si no losmoderasMostrar Backlinks Enlaces en los lugares que comparten esa entradaMensaje del formulario de comentarios paradejar un texto que lea quien vaya a hacer uncomentarioHay que GUARDAR CONFIGURACIOacuteN (arriba a la derecha)
TUTORIAL DE BLOGGER (Nacho Segovia) 22
Moacutevil y correo electroacutenico Publicar entradas mediante correo electroacutenico es una opcioacuten para permitir a la gente que pueda publicar mandando un correo electroacutenico Me parece un poco enrrevesadohellip
Correo para notificar los comentarios Podemos escribir hasta 10 direcciones de correo que recibiraacuten un correo cada vez que alguien deje un comentario en nuestro blog
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 23
Idioma y formato
Idioma Idioma del blogHabilitar transliteracioacuten Dejar inhabilitadaZona horaria No olvidar configurar en nuestra zona horariaFormato de cabecera de fecha Forma en la que deseamos ver la fecha de las entradasFormato de hora Forma en la que deseamos ver la horaFormato de hora de los comentarios Forma enla que deseamos ver la hora de los comentarios
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 24
Estas opciones las dejariacutea tal y como vienen por defecto
La uacutenica opcioacuten que encuentro uacutetil es Herramientas del blog
Desde aquiacute podemos importar otro blog en este exportar este para instalarlo en otro sitio (tambieacuten lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente)
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
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 antildeadirla Pulsamos en Antildeadir las imaacutegenes seleccionadas
Y veremos nuestra entrada con la imagen que hemos antildeadido
Simplemente con pinchar en la imagen sin soltar la podemos arrastar y colocar donde deseemos Tambieacuten nos aparecen opciones para cambiarla el tamantildeo alinearlahellip
TUTORIAL DE BLOGGER (Nacho Segovia) 14
Procederemos igual para insertar un viacutedeo aunque hay otras formas de poner un viacutedeo en nuestro blogPinchamos esta vez en el icono Insertar un viacutedeoSeleccionamos el viacutedeo para subir (en este caso guardado en el disco duro) Tardaraacute un poco en funcioacuten de la duracioacuten y del formato en que lo tengamos Y ya tendremos nuestro viacutedeo en la entrada
Bastaraacute con pinchar en Actualizar
Y Ver blog
Otra forma maacutes simple aunque no siempre disponible es pinchar debajo del viacutedeo 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) 15
Ya tenemos nuestra primera entrada con una imagen insertada y un viacutedeo
TUTORIAL DE BLOGGER (Nacho Segovia) 16
62 Antildeadir enlacesPara crear un viacutenculo y descargar archivos acceder a URL contactar con correos etc deberemos seleccionar el texto o imagen a la que adjudicaremos el Viacutenculo presionar en Enlace y rellenar con la direccioacuten a la que nos llevaraacute 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 seleccionadoTambieacuten podemos redirigirlo a una direccioacuten de correo
Os aconsejo que activeacuteis la casilla laquoabrir este enlace en una ventana nuevaraquo De esta manera el lector no se sale del bloghellip
Por uacuteltimo click en Aceptar Actualizar y Ver blog
TUTORIAL DE BLOGGER (Nacho Segovia) 17
63 Comentarios de los lectoresA no ser que solo queramos dar informacioacuten en nuestro blog es interesante la opcioacuten de permitir dejar comentarios a los lectores Para ello pinchamos en Acceder en nuestra entrada (de momento solo tenemosuna entrada) y asiacute llegamos al editor de la entada A la derecha tenemos el botoacuten Opciones
Pinchamos en eacutel y se despliegan las posibilidades de comentarios y de redaccioacuten de estos
Click en Listo y ya estaacute
TUTORIAL DE BLOGGER (Nacho Segovia) 18
7 Configuracioacuten del blogEmpezamos como siempre pinchando en Acceder (veacutertice superior derecho) veremos las entradas que hayamos creado y a la derecha de estas el botoacuten con una flechaindicando hacia abajo que es Maacutes opciones
Maacutes opciones
Pulsamos en esta y aparece un menuacute desplegable
Pinchamos en la opcioacuten Configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 19
Entramos en una paacutegina donde tenemos control de casi todo Ahora nos vamos a centrar en Configuracioacuten y sus posibilidades
TUTORIAL DE BLOGGER (Nacho Segovia) 20
Lo baacutesico podemos
-Editar el tiacutetulo y cambiarlo- Antildeadir ahora la descripcioacuten o cambiarlahellip - Dejar que nuestro blog sea visibleo invisible en la buacutesqueda en Internet
- Direccioacuten del blog Aquiacute cambiare-mos la direccioacuten de nuestro blog por otrasi estaacute disponible - Permisos Autores del blog Podemos dejar que pu-bliquen nuestros compantildeeros o alumnos Nosotros seriacuteamos los administradores y ellos seriacutean los autores del blogEl administrador tiene acceso total al blogPuede hacer cambios en el disentildeo y la configuracioacuten crear editar y borrar cual-quier entrada y cualquier comentarioUn autor no tiene acceso a la configuracioacuten Puede crear editar y borrar sus entradas o los comentarios asus entradas
Para crear autores soacutelo tenemos que hacer clic en ANtildeADIR AUTORES y escribir las direcciones separadasde comas o cogerlas de nuestros contactos de Gmail
TUTORIAL DE BLOGGER (Nacho Segovia) 21
Lectura del blog Aquiacute decimos quien puede ver y leer nuestro blog Cualquiera cualquiera puede acceder a nuestro blog Soacutelo a los usuarios que yo elija soacutelo podraacuten leerlo los usuarios que yo elija pero antes tendraacuten que identificarse que son ellos Opcioacuten interesante cuando queremos proteger el contenido de nuestro blog Uacutenicamente autores del blog los autores seraacuten los uacutenicos que puedan ver el contenido previa identificacioacuten
Entradas y comentariosMostrar un maacuteximo de cuantas entradas por paacutegina queremos mostrarPlantilla de las entradas Apenaacutes se usaMostrar imaacutegenes con Lightbox una forma dever las imaacutegenes Recomiendo que siacuteUbicacioacuten de los comentarios lugar dondequeremos que aparezca la ventana de comen-tariosiquestQuieacuten puede comentaraconsejo CualquieraModeracioacuten de comentarios Se especifica cuando se moderan los comentarios Si se habilita siempre aparece una ventana para poner un correo para que Blogger te avisede que existe un comentario a moderar Mostrar verificacioacuten de palabras dejarlo en no si moderas comentarios y en siacute si no losmoderasMostrar Backlinks Enlaces en los lugares que comparten esa entradaMensaje del formulario de comentarios paradejar un texto que lea quien vaya a hacer uncomentarioHay que GUARDAR CONFIGURACIOacuteN (arriba a la derecha)
TUTORIAL DE BLOGGER (Nacho Segovia) 22
Moacutevil y correo electroacutenico Publicar entradas mediante correo electroacutenico es una opcioacuten para permitir a la gente que pueda publicar mandando un correo electroacutenico Me parece un poco enrrevesadohellip
Correo para notificar los comentarios Podemos escribir hasta 10 direcciones de correo que recibiraacuten un correo cada vez que alguien deje un comentario en nuestro blog
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 23
Idioma y formato
Idioma Idioma del blogHabilitar transliteracioacuten Dejar inhabilitadaZona horaria No olvidar configurar en nuestra zona horariaFormato de cabecera de fecha Forma en la que deseamos ver la fecha de las entradasFormato de hora Forma en la que deseamos ver la horaFormato de hora de los comentarios Forma enla que deseamos ver la hora de los comentarios
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 24
Estas opciones las dejariacutea tal y como vienen por defecto
La uacutenica opcioacuten que encuentro uacutetil es Herramientas del blog
Desde aquiacute podemos importar otro blog en este exportar este para instalarlo en otro sitio (tambieacuten lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente)
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 14
Procederemos igual para insertar un viacutedeo aunque hay otras formas de poner un viacutedeo en nuestro blogPinchamos esta vez en el icono Insertar un viacutedeoSeleccionamos el viacutedeo para subir (en este caso guardado en el disco duro) Tardaraacute un poco en funcioacuten de la duracioacuten y del formato en que lo tengamos Y ya tendremos nuestro viacutedeo en la entrada
Bastaraacute con pinchar en Actualizar
Y Ver blog
Otra forma maacutes simple aunque no siempre disponible es pinchar debajo del viacutedeo 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) 15
Ya tenemos nuestra primera entrada con una imagen insertada y un viacutedeo
TUTORIAL DE BLOGGER (Nacho Segovia) 16
62 Antildeadir enlacesPara crear un viacutenculo y descargar archivos acceder a URL contactar con correos etc deberemos seleccionar el texto o imagen a la que adjudicaremos el Viacutenculo presionar en Enlace y rellenar con la direccioacuten a la que nos llevaraacute 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 seleccionadoTambieacuten podemos redirigirlo a una direccioacuten de correo
Os aconsejo que activeacuteis la casilla laquoabrir este enlace en una ventana nuevaraquo De esta manera el lector no se sale del bloghellip
Por uacuteltimo click en Aceptar Actualizar y Ver blog
TUTORIAL DE BLOGGER (Nacho Segovia) 17
63 Comentarios de los lectoresA no ser que solo queramos dar informacioacuten en nuestro blog es interesante la opcioacuten de permitir dejar comentarios a los lectores Para ello pinchamos en Acceder en nuestra entrada (de momento solo tenemosuna entrada) y asiacute llegamos al editor de la entada A la derecha tenemos el botoacuten Opciones
Pinchamos en eacutel y se despliegan las posibilidades de comentarios y de redaccioacuten de estos
Click en Listo y ya estaacute
TUTORIAL DE BLOGGER (Nacho Segovia) 18
7 Configuracioacuten del blogEmpezamos como siempre pinchando en Acceder (veacutertice superior derecho) veremos las entradas que hayamos creado y a la derecha de estas el botoacuten con una flechaindicando hacia abajo que es Maacutes opciones
Maacutes opciones
Pulsamos en esta y aparece un menuacute desplegable
Pinchamos en la opcioacuten Configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 19
Entramos en una paacutegina donde tenemos control de casi todo Ahora nos vamos a centrar en Configuracioacuten y sus posibilidades
TUTORIAL DE BLOGGER (Nacho Segovia) 20
Lo baacutesico podemos
-Editar el tiacutetulo y cambiarlo- Antildeadir ahora la descripcioacuten o cambiarlahellip - Dejar que nuestro blog sea visibleo invisible en la buacutesqueda en Internet
- Direccioacuten del blog Aquiacute cambiare-mos la direccioacuten de nuestro blog por otrasi estaacute disponible - Permisos Autores del blog Podemos dejar que pu-bliquen nuestros compantildeeros o alumnos Nosotros seriacuteamos los administradores y ellos seriacutean los autores del blogEl administrador tiene acceso total al blogPuede hacer cambios en el disentildeo y la configuracioacuten crear editar y borrar cual-quier entrada y cualquier comentarioUn autor no tiene acceso a la configuracioacuten Puede crear editar y borrar sus entradas o los comentarios asus entradas
Para crear autores soacutelo tenemos que hacer clic en ANtildeADIR AUTORES y escribir las direcciones separadasde comas o cogerlas de nuestros contactos de Gmail
TUTORIAL DE BLOGGER (Nacho Segovia) 21
Lectura del blog Aquiacute decimos quien puede ver y leer nuestro blog Cualquiera cualquiera puede acceder a nuestro blog Soacutelo a los usuarios que yo elija soacutelo podraacuten leerlo los usuarios que yo elija pero antes tendraacuten que identificarse que son ellos Opcioacuten interesante cuando queremos proteger el contenido de nuestro blog Uacutenicamente autores del blog los autores seraacuten los uacutenicos que puedan ver el contenido previa identificacioacuten
Entradas y comentariosMostrar un maacuteximo de cuantas entradas por paacutegina queremos mostrarPlantilla de las entradas Apenaacutes se usaMostrar imaacutegenes con Lightbox una forma dever las imaacutegenes Recomiendo que siacuteUbicacioacuten de los comentarios lugar dondequeremos que aparezca la ventana de comen-tariosiquestQuieacuten puede comentaraconsejo CualquieraModeracioacuten de comentarios Se especifica cuando se moderan los comentarios Si se habilita siempre aparece una ventana para poner un correo para que Blogger te avisede que existe un comentario a moderar Mostrar verificacioacuten de palabras dejarlo en no si moderas comentarios y en siacute si no losmoderasMostrar Backlinks Enlaces en los lugares que comparten esa entradaMensaje del formulario de comentarios paradejar un texto que lea quien vaya a hacer uncomentarioHay que GUARDAR CONFIGURACIOacuteN (arriba a la derecha)
TUTORIAL DE BLOGGER (Nacho Segovia) 22
Moacutevil y correo electroacutenico Publicar entradas mediante correo electroacutenico es una opcioacuten para permitir a la gente que pueda publicar mandando un correo electroacutenico Me parece un poco enrrevesadohellip
Correo para notificar los comentarios Podemos escribir hasta 10 direcciones de correo que recibiraacuten un correo cada vez que alguien deje un comentario en nuestro blog
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 23
Idioma y formato
Idioma Idioma del blogHabilitar transliteracioacuten Dejar inhabilitadaZona horaria No olvidar configurar en nuestra zona horariaFormato de cabecera de fecha Forma en la que deseamos ver la fecha de las entradasFormato de hora Forma en la que deseamos ver la horaFormato de hora de los comentarios Forma enla que deseamos ver la hora de los comentarios
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 24
Estas opciones las dejariacutea tal y como vienen por defecto
La uacutenica opcioacuten que encuentro uacutetil es Herramientas del blog
Desde aquiacute podemos importar otro blog en este exportar este para instalarlo en otro sitio (tambieacuten lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente)
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 15
Ya tenemos nuestra primera entrada con una imagen insertada y un viacutedeo
TUTORIAL DE BLOGGER (Nacho Segovia) 16
62 Antildeadir enlacesPara crear un viacutenculo y descargar archivos acceder a URL contactar con correos etc deberemos seleccionar el texto o imagen a la que adjudicaremos el Viacutenculo presionar en Enlace y rellenar con la direccioacuten a la que nos llevaraacute 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 seleccionadoTambieacuten podemos redirigirlo a una direccioacuten de correo
Os aconsejo que activeacuteis la casilla laquoabrir este enlace en una ventana nuevaraquo De esta manera el lector no se sale del bloghellip
Por uacuteltimo click en Aceptar Actualizar y Ver blog
TUTORIAL DE BLOGGER (Nacho Segovia) 17
63 Comentarios de los lectoresA no ser que solo queramos dar informacioacuten en nuestro blog es interesante la opcioacuten de permitir dejar comentarios a los lectores Para ello pinchamos en Acceder en nuestra entrada (de momento solo tenemosuna entrada) y asiacute llegamos al editor de la entada A la derecha tenemos el botoacuten Opciones
Pinchamos en eacutel y se despliegan las posibilidades de comentarios y de redaccioacuten de estos
Click en Listo y ya estaacute
TUTORIAL DE BLOGGER (Nacho Segovia) 18
7 Configuracioacuten del blogEmpezamos como siempre pinchando en Acceder (veacutertice superior derecho) veremos las entradas que hayamos creado y a la derecha de estas el botoacuten con una flechaindicando hacia abajo que es Maacutes opciones
Maacutes opciones
Pulsamos en esta y aparece un menuacute desplegable
Pinchamos en la opcioacuten Configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 19
Entramos en una paacutegina donde tenemos control de casi todo Ahora nos vamos a centrar en Configuracioacuten y sus posibilidades
TUTORIAL DE BLOGGER (Nacho Segovia) 20
Lo baacutesico podemos
-Editar el tiacutetulo y cambiarlo- Antildeadir ahora la descripcioacuten o cambiarlahellip - Dejar que nuestro blog sea visibleo invisible en la buacutesqueda en Internet
- Direccioacuten del blog Aquiacute cambiare-mos la direccioacuten de nuestro blog por otrasi estaacute disponible - Permisos Autores del blog Podemos dejar que pu-bliquen nuestros compantildeeros o alumnos Nosotros seriacuteamos los administradores y ellos seriacutean los autores del blogEl administrador tiene acceso total al blogPuede hacer cambios en el disentildeo y la configuracioacuten crear editar y borrar cual-quier entrada y cualquier comentarioUn autor no tiene acceso a la configuracioacuten Puede crear editar y borrar sus entradas o los comentarios asus entradas
Para crear autores soacutelo tenemos que hacer clic en ANtildeADIR AUTORES y escribir las direcciones separadasde comas o cogerlas de nuestros contactos de Gmail
TUTORIAL DE BLOGGER (Nacho Segovia) 21
Lectura del blog Aquiacute decimos quien puede ver y leer nuestro blog Cualquiera cualquiera puede acceder a nuestro blog Soacutelo a los usuarios que yo elija soacutelo podraacuten leerlo los usuarios que yo elija pero antes tendraacuten que identificarse que son ellos Opcioacuten interesante cuando queremos proteger el contenido de nuestro blog Uacutenicamente autores del blog los autores seraacuten los uacutenicos que puedan ver el contenido previa identificacioacuten
Entradas y comentariosMostrar un maacuteximo de cuantas entradas por paacutegina queremos mostrarPlantilla de las entradas Apenaacutes se usaMostrar imaacutegenes con Lightbox una forma dever las imaacutegenes Recomiendo que siacuteUbicacioacuten de los comentarios lugar dondequeremos que aparezca la ventana de comen-tariosiquestQuieacuten puede comentaraconsejo CualquieraModeracioacuten de comentarios Se especifica cuando se moderan los comentarios Si se habilita siempre aparece una ventana para poner un correo para que Blogger te avisede que existe un comentario a moderar Mostrar verificacioacuten de palabras dejarlo en no si moderas comentarios y en siacute si no losmoderasMostrar Backlinks Enlaces en los lugares que comparten esa entradaMensaje del formulario de comentarios paradejar un texto que lea quien vaya a hacer uncomentarioHay que GUARDAR CONFIGURACIOacuteN (arriba a la derecha)
TUTORIAL DE BLOGGER (Nacho Segovia) 22
Moacutevil y correo electroacutenico Publicar entradas mediante correo electroacutenico es una opcioacuten para permitir a la gente que pueda publicar mandando un correo electroacutenico Me parece un poco enrrevesadohellip
Correo para notificar los comentarios Podemos escribir hasta 10 direcciones de correo que recibiraacuten un correo cada vez que alguien deje un comentario en nuestro blog
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 23
Idioma y formato
Idioma Idioma del blogHabilitar transliteracioacuten Dejar inhabilitadaZona horaria No olvidar configurar en nuestra zona horariaFormato de cabecera de fecha Forma en la que deseamos ver la fecha de las entradasFormato de hora Forma en la que deseamos ver la horaFormato de hora de los comentarios Forma enla que deseamos ver la hora de los comentarios
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 24
Estas opciones las dejariacutea tal y como vienen por defecto
La uacutenica opcioacuten que encuentro uacutetil es Herramientas del blog
Desde aquiacute podemos importar otro blog en este exportar este para instalarlo en otro sitio (tambieacuten lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente)
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 16
62 Antildeadir enlacesPara crear un viacutenculo y descargar archivos acceder a URL contactar con correos etc deberemos seleccionar el texto o imagen a la que adjudicaremos el Viacutenculo presionar en Enlace y rellenar con la direccioacuten a la que nos llevaraacute 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 seleccionadoTambieacuten podemos redirigirlo a una direccioacuten de correo
Os aconsejo que activeacuteis la casilla laquoabrir este enlace en una ventana nuevaraquo De esta manera el lector no se sale del bloghellip
Por uacuteltimo click en Aceptar Actualizar y Ver blog
TUTORIAL DE BLOGGER (Nacho Segovia) 17
63 Comentarios de los lectoresA no ser que solo queramos dar informacioacuten en nuestro blog es interesante la opcioacuten de permitir dejar comentarios a los lectores Para ello pinchamos en Acceder en nuestra entrada (de momento solo tenemosuna entrada) y asiacute llegamos al editor de la entada A la derecha tenemos el botoacuten Opciones
Pinchamos en eacutel y se despliegan las posibilidades de comentarios y de redaccioacuten de estos
Click en Listo y ya estaacute
TUTORIAL DE BLOGGER (Nacho Segovia) 18
7 Configuracioacuten del blogEmpezamos como siempre pinchando en Acceder (veacutertice superior derecho) veremos las entradas que hayamos creado y a la derecha de estas el botoacuten con una flechaindicando hacia abajo que es Maacutes opciones
Maacutes opciones
Pulsamos en esta y aparece un menuacute desplegable
Pinchamos en la opcioacuten Configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 19
Entramos en una paacutegina donde tenemos control de casi todo Ahora nos vamos a centrar en Configuracioacuten y sus posibilidades
TUTORIAL DE BLOGGER (Nacho Segovia) 20
Lo baacutesico podemos
-Editar el tiacutetulo y cambiarlo- Antildeadir ahora la descripcioacuten o cambiarlahellip - Dejar que nuestro blog sea visibleo invisible en la buacutesqueda en Internet
- Direccioacuten del blog Aquiacute cambiare-mos la direccioacuten de nuestro blog por otrasi estaacute disponible - Permisos Autores del blog Podemos dejar que pu-bliquen nuestros compantildeeros o alumnos Nosotros seriacuteamos los administradores y ellos seriacutean los autores del blogEl administrador tiene acceso total al blogPuede hacer cambios en el disentildeo y la configuracioacuten crear editar y borrar cual-quier entrada y cualquier comentarioUn autor no tiene acceso a la configuracioacuten Puede crear editar y borrar sus entradas o los comentarios asus entradas
Para crear autores soacutelo tenemos que hacer clic en ANtildeADIR AUTORES y escribir las direcciones separadasde comas o cogerlas de nuestros contactos de Gmail
TUTORIAL DE BLOGGER (Nacho Segovia) 21
Lectura del blog Aquiacute decimos quien puede ver y leer nuestro blog Cualquiera cualquiera puede acceder a nuestro blog Soacutelo a los usuarios que yo elija soacutelo podraacuten leerlo los usuarios que yo elija pero antes tendraacuten que identificarse que son ellos Opcioacuten interesante cuando queremos proteger el contenido de nuestro blog Uacutenicamente autores del blog los autores seraacuten los uacutenicos que puedan ver el contenido previa identificacioacuten
Entradas y comentariosMostrar un maacuteximo de cuantas entradas por paacutegina queremos mostrarPlantilla de las entradas Apenaacutes se usaMostrar imaacutegenes con Lightbox una forma dever las imaacutegenes Recomiendo que siacuteUbicacioacuten de los comentarios lugar dondequeremos que aparezca la ventana de comen-tariosiquestQuieacuten puede comentaraconsejo CualquieraModeracioacuten de comentarios Se especifica cuando se moderan los comentarios Si se habilita siempre aparece una ventana para poner un correo para que Blogger te avisede que existe un comentario a moderar Mostrar verificacioacuten de palabras dejarlo en no si moderas comentarios y en siacute si no losmoderasMostrar Backlinks Enlaces en los lugares que comparten esa entradaMensaje del formulario de comentarios paradejar un texto que lea quien vaya a hacer uncomentarioHay que GUARDAR CONFIGURACIOacuteN (arriba a la derecha)
TUTORIAL DE BLOGGER (Nacho Segovia) 22
Moacutevil y correo electroacutenico Publicar entradas mediante correo electroacutenico es una opcioacuten para permitir a la gente que pueda publicar mandando un correo electroacutenico Me parece un poco enrrevesadohellip
Correo para notificar los comentarios Podemos escribir hasta 10 direcciones de correo que recibiraacuten un correo cada vez que alguien deje un comentario en nuestro blog
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 23
Idioma y formato
Idioma Idioma del blogHabilitar transliteracioacuten Dejar inhabilitadaZona horaria No olvidar configurar en nuestra zona horariaFormato de cabecera de fecha Forma en la que deseamos ver la fecha de las entradasFormato de hora Forma en la que deseamos ver la horaFormato de hora de los comentarios Forma enla que deseamos ver la hora de los comentarios
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 24
Estas opciones las dejariacutea tal y como vienen por defecto
La uacutenica opcioacuten que encuentro uacutetil es Herramientas del blog
Desde aquiacute podemos importar otro blog en este exportar este para instalarlo en otro sitio (tambieacuten lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente)
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 17
63 Comentarios de los lectoresA no ser que solo queramos dar informacioacuten en nuestro blog es interesante la opcioacuten de permitir dejar comentarios a los lectores Para ello pinchamos en Acceder en nuestra entrada (de momento solo tenemosuna entrada) y asiacute llegamos al editor de la entada A la derecha tenemos el botoacuten Opciones
Pinchamos en eacutel y se despliegan las posibilidades de comentarios y de redaccioacuten de estos
Click en Listo y ya estaacute
TUTORIAL DE BLOGGER (Nacho Segovia) 18
7 Configuracioacuten del blogEmpezamos como siempre pinchando en Acceder (veacutertice superior derecho) veremos las entradas que hayamos creado y a la derecha de estas el botoacuten con una flechaindicando hacia abajo que es Maacutes opciones
Maacutes opciones
Pulsamos en esta y aparece un menuacute desplegable
Pinchamos en la opcioacuten Configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 19
Entramos en una paacutegina donde tenemos control de casi todo Ahora nos vamos a centrar en Configuracioacuten y sus posibilidades
TUTORIAL DE BLOGGER (Nacho Segovia) 20
Lo baacutesico podemos
-Editar el tiacutetulo y cambiarlo- Antildeadir ahora la descripcioacuten o cambiarlahellip - Dejar que nuestro blog sea visibleo invisible en la buacutesqueda en Internet
- Direccioacuten del blog Aquiacute cambiare-mos la direccioacuten de nuestro blog por otrasi estaacute disponible - Permisos Autores del blog Podemos dejar que pu-bliquen nuestros compantildeeros o alumnos Nosotros seriacuteamos los administradores y ellos seriacutean los autores del blogEl administrador tiene acceso total al blogPuede hacer cambios en el disentildeo y la configuracioacuten crear editar y borrar cual-quier entrada y cualquier comentarioUn autor no tiene acceso a la configuracioacuten Puede crear editar y borrar sus entradas o los comentarios asus entradas
Para crear autores soacutelo tenemos que hacer clic en ANtildeADIR AUTORES y escribir las direcciones separadasde comas o cogerlas de nuestros contactos de Gmail
TUTORIAL DE BLOGGER (Nacho Segovia) 21
Lectura del blog Aquiacute decimos quien puede ver y leer nuestro blog Cualquiera cualquiera puede acceder a nuestro blog Soacutelo a los usuarios que yo elija soacutelo podraacuten leerlo los usuarios que yo elija pero antes tendraacuten que identificarse que son ellos Opcioacuten interesante cuando queremos proteger el contenido de nuestro blog Uacutenicamente autores del blog los autores seraacuten los uacutenicos que puedan ver el contenido previa identificacioacuten
Entradas y comentariosMostrar un maacuteximo de cuantas entradas por paacutegina queremos mostrarPlantilla de las entradas Apenaacutes se usaMostrar imaacutegenes con Lightbox una forma dever las imaacutegenes Recomiendo que siacuteUbicacioacuten de los comentarios lugar dondequeremos que aparezca la ventana de comen-tariosiquestQuieacuten puede comentaraconsejo CualquieraModeracioacuten de comentarios Se especifica cuando se moderan los comentarios Si se habilita siempre aparece una ventana para poner un correo para que Blogger te avisede que existe un comentario a moderar Mostrar verificacioacuten de palabras dejarlo en no si moderas comentarios y en siacute si no losmoderasMostrar Backlinks Enlaces en los lugares que comparten esa entradaMensaje del formulario de comentarios paradejar un texto que lea quien vaya a hacer uncomentarioHay que GUARDAR CONFIGURACIOacuteN (arriba a la derecha)
TUTORIAL DE BLOGGER (Nacho Segovia) 22
Moacutevil y correo electroacutenico Publicar entradas mediante correo electroacutenico es una opcioacuten para permitir a la gente que pueda publicar mandando un correo electroacutenico Me parece un poco enrrevesadohellip
Correo para notificar los comentarios Podemos escribir hasta 10 direcciones de correo que recibiraacuten un correo cada vez que alguien deje un comentario en nuestro blog
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 23
Idioma y formato
Idioma Idioma del blogHabilitar transliteracioacuten Dejar inhabilitadaZona horaria No olvidar configurar en nuestra zona horariaFormato de cabecera de fecha Forma en la que deseamos ver la fecha de las entradasFormato de hora Forma en la que deseamos ver la horaFormato de hora de los comentarios Forma enla que deseamos ver la hora de los comentarios
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 24
Estas opciones las dejariacutea tal y como vienen por defecto
La uacutenica opcioacuten que encuentro uacutetil es Herramientas del blog
Desde aquiacute podemos importar otro blog en este exportar este para instalarlo en otro sitio (tambieacuten lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente)
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 18
7 Configuracioacuten del blogEmpezamos como siempre pinchando en Acceder (veacutertice superior derecho) veremos las entradas que hayamos creado y a la derecha de estas el botoacuten con una flechaindicando hacia abajo que es Maacutes opciones
Maacutes opciones
Pulsamos en esta y aparece un menuacute desplegable
Pinchamos en la opcioacuten Configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 19
Entramos en una paacutegina donde tenemos control de casi todo Ahora nos vamos a centrar en Configuracioacuten y sus posibilidades
TUTORIAL DE BLOGGER (Nacho Segovia) 20
Lo baacutesico podemos
-Editar el tiacutetulo y cambiarlo- Antildeadir ahora la descripcioacuten o cambiarlahellip - Dejar que nuestro blog sea visibleo invisible en la buacutesqueda en Internet
- Direccioacuten del blog Aquiacute cambiare-mos la direccioacuten de nuestro blog por otrasi estaacute disponible - Permisos Autores del blog Podemos dejar que pu-bliquen nuestros compantildeeros o alumnos Nosotros seriacuteamos los administradores y ellos seriacutean los autores del blogEl administrador tiene acceso total al blogPuede hacer cambios en el disentildeo y la configuracioacuten crear editar y borrar cual-quier entrada y cualquier comentarioUn autor no tiene acceso a la configuracioacuten Puede crear editar y borrar sus entradas o los comentarios asus entradas
Para crear autores soacutelo tenemos que hacer clic en ANtildeADIR AUTORES y escribir las direcciones separadasde comas o cogerlas de nuestros contactos de Gmail
TUTORIAL DE BLOGGER (Nacho Segovia) 21
Lectura del blog Aquiacute decimos quien puede ver y leer nuestro blog Cualquiera cualquiera puede acceder a nuestro blog Soacutelo a los usuarios que yo elija soacutelo podraacuten leerlo los usuarios que yo elija pero antes tendraacuten que identificarse que son ellos Opcioacuten interesante cuando queremos proteger el contenido de nuestro blog Uacutenicamente autores del blog los autores seraacuten los uacutenicos que puedan ver el contenido previa identificacioacuten
Entradas y comentariosMostrar un maacuteximo de cuantas entradas por paacutegina queremos mostrarPlantilla de las entradas Apenaacutes se usaMostrar imaacutegenes con Lightbox una forma dever las imaacutegenes Recomiendo que siacuteUbicacioacuten de los comentarios lugar dondequeremos que aparezca la ventana de comen-tariosiquestQuieacuten puede comentaraconsejo CualquieraModeracioacuten de comentarios Se especifica cuando se moderan los comentarios Si se habilita siempre aparece una ventana para poner un correo para que Blogger te avisede que existe un comentario a moderar Mostrar verificacioacuten de palabras dejarlo en no si moderas comentarios y en siacute si no losmoderasMostrar Backlinks Enlaces en los lugares que comparten esa entradaMensaje del formulario de comentarios paradejar un texto que lea quien vaya a hacer uncomentarioHay que GUARDAR CONFIGURACIOacuteN (arriba a la derecha)
TUTORIAL DE BLOGGER (Nacho Segovia) 22
Moacutevil y correo electroacutenico Publicar entradas mediante correo electroacutenico es una opcioacuten para permitir a la gente que pueda publicar mandando un correo electroacutenico Me parece un poco enrrevesadohellip
Correo para notificar los comentarios Podemos escribir hasta 10 direcciones de correo que recibiraacuten un correo cada vez que alguien deje un comentario en nuestro blog
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 23
Idioma y formato
Idioma Idioma del blogHabilitar transliteracioacuten Dejar inhabilitadaZona horaria No olvidar configurar en nuestra zona horariaFormato de cabecera de fecha Forma en la que deseamos ver la fecha de las entradasFormato de hora Forma en la que deseamos ver la horaFormato de hora de los comentarios Forma enla que deseamos ver la hora de los comentarios
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 24
Estas opciones las dejariacutea tal y como vienen por defecto
La uacutenica opcioacuten que encuentro uacutetil es Herramientas del blog
Desde aquiacute podemos importar otro blog en este exportar este para instalarlo en otro sitio (tambieacuten lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente)
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 19
Entramos en una paacutegina donde tenemos control de casi todo Ahora nos vamos a centrar en Configuracioacuten y sus posibilidades
TUTORIAL DE BLOGGER (Nacho Segovia) 20
Lo baacutesico podemos
-Editar el tiacutetulo y cambiarlo- Antildeadir ahora la descripcioacuten o cambiarlahellip - Dejar que nuestro blog sea visibleo invisible en la buacutesqueda en Internet
- Direccioacuten del blog Aquiacute cambiare-mos la direccioacuten de nuestro blog por otrasi estaacute disponible - Permisos Autores del blog Podemos dejar que pu-bliquen nuestros compantildeeros o alumnos Nosotros seriacuteamos los administradores y ellos seriacutean los autores del blogEl administrador tiene acceso total al blogPuede hacer cambios en el disentildeo y la configuracioacuten crear editar y borrar cual-quier entrada y cualquier comentarioUn autor no tiene acceso a la configuracioacuten Puede crear editar y borrar sus entradas o los comentarios asus entradas
Para crear autores soacutelo tenemos que hacer clic en ANtildeADIR AUTORES y escribir las direcciones separadasde comas o cogerlas de nuestros contactos de Gmail
TUTORIAL DE BLOGGER (Nacho Segovia) 21
Lectura del blog Aquiacute decimos quien puede ver y leer nuestro blog Cualquiera cualquiera puede acceder a nuestro blog Soacutelo a los usuarios que yo elija soacutelo podraacuten leerlo los usuarios que yo elija pero antes tendraacuten que identificarse que son ellos Opcioacuten interesante cuando queremos proteger el contenido de nuestro blog Uacutenicamente autores del blog los autores seraacuten los uacutenicos que puedan ver el contenido previa identificacioacuten
Entradas y comentariosMostrar un maacuteximo de cuantas entradas por paacutegina queremos mostrarPlantilla de las entradas Apenaacutes se usaMostrar imaacutegenes con Lightbox una forma dever las imaacutegenes Recomiendo que siacuteUbicacioacuten de los comentarios lugar dondequeremos que aparezca la ventana de comen-tariosiquestQuieacuten puede comentaraconsejo CualquieraModeracioacuten de comentarios Se especifica cuando se moderan los comentarios Si se habilita siempre aparece una ventana para poner un correo para que Blogger te avisede que existe un comentario a moderar Mostrar verificacioacuten de palabras dejarlo en no si moderas comentarios y en siacute si no losmoderasMostrar Backlinks Enlaces en los lugares que comparten esa entradaMensaje del formulario de comentarios paradejar un texto que lea quien vaya a hacer uncomentarioHay que GUARDAR CONFIGURACIOacuteN (arriba a la derecha)
TUTORIAL DE BLOGGER (Nacho Segovia) 22
Moacutevil y correo electroacutenico Publicar entradas mediante correo electroacutenico es una opcioacuten para permitir a la gente que pueda publicar mandando un correo electroacutenico Me parece un poco enrrevesadohellip
Correo para notificar los comentarios Podemos escribir hasta 10 direcciones de correo que recibiraacuten un correo cada vez que alguien deje un comentario en nuestro blog
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 23
Idioma y formato
Idioma Idioma del blogHabilitar transliteracioacuten Dejar inhabilitadaZona horaria No olvidar configurar en nuestra zona horariaFormato de cabecera de fecha Forma en la que deseamos ver la fecha de las entradasFormato de hora Forma en la que deseamos ver la horaFormato de hora de los comentarios Forma enla que deseamos ver la hora de los comentarios
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 24
Estas opciones las dejariacutea tal y como vienen por defecto
La uacutenica opcioacuten que encuentro uacutetil es Herramientas del blog
Desde aquiacute podemos importar otro blog en este exportar este para instalarlo en otro sitio (tambieacuten lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente)
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 20
Lo baacutesico podemos
-Editar el tiacutetulo y cambiarlo- Antildeadir ahora la descripcioacuten o cambiarlahellip - Dejar que nuestro blog sea visibleo invisible en la buacutesqueda en Internet
- Direccioacuten del blog Aquiacute cambiare-mos la direccioacuten de nuestro blog por otrasi estaacute disponible - Permisos Autores del blog Podemos dejar que pu-bliquen nuestros compantildeeros o alumnos Nosotros seriacuteamos los administradores y ellos seriacutean los autores del blogEl administrador tiene acceso total al blogPuede hacer cambios en el disentildeo y la configuracioacuten crear editar y borrar cual-quier entrada y cualquier comentarioUn autor no tiene acceso a la configuracioacuten Puede crear editar y borrar sus entradas o los comentarios asus entradas
Para crear autores soacutelo tenemos que hacer clic en ANtildeADIR AUTORES y escribir las direcciones separadasde comas o cogerlas de nuestros contactos de Gmail
TUTORIAL DE BLOGGER (Nacho Segovia) 21
Lectura del blog Aquiacute decimos quien puede ver y leer nuestro blog Cualquiera cualquiera puede acceder a nuestro blog Soacutelo a los usuarios que yo elija soacutelo podraacuten leerlo los usuarios que yo elija pero antes tendraacuten que identificarse que son ellos Opcioacuten interesante cuando queremos proteger el contenido de nuestro blog Uacutenicamente autores del blog los autores seraacuten los uacutenicos que puedan ver el contenido previa identificacioacuten
Entradas y comentariosMostrar un maacuteximo de cuantas entradas por paacutegina queremos mostrarPlantilla de las entradas Apenaacutes se usaMostrar imaacutegenes con Lightbox una forma dever las imaacutegenes Recomiendo que siacuteUbicacioacuten de los comentarios lugar dondequeremos que aparezca la ventana de comen-tariosiquestQuieacuten puede comentaraconsejo CualquieraModeracioacuten de comentarios Se especifica cuando se moderan los comentarios Si se habilita siempre aparece una ventana para poner un correo para que Blogger te avisede que existe un comentario a moderar Mostrar verificacioacuten de palabras dejarlo en no si moderas comentarios y en siacute si no losmoderasMostrar Backlinks Enlaces en los lugares que comparten esa entradaMensaje del formulario de comentarios paradejar un texto que lea quien vaya a hacer uncomentarioHay que GUARDAR CONFIGURACIOacuteN (arriba a la derecha)
TUTORIAL DE BLOGGER (Nacho Segovia) 22
Moacutevil y correo electroacutenico Publicar entradas mediante correo electroacutenico es una opcioacuten para permitir a la gente que pueda publicar mandando un correo electroacutenico Me parece un poco enrrevesadohellip
Correo para notificar los comentarios Podemos escribir hasta 10 direcciones de correo que recibiraacuten un correo cada vez que alguien deje un comentario en nuestro blog
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 23
Idioma y formato
Idioma Idioma del blogHabilitar transliteracioacuten Dejar inhabilitadaZona horaria No olvidar configurar en nuestra zona horariaFormato de cabecera de fecha Forma en la que deseamos ver la fecha de las entradasFormato de hora Forma en la que deseamos ver la horaFormato de hora de los comentarios Forma enla que deseamos ver la hora de los comentarios
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 24
Estas opciones las dejariacutea tal y como vienen por defecto
La uacutenica opcioacuten que encuentro uacutetil es Herramientas del blog
Desde aquiacute podemos importar otro blog en este exportar este para instalarlo en otro sitio (tambieacuten lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente)
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 21
Lectura del blog Aquiacute decimos quien puede ver y leer nuestro blog Cualquiera cualquiera puede acceder a nuestro blog Soacutelo a los usuarios que yo elija soacutelo podraacuten leerlo los usuarios que yo elija pero antes tendraacuten que identificarse que son ellos Opcioacuten interesante cuando queremos proteger el contenido de nuestro blog Uacutenicamente autores del blog los autores seraacuten los uacutenicos que puedan ver el contenido previa identificacioacuten
Entradas y comentariosMostrar un maacuteximo de cuantas entradas por paacutegina queremos mostrarPlantilla de las entradas Apenaacutes se usaMostrar imaacutegenes con Lightbox una forma dever las imaacutegenes Recomiendo que siacuteUbicacioacuten de los comentarios lugar dondequeremos que aparezca la ventana de comen-tariosiquestQuieacuten puede comentaraconsejo CualquieraModeracioacuten de comentarios Se especifica cuando se moderan los comentarios Si se habilita siempre aparece una ventana para poner un correo para que Blogger te avisede que existe un comentario a moderar Mostrar verificacioacuten de palabras dejarlo en no si moderas comentarios y en siacute si no losmoderasMostrar Backlinks Enlaces en los lugares que comparten esa entradaMensaje del formulario de comentarios paradejar un texto que lea quien vaya a hacer uncomentarioHay que GUARDAR CONFIGURACIOacuteN (arriba a la derecha)
TUTORIAL DE BLOGGER (Nacho Segovia) 22
Moacutevil y correo electroacutenico Publicar entradas mediante correo electroacutenico es una opcioacuten para permitir a la gente que pueda publicar mandando un correo electroacutenico Me parece un poco enrrevesadohellip
Correo para notificar los comentarios Podemos escribir hasta 10 direcciones de correo que recibiraacuten un correo cada vez que alguien deje un comentario en nuestro blog
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 23
Idioma y formato
Idioma Idioma del blogHabilitar transliteracioacuten Dejar inhabilitadaZona horaria No olvidar configurar en nuestra zona horariaFormato de cabecera de fecha Forma en la que deseamos ver la fecha de las entradasFormato de hora Forma en la que deseamos ver la horaFormato de hora de los comentarios Forma enla que deseamos ver la hora de los comentarios
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 24
Estas opciones las dejariacutea tal y como vienen por defecto
La uacutenica opcioacuten que encuentro uacutetil es Herramientas del blog
Desde aquiacute podemos importar otro blog en este exportar este para instalarlo en otro sitio (tambieacuten lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente)
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 22
Moacutevil y correo electroacutenico Publicar entradas mediante correo electroacutenico es una opcioacuten para permitir a la gente que pueda publicar mandando un correo electroacutenico Me parece un poco enrrevesadohellip
Correo para notificar los comentarios Podemos escribir hasta 10 direcciones de correo que recibiraacuten un correo cada vez que alguien deje un comentario en nuestro blog
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 23
Idioma y formato
Idioma Idioma del blogHabilitar transliteracioacuten Dejar inhabilitadaZona horaria No olvidar configurar en nuestra zona horariaFormato de cabecera de fecha Forma en la que deseamos ver la fecha de las entradasFormato de hora Forma en la que deseamos ver la horaFormato de hora de los comentarios Forma enla que deseamos ver la hora de los comentarios
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 24
Estas opciones las dejariacutea tal y como vienen por defecto
La uacutenica opcioacuten que encuentro uacutetil es Herramientas del blog
Desde aquiacute podemos importar otro blog en este exportar este para instalarlo en otro sitio (tambieacuten lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente)
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 23
Idioma y formato
Idioma Idioma del blogHabilitar transliteracioacuten Dejar inhabilitadaZona horaria No olvidar configurar en nuestra zona horariaFormato de cabecera de fecha Forma en la que deseamos ver la fecha de las entradasFormato de hora Forma en la que deseamos ver la horaFormato de hora de los comentarios Forma enla que deseamos ver la hora de los comentarios
No olvideacuteis pinchar en GUARDAR CONFIGURACIOacuteN
TUTORIAL DE BLOGGER (Nacho Segovia) 24
Estas opciones las dejariacutea tal y como vienen por defecto
La uacutenica opcioacuten que encuentro uacutetil es Herramientas del blog
Desde aquiacute podemos importar otro blog en este exportar este para instalarlo en otro sitio (tambieacuten lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente)
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 24
Estas opciones las dejariacutea tal y como vienen por defecto
La uacutenica opcioacuten que encuentro uacutetil es Herramientas del blog
Desde aquiacute podemos importar otro blog en este exportar este para instalarlo en otro sitio (tambieacuten lo podemos hacer como copia de seguridad) o eliminar el blog (no se elimina inmediatamente)
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 25
7 Disentildeo del blog tenemos que
ir a la pestantildea PLANTILLA
Nos aparecen numerosos tipos de Plantillas (sencillo vistas dinaacutemicas Picture window fantaacutestico SA etc)
Pinchamos en Personalizar
TAMBIEacuteN PODEMOS ACCEDER AL DISENtildeO DESDELA OPCIOacuteN DISENtildeO ENCIMA DE PLANTILLA
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 26
Desde aquiacute podremos cambiar la PLANTILLA el FONDO los AJUSTES DE ANCHO el DISENtildeO y algunos ajustes AVANZADOS
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 27
PlantillaEscogemos una plantilla o luego una subplantilla Siempre podemos ver coacutemo va quedando en la parteinferior Para guardar tenemos que dar a APLICAR AL BLOGPodemos volver en cualquier momento al escritorio de Blogger con el botoacuten 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) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 28
Para seleccionar nuevos fondos o insertar el nuestro tenemos que ir a la flecha de la derecha de la imagenseleccionado en ese momento y se desplegaraacute la galeriacutea
Seleccionamos click en Listo y Aplicamos al blog
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 29
Ajustar anchoEsta opcioacuten configura el ancho de la zona de entradas y de la columna o columnas
Disentildeo aquiacute elegimos la apariencia del blog donde van a estar las columna con los complementos o gadget y coacutemo va a ser el pie de paacuteginaEs recomendable colocar la columna a la derecha
No olvideacuteis siempre APLICAR AL BLOG
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 30
AvanzadoEn la opcioacuten avanzado podemos hacer ajustes maacutes detallados de tipo de letra y colores Recordad quesiempre los podemos previsualizar abajo
Una vez configurado todo volvemos al escritorio con el botoacuten VOLVER A BLOGGER
71 EDITAR HTML (solo para avanzados)En la opcioacuten Plantilla encontramos el editor HTML Aquiacute podemos modificar los paraacutemetros que queramos si sabemos lenguaje HTML podemos cargar una plantilla disentildeada para Blogger que hayamos encontrado en internet o copiar coacutedigos que hay en internetpara hacerponer diferentes cosas en nuestroblog
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 31
Vamos a poner una plantilla a traveacutes de HTML de las que se encuentran en Internet Para cambiar la plantilla completa a nuestro blog iremos a internet buscaremos ldquoPlantillas para Bloggerrdquo y despueacutes de descargarla en nuestro ordenador (se descarga en formato rar o zip) descomprimirlaUna 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 asiacute el que hubiera Una paacutegina interesante con plantillas para Blogger es httpbtemplatescomEjemplo Archivo que me he descargado de esta paacutegina Una vez descomprimido vemos el archivo XML
Lo abro con WordPad y veo el coacutedigo HTML
Lo copio y lo pego en la caja de HTML de Blogger
Puedo hacer una laquoVista previa de la plantillaraquo o directamente doy a Guardar plantilla
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 32
Esta seriacutea una vista previa de la nueva plantilla copiada con HTML
8 Disentildeo81 Coacutemo agregar o quitar complementos a la paacuteginaLo uacuteltimo que tenemos que hacer para terminar el disentildeo de nuestra paacutegina es poner o quitar elementos a esta Esos elementos se llaman GADGET (herramientas) y los podemos antildeadir o eliminar desde la opcioacuten DISENtildeO
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 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 paacutegina son los que les quiere el autor del blog Es una eleccioacuten muy personal Hay tres que yo considero importantesCuadro de buacutesqueda Importante para que se puedan encontrar cualquier entrada dentro del blogPara agregar uno pinchamos en Y aparece la ventana de los gadgets disponibles Buscamos el que queremos ypinchamos en el siacutembolo de para antildeadirlo y veremos otra ventana paraConfigurar el cuadro de busqueda
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 34
Enlaces de suscripcioacuten asiacute tus lectores se pueden suscibir maacutes faacutecilmente
Configuramos el tiacutetulo
Etiquetas Es interesante que todas las entradas tengan etiquetas con un tema para que lo puedan buscar raacutepi-damente con el gadget de etiquetas
Configuramos las etiquetas
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 35
Son tambieacuten muy interesantes los gadgets HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con coacutedigo HTML) Paacuteginas (para poder ver las paacuteginas 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 soacutelo coger y arrastrar a cualquiera de las secciones en lasque dice gadget Tambieacuten se puede configurar el apartado Entradas del blogPinchando en Editar podemos configurar las entradas del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 36
Dentro de DISENtildeO ya hemos visto como antildeadir un gadget Veamos como agregar un faviconUn FAVICON o favorite icon es un pequentildeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregaraacute a sus favoritos Despueacutes otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestantildea del sitio web Este icono tradicionalmente tiene un tamantildeo de 16 x 16 piacutexeles aunque tambieacuten se puede incluir con un tamantildeo de 32 x 32
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 37
Podemos usar programas de disentildeo graacutefico 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 maacutes sencillos es favicononlinees Tienes un viacutedeotutorial en httpwwwyoutubecomwatchv=LPvDnGc0Dvkampnoredirect=1t=16
Modificar la barra de navegacioacuten 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
ajustaraacute A continuacioacuten pinchamos en examinar y buscamos la imagen que queremos poner (previamente tiene que estar guardada)
Por uacuteltimo dar en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 38
Aspecto de la cabecera antes y despueacutes de poner una imagenAntes Despueacutes
Reconocimiento si queremos poner derechos de autor a nuestro blog este es el sitio (parte maacutes inferior de DISENtildeO ) Como siempre pinchando en editar
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 39
9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas por diacuteas por entradas maacutes visitadas desde queacute paiacuteses nos visitanhellip
Entradas
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 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 esteacuten pendientes de moderacioacuten y los que son Spam Tambieacuten podremos aprobar o suprimir los comentarios de los visitantes del blog
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 41
12 Paacuteginas Las paacuteginas son como las entradas pero estas no se ordenan en orden cronoloacutegico y no tienen etiquetas Se pueden realizar 10 paacuteginas y se usan para poner contenido maacutes estaacutetico en el blogSe puede crear una paacutegina como una entrada o crear una paacutegina que sea un enlace a otro sitio web
Pinchamos en Paacutegina nueva y elegimos esta vez lsquoPaacutegina en blancorsquo Hacemos una entrada y veremos
Para que este visible la nueva paacutegina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles
Asiacute quedariacutea con la opcioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 42
13 Configuracioacuten de las entradasLas etiquetas son palabras que resumen el tema de la entrada y ayudan a archivarlas asiacute 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 automaacuteticamente en el momento o que se publique en un diacutea 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 redaccioacuten y los saltos de liacutenea
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 43
14 Usos avanzados de Blogger 141 Antildeadir aplicaciones 20 en nuestro blogEs una funcioacuten muy interesante para el blog Insertar viacutedeos presentaciones galeriacuteas de imaacutegenes y otras aplica-ciones 20 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 coacutedigo que nos da la aplicacioacuten e insertarlo en la pestantildea Edicioacuten de HTML
Ejemplo insertando un viacutedeo desde youtube Una vez elegido el viacutedeo que queremos insertar debajo de eacutel pincha-mos en COMPARTIR luego a INSERTAR en TAMANtildeO DE VIacuteDEO escogemos PESONALIZAR y ponemos el ancho de nuestro blog Consejo desactivar la casilla MOSTRAR SUGERENCIAS hellip asiacute no nos podraacute ninguacuten viacutedeo no deseadoal terminar Por uacuteltimo copiar el COacuteDIGO HTML del viacutedeo
Asiacute quedariacutea nuestro viacutedeo insertado en el blog
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 44
142 Insertar archivos pdf doc xls ppt odf o rdfComo ya sabraacutes no es posible subir a Blogger archivos pdf doc xls ppt odf o rdf Sin embargo siacute es posible incrustar (embed) archivos pdf o doc en cualquier entrada de tus blogs MetodosMetodo 1 entramos por ejemplo en wwwcalameocom Elegimos el archivo que queremosAl pinchar en el archivo aparecen varias opciones elegimos COMPARTIR
Copiamos el coacutedigo incrustado en HTML
Y en nuestra entrada en HTML pegamos el coacutedigo y le damos a publicar
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 45
En nuestro blog queda asiacute
Puedes cambiar las dimensiones de presentacioacuten en el coacutedigo HTML ajustaacutendolo al ancho de tu blog
Metodo 2 guardar el archivo en Google Drive Basta que accedas a drivegooglecom entres en tu cuenta y hagas click en el botoacuten para subir archivos Una vez subido haz click con el botoacuten derecho del ratoacuten en el archivo en cuestioacuten y elige laquoAbrir con Google Drive Viever
Abre laquoArchivo en el menuacute superior y pulsa en Embed (this PDF file)
Se abriraacute una ventana emergente que mostraraacute el coacutedigo que debes copiar y pegardonde quieras ubicar el archivo incrustado Recuerda que debe pegarse en el modoHTML del editor de Blogger
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 46
143 Insertar una animacioacuten flash (SWF) en el blogLos pasos que yo sigo son1) Descargo la animacioacuten flash2) Creo una nueva entrada y voy al editor HTML Aquiacute introduzco el siguiente coacutedigo
ltobject width=400 height=100gtltparam name=movie value=laquoURL DEL FLASH gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src= URL DEL FLASH type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgt
3) Subo el flash a Google Sites httpssitesgooglecom Vemos dosopciones Ver y Descargar Pinchamos con botoacuten derecho en Descargar del desplegable que aparece pincho en Copiar direccioacuten del enlace
4)Vuelvo a mi entrada y en el coacutedigo que introduje cambio la URL por la direccioacuten que se copioacute en el portapa-peles quedando asiacute
ltobject width=400 height=100gtltparam name=movie value=httpssitesgooglecomsitenachopdi1audioflashswf gtltparam name=allowFullScreen value=true gtltparam name=allowscriptaccess value=always gtltparam name=wmode value=transparent gtltembed src=httpssitesgooglecomsitenachopdi1audioflashswf type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=400 height=100 wmode=transparentgtltembedgtltobjectgtPodemos cambiar el ancho y el alto con width (indica el ancho) y height (indica el alto)
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 47
144 Insertar un powerpoint en el blogPrimero subimos el powerpoint a Drive Lo hacemos puacuteblicoPinchamos en el archivo para verlo y ahora vamos a Archivo Publicar en la webClick en laquoIniciar la publicacioacutenraquo
Aparece una ventana donde configurar el tamantildeo del powerpoint el tiempo de transiciones etchellip
Copiamos el coacutedigo HTML
Volvemos a nuestro blog en el editor HTML pegamos el coacutedigo y publicamos
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 48
144 Insertar audio en el blogHay 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 jwplayerswf que posiblemen-te esteacute en zip lo descomprimimos en una carpeta del disco localSubimos a Google Sites los siguientes archivos- Reproductor jwplayerswf- Archivo de muacutesica a reproducir en mp3- Imagen en jpg (que se veraacute de inicio en el reproductor)
Debajo del Jwplayer que hemos subido hay un botoacuten llamado Ver Pinchamos en Ver Se abre una pestantildea nueva copiamos su URL y la pegamos en el Bloc de notas Una vez pegada eliminamos el coacutedigo basura que aparece detraacutes de la extensioacuten swf
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 49
Hacemos lo mismo con los otros dos archivos (mp3 y jpg) En el caso del mp3 pinchamos con botoacuten derecho en Descargar y Copiar direccioacuten de enlace
Todo lo pegamos en el bloc de notas borrando el coacutedigo basura
Ahora volvemos a la carpeta donde se encuentran los activos descargados y hacemos clic sobre el archivo index
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 50
Se nos abre la paacutegina del JWPLAYER
Seleccionamos la opcioacuten MP3 con imagen + Barra de control debajoEn Configuracioacuten baacutesica pegaremos las URL que estaacuten pegadas en el Bloc de notas La URL del Jwplayer en la casilla URL player swf en la casillaURL archivo la de nuestro mp3Para la imagen pinchamos en Configuracioacuten avan-zada y debajo se abre OPCIONES DE ARCHIVO EnEl campo imagen pegamos la URL de nuestra Imagen
Bajamos abajo del todo y le damos a Recargar Reproductor
El coacutedigo que integra el reproductor y el viacutedeo en la paacutegina esltembed src=jwplayerswf width=384 height=312 allowfullscreen=true flashvars=file=videoflvampimage=capturajpggtltembedgt
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 51
Nos habraacute quedado asiacute
Copiamos el COacuteDIGO EMBED Nos vamos a nuestro blog creamos una entrada le damos tiacutetulo pinchamos en HTML Y dentro pegamos el coacutedigo embed que acabamos de copiar
Podemos modificar el tamantildeo del visor en los valores width y height
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 52
Nuestro audio quedaraacute parecido a esto
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 53
b) Subir el archivo de audio a servicios Web 20 como GoEar o SoundCloud que proporcionan el coacutedigo embed para insertar un reproductor con audio en tu blog Entramos en httpwwwgoearcomUna vez ya en la paacutegina escribimos en el cuadro de buacutesqueda el artista y el tiacutetulo de la cancioacuten que queremos
Seguidamente hacemos click con el botoacuten izquierdo del ratoacuten sobre BuscarSe nos abre otra ventana con los resultados encontrados
Hacemos click botoacuten izquierdo del ratoacuten sobre la cancioacuten que deseemos
Se nos abre otra ventana En ella tenemos que pinchar en Compartir
Se abre otra ventana Copiamos el coacutedigo que hay debajo de Pon esta cancioacuten en tu web o blog
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 54
Regresamos a nuestro blog Hacemos una nueva entrada le damos tiacutetulo y en HTML pegamos el coacutedigo copiado de Goear ltiframe width=580 height=115 src=httpwwwgoearcomembedsound9952db9 marginheight=0 align=top scrolling=no frameborder=0 hspace=0 vspace=0 allowfullscreengtltiframegt
Publicar y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 55
145 Agregar RSS al tu blog Es una forma de dar a conocer tus artiacuteculos en tu blog (RSS Really Simple Syndication) Ademaacutes de eso es muy coacutemodo 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 elPasos vamos a Disentildeo click al botoacuten Antildeadir un gadget y en la ventana que nos sale buscamos y elegimos el gadget Feed Se abre la ventana para Configurar feed
Dejando momentaacuteneamente esta ventananos vamos a la paacutegina httpfeedburnergooglecom donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccioacuten 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 botoacuten Next donde feedburner nos diraacute que ya el feed fue verificado
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 56
Antes de dar en Next para terminar debemos copiar la direccioacuten de nuestro feed
Un a vez copiada nos volvemos a la ventana de configuracioacuten del RSS en Blogger donde la pegamos y damos click al botoacuten Continuar
En mi caso opto por activar las tres opciones de mostrar y Click en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 57
146 Agregar gadget de suscripcion al blog Permite que tus lectores que se suscriban faacutecilmente a tu blog mediante los lectores de feed conocidos Pasos- Vamos a Disentildeo Antildeadir un Gadget y elegimos laquo Enlaces de suscripcioacutenraquoPinchamos en el le damos un tiacutetulo y Guardar
Y ya veriacuteamos en nuestro blog la suscripcioacuten viacutea RSS
147 Agregar botoacuten lsquovolver al iniciorsquo (a la parte de arriba de nuestra paacutegina) 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 ninguacuten problema Tambieacuten tenemos que pensar en el tamantildeo Tiene que ser de dimensiones reducidas para que no se solape con ninguna imagen ni gadget de la barra lateral Una vez tengamos claro queacute icono vamos a utilizar debe-mos subirlo a Google Sites por ejemplo Alliacute pinchamos con derecho en Descargar y Copiar direccioacuten de enlace
En Disentildeo inserta un gadget HTML y pega este coacutedigo HTML lta href= style=display crollpositionfixedbottom0pxright0px title=ARRIBAgtltimg src=Pega aquiacute la URL de tu imagen gtltagtPega donde pone Pega aquiacute la URL de tu imagen la URL de tu imagen y Guarda
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 58
148 Agregar laquoLeer maacutesraquo en medio de una entrada Vamos a Disentildeo en el cuerpo del blog de la entrada pinchamos en EditarAparece una ventana nueva y donde pone lsquo Texto del enlace de la paacutegina de entrada escribimos LEER MAacuteS
Bajamos abajo y damos en GuardarIMPORTANTE ahora pinchar en Guardar Disposicioacuten
A continuacioacuten hacemos una entrada ydonde queramos partir la entrada por larazoacuten que sea pinchamos en el iconoInsertar salto de liacutenea
Y seguimos escribiendo debajo Al lector le apareceraacute en ese salto de liacutenea el lsquoLeer maacutes lsquo que antes introdujimos Damos en Guardar Publicar y Ver blog
Quedariacutea asiacute
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 59
149Coacutemo poner un menuacute horizontal desplegable html en BloggerSi utilizas plantillas pre disentildeadas o dinaacutemicas es muy probable esto NO te funcione Si quieres aplicarlo ves al menuacute gt plantilla gt y cambia tu plantilla actual a sencillaPaso 1 Nos vamos a Maacutes Opciones Disentildeo y eliminamosel Gadget de Paacuteginas con Editar
y EliminarAceptar
Click en Guardar disposicioacuten
En realidad no hemos eliminados las paacuteginas siguen estando Lo podemos comprobar pinchando en Paacuteginas
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 60
Volemos a Disentildeo para antildeadir 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 coacutedigo en el blog El coacutedigo a buscar esltdiv class=region-inner header-innergt Para ello ponemos el cursor dentrodel coacutedigo existente y pulsamos Control+F Aparece un cuadro de busquedadonde pegamos el coacutedigo a buscar
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 61
Y damos a Enter Apareceraacute coloreado
Donde pone maxwidgets=lsquo1rsquo cambiamos el 1 por un 10 y donde pone showaddelement=lsquonorsquo cambiamos el no por yes Donde pone locked= lsquotruersquo cambiamos true por false
Tiene que quedar asiacute
Pinchamos en Guardar plantilla
Volvemos al escritorio y de nuevo a Disentildeo y vemos que nos ha creado el gadget que necesitamos
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 62
Vamos a insertar un coacutedigo que generaraacute nuestro menuacute desplegable Pero hay que tener muy claro las paacuteginas que queremos tener en el menuacute y como se van a llamar A modo de ejemplo mi paacutegina principal se va a llamar MI PRIMER BLOG una segunda paacutegina se llamaraacute TIC y una tercera que se llamaraacute TUTORIALES Cada uno de estos nombres que vamos a poner seraacute una pestantildea El coacutedigo es el siguiente
ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt LO QUE ESTAacute EN NEGRITA ltligt ES LO QUE TIENES QUE PONER lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt Y SERAacuteN EL NOMBRE DE CADA ltligt PESTANtildeA ltligt lta href=gtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 63
Donde estaacuten las almohadillas tenemos que meter las URL de cada paacutegina sustituyeacutendolas pero sin borrar nada maacutes ni una coma Veamoslta href=gtMI PRIMER BLOGltagt ltligt ltligt lta href=gtTICltagt ltligt ltligt lta href=gtTUTORIALES ltagt ltulgt ltligtlta href=gtCategoria 11ltagtltligt
Al pinchar en la primera pestantildea aparece su URL la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestantildea y su URL) quedando por tanto el coacutedigo asiacute ltligt
lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia)
ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt ltligt lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtDESPLEGABLE1ltagtltligt ltligtlta href=gtDESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt ltligt
ltligt lta href=gtCategoria 2ltagt ltulgt ltligtlta href=gtCategoria 21ltagtltligt ltligtlta href=gtCategoria 22ltagtltligt ltulgt
Veis que solo debajo de donde pone lsquoTUTORIALESrsquo hay maacutes coacutedigo Este es el coacutedigo que inserta los desplegables de la pestantildea TUTORIALESAhora nos queda modificarlo Primero le daremos un nombre acorde a las etiquetas que hayamos puesto en la entrada que tengamos en la pestantildea TUTORIALES Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas) Cambio DESPLEGABLE2 por PDI que es otra etiqueta Quedariacutea asiacute
64
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 65
Ahora volvemos al blog a buscar las etiquetas mencionadas En la pestantildea TUTORIALES pincho debajo en la etiqueta blog
Al pinchar en blog en la barra de direcciones aparecen las entradas quehayamos hecho Copiamos esa URL
Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=gtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedariacutea asiacute (hay que borrar la )lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 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 estaacute justoantes de PDI
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=gtPDIltagtltligt ltulgt
Quedando asiacute lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt
Ya tendriacuteamos nuestro coacutedigo casi listo
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 67
El coacutedigo quedariacutea asiacute ltdiv id=mbwnavbargt ltul id=mbwnavgt ltligt lta href=httpmitutorialblogblogspotcomesgtMI PRIMER BLOGltagt ltligt ltligtlta href=httpmitutorialblogblogspotcomespblog-pagehtmlgtTICltagt ltligt
lta href=httpmitutorialblogblogspotcomesgtTUTORIALESltagt ltulgt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelblogsgtBlogltagtltligt ltligtlta href=httpmitutorialblogblogspotcomessearchlabelPDIgtPDIltagtltligt ltulgt ltligtltligt lta href=gtOTRA PESTANtildeAltagt ltulgt ltligtlta href=gtOTRO DESPLEGABLE1ltagtltligt ltligtlta href=gtOTRO DESPLEGABLE2ltagtltligt ltulgt ltligt ltulgt
ltdivgt
Copiamos el coacutedigo y volvemos a Blogger A Disentildeo
Este coacutedigo solo tienes que ponerlo si quieres poner otra pestantildea maacutes con dos desplegables Si quieres antildeadir maacutes pestantildeas copia el coacutedigo de una de arriba cambia el nombre y su URL e igual si le quieres poner desplegableshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 68
Volvemos a Blogger Disentildeo y la pegamos en el gadget que hemos creado
Pinchamos en Antildeadir un gadget e insertamos uno deHTML
Pegamos el coacutedigo en contenido y no le ponemos tiacutetuloPinchamos en Guardar
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 69
La barra ha quedado encima de la cabecera simplemente pinchamos en ella y la arrastramos situaacutendola debajo de la cabecera
Asiacute
Vamos a ver como estaacute quedando hasta ahora Ver blog (posiblemente F5) y vemos que no estaacute quedando como queremos
Pero esto no es desplegable asiacute que tenemos que tocar el coacutedigo HTML Tenemos que buscar este coacutedigo ]]gtltbskingt
Vamos a Plantilla Editar HTML y con el cursor dentro del coacutedigo pulsamos Control+F Dentro del cuadro de busqueda que sale pegamos el coacutedigo ]]gtltbskingt y Enter
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 70
Encima de ]]gtltbskingt dejamos espacio y pegamos el siguiente coacutedigo
MBW Navgation barmbwnavbar background bdbfbfwidth 850pxcolor FFFmargin 0pxpadding 0position relativeborder-top0px solidheight35pxmbwnav margin 0padding 0mbwnav ul float leftlist-style nonemargin 0padding 0mbwnav li list-style nonemargin 0padding 0border-left1px solid 333border-right1px solid 333height35pxmbwnav li a mbwnav li alink mbwnav li avisited color FFF
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 71
display blockfontnormal 12px Helvetica sans-serif margin 0padding 9px 12px 10px 12pxtext-decoration nonembwnav li ahover mbwnav li aactive background 028490color FFFdisplay blocktext-decoration nonemargin 0padding 9px 12px 10px 12pxmbwnav li float leftpadding 0mbwnav li ul z-index 9999position absoluteleft -999emheight autowidth 160pxmargin 0padding 0mbwnav li ul a width 140pxmbwnav li ul ul margin -25px 0 0 161pxmbwnav lihover ul ul mbwnav lihover ul ul ul mbwnav lisfhover ul ul mbwnav lisfhover ul ul ul left -999em
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 72
mbwnav lihover ul mbwnav li lihover ul mbwnav li li lihover ul mbwnav lisfhover ul mbwnav li lisfhover ul mbwnav li li lisfhover ul left autombwnav lihover mbwnav lisfhover position staticmbwnav li li a mbwnav li li alink mbwnav li li avisited background 028490width 120pxcolor FFFdisplay blockfontnormal 12px Helvetica sans-serifmargin 0padding 9px 12px 10px 12pxtext-decoration nonez-index9999border-bottom1px dotted 333mbwnav li li ahover mbwnavli li aactive background 70b6bdcolor FFFdisplay block margin 0padding 9px 12px 10px 12pxtext-decoration none
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 73
Ya estaacute pegado
Le damos a Guardar plantilla
Y vemos el blog
A vosotros os saldraacute una pestantildea maacutes llamada Categoriacutea 2 Yo la eliminado borrando el coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 74
Si quereacuteis cambiar los colores de las pestantildeas o de los desplegables lo teneacuteis que hacer en el coacutedigo que introdujisteis en los valores alfanumeacutericos que aparezcan despueacutes de la almohadillaEn la paacutegina wwwcolorhexacom metemos esos nuacutemerosy nos dice a que color corresponde y nos permite buscar otros colores
Si el ancho de la barra no es el que mejor se adecuacutea al principio del coacutedigo en width estaacute puesto 850pxsimplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 75
1410Coacutemo insertar tablas en BloggerEl coacutedigo baacutesico para insertar una tabla es el siguiente
lttable border=1 cellpadding=4gtlttbodygtlttrgtlttdgtAgualttdgtlttdgtSallttdgtlttdgtLechelttdgtlttrgtlttrgtlttdgtTardelttdgtlttdgtNochelttdgtlttdgtDiacutealttdgtlttrgtlttrgtlttdgtMadridlttdgtlttdgtPariacuteslttdgtlttdgtRomalttdgtlttrgtlttbodygtlttablegt
El resultado es este
Agua Sal Leche
Tarde Noche Diacutea
Madrid Pariacutes Roma
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 76
Si deseas insertar una fila maacutes agrega esta parte antes de lttbodygtlttablegtlttrgtlttdgtPalabra 1lttdgtlttdgtPalabra 2lttdgtlttdgtPalabra 3lttdgtlttrgtDel mismo modo si quisieras que cada fila tuviera maacutes celdas entonces agrega las que quieras antildeadiendo las palabras entre las etiquetas lttdgt lttdgt antes de cada lttrgt
Si quieres modificar el borde de la tabla cambia el nuacutemero que hay detraacutes de cambiaborder=1 Si lo quieres maacutes grueso por un nuacutemero maacutes alto si lo dejas en 0 se quedaraacute sin bordelttable border=5 cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde 5lttdgtlttrgtlttbodygtlttablegtPara cambiar el color del borde de la tabla antildeadimos despueacutes de lttable el atributo bordercolor=green el color lo puedes cambiar por ejemplo red
lttable border=2 bordercolor=green cellpadding=4gtlttbodygtlttrgtlttdgtTabla con borde verdelttdgtlttrgtlttbodygtlttablegt
Este seriacutea el resultado
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 77
1411Coacutemo instalar Google Analytics en el blogVamos a la paacutegina de Google Analytics httpwwwgoogleesintlesanalytics y como ya tenemos cuenta en gmail pinchamos en Crear una cuenta Hay que seguir tres pasos 1ordm- 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 estaacute puesta a la izquierda
Ahora tenemos que decirle que tipo de blog tenemos en Categoriacutea del sectoryo he elegido Informaacutetica Bajo maacutes abajo y elijo la zona horaria (Espantildea Madrid)
Le damos a Obtener ID de seguimiento Aceptar los teacuterminos
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 78
Y nos aparece una ventana con un coacutedigo HTML Lo copiamos
Volvemos al blog Maacutes opciones DISENtildeO Antildeadimos un gadget de HTML donde pegamos el coacutedigo
Le damos a Guardar y ya tenemos nuestro gadget
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 79
Ahora tenemos que arrastrar este gadget debajo del cuerpo (Entradas del blog)
Damos en Guardar disposicioacuten y nos vamos a Configuracioacuten Otros y bajamos hasta Google Analytics
Aquiacute 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 Pediacutea
Le damos a Guardar configuracioacuten
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 80
Volvemos a Google Analytics pinchamos en el icono de la casitaLe damos a guardar preferencias
Y desde laquoTodos los datos de sitios webraquo podemos entrar en nuestra cuentaSi pinchamos en Tiempo real Descripcioacuten general podemos ver el traacutefico en el blog Como acabamos de
crearlo estaacute a cero Si volveacuteis al blog y haceacuteis una visita vereacuteis movimientohellip
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 81
1412Coacutemo insertar un contador de visitas1 Ir a la paacutegina principal httpcontador-de-visitascom2 Elegir el estilo del contador en el desplegable
Introducir el nuacutemero de visitas inicial del contador
3 Introducir la direccioacuten del blog y OK
Apareceraacute una paacutegina con un botoacuten que pone agregar a blogger Al hacer click en este botoacuten vamos a Blogger donde podemos cambiar el tiacutetulo del bloque que contendraacute el contador de visitas
Le damos a antildeadir artilugio y ya estaacute Luego podemos cambiar la posicioacuten de nuestro contador a donde queramos
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 82
1412Coacutemo insertar un VokiEntramos en wwwvokicom y nos registramos Pinchamos en Create a new vokiLuego en lsquoCustomize your characterrsquo y pinchamos en el voki que nos guste
Podemos cambiarle el color de los ijos labios ropa etc hellip Una vez hecho esto pinchamosen Done
Y ahora en lsquoText to speechrsquo 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 tiacutetulo y pincha en en Save
La siguiente ventana te informa de queTodo ha ido bien y das en Close
Te aparece un coacutedigo embed pinchas en CopyY ya solo queda volver al blog antildeadir un gadget HTML y pegar este coacutedigo
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 83
1413Coacutemo poner un chat en tu blog Hay diferentes sitios que te proporcionan un chat gratuito para tu blog Yo he elegido CBOX Entramos en httpwwwcboxws nos registramos
Nos llegaraacute un mensaje de activacioacuten a nuestro correo pinchamos en el link y en la siguiente paacutegina introducimos la
URL de nuestro blog
Nos aparece una nueva ventana con el coacutedigo ya para pegar en nuestro blog Copiamos el coacutedigo en un gadget de nuetro blog y listo
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 84
1413Coacutemo poner los iconos de las redes sociales Buscamos en imaacutegenes d google los iconos que queremos Los descargamos y los subimos a Google SitesEntramos en DISENtildeO de nuestro blog y antildeadimos un gadget de HTML Aquiacute pegamos el siguiente coacutedigo
lta href=URL PAGINA FACEBOOK target=_blankgtltimg src=URL IMAGEN ICONO FACEBOOK width= lsquo35px title=FACEBOOK gtltagt
Donde pone URL PAGINA FACEBOOK teneacuteis que poner la URL de la paacutegina a la que quereacuteis que vaya al hacer clic en el icono (en este caso de la Facebook) y donde pone URL IMAGEN ICONO FACEBOOK teneacuteis que poner la URL de la imagen del icono que quereacuteis poner Esta URL la obteneacuteis yendo a Google Sites (donde habeacuteis subido el icono de facebook) pinchando con botoacuten derecho en descargar y Copiar direccioacuten de enlace (esa es la URL del icono)En width indicamos el tamantildeo de la imagen en este caso 35 pixeles Lo podeacuteis cambiar para que sean maacutes grandes o pequentildeos a vuestro gusto Y a continuacioacuten estaacute el tiacutetulo (FACEBOOK) que no es necesarioponerlo pero cuando pongamos varios coacutedigos asiacute sabremos cuaacutel es cuaacutel faacutecilmente
Una vez puestas las URL en el coacutedigo damos a Guardar y tenemos el icono de Facebook enlazado a nuestra paacutegina de Facebook Si quere-mos poner de maacutes redes sociales iriacuteamos insertando el mismo coacutedigo con las URL correspondienteshellip
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-
TUTORIAL DE BLOGGER (Nacho Segovia) 85
15 Glosario de teacuterminos habituales creando un blogContenido la informacioacuten que publicas en tu blog Texto paacuteginas web (html) imaacutegenes fotos videoshellipServidor donde se publica el contenido del blog y permite que este accesible por todo el mundo Tambieacuten se llaman hostsURL se refiere al texto que identifica a una paacutegina web Normalmente empieza por httpEnlace viacutenculo hiperviacutenculo normalmente aparecen en azul y si se les pincha le llevan al usuario a otra paacuteginaPost se refiere a la publicacioacuten de un artiacuteculo o entrada nueva en un blogTemplate es la platilla o disentildeo graacutefico maacutes otros atributos (enlaces y otros recursos en las barras laterales)RSS Atom Meacutetodos de sindicacioacuten de contenidos que permiten la informar a los interesados de su actualizacioacuten o nuevos contenidos Adsense Programa de monetizacioacuten de Google Inc para propietarios de blog o webs Blogroll Es una lista de enlaces que un blogger recomiendahellipBanner Anuncio publicitario que se inserta en una paacutegina webGoogle Plus Red social de Google Podcast Transmisioacuten de contenido multimedia en un blogSidebar Barra lateral izquierda o derecha de un blogWidget Coacutedigo que antildeade una funcionalidad automaacuteticamente sin necesidad de escribir el coacutedigo El termino en Blogger es ldquoGadgetrdquo
- TUTORIAL PARA CREAR UN BLOG CON BLOGGER Autor Nacho Segovia
- 1 iquestQueacute es un bloghellip
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Esta es la siguiente ventana que nos aparece
- Slide 9
- Y nuestro blog estaacute creado listo para hacer entradashellip
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37
- Aspecto de la cabecera antes y despueacutes de poner una imagen An
- 9Estadiacutesticas visioacuten general Podemos ver las estadiacutesticas p
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Slide 46
- Slide 47
- Slide 48
- Slide 49
- Slide 50
- Slide 51
- Slide 52
- Slide 53
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Slide 68
- Slide 69
- Slide 70
- Slide 71
- Slide 72
- Slide 73
- Slide 74
- Slide 75
- Slide 76
- Slide 77
- Slide 78
- Slide 79
- Slide 80
- Slide 81
- Slide 82
- Slide 83
- Slide 84
- Slide 85
-