Ir al contenido principal

Personaliza los marcos de blogger

Cada vez es más necesario utilizar blogs para desarrollar los contenidos. Una de las herramientas más interesantes es Blogger. Esta herramienta pone a nuestra disposición un montón de plantillas, junto con un editor para personalizar tipos de letra, colores, tamaños y una infinidad de elementos, pero no es suficiente, cuando queremos crear un marco personalizado para todos los gadget que tenemos en una barra lateral.

La solución pasa por editar la plantilla HTML y añadir el elemento “.widget-content” para la barra lateral de gadget.

Podemos definir el borde personalizado para todos los gadget del blog, para uno en concreto o para todos los que estén en una barra. En este ejemplo vamos a ver cómo poner el borde a todos los gadget de la segunda barra lateral. 

1 Ir al editor

Tenemos que entrar en el editor del blog y seleccionar la opción Plantilla y en esa pantalla pulsar sobre el botón “Editar HTML


2 Localizar el nombre de la barra

Se abre la ventana con todo el código HTML que tiene la plantilla del blog y lo primero que tenemos que hacer es localizar el identificador (nombre) de la barra lateral que queremos personalizar. 

Esta información suele venir al final de la plantilla, es una sección . En este ejemplo veo que el identificador de la barra lateral que quiero personalizar es “sidebar-right-2-2”. Dependiendo del diseño de la plantilla (una columna, dos columnas, etc) este nombre puede cambiar.

3 Añadir el código a la plantilla. 

Ahora que ya sabemos el nombre de la barra, tenemos que crear un estilo personalizado para que lo aplique al cargar el blog.
En la misma ventana dónde está todo el código HTML tenemos que añadir nuestro estilo, pero no lo podemos añadir en cualquier lado, tiene que estar en el sitio correcto, por lo que tenemos que volver a la parte inicial del código y mostrar el contenido de la sección
  
Para ver el contenido de esta sección, tenemos que pulsar en el triángulo que hay a la izquierda, donde están los números de línea. Una vez desplegada, tenemos que ir a la última línea de esta sección justo antes de

Pinchamos con el ratón y escribimos el siguiente código para personalizar la barra. En el ejemplo hay un comentario entre /* */ y luego el html del formato

#sidebar-right-2-2  es el nombre de la barra lateral que hemos encontrado antes, con el simbolo # para señalar que es un estilo que queremos que se aplique a ese objeto
.widget-content es la propiedad a la que queremos aplicar format, en este caso a los objetos que contenga 
border: thin solid #0100DA, border es el borde del elemento seguido de thin para indicar que queremos un borde fino, solid indica que es una línea continua, #0100DA es el código del color, en este caso un azul llamativo

4 Verificar y Guardar

Antes de guardar los cambios, podemos ver  utilizando la Vista Previa, cómo queda el borde en todos los gadget de la barra seleccionada.

Si nos gusta cómo queda, sólo queda Guardar la Plantilla y ya tendremos nuestro blog con un borde personalizado.



Tenemos que acordarnos que estas personalizaciones desaparecen si cambiamos de plantilla, por lo que estaría bien guardar el código HTML antes de cambiarla

Comentarios

Entradas populares de este blog

Fin del proyecto "En la nube TIC"

  Llegó el día del “hasta siempre”… Nunca pensé en este momento, en cómo despedir un proyecto que ha estado tan presente en la última década de nuestras vida. 10 años es mucho tiempo para cualquier proyecto educativo colaborativo, y llega un momento en el que distintas circunstancias nos hacen pensar que es el momento de cerrar una etapa, de decir adiós. Y este momento ya está aquí. “En la nube TIC” llega a su fin. Solo se me ocurre dar las gracias a todos aquellos que nos siguieron artículo a artículo, a los que nos animaron y a los que pusieron su cariño en celebrarlo una y otra vez. Pero sobre todo quiero dar las gracias a esos maravillosos docentes que, sin pedir nada a cambio, lo dieron todo para ayudar a muchos de sus compañeros, les conocieran o no. Han derrochado esa generosidad de la que se nutrió la web 2.0 y la revolución tecnológica en la educación en sus inicios, y que tanto echamos de menos últimamente. Quiero dar las gracias y mostrar mi admiración y respeto a todos los

WordWall: Crea juegos online en minutos.

  ¡Hooooola a todos! Qué penita me está dando publicar estas últimas entradas en el blog EnlanubeTIC. Ver cómo se va apagando un proyecto tan bonito está costando...  Pero vamos a intentar que las entradas que nos quedan sean lo más útiles posible para otros profes, que es lo que siempre hemos pretendido. Hoy vamos a hablar de Wordwall , una web    británica que nos ofrece la posibilidad de crear fantásticos juegos online a los que nuestros alumnos pueden jugar desde sus tabletas, móviles, portátiles...  Hay tres características que me encantan de Wordwall: Lo rápido y sencillo que es crear un juego (simplemente crear listas de conceptos y ya). El aspecto gráfico del juego que se genera (incluso puedes cambiar el tipo de juego con la misma lista). Las estadísticas que obtienes de las puntuaciones que alcanzan tus alumnos. Aquí tenéis un par de ejemplos de juegos que he creado para mis “minions”: Y en este tutorial se puede ver lo súper sencillo que es crear y compartir un j

Fluky.io: Tu "ruleta de la fortuna" personalizada

¡Hoooola a todos! Hacía mucho que no escribía una entrada en la nube TIC, y ya tenía ganas. Hemos hablado de tantas herramientas, que ya casi no quedan sin repetir… En esta ocasión voy a presentaros una web suuuuuúper sencilla y en mi opinión muy práctica: Fluky.io . Son muchas las ocasiones en las que queremos hacer una elección aleatoria en clase (otras muchas nos interesa que la elección parezca aleatoria, pero no lo sea, jeje). Varios de los programas o apps que utilizamos en el aula tienen alguna opción que nos permite hacerlo: el software de la pizarra digital (Notebook, Active Inspire…), webs como ClassDojo, o la app que utilizamos como "cuaderno del profesor” (Additio, iDoceo, CuadernoProfesor…) por ejemplo. Pero esta que os presento hoy hace sencilla, exclusiva y perfectamente eso: elecciones aleatorias. Sin registros ni cosas raras. Cuando entras en fluky.io , solo tienes que pulsar el botón “START” y aparecerá una barra a la izquierda en la que pu