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

Más contenido relacionado

La actualidad más candente (9)

Tutorial de Blogger
Tutorial de Blogger Tutorial de Blogger
Tutorial de Blogger
 
Como crear-un-blog
Como crear-un-blogComo crear-un-blog
Como crear-un-blog
 
Tutorial creacion blog
Tutorial creacion blogTutorial creacion blog
Tutorial creacion blog
 
Blogger
BloggerBlogger
Blogger
 
Manual de-blogger
Manual de-bloggerManual de-blogger
Manual de-blogger
 
Crear_blog_blogger-Alejandro Valero
Crear_blog_blogger-Alejandro ValeroCrear_blog_blogger-Alejandro Valero
Crear_blog_blogger-Alejandro Valero
 
Trabajo practico nº2
Trabajo practico nº2Trabajo practico nº2
Trabajo practico nº2
 
Manual De Blogger
Manual De BloggerManual De Blogger
Manual De Blogger
 
Guia para crear bloggers
Guia para crear bloggersGuia para crear bloggers
Guia para crear bloggers
 

Destacado

Potencia tu blog con blogger (Curso blogger avanzado)
Potencia tu blog con blogger (Curso blogger avanzado)Potencia tu blog con blogger (Curso blogger avanzado)
Potencia tu blog con blogger (Curso blogger avanzado)Fundació Bit
 
Belgium complete reg
Belgium   complete regBelgium   complete reg
Belgium complete regstevencc
 
C:\Users\Usuario\Desktop\Disco Duro D \Puce Ibarra\Presentacion Pucesi 001
C:\Users\Usuario\Desktop\Disco Duro  D \Puce Ibarra\Presentacion Pucesi 001C:\Users\Usuario\Desktop\Disco Duro  D \Puce Ibarra\Presentacion Pucesi 001
C:\Users\Usuario\Desktop\Disco Duro D \Puce Ibarra\Presentacion Pucesi 001ESPOCH
 
Hacia un pensamiento complejo capaz de relacionar
Hacia un pensamiento complejo capaz de relacionarHacia un pensamiento complejo capaz de relacionar
Hacia un pensamiento complejo capaz de relacionarmonicaeq
 
Nordrhein Westfalen
Nordrhein WestfalenNordrhein Westfalen
Nordrhein WestfalenYPEPTH
 
C:\Documents And Settings\гость\рабочий стол\Presentation
C:\Documents And Settings\гость\рабочий стол\PresentationC:\Documents And Settings\гость\рабочий стол\Presentation
C:\Documents And Settings\гость\рабочий стол\Presentationshaidurova
 
Renovation studio par Instant T
Renovation studio par Instant TRenovation studio par Instant T
Renovation studio par Instant Tle75020
 
Webschool - Les tendences e-commerce en 2015
Webschool - Les tendences e-commerce en 2015Webschool - Les tendences e-commerce en 2015
Webschool - Les tendences e-commerce en 2015mariejura
 
Alfabeto emocional
Alfabeto emocionalAlfabeto emocional
Alfabeto emocionalLeila Cura
 

Destacado (20)

Potencia tu blog con blogger (Curso blogger avanzado)
Potencia tu blog con blogger (Curso blogger avanzado)Potencia tu blog con blogger (Curso blogger avanzado)
Potencia tu blog con blogger (Curso blogger avanzado)
 
Creación de un blog
Creación de un blogCreación de un blog
Creación de un blog
 
Generos literarios
Generos literariosGeneros literarios
Generos literarios
 
Afilicacion
AfilicacionAfilicacion
Afilicacion
 
Belgium complete reg
Belgium   complete regBelgium   complete reg
Belgium complete reg
 
C:\Users\Usuario\Desktop\Disco Duro D \Puce Ibarra\Presentacion Pucesi 001
C:\Users\Usuario\Desktop\Disco Duro  D \Puce Ibarra\Presentacion Pucesi 001C:\Users\Usuario\Desktop\Disco Duro  D \Puce Ibarra\Presentacion Pucesi 001
C:\Users\Usuario\Desktop\Disco Duro D \Puce Ibarra\Presentacion Pucesi 001
 
Hacia un pensamiento complejo capaz de relacionar
Hacia un pensamiento complejo capaz de relacionarHacia un pensamiento complejo capaz de relacionar
Hacia un pensamiento complejo capaz de relacionar
 
Nordrhein Westfalen
Nordrhein WestfalenNordrhein Westfalen
Nordrhein Westfalen
 
Le Vésuve par Maria Naclerio.
Le Vésuve par Maria Naclerio.Le Vésuve par Maria Naclerio.
Le Vésuve par Maria Naclerio.
 
Sapiensales no3
Sapiensales  no3Sapiensales  no3
Sapiensales no3
 
C:\Documents And Settings\гость\рабочий стол\Presentation
C:\Documents And Settings\гость\рабочий стол\PresentationC:\Documents And Settings\гость\рабочий стол\Presentation
C:\Documents And Settings\гость\рабочий стол\Presentation
 
Renovation studio par Instant T
Renovation studio par Instant TRenovation studio par Instant T
Renovation studio par Instant T
 
En un mercado_persa
En un mercado_persaEn un mercado_persa
En un mercado_persa
 
Hi sight2
Hi sight2Hi sight2
Hi sight2
 
Kennenlerntag
KennenlerntagKennenlerntag
Kennenlerntag
 
Rúbricas(4)
Rúbricas(4)Rúbricas(4)
Rúbricas(4)
 
Webschool - Les tendences e-commerce en 2015
Webschool - Les tendences e-commerce en 2015Webschool - Les tendences e-commerce en 2015
Webschool - Les tendences e-commerce en 2015
 
Le Diagnostic Mobile
Le Diagnostic MobileLe Diagnostic Mobile
Le Diagnostic Mobile
 
Sap
SapSap
Sap
 
Alfabeto emocional
Alfabeto emocionalAlfabeto emocional
Alfabeto emocional
 

Similar a Tutorial blog avanzado (20)

Prac web 2.0 crear blog blogger
Prac web 2.0  crear blog bloggerPrac web 2.0  crear blog blogger
Prac web 2.0 crear blog blogger
 
Tutorial blogger
Tutorial bloggerTutorial blogger
Tutorial blogger
 
Actividad 13
Actividad 13Actividad 13
Actividad 13
 
Manual blogger
Manual bloggerManual blogger
Manual blogger
 
Tutorial blogger
Tutorial bloggerTutorial blogger
Tutorial blogger
 
Tutorial blogger
Tutorial bloggerTutorial blogger
Tutorial blogger
 
Tutorial blogger
Tutorial bloggerTutorial blogger
Tutorial blogger
 
¿CÓMO CREAR UN BLOG EN BLOGGER?
¿CÓMO CREAR UN BLOG EN BLOGGER?¿CÓMO CREAR UN BLOG EN BLOGGER?
¿CÓMO CREAR UN BLOG EN BLOGGER?
 
Blog blogger
Blog bloggerBlog blogger
Blog blogger
 
Tutorial: Crear un blog en blogger
Tutorial: Crear un blog en bloggerTutorial: Crear un blog en blogger
Tutorial: Crear un blog en blogger
 
Blog blogger
Blog bloggerBlog blogger
Blog blogger
 
Blog blogger
Blog bloggerBlog blogger
Blog blogger
 
Como crear un blog en blogger
Como crear un blog en bloggerComo crear un blog en blogger
Como crear un blog en blogger
 
Blog blogger
Blog bloggerBlog blogger
Blog blogger
 
blogger
bloggerblogger
blogger
 
Blog blogger
Blog bloggerBlog blogger
Blog blogger
 
Blog blogger
Blog bloggerBlog blogger
Blog blogger
 
Como crear un blog en blogger.com
Como crear un blog en blogger.comComo crear un blog en blogger.com
Como crear un blog en blogger.com
 
Tutorial de un blog
Tutorial de un blogTutorial de un blog
Tutorial de un blog
 
Sesion crear blog
Sesion crear blogSesion crear blog
Sesion crear blog
 

Último

Lecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadLecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadAlejandrino Halire Ccahuana
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoFundación YOD YOD
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxlclcarmen
 
Día de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialDía de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialpatriciaines1993
 
RETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxRETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxAna Fernandez
 
Estrategia de Enseñanza y Aprendizaje.pdf
Estrategia de Enseñanza y Aprendizaje.pdfEstrategia de Enseñanza y Aprendizaje.pdf
Estrategia de Enseñanza y Aprendizaje.pdfromanmillans
 
Plan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPEPlan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPELaura Chacón
 
Marketing y servicios 2ºBTP Cocina DGETP
Marketing y servicios 2ºBTP Cocina DGETPMarketing y servicios 2ºBTP Cocina DGETP
Marketing y servicios 2ºBTP Cocina DGETPANEP - DETP
 
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...JAVIER SOLIS NOYOLA
 
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxPPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxOscarEduardoSanchezC
 
BROCHURE EXCEL 2024 FII.pdfwrfertetwetewtewtwtwtwtwtwtwtewtewtewtwtwtwtwe
BROCHURE EXCEL 2024 FII.pdfwrfertetwetewtewtwtwtwtwtwtwtewtewtewtwtwtwtweBROCHURE EXCEL 2024 FII.pdfwrfertetwetewtewtwtwtwtwtwtwtewtewtewtwtwtwtwe
BROCHURE EXCEL 2024 FII.pdfwrfertetwetewtewtwtwtwtwtwtwtewtewtewtwtwtwtwealekzHuri
 
EXPECTATIVAS vs PERSPECTIVA en la vida.
EXPECTATIVAS vs PERSPECTIVA  en la vida.EXPECTATIVAS vs PERSPECTIVA  en la vida.
EXPECTATIVAS vs PERSPECTIVA en la vida.DaluiMonasterio
 
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxPresentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxYeseniaRivera50
 
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARONARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFAROJosé Luis Palma
 
codigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karinacodigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karinavergarakarina022
 
La Función tecnológica del tutor.pptx
La  Función  tecnológica  del tutor.pptxLa  Función  tecnológica  del tutor.pptx
La Función tecnológica del tutor.pptxJunkotantik
 

Último (20)

Power Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptxPower Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptx
 
Defendamos la verdad. La defensa es importante.
Defendamos la verdad. La defensa es importante.Defendamos la verdad. La defensa es importante.
Defendamos la verdad. La defensa es importante.
 
Lecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadLecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdad
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativo
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
 
Día de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialDía de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundial
 
RETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxRETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docx
 
Estrategia de Enseñanza y Aprendizaje.pdf
Estrategia de Enseñanza y Aprendizaje.pdfEstrategia de Enseñanza y Aprendizaje.pdf
Estrategia de Enseñanza y Aprendizaje.pdf
 
Plan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPEPlan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPE
 
Marketing y servicios 2ºBTP Cocina DGETP
Marketing y servicios 2ºBTP Cocina DGETPMarketing y servicios 2ºBTP Cocina DGETP
Marketing y servicios 2ºBTP Cocina DGETP
 
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
 
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxPPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
 
BROCHURE EXCEL 2024 FII.pdfwrfertetwetewtewtwtwtwtwtwtwtewtewtewtwtwtwtwe
BROCHURE EXCEL 2024 FII.pdfwrfertetwetewtewtwtwtwtwtwtwtewtewtewtwtwtwtweBROCHURE EXCEL 2024 FII.pdfwrfertetwetewtewtwtwtwtwtwtwtewtewtewtwtwtwtwe
BROCHURE EXCEL 2024 FII.pdfwrfertetwetewtewtwtwtwtwtwtwtewtewtewtwtwtwtwe
 
EXPECTATIVAS vs PERSPECTIVA en la vida.
EXPECTATIVAS vs PERSPECTIVA  en la vida.EXPECTATIVAS vs PERSPECTIVA  en la vida.
EXPECTATIVAS vs PERSPECTIVA en la vida.
 
Unidad 3 | Teorías de la Comunicación | MCDI
Unidad 3 | Teorías de la Comunicación | MCDIUnidad 3 | Teorías de la Comunicación | MCDI
Unidad 3 | Teorías de la Comunicación | MCDI
 
Repaso Pruebas CRECE PR 2024. Ciencia General
Repaso Pruebas CRECE PR 2024. Ciencia GeneralRepaso Pruebas CRECE PR 2024. Ciencia General
Repaso Pruebas CRECE PR 2024. Ciencia General
 
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxPresentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
 
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARONARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
 
codigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karinacodigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karina
 
La Función tecnológica del tutor.pptx
La  Función  tecnológica  del tutor.pptxLa  Función  tecnológica  del tutor.pptx
La Función tecnológica del tutor.pptx
 

Tutorial blog avanzado

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