Promoción verano: 6 meses de acceso a todos los cursos online de programación con el 50% de descuento
offer

tutorial de blogger
  • Incluye:
  • 5 capítulos y 4 vídeos
  • Nivel principiante
  •  

Sobre el tutorial

Este tutorial va orientado a personas como tú, que tienes conocimientos básicos de informática, y que últimamente te ronda por la cabeza eso de "tener un blog".
Seguramente estarás pensando: "Por qué no crear un blog? Me gustaría probarlo...pero cómo lo hago? Por dónde empiezo? ".
Así pues he creado este tutorial con videotutoriales, muy sencillitos, que cubren los pasos mínimos para crear un blog en la plataforma de Blogger de Google.
En detalle explicaré los pasos para poner en marcha un blog y cómo configurar algunas de sus funcionalidades.
Por supuesto recordarte que esta herramienta de Google es gratuita, con lo que no conlleva ningún coste de mantenimiento de ningún tipo.
No hace falta invertir más que tú tiempo para poder empezar. Cualquiera puede hacerlo! Comparte con el mundo lo que mejor sabes hacer.

Indice

Capítulo 1: Crear el blog

Tutorial Cómo crear un blog con Blogger

Este tutorial va orientado a personas como tú, que tienes conocimientos básicos de informática, y que últimamente te ronda por la cabeza eso de "tener un blog".  

Seguramente estarás pensando: "Por qué no crear un blog? Me gustaría probarlo...pero cómo lo hago? Por dónde empiezo? ".

Así pues he creado este tutorial con una serie de videotutoriales, muy sencillitos, que cubren los pasos mínimos para crear un blog en la plataforma de Blogger de Google.

 


En detalle vamos a explicar algunos pasos para poner en marcha un blog en la plataforma Blogger de Google y vamos a configurar algunas de sus funcionalidades.Por supuesto recordarte que esta herramienta de Google es gratuita, con lo que no conlleva ningún coste de mantenimiento. No hace falta invertir más que tú tiempo para poder empezar.Así pues, empezamos!

 

 Primero crearemos la cuenta de Google Plus que enlazaremos con nuestro Blog.

A continuación crearemos el blog escogiendo una dirección URL (que no esté ocupada obviamente). Habrá que tener presente que la dirección contendrá el dominio tunombre.blogspot.com, ya que estos blogs se encuentran alojados en los servidores de Google. De todos modos, si te interesara sería posible contratar un dominio y redireccionarlo a tu blog tunombre.blogspot.com

Luego seleccionaremos una plantilla, de las muchas que dispone Blogger y crearemos el blog. Como veréis más adelante tendréis la posibilidad de aplicar otra plantilla externa a vuestro blog, ya que las que ofrecen por defecto son muy básicas.

Accederemos al panel de control y repasaremos las opciones de menú que nos ofrece la herramienta de Blogger:

 

 

 

 

 

 

 

 

 

 

 

 

 
Crearemos una nueva entrada y visualizaremos nuestro blog tal como lo verán los demás usuarios.
 
A continuación puedes ver el vídeo tutorial. 
 

Capítulo 2: Crear menús y pestañas

Tutorial como añadir un menú lateral o unas pestañas en Blogger En este capítulo vamos a explicaros como añadir un menú lateral o unas pestañas en vuestro blog.

Introducimos la dirección blogger.com en nuestro navegador y accederemos a nuestro blog de ejemplo, XRL Tutoriales.

Antes que nada seleccionaremos una plantilla sencilla para que podamos ver más fácilmente como añadir páginas al blog.xxxx



En el menú izquierdo pincharemos en la opción Páginas. Una vez dentro pincharemos en el botón superior Página nueva

Rellenaremos el título de la página y el detalle en el cuadro de texto inferior.

Una vez lo tengamos listo pincharemos en el botón Guardar.
Nos iremos a la opción Diseño del menú lateral y una vez dentro pincharemos en una área que ponga "Añadir gadget".

Por defecto la plantilla estándard que hemos configurado antes, ya nos añadirá el gadget "Páginas". De todos modos hemos os mostramos como añadirlo de nuevo en caso de que tengamos otra plantilla o lo hayamos eliminado.

Buscaremos un gadget que se llame "Páginas" y lo seleccionaremos. A continuación nos pedirá que especifiquemos un título (opcional), las páginas a mostrar mediante unos checkbox y un orden. 

También nos detallará como disponer una disposición vertical u horizontal
Eso se podrá hacer arrastrando el gadget debajo de la cabecera o en una barra lateral.

Para poder añadir la página que hemos creado tendremos que publicarla.
Así pues nos iremos a la opción de Páginas y la publicaremos pinchando en el botón Publicar.

Volveremos a la opción Diseño, pincharemos en el gadget Páginas y veremos que nos aparecerá la nueva página, la seleccionaremos, y la ordenaremos si lo creemos conveniente.

Pincharemos en el botón Guardar, y luego en Guardar disposición.
Ahora visualizaremos como ha quedado nuestro blog de ejemplo.
Veremos que tenemos las dos páginas en la parte superior, como si fuera un menú.

Para disponer el menú lateralmente, tendremos que volver a la parte de diseño y arrastrar el gadget Páginas a un espacio libre en el lateral.
Sólo quedará pendiente Guardar disposición y recargar nuestro blog para ver los resultados.

Podremos añadir las páginas que queramos y ordenarlas según nuestro criterio.

Para más detalles a continuación el videotutorial. 

  

Capítulo 3: Aplicar plantillas al blog


Tutorial como aplicar plantillas a un blog con Blogger Las plantillas son el aspecto gráfico de nuestro blog. Es importante crear un buen contenido, pero al mismo tiempo es muy importante "vestir" ese contenido con un cierto diseño para hacerlo más atractivo a nuestros lectores.

Esta opción se encuentra en el menú lateral en el apartado "Plantilla".
Allí aparecen varias plantillas predefinidas: sencillo, vistas dinámicas, picture windows, fantástico, filigrana, etéreo y viajes.
Podremos ir cambiando de unas a otras y ver cómo queda nuestro blog.

 

 
 


También podremos descargar plantillas gratis de varias webs para aplicarlas a nuestro blog, por ejemplo: btemplates.com

 
Si tenemos conocimientos avanzados de HTML y CSS podremos crear nosotros mismos estas plantillas, aunque requerirá tener unos conocimientos de diseño gráfico y de programación bastante importantes para que consigamos algo con un toque profesional. 

Para empezar desde una plantilla en blanco podemos copiar el siguiente código HTML. Es perfecta para realizar una landing page o para diseñar una plantilla desde cero:


Nota: para que en los dispositivos móviles nos aparezca esta misma plantilla en blanco, hay que ir a la opción de menú "Plantilla", pinchar la  
ruedita de configuracion de plantillas

debajo de "Móvil" y en el desplegable seleccionar "Personalizado".


blogger elegir plantilla para moviles

 
 
Para diseñar la plantilla, Blogger nos permite editar el HTML de las plantillas directamente, pinchando en el botón "Editar HTML" al lado de "Personalizar".


Para subir un fichero xml de una plantilla descargada se tendrá que acceder a la opción de Plantilla y crear/restablecer copia de seguridad, allí podremos descargar la plantilla actual o bien seleccionar un fichero para subirlo y aplicarlo al blog.

Para más detalles, os dejamos a continuación el videotutorial:

 

Capítulo 4: Crear menús de categorías

Una opción muy interesante para añadir a nuestro blog es que al pinchar sobre algunas opciones del menú nos muestre los posts que tienen asignados las etiquetas de esa opción de menú.

Es decir, imaginemos que creo varios artículos y les asigno la etiqueta "tutorial" y posteriormente creo una opción de menú que llamo "Tutorial".
Para hacer que al pinchar en la opción de menú "Tutorial" nos muestre los artículos etiquetados con "tutorial" tendremos que crear un enlace externo desde el gadget "Páginas" pinchando en "Añadir enlace externo".


blogger configurar lista de paginas

 

Allí pondremos en la URL "/search/label/tutorial" donde tutorial es el nombre que le hemos dado a la etiqueta. En el título podemos escribir el nombre de la opción de menú que más nos interese.

blogger pagina nueva direccion web


Si grabamos el enlace y guardamos el gadget "páginas" cuando lo probemos veremos que:

Nos saldrá un mensaje "mostrando las entradas con la etiqueta tutorial".
A continuación veremos que nos aparecerá una lista de los artículos que contienen esa etiqueta.

 

 

 

 

Si queremos que no aparezca el mensaje anterior tendremos que ir a "Plantilla" -- "Editar HTML" y comentar lo siguiente que se encuentra delante del include con el name='status-message':


De esa manera evitamos que salgan los mensajes.

 

 

 


Podéis añadir los enlaces que queráis para organizar vuestros artículos en el blog.
Recordad que hay que tener etiquetadas todas las entradas/artículos para que funcione correctamente.

Capítulo 5: Eliminar el pie de página Blogger

En este capítulo vamos a enseñaros un pequeño truco para "esconder" el texto "Powered by Blogger / Con la tecnología de Blogger" del pie de página que se muestra en los blogs creados con Blogger.


Primero. Tenemos que acceder a nuestro blog accediendo a la página de administración habitual http://www.blogger.com, y pinchamos en la opción de menú que se llama Plantilla


menu blogger


















Una vez allí pinchar en el botón Personalizar.

personalizar plantillas blogger



 

 

 

 

 

Segundo. Una vez dentro se nos abrirá el diseñador de plantillas de Blogger. Pinchamos en la opción de menú que se llama Avanzado.

diseñador de plantillas de blogger


En el submenú que se abrirá a la derecha bajamos con la barra de scroll hacia abajo hasta encontrar Añadir CSS. Pinchamos en esa opción.

añadir css avanzado blogger


Tercero. Una vez nos muestre la ventana de texto blanca, debajo de Añadir CSS personalizado tenemos que escribir #Attribution1{display:none;}


Cuarto. Aplicamos los cambios al blog pinchando en el botón Aplicar al blog y luego pinchamos en la opción superior Volver a Blogger.

añadir codigo css plantilla blogger



Quinto. Accedemos a nuestra dirección (URL) del blog en el navegador y verificamos que el pie de página de atribución ya no se muestra.

Consejo: Si queremos añadir una atribución podemos añadir un gadget de tipo "texto" al pie de página con el mensaje que queramos.