You are on page 1of 85

TUTORIAL PARA CREAR UN BLOG CON BLOGGER

Autor: Nacho Segovia

TUTORIAL DE BLOGGER (Nacho Segovia)

1. Qu es un blog?............................................................................................................... 3 2. Tipos de blogs. .................................................................................................................... 3 3. Partes de un blog ................................................................................................................ 4 4. Estructura de una entrada o post .................................................................................. 5 5. Blogger ........................................................................................................................ 6 5.1. Crear una cuenta gmail ............................................................................................... 6 5.2. Entrando en Blogger ... 7 5.3. Asignar un nombre al Blog .......................................................................................... 9 6. Crear una entrada o post .................................................................................................... 10 6.1. Aadir imgenes o vdeos ....................................................... 12 6.2. Aadir enlaces ............................................................................................................ 16 6.3. Comentarios de los lectores .... 17 7. Configuracin del blog:Lo bsico, Entradas y comentarios, Mvil y correo electrnico, Idioma y formato, Preferencias para motores y Otros. .... 18 7.1. Editar HTML .. 30 8. Diseo del blog 32 8.1. Como agregar o quitar complementos a la pgina. 32 9. Estadsticas Visin general 39 10. Google + .. 40 11. Comentarios publicados .. 40 12. Pginas ............................................................................................................................. 41 13. Configuracin de las entradas 42 14. Usos avanzados de Blogger. 43 14.1. Aadir aplicaciones 2.0 en nuestro blog 43 14.2. Insertar archivos pdf, doc, xls, ppt, odf o rdf .. 44 14.3. Insertar un Flash en el blog . 46 14.4. Insertar audio en el blog 48 14.5. Agregar RSS al tu blog . 55 14.6. Agregar gadget de suscripcion al blog.. 57 14.7. Agregar botn volver al inicio . 57 14.8. Agregar Leer ms en una entrada 58 14.9. Cmo poner un men horizontal desplegable HTML en Blogger 59 14.10. Como insertar Tablas en Blogger.. 75 14.11. Como instalar Google Analytics . 77 14.12. Como inserrtar un Voki 82 14.13. Como poner un chat en tu blog.. 83 14.14. Como poner los iconos de las redes sociales en tu blog .. 84 15 Glosario de trminos tpicos en un blog ............................................................................. 85

1. Qu es un blog?
Un blog es un sitio Web en donde uno o varios autores desarrollan contenidos. Los blogs tambin se conocen como cuaderno de bitcora. La informacin se actualiza peridicamente y, los textos se plasman en forma cronolgica; primero aparece el ms recientemente escrito. En cada artculo 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 dilogo. Nos sirven para lanzar mensajes que pueden llegar a mucha gente. Nos sirve para investigar sobre algn tema en especial, con fines educativos, comunicarnos con amigos. Se pueden utilizar con fines personales o profesionales.

2. Tipos de blogs
Blog Personal Blog Temtico Blog Profesional Blog Corporativo Se han dado nombres a algunos blogs a partir de sus temticas: - Audioblogs. Dedicados a las galeras de ficheros de audio. - Educablogs. Dedicados a la educacin. - Fotoblogs. Dedicados a las galeras de imgenes. - Videoblogs. Dedicados a las galeras de ficheros de video.

TUTORIAL DE BLOGGER (Nacho Segovia)

3.

Partes de un Blog:

Se dividen en tres partes:

La cabecera o ttulo del Blog.

Cabecera
El men lateral , en el que, adems de otros posibles elementos suele aparecer un listado de categoras. El post o entrada

men lateral

entrada o post
TUTORIAL DE BLOGGER (Nacho Segovia) 4

4. Estructura de una entrada: puede ser variada, pero suele tener unos elementos comunes, como: Fecha La fecha de publicacin del post Ttulo El ttulo del post y la categora a la que pertenece . El cuerpo de la entrada, donde puede ir una imagen, vdeo Cuerpo Comentario. Si el autor del post permita a los usuarios dejar un comentario, aparecer un enlace para poder hacerlo .

Comentario

TUTORIAL DE BLOGGER (Nacho Segovia)

5. Blogger :

para poder usar blogger necesitamos una cuenta de correo gmail. Si alguien no sabe como crersela puede ver este video tutorial que nos ensea paso a paso como hacerlo.

5.1. Crear una cuenta Gmail


Tambin lo tienes en youtube, en este enlace: vdeo
https://www.youtube.com/watch?v=BloMF6HPFms

TUTORIAL DE BLOGGER (Nacho Segovia)

5.2. Entrando en Blogger.


Puedes entrar de dos maneras: a) desde la pgina de Google (www.google.es) accediendo al enlace de Aplicaciones y haciendo clic en la opcin Ms

y aparece el icono de Blogger

b) Escribiendo en la barra de direcciones de nuestro navegador (recomiendo usar Chrome) : https://www.blogger.com/ Elige la opcin que te sea ms fcil. A continuacin aparecer una ventana para iniciar sesin; simplemente pinchamos en Iniciar sesin:
Nombre y apellidos que introdujimos al crear la cuenta Nuestra direccin de correo

Pinchamos en Iniciar sesin

TUTORIAL DE BLOGGER (Nacho Segovia)

Esta es la siguiente ventana que nos aparece:

Simplemente pinchamos en el botn Continuar en Blogger

TUTORIAL DE BLOGGER (Nacho Segovia)

Si ya hemos creado algn blog, aqu aparecera. En nuestro caso pinchamos en Nuevo Blog

5.3. Asignar un nombre al Blog. En la siguiente ventana que nos aparecer , introducimos el ttulo de
nuestro blog. Tenemos que poner una direccin, intentando que est relacionada con nuestra temtica (el Propio Blogger nos indicar si est disponible o No). Y por ltimo elige una plantilla. Ms tarde podrs cambiarla y personalizar el blog.

Pulsa en Crear blog

TUTORIAL DE BLOGGER (Nacho Segovia)

Y nuestro blog est creado, listo para hacer entradas

6. Crear una entrada.

Para hacer nuestra primera entrada pinchamos en el icono del lpiz y nos aparece la ventana con el editor para poner un ttulo a la entrada, escribir el mensaje y ms opciones que veremos ms adelante como insertar una imagen que simplemente requiere tener la imagen guardada y pinchar en el icono Inserta imagen Por ltimo pinchar en Publicar

TUTORIAL DE BLOGGER (Nacho Segovia)

10

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

Esta es la ventana que nos aparece tras pulsar en publicar

Pinchamos en Ver blog y veremos nuestro blog

TUTORIAL DE BLOGGER (Nacho Segovia)

11

As ha quedado nuestro blog : Tened en cuenta que no le hemos puesto un fondo, ni una cabecera, ni dimensiones Es decir falta el DISEO

6.1. Aadir una imagen o un vdeo a nuestra entrada


Pinchamos en Acceder (vrtice superior derecho) Ahora en 1 entrada

Ahora en nuestra entrada Y volvemos al editor del principio


TUTORIAL DE BLOGGER (Nacho Segovia) 12

Pinchamos en el icono Insertar imagen Ahora en Elegir archivos

Nos aparece la ventana para buscar la imagen. La seleccionamos y aparece cargada para aadirla. Pulsamos en Aadir las imgenes seleccionadas Y veremos nuestra entrada con la imagen que hemos aadido: Simplemente con pinchar en la imagen, sin soltar, la podemos arrastar y colocar donde deseemos. Tambin nos aparecen opciones para cambiarla el tamao, alinearla

TUTORIAL DE BLOGGER (Nacho Segovia)

13

Procederemos igual para insertar un vdeo, aunque hay otras formas de poner un vdeo en nuestro blog Pinchamos esta vez en el icono Insertar un vdeo Seleccionamos el vdeo para subir (en este caso guardado en el disco duro). Tardar un poco, en funcin de la duracin y del formato en que lo tengamos. Y ya tendremos nuestro vdeo en la entrada. Bastar con pinchar en Actualizar

Y Ver blog
Otra forma ms simple, aunque no siempre disponible, es pinchar debajo del vdeo en Compartir y si aparece debajo el icono de Blogger y tenemos nuestro blog abierto, simplemente pinchamos en el icono y nos redirige a nuestro blog con la nueva entrada y el video insertado, listo para publicarlo:

TUTORIAL DE BLOGGER (Nacho Segovia)

14

Ya tenemos nuestra primera entrada con una imagen insertada y un vdeo:

TUTORIAL DE BLOGGER (Nacho Segovia)

15

6.2. Aadir enlaces


Para crear un vnculo y descargar archivos, acceder a URL, contactar con correos etc. deberemos seleccionar el texto o imagen a la que adjudicaremos el Vnculo, presionar en Enlace y rellenar con la direccin a la que nos llevar al hacer clic sobre el . Texto seleccionado Pinchamos en Enlace

Se abre una ventana para introducir la URL donde queremos dirigir al pinchar en el texto seleccionado. Tambin podemos redirigirlo a una direccin de correo. Os aconsejo que activis la casilla abrir este enlace en una ventana nueva. De esta manera el lector no se sale del blog

Por ltimo , click en Aceptar, Actualizar y Ver blog

TUTORIAL DE BLOGGER (Nacho Segovia)

16

6.3. Comentarios de los lectores


A no ser que solo queramos dar informacin en nuestro blog, es interesante la opcin de permitir dejar comentarios a los lectores. Para ello, pinchamos en Acceder , en nuestra entrada (de momento solo tenemos una entrada) y as llegamos al editor de la entada. A la derecha tenemos el botn Opciones

Pinchamos en l y se despliegan las posibilidades de comentarios y de redaccin de estos.

Click en Listo y ya est.

TUTORIAL DE BLOGGER (Nacho Segovia)

17

7. Configuracin del blog.


Empezamos como siempre pinchando en Acceder (vrtice superior derecho); veremos las entradas que hayamos creado y a la derecha de estas, el botn con una flecha indicando hacia abajo, que es Ms opciones.

Ms opciones

Pulsamos en esta y aparece un men desplegable.

Pinchamos en la opcin Configuracin

TUTORIAL DE BLOGGER (Nacho Segovia)

18

Entramos en una pgina donde tenemos control de casi todo. Ahora nos vamos a centrar en Configuracin y sus posibilidades

TUTORIAL DE BLOGGER (Nacho Segovia)

19

Lo bsico : podemos,
- Editar el ttulo y cambiarlo - Aadir ahora la descripcin o cambiarla - Dejar que nuestro blog sea visible o invisible en la bsqueda en Internet - Direccin del blog: Aqu cambiaremos la direccin de nuestro blog por otra, si est disponible. - Permisos: Autores del blog: Podemos dejar que publiquen nuestros compaeros o alumnos. Nosotros seramos los administradores y ellos seran los autores del blog. El administrador tiene acceso total al blog. Puede hacer cambios en el diseo y la configuracin; crear, editar y borrar cualquier entrada y cualquier comentario. Un autor no tiene acceso a la configuracin. Puede crear, editar y borrar sus entradas o los comentarios a sus entradas.

Para crear autores slo tenemos que hacer clic en AADIR AUTORES y escribir las direcciones separadas de comas o cogerlas de nuestros contactos de Gmail.
TUTORIAL DE BLOGGER (Nacho Segovia) 20

Lectura del blog: Aqu decimos quien puede ver y leer nuestro blog. Cualquiera: cualquiera puede acceder a nuestro blog. Slo a los usuarios que yo elija: slo podrn leerlo los usuarios que yo elija, pero antes tendrn que identificarse que son ellos. Opcin interesante cuando queremos proteger el contenido de nuestro blog. nicamente autores del blog: los autores sern los nicos que puedan ver el contenido, previa identificacin.

Entradas y comentarios:
Mostrar un mximo de: cuantas entradas por pgina queremos mostrar Plantilla de las entradas: Apens se usa... Mostrar imgenes con Lightbox: una forma de ver las imgenes. Recomiendo que s. Ubicacin de los comentarios: lugar donde queremos que aparezca la ventana de comentarios. Quin puede comentar?:aconsejo: Cualquiera. Moderacin de comentarios: Se especifica cuando se moderan los comentarios. Si se habilita siempre, aparece una ventana para poner un correo para que Blogger te avise de que existe un comentario a moderar. Mostrar verificacin de palabras: dejarlo en no , si moderas comentarios, y en s , si no los moderas. Mostrar Backlinks: Enlaces en los lugares que comparten esa entrada. Mensaje del formulario de comentarios: para dejar un texto que lea quien vaya a hacer un comentario. Hay que GUARDAR CONFIGURACIN (arriba a la derecha).

TUTORIAL DE BLOGGER (Nacho Segovia)

21

Mvil y correo electrnico :


Publicar entradas mediante correo electrnico: es una opcin para permitir a la gente que pueda publicar mandando un correo electrnico. Me parece un poco enrrevesado

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

No olvidis pinchar en GUARDAR CONFIGURACIN.

TUTORIAL DE BLOGGER (Nacho Segovia)

22

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

No olvidis pinchar en GUARDAR CONFIGURACIN

TUTORIAL DE BLOGGER (Nacho Segovia)

23

Estas opciones las dejara tal y como vienen por defecto

La nica opcin que encuentro til es Herramientas del blog

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

TUTORIAL DE BLOGGER (Nacho Segovia)

24

7. Diseo del blog. tenemos que ir a la pestaa PLANTILLA.

Nos aparecen numerosos tipos de Plantillas (sencillo, vistas dinmicas, Picture window, fantstico S.A., etc)

Pinchamos en Personalizar

TAMBIN PODEMOS ACCEDER AL DISEO DESDE LA OPCIN DISEO, ENCIMA DE PLANTILLA

TUTORIAL DE BLOGGER (Nacho Segovia)

25

Desde aqu podremos cambiar la PLANTILLA, el FONDO, los AJUSTES DE ANCHO, el DISEO y algunos ajustes AVANZADOS.

TUTORIAL DE BLOGGER (Nacho Segovia)

26

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

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

TUTORIAL DE BLOGGER (Nacho Segovia)

27

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

Seleccionamos, click en Listo y Aplicamos al blog

TUTORIAL DE BLOGGER (Nacho Segovia)

28

Ajustar ancho:
Esta opcin configura el ancho de la zona de entradas y de la columna o columnas.

Diseo: aqu elegimos la apariencia del blog: donde van a estar las columna con los complementos o gadget
y cmo va a ser el pie de pgina. Es recomendable colocar la columna a la derecha.

No olvidis siempre APLICAR AL BLOG.

TUTORIAL DE BLOGGER (Nacho Segovia)

29

Avanzado:
En la opcin avanzado podemos hacer ajustes ms detallados de tipo de letra y colores. Recordad que siempre los podemos previsualizar abajo.

Una vez configurado todo, volvemos al escritorio con el botn VOLVER A BLOGGER.

7.1. EDITAR HTML: (solo para avanzados)


En la opcin Plantilla encontramos el editor HTML. Aqu podemos modificar los parmetros que queramos, si sabemos lenguaje HTML, podemos cargar una plantilla diseada para Blogger que hayamos encontrado en internet o copiar cdigos que hay en internet para hacer/poner diferentes cosas en nuestro blog.

TUTORIAL DE BLOGGER (Nacho Segovia)

30

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

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

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

TUTORIAL DE BLOGGER (Nacho Segovia)

31

Esta sera una vista previa de la nueva plantilla copiada con HTML:

8. Diseo 8.1. Cmo agregar o quitar complementos a la pgina


Lo ltimo que tenemos que hacer para terminar el diseo de nuestra pgina es poner o quitar elementos a esta. Esos elementos se llaman GADGET (herramientas) y los podemos aadir o eliminar desde la opcin DISEO.

TUTORIAL DE BLOGGER (Nacho Segovia)

32

Por defecto suelen aparecer dos gadgets que son: Archivos del blog (las entradas del blog), y Datos personales (los datos del autor del blog).Todo gadget lo podemos editar o eliminar (eliminar aparece cuando lo editamos). Los gadget que aparecen en una pgina son los que les quiere el autor del blog. Es una eleccin muy personal. Hay tres que yo considero importantes: Cuadro de bsqueda: Importante para que se puedan encontrar cualquier entrada dentro del blog.Para agregar uno, pinchamos en Y aparece la ventana de los gadgets disponibles. Buscamos el que queremos y pinchamos en el smbolo de para aadirlo y veremos otra ventana para Configurar el cuadro de busqueda:

TUTORIAL DE BLOGGER (Nacho Segovia)

33

Enlaces de suscripcin: as tus lectores se pueden suscibir ms fcilmente

Configuramos el ttulo

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

Configuramos las etiquetas

TUTORIAL DE BLOGGER (Nacho Segovia)

34

Son tambin muy interesantes los gadgets: HTML (el gadget que tendremos que usar si queremos insertar cualquier herramienta que venga descrito o escrito con cdigo HTML), Pginas (para poder ver las pginas 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 slo coger y arrastrar a cualquiera de las secciones en las que dice gadget . Tambin se puede configurar el apartado Entradas del blog. Pinchando en Editar , podemos configurar las entradas del blog

TUTORIAL DE BLOGGER (Nacho Segovia)

35

Dentro de DISEO , ya hemos visto como aadir un gadget. Veamos como agregar un favicon. Un FAVICON o favorite icon, es un pequeo icono que se se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregar a sus favoritos. Despus, otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestaa del sitio web. Este icono, tradicionalmente tiene un tamao de 16 x 16 pxeles, aunque tambin se puede incluir con un tamao de 32 x 32.

TUTORIAL DE BLOGGER (Nacho Segovia)

36

Podemos usar programas de diseo grfico 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 ms sencillos es favicononline.es. Tienes un vdeotutorial en : http://www.youtube.com/watch?v=LPvDnGc0Dvk&noredirect=1#t=16 Modificar la barra de navegacin: Pinchando en editar, Blogger nos da varias opciones

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

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

TUTORIAL DE BLOGGER (Nacho Segovia)

37

Aspecto de la cabecera antes y despus de poner una imagen: Antes

Despus

Reconocimiento : si queremos poner derechos de autor a nuestro blog este es el sitio (parte ms inferior de DISEO ) . Como siempre pinchando en editar:

TUTORIAL DE BLOGGER (Nacho Segovia)

38

9.Estadsticas, visin general.


Podemos ver las estadsticas por: das, por entradas ms visitadas, desde qu pases nos visitan

Entradas:

TUTORIAL DE BLOGGER (Nacho Segovia)

39

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

11. Comentarios publicados. podremos ver los comentarios Publicados, los que estn pendientes de
moderacin y los que son Spam. Tambin podremos aprobar, o suprimir los comentarios de los visitantes del blog.

TUTORIAL DE BLOGGER (Nacho Segovia)

40

12. Pginas
Las pginas son como las entradas, pero estas no se ordenan en orden cronolgico y no tienen etiquetas. Se pueden realizar 10 pginas y se usan para poner contenido ms esttico en el blog. Se puede crear una pgina como una entrada, o crear una pgina que sea un enlace a otro sitio web.

Pinchamos en Pgina nueva y elegimos esta vez Pgina en blanco. Hacemos una entrada y veremos: Para que este visible la nueva pgina que hemos creado debemos pinchar en la flechita de al lado de donde pone No Mostrar y elegimos una de las tres opciones posibles: As quedara con la opcin

TUTORIAL DE BLOGGER (Nacho Segovia)

41

13. Configuracin de las entradas.


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

Programar : permite que la entrada se publique automticamente en el momento o que se publique en un da 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 redaccin y los saltos de lnea.

TUTORIAL DE BLOGGER (Nacho Segovia)

42

14. Usos avanzados de Blogger :


14.1. Aadir aplicaciones 2.0 en nuestro blog: Es una funcin muy interesante para el blog. Insertar vdeos, presentaciones, galeras de imgenes y otras aplicaciones 2.0 que encontramos en internet. En todas estas aplicaciones podemos encontrar las palabras: INSERTAR, EMBED o COLOCAR EN TU WEB O BLOG. Tenemos que coger el cdigo que nos da la aplicacin e insertarlo en la pestaa Edicin de HTML.

Ejemplo insertando un vdeo desde youtube. Una vez elegido el vdeo que queremos insertar, debajo de l pinchamos en COMPARTIR, luego a INSERTAR, en TAMAO DE VDEO, escogemos PESONALIZAR y ponemos el ancho de nuestro blog. Consejo: desactivar la casilla MOSTRAR SUGERENCIAS as no nos podr ningn vdeo, no deseado, al terminar. Por ltimo, copiar el CDIGO HTML del vdeo.

As quedara nuestro vdeo insertado en el blog:

TUTORIAL DE BLOGGER (Nacho Segovia)

43

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

Copiamos el cdigo incrustado en HTML:

Y en nuestra entrada, en HTML, pegamos el cdigo y le damos a publicar

TUTORIAL DE BLOGGER (Nacho Segovia)

44

En nuestro blog queda as:

Puedes cambiar las dimensiones de presentacin en el cdigo HTML , ajustndolo al ancho de tu blog.

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

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

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

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

TUTORIAL DE BLOGGER (Nacho Segovia)

46

14.4. Insertar un powerpoint en el blog Primero subimos el powerpoint a Drive. Lo hacemos pblico. Pinchamos en el archivo para verlo y ahora vamos a Archivo: Publicar en la web: Click en Iniciar la publicacin . Aparece una ventana donde configurar el tamao del powerpoint, el tiempo de transiciones, etc

Copiamos el cdigo HTML.

Volvemos a nuestro blog, en el editor HTML pegamos el cdigo y publicamos:

TUTORIAL DE BLOGGER (Nacho Segovia)

47

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

Debajo del Jwplayer que hemos subido hay un botn llamado Ver. Pinchamos en Ver. Se abre una pestaa nueva; copiamos su URL y la pegamos en el Bloc de notas. Una vez pegada eliminamos el cdigo basura que aparece detrs de la extensin swf :

TUTORIAL DE BLOGGER (Nacho Segovia)

48

Hacemos lo mismo con los otros dos archivos (mp3 y jpg). En el caso del mp3 pinchamos con botn derecho en Descargar y Copiar direccin de enlace.

Todo lo pegamos en el bloc de notas, borrando el cdigo basura:

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

TUTORIAL DE BLOGGER (Nacho Segovia)

49

Se nos abre la pgina del JWPLAYER:

Seleccionamos la opcin MP3 con imagen + Barra de control debajo. En Configuracin bsica pegaremos las URL que estn pegadas en el Bloc de notas. La URL del Jwplayer en la casilla URL player swf , en la casilla URL archivo la de nuestro mp3. Para la imagen pinchamos en Configuracin avanzada y debajo se abre OPCIONES DE ARCHIVO. En El campo imagen pegamos la URL de nuestra Imagen.

Bajamos abajo del todo y le damos a Recargar Reproductor

TUTORIAL DE BLOGGER (Nacho Segovia)

50

Nos habr quedado as:

Copiamos el CDIGO EMBED Nos vamos a nuestro blog, creamos una entrada, le damos ttulo, pinchamos en HTML Y dentro pegamos el cdigo embed que acabamos de copiar:

Podemos modificar el tamao del visor en los valores width y height.

TUTORIAL DE BLOGGER (Nacho Segovia)

51

Nuestro audio quedar parecido a esto:

TUTORIAL DE BLOGGER (Nacho Segovia)

52

b) Subir el archivo de audio a servicios Web 2.0 como GoEar o SoundCloud que proporcionan el cdigo embed para insertar un reproductor con audio en tu blog.
Entramos en: http://www.goear.com/ Una vez ya en la pgina, escribimos en el cuadro de bsqueda el artista y el ttulo de la cancin que queremos. Seguidamente hacemos click con el botn izquierdo del ratn sobre "Buscar" Se nos abre otra ventana con los resultados encontrados.

Hacemos click botn izquierdo del ratn sobre la cancin que deseemos... Se nos abre otra ventana. En ella tenemos que pinchar en Compartir:

Se abre otra ventana. Copiamos el cdigo que hay debajo de "Pon esta cancin en tu web o blog"

TUTORIAL DE BLOGGER (Nacho Segovia)

53

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

TUTORIAL DE BLOGGER (Nacho Segovia)

54

14.5. Agregar RSS al tu blog Es una forma de dar a conocer tus artculos en tu blog (RSS: Really Simple Syndication). Adems de eso, es muy cmodo suscribirse y cuando se publique una nueva entrada tu cliente RSS te alertara, eso evita tener que estar visitando a menudo el sitio para ver si hay o no algo nuevo en el Pasos: vamos a Diseo, click al botn "Aadir un gadget" y en la ventana que nos sale buscamos y elegimos el gadget Feed. Se abre la ventana para "Configurar feed"

Dejando momentneamente esta ventana, nos vamos a la pgina http://feedburner.google.com donde nos logearemos con nuestra cuenta gmail y creamos un feed escribiendo la direccin 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 botn "Next" donde feedburner nos dir que ya el feed fue verificado .

TUTORIAL DE BLOGGER (Nacho Segovia)

55

Antes de dar en "Next" para terminar debemos copiar la direccin de nuestro feed:

Un a vez copiada nos volvemos a la ventana de configuracin del RSS en Blogger donde la pegamos y damos click al botn Continuar.

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

TUTORIAL DE BLOGGER (Nacho Segovia)

56

14.6. Agregar gadget de suscripcion al blog. Permite que tus lectores que se suscriban fcilmente a tu blog mediante los lectores de feed conocidos. Pasos: - Vamos a Diseo: Aadir un Gadget, y elegimos Enlaces de suscripcin Pinchamos en el , le damos un ttulo y Guardar

Y ya veramos en nuestro blog la suscripcin va RSS:

14.7. Agregar botn volver al inicio (a la parte de arriba de nuestra pgina) : 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 ningn problema. Tambin tenemos que pensar en el tamao. Tiene que ser de dimensiones reducidas, para que no se solape con ninguna imagen ni gadget de la barra lateral. Una vez tengamos claro qu icono vamos a utilizar, debe-mos subirlo a Google Sites, por ejemplo. All pinchamos con derecho en Descargar y Copiar direccin de enlace En Diseo inserta un gadget HTML y pega este cdigo HTML :<a href='#' style='display croll;position:fixed;bottom:0px;right:0px;' title='ARRIBA'><img src="Pega aqu la URL de tu imagen" /></a> Pega donde pone "Pega aqu la URL de tu imagen" la URL de tu imagen y Guarda.

TUTORIAL DE BLOGGER (Nacho Segovia)

57

14.8. Agregar Leer ms en medio de una entrada. Vamos a Diseo, en el cuerpo del blog, de la entrada, pinchamos en Editar: Aparece una ventana nueva y donde pone Texto del enlace de la pgina de entrada escribimos LEER MS: Bajamos abajo y damos en Guardar. IMPORTANTE, ahora pinchar en Guardar Disposicin.

A continuacin hacemos una entrada y donde queramos partir la entrada, por la razn que sea pinchamos en el icono Insertar salto de lnea:

Y seguimos escribiendo debajo. Al lector le aparecer en ese salto de lnea el Leer ms que antes introdujimos. Damos en Guardar, Publicar y Ver blog . Quedara as :

TUTORIAL DE BLOGGER (Nacho Segovia)

58

14.9.Cmo poner un men horizontal desplegable html en Blogger Si utilizas plantillas pre diseadas o dinmicas, es muy probable esto NO te funcione. Si quieres aplicarlo, ves al men > plantilla > y cambia tu plantilla actual a sencilla. Paso 1: Nos vamos a Ms Opciones: Diseo y eliminamos el Gadget de Pginas, con Editar

y Eliminar: Aceptar

Click en Guardar disposicin: En realidad no hemos eliminados las pginas siguen estando. Lo podemos comprobar pinchando en Pginas:

TUTORIAL DE BLOGGER (Nacho Segovia)

59

Volemos a Diseo para aadir 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 cdigo en el blog. El cdigo a buscar es: <div class='region-inner header-inner'> . Para ello ponemos el cursor dentro del cdigo existente y pulsamos Control+F. Aparece un cuadro de busqueda, donde pegamos el cdigo a buscar:

TUTORIAL DE BLOGGER (Nacho Segovia)

60

Y damos a Enter. Aparecer coloreado:

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

Tiene que quedar as:

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

TUTORIAL DE BLOGGER (Nacho Segovia)

61

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

LO QUE EST EN NEGRITA ES LO QUE TIENES QUE PONER. Y SERN EL NOMBRE DE CADA PESTAA

TUTORIAL DE BLOGGER (Nacho Segovia)

62

Donde estn las almohadillas tenemos que meter las URL de cada pgina, sustituyndolas pero sin borrar nada ms, ni una coma. Veamos: <a href='#'>MI PRIMER BLOG</a> </li> <li> <a href='#'>TIC</a> </li> <li> <a href='#'>TUTORIALES </a> <ul> <li><a href='#'>Categoria 1.1</a></li> Al pinchar en la primera pestaa aparece su URL; la copiamos y la pegamos en donde esta la almohadilla (este proceso con cada pestaa y su URL) quedando por tanto el cdigo as : <li> <a href='http://mitutorialblog.blogspot.com.es/'>MI PRIMER BLOG</a> </li> <li> <a href='http://mitutorialblog.blogspot.com.es/p/blog-page.html'>TIC</a> </li> <li> <a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a> <ul> <li><a

TUTORIAL DE BLOGGER (Nacho Segovia)

63

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

entrada que tengamos en la pestaa TUTORIALES. Cambio el nombre DESPLEGABLE1 por Blog (que es una de mis etiquetas). Cambio DESPLEGABLE2 por PDI , que es otra etiqueta. Quedara as:

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

TUTORIAL DE BLOGGER (Nacho Segovia)

64

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

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

Y pegamos esa URL en lugar de la almohadilla que va justo antes de Blog:

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


Quedara as: (hay que borrar la # ) <a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a> <ul> <li><a href='http://mitutorialblog.blogspot.com.es/search/label/blogs'>Blog</a></li> <li><a href='#'>PDI</a></li> </ul>

TUTORIAL DE BLOGGER (Nacho Segovia)

65

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

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

TUTORIAL DE BLOGGER (Nacho Segovia)

66

El cdigo quedara as : <div id='mbwnavbar'> <ul id='mbwnav'> <li> <a href='http://mitutorialblog.blogspot.com.es/'>MI PRIMER BLOG</a> </li> <li> <a href='http://mitutorialblog.blogspot.com.es/p/blog-page.html'>TIC</a> </li> <a href='http://mitutorialblog.blogspot.com.es/'>TUTORIALES</a> <ul> <li><a href='http://mitutorialblog.blogspot.com.es/search/label/blogs'>Blog</a></li> <li><a href='http://mitutorialblog.blogspot.com.es/search/label/PDI'>PDI</a></li> </ul> </li> <li> <a href='#'>OTRA PESTAA</a> Este cdigo solo tienes que ponerlo si quieres poner <ul> <li><a href='#'>OTRO DESPLEGABLE1</a></li> otra pestaa ms, con dos desplegables. Si quieres <li><a href='#'>OTRO DESPLEGABLE2</a></li> aadir ms pestaas copia el cdigo de una de arriba, </ul> cambia el nombre y su URL; e igual si le quieres poner </li> desplegables </ul> </div>

Copiamos el cdigo y volvemos a Blogger. A Diseo:

TUTORIAL DE BLOGGER (Nacho Segovia)

67

Volvemos a Blogger, Diseo y la pegamos en el gadget que hemos creado:


Pinchamos en Aadir un gadget, e insertamos uno de HTML.

Pegamos el cdigo en contenido y no le ponemos ttulo. Pinchamos en Guardar

TUTORIAL DE BLOGGER (Nacho Segovia)

68

La barra ha quedado encima de la cabecera, simplemente pinchamos en ella y la arrastramos situndola debajo de la cabecera:

As:

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

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

TUTORIAL DE BLOGGER (Nacho Segovia)

69

Encima de ]]></b:skin> dejamos espacio y pegamos el siguiente cdigo:

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

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

71

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

Ya est pegado:

Le damos a Guardar plantilla

Y vemos el blog:

A vosotros os saldr una pestaa ms llamada Categora 2. Yo la eliminado borrando el cdigo:

TUTORIAL DE BLOGGER (Nacho Segovia)

73

Si queris cambiar los colores de las pestaas o de los desplegables lo tenis que hacer en el cdigo que introdujisteis en los valores alfanumricos que aparezcan despus de la almohadilla: En la pgina www.colorhexa.com metemos esos nmeros y nos dice a que color corresponde, y nos permite buscar otros colores:

Si el ancho de la barra no es el que mejor se adeca, al principio del cdigo, en width , est puesto 850px simplemente aumentamos o disminuimos esta cifra hasta que nos quede exacta.

TUTORIAL DE BLOGGER (Nacho Segovia)

74

14.10.Cmo insertar tablas en Blogger. El cdigo bsico para insertar una tabla es el siguiente: <table border="1" cellpadding="4"><tbody> <tr><td>Agua</td> <td>Sal</td> <td>Leche</td></tr> <tr><td>Tarde</td> <td>Noche</td> <td>Da</td></tr> <tr><td>Madrid</td> <td>Pars</td> <td>Roma</td></tr> </tbody></table> El resultado es este:

Agua Sal Leche Tarde Noche Da Madrid Pars Roma

TUTORIAL DE BLOGGER (Nacho Segovia)

75

Si deseas insertar una fila ms, agrega esta parte antes de </tbody></table> <tr><td>Palabra 1</td> <td>Palabra 2</td> <td>Palabra 3</td></tr> Del mismo modo si quisieras que cada fila tuviera ms celdas entonces agrega las que quieras aadiendo las palabras entre las etiquetas <td> </td> antes de cada </tr> Si quieres modificar el borde de la tabla cambia el nmero que hay detrs de cambiaborder="1" . Si lo quieres ms grueso por un nmero ms alto, si lo dejas en "0" se quedar sin borde. <table border="5" cellpadding="4"> <tbody><tr><td>Tabla con borde "5"</td></tr> </tbody></table> Para cambiar el color del borde de la tabla aadimos despus de <table el atributo bordercolor="green" el color lo puedes cambiar, por ejemplo "red" <table border="2" bordercolor="green" cellpadding="4"> <tbody><tr><td>Tabla con borde verde</td></tr> </tbody></table>

Este sera el resultado:

TUTORIAL DE BLOGGER (Nacho Segovia)

76

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

En el campo Nombre del sitio web ponemos el nombre de nuestro blog y debajo en URL del sitio web ponemos la URL de nuestro blog, borrando la http que ya est puesta a la izquierda. Ahora tenemos que decirle que tipo de blog tenemos en Categora del sector, yo he elegido Informtica. Bajo ms abajo y elijo la zona horaria (Espaa, Madrid) :

Le damos a Obtener ID de seguimiento

Aceptar los trminos

TUTORIAL DE BLOGGER (Nacho Segovia)

77

Y nos aparece una ventana con un cdigo HTML. Lo copiamos :

Volvemos al blog, Ms opciones, DISEO. Aadimos un gadget de HTML, donde pegamos el cdigo :

Le damos a Guardar y ya tenemos nuestro gadget:

TUTORIAL DE BLOGGER (Nacho Segovia)

78

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

Damos en Guardar disposicin y nos vamos a Configuracin: Otros y bajamos hasta Google Analytics:

Aqu tenemos que poner la ID de nuestro Analytics. Volvemos a Google Analytics y la ID es esta:
La copiamos y la pegamos donde antes nos la Peda.

Le damos a Guardar configuracin.

TUTORIAL DE BLOGGER (Nacho Segovia)

79

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

Y desde Todos los datos de sitios web podemos entrar en nuestra cuenta: Si pinchamos en Tiempo real, Descripcin general podemos ver el trfico en el blog. Como acabamos de crearlo est a cero. Si volvis al blog y hacis una visita veris movimiento.

TUTORIAL DE BLOGGER (Nacho Segovia)

80

14.12.Cmo insertar un contador de visitas. 1. Ir a la pgina principal: http://contador-de-visitas.com 2. Elegir el estilo del contador en el desplegable. Introducir el nmero de visitas inicial del contador. 3. Introducir la direccin del blog y OK.

Aparecer una pgina con un botn que pone agregar a blogger. Al hacer click en este botn vamos a Blogger, donde podemos cambiar el ttulo del bloque que contendr el contador de visitas.

Le damos a aadir artilugio y ya est. Luego podemos cambiar la posicin de nuestro contador a donde queramos.

TUTORIAL DE BLOGGER (Nacho Segovia)

81

14.12.Cmo insertar un Voki. Entramos en www.voki.com y nos registramos . Pinchamos en Create a new voki Luego en Customize your character y pinchamos en el voki que nos guste: Podemos cambiarle el color de los ijos, labios, ropa, etc . Una vez hecho esto pinchamos en Done : Y ahora en Text to speech: masculina o femenina) Escribes lo que quieres que diga tu Voki (elige el idioma y voz y pincha en Done.

Ahora en Publish: Escribe un ttulo y pincha en en Save: La siguiente ventana te informa de que Todo ha ido bien y das en Close Te aparece un cdigo embed, pinchas en Copy Y ya solo queda volver al blog, aadir un gadget HTML y pegar este cdigo .

TUTORIAL DE BLOGGER (Nacho Segovia)

82

14.13.Cmo poner un chat en tu blog. Hay diferentes sitios que te proporcionan un chat gratuito para tu blog. Yo he elegido CBOX. Entramos en: http://www.cbox.ws/ , nos registramos : Nos llegar un mensaje de activacin a nuestro correo; pinchamos en el link y en la siguiente pgina introducimos la URL de nuestro blog. Nos aparece una nueva ventana con el cdigo ya para pegar en nuestro blog. Copiamos el cdigo en un gadget de nuetro blog y listo.

TUTORIAL DE BLOGGER (Nacho Segovia)

83

14.13.Cmo poner los iconos de las redes sociales. Buscamos en imgenes d google los iconos que queremos. Los descargamos y los subimos a Google Sites. Entramos en DISEO de nuestro blog y aadimos un gadget de HTML. Aqu pegamos el siguiente cdigo:
<a href='URL PAGINA FACEBOOK' target='_blank'><img src='URL IMAGEN ICONO FACEBOOK' width= 35px' title='FACEBOOK' /></a> Donde pone URL PAGINA FACEBOOK tenis que poner la URL de la pgina a la que queris que vaya al hacer clic en el icono (en este caso de la Facebook), y donde pone URL IMAGEN ICONO FACEBOOK tenis que poner la URL de la imagen del icono que queris poner. Esta URL la obtenis yendo a Google Sites (donde habis subido el icono de facebook) pinchando con botn derecho en descargar y Copiar direccin de enlace (esa es la URL del icono). En width indicamos el tamao de la imagen, en este caso 35 pixeles. Lo podis cambiar para que sean ms grandes o pequeos a vuestro gusto. Y a continuacin est el ttulo (FACEBOOK), que no es necesario ponerlo, pero cuando pongamos varios cdigos, as sabremos cul es cul fcilmente. Una vez puestas las URL en el cdigo, damos a Guardar y tenemos el icono de Facebook enlazado a nuestra pgina de Facebook. Si queremos poner de ms redes sociales iramos insertando el mismo cdigo con las URL correspondientes

TUTORIAL DE BLOGGER (Nacho Segovia)

84

15. Glosario de trminos habituales creando un blog. Contenido: la informacin que publicas en tu blog. Texto, pginas web (html), imgenes, fotos, videos Servidor: donde se publica el contenido del blog y permite que este accesible por todo el mundo. Tambin se llaman hosts. URL: se refiere al texto que identifica a una pgina web. Normalmente empieza por "http:/...". Enlace, vnculo, hipervnculo: normalmente aparecen en azul y si se les pincha le llevan al usuario a otra pgina. Post: se refiere a la publicacin de un artculo o entrada nueva en un blog Template: es la platilla o diseo grfico ms otros atributos (enlaces y otros recursos en las barras laterales). RSS /Atom. Mtodos de sindicacin de contenidos que permiten la informar a los interesados de su actualizacin o nuevos contenidos. Adsense: Programa de monetizacin de Google Inc para propietarios de blog o webs. Blogroll: Es una lista de enlaces que un blogger recomienda Banner: Anuncio publicitario que se inserta en una pgina web. Google Plus: Red social de Google . Podcast: Transmisin de contenido multimedia en un blog. Sidebar: Barra lateral, izquierda o derecha, de un blog. Widget: Cdigo que aade una funcionalidad automticamente sin necesidad de escribir el cdigo. El termino en Blogger es Gadget .
TUTORIAL DE BLOGGER (Nacho Segovia) 85

You might also like