Aprender a crear su primera página web con 100 ejercicios prácticos

PARA OTORGAR VERDADERA UTILIDAD a las etiquetas, puede ser muy interesante crear un menú de etiquetas en el blog. Blogger permite presentarlas en forma de menú desplegable o en forma de nube.

IMPORTANTE

Lo interesante de las listas de etiquetas es que el nombre de cada una de ellas representa un vínculo que permite mostrar, con un sólo clic, todas las entradas que la incluyen como referencia.

1 En el Escritorio de Blogger, pulse ahora el botón Ver blog.

2 Al pie de cada entrada se ha añadido la lista de todas sus etiquetas.

3 Ahora lo que haremos será hacer que en la barra lateral de nuestro blog se muestren todas las etiquetas, de forma que permitan a los usuarios navegar a través de las entradas que están vinculadas a ellas. Pulse en la pestaña Diseño para mostrar su ficha.

4 Más adelante trabajaremos a fondo con esta ventana, pero de momento, pulse en el vínculo Añadir un gadget en alguna ubicación que le parezca apropiada para la página.

5 Se abre una nueva ventana en la que puede escoger el gadget que desea añadir. Use la barra de desplazamiento para ubicar la llamada Etiquetas y pulse su botón Mas (+).

6 En la ventana Configurar etiquetas, puede establecer un título distinto, por ejemplo, Temas o De qué hablamos. Puede además escoger si se mostrarán todas las etiquetas o sólo algunas de ellas. Seleccione la opción Etiquetas seleccionadas y pulse el vínculo Editar.

7 Aparece al pie de la ventana un panel en el que puede deseleccionar cualquiera de las entradas creadas. Hágalo ahora si lo cree conveniente

8 Las etiquetas se pueden mostrar por orden alfabético o por frecuencia, en cuyo caso se muestran de primeras las etiquetas más repetidas en el blog. Escoja la opción Por frecuencia.

9 Además, se pueden mostrar como Lista o como Nube. Mantenga la primera opción seleccionada y en breve veremos la diferencia.

10 Mantenga activa la opción Mostrar cantidad de entradas por etiquetas, pulse el botón Guardar y luego pulse Ver blog.

11 Ya puede ver, arriba del Archivo del blog, la lista de etiquetas, que efectivamente están organizadas en orden de frecuencia e indican la cantidad de entradas.

12 Seleccione en el cuadro de opciones de Etiquetas la opción Nube,

13 Vea el blog de nuevo para comprobar el resultado.

IMPORTANTE

Al mostrar todas las entradas que incluyen determinada etiqueta, se muestra en la cabecera del blog un vínculo que indica que solo se muestran las entradas con la etiqueta consultada y permite mostrar todas las entradas.

LA FICHA ESTADÍSTICAS DE BLOGGER MUESTRA de forma muy gráfica y comprensible estadísticas de las visitas que ha recibido su blog y permite escoger el período analizado.

IMPORTANTE

Analice sus estadísticas, identifique el tipo de contenidos que generan más tráfico en su blog y piense estrategias para mejorar los puntos débiles y potenciar los fuertes.

1 Para este ejercicio pulse en la pestaña Estadísticas del Escritorio de Blogger.

2 En esta página se muestran las estadísticas visitas de su blog, que de momento no deben ser muy llamativas, aunque la idea es lograr que poco a poco se eleven.

3 A su derecha se muestra el número de páginas vistas hoy, ayer, en el último mes y desde la creación del blog. Pulse en el vínculo No realizar seguimiento de tus propias visitas a páginas.

4 En el cuadro de diálogo que se abre, debe seleccionar la opción del mismo nombre para que no sean contadas las visitas que realice usted mismo, cosa que no tendría ningún interés. Pulse el botón Guardar.

5 Para que esta opción funcione, tal como se indica, es necesario que el navegador permite cookies. Para ello debe acceder al cuadro de diálogo de Preferencias del navegador, en el apartado Privacidad.

6 Observe que la opción activada no modifica los conteos anteriores de visitas. Funcionará solamente para futuras visitas. Bajo la gráfica se detalla el número de visitas logrado por cada una de las entradas del blog. Con sólo un clic sobre el nombre de cada una de ellas, podrá abrirla en una nueva ventana emergente. Pulse en el vínculo Más, que está a la derecha del título de esta sección.

7 Se muestra en una gráfica de barras las visitas de cada una de las entradas.

8 Se actualiza la gráfica para mostrar las visitas de las últimas 24 horas. El botón Actualizar, que muestra una flecha curvada también en la cabecera, le permite actualizar las estadísticas en tiempo real.

9 Pulse ahora en la opción Público de la pestaña Entradas.

10 De este modo se muestran el número de visitas recibidas por país, por navegador y por sistema operativo. En nuestro caso dominan las visitas realizadas desde Estados Unidos. Puede volver a la pantalla de estadísticas generales usando el vínculo Visión general.

LAS PLANTILLAS DINÁMICAS SON SIETE VISTAS sumamente llamativas que despliegan efectos espectaculares al pasar de un post o de una página a otro. Permiten a los usuarios escoger cuál de las siete vistas desean utilizar, así como compartir o seguir la información con un sólo clic.

IMPORTANTE

Las plantillas dinámicas fueron presentadas por Google en abril de 2011. Aunque entonces no permitían ninguna personalización ni gadgets de ninguna clase, poco a poco se ha ido brindando algo de control al propietario del blog, tal como prometieron en su momento

1 Para este ejercicio, en el escritorio de su blog, active la pestaña Plantillas.

2 Ante todo, lo más recomendable es hacer una copia de seguridad del blog que nos asegure que en cualquier momento podremos devolverle su aspecto anterior. Esto es especialmente importante cuando el blog tiene muchas personalizaciones incorporadas previamente, aunque ahora no es el caso. Pulse el botón Crear copia de seguridad / Restablecer.

3 Se abre el cuadro de diálogo del mismo nombre. Pulse el botón Descargar plantilla completa.

4 Escoja la opción Guardar para que se almacene el archivo XML en su equipo, y cierre el cuadro de diálogo.

5 En primer lugar se presentan las siete plantillas dinámicas de Blogger. Coloque el cursor del ratón sobre la primera vista dinámica y, de las dos opciones que aparecen escoja la opción Personalizar.

6 Se abre el Diseñador de plantillas. En la parte superior se muestran las distintas categorías de plantillas y, en una segunda fila, las plantillas disponibles para la opción escogida, en este caso Vistas dinámicas. Pulse sobre la segunda vista y compruebe cómo se actualiza el blog.

7 Se trata de la vista Flipcard, que muestra las imágenes del blog como fondo de pantalla.

8 La vista que escoja es la que se presentará por defecto, pero el usuario que acceda al blog podrá cambiar de una a otra usando este menú desplegable.

9 Es la llamada Sidebar, que permite navegar usando la barra de entradas de la izquierda.

10 En la vista Snapshot las entradas son organizadas como un tablón de fotografías.

11 Es la plantilla Mosaic las imágenes y textos del blog se presentan con diferentes tamaños en un mosaico compuesto al azar, que se rediseña cada vez que se actualiza el blog. Pulse en una de las entradas para desplegarla.

IMPORTANTE

En las vistas dinámicas se incorporan automáticamente al pie de cada entrada botones que permiten compartir los contenidos en Google+, Twitter y Facebook.

AUNQUE AL PRINCIPIO LAS PLANTULAS DINÁMICAS no admitían ni gadgets ni personalización, durante el año 2011 Google incorporó estas prestaciones e hizo posible, entre otras cosas, modificar el fondo, los colores y las fuentes del blog.

1 En el Diseñador de plantillas de Blogger, haga clic en la pestaña Fondo.

2 Puede cambiar la combinación de colores de la plantilla. Pruebe uno de los temas sugeridos que le agrade.

3 Pulse en el botón de punta de flecha que está en la miniatura Imagen de fondo.

4 Puede escoger alguna opción de la extensa galería de imágenes que ofrece Blogger clasificadas en categorías o cargar una fotografía de su equipo. Pulse la pestaña Subir imagen.

5 Ubique en su ordenador una imagen que pese menos de 300 K o, si lo prefiere, descargue de nuestra web la imagen Girasol fondo.jpg y úsela para tal fin. Una vez se halla cargado, pulse el botón Finalizar.

6 La imagen se aplica al fondo. Despliegue el menú que muestra seleccionada la opción Mosaico. Puede escoger si la imagen se debe repetir para llenar el fondo o no, y de qué manera. También si debe desplazarse con la página o no y cómo debe alinearse.

7 Mantenga seleccionada en el segundo panel la categoría Página y escoja alguna fuente para el texto de las entradas.

8 La categoría Header se refiere a la barra de fondo del título, pero como estamos usando una fotografía, no podemos modificarla. La categoría Header Bar modifica la barra de menús del blog y le permite cambiar su color de fondo, la fuente y el color de los textos. Cambie lo que le parezca conveniente.

9 En el apartado Enlaces puede establecer que el color de los vínculos cambie al colocar el cursor encima y después de que han sido visitados por el usuario. Active esta ficha y modifique los colores establecidos.

10 Puede cambiar el color y la tipografía del título. Escoja esta opción y haga una elección que contraste contra el fondo.

11 Despliegue la ficha Título de entrada, realice los cambios que prefiera

IMPORTANTE

En la categoría Avanzado del Diseñador de plantillas, el apartado Date Ribbon permite modificar la cinta que indica la fecha de cada entrada. Si desea eliminarlas de todo el blog, utilice el siguiente código en el apartado Añadir CSS: .ribbon {display:none !important;}

BLOGGER TAMBIÉN PERMITE REALIZAR personalizaciones sobre las plantillas dinámicas utilizando código CSS, desde el Diseñador de plantillas de Blogger. En este ejercicio usaremos esta prestación para crear una cabecera personalizada para nuestro blog.

IMPORTANTE

Las siglas CSS vienen del inglés Cascading Style Sheets (Hojas de estilo en cascada) e identifican un lenguaje utilizado para definir el estilo de un documento, independientemente de su estructura.

1 Para este ejercicio puede descargar de nuestra web el archivo cabecera.jpg o crear su propia cabecera. Nuestra imagen mide 110 por 182 píxeles y tiene una resolución de 72.

2 En el Editor de plantillas, dentro de la categoría Fondo, pulse el vínculo Eliminar imagen, del apartado Imagen de fondo.

3 En la categoría Avanzado, escoja la opción Añadir CSS.

4 En este panel puede añadir códigos personalizados. Lo que haremos será añadir un código para insertar una cabecera personalizada. Escriba el siguiente código, o descárguelo y cópielo del archivo Código cabecera que encontrará en nuestra web:.header-bar {background-color:#536fa8 !important; /* Color fondo */background-image:url(URL IMAGEN DE CABECERA) !important;background-repeat:no-repeat;height:148px !important; /* Altura de cabecera */border-bottom:20px solid #f07300; /* Cinta inferior */}#header .header-bar .title h1, #header .header-bar .title h3 {display:none;}#header a:hover {text-decoration:none !important;}#main {margin-top:125px !important;} /* Distancia entre la cabecera y el contenido */