Embedded Files
Diseño
Diseño
Favicon.-
Favicon.-
Es la pequeña imagen que se muestra para identificar las pestañas que tenemos abiertas en un navegador. Por defecto, Blogguer tiene su icono .
He diseñado un pequeño icono para que nuestro Blog tenga la pestaña personalizada:
Logotipo.-
Logotipo.-
Creando marca...
Cabecera.
Cabecera.
Aprovechando una foto que hice a la salida del centro tras las evaluaciones iniciales, y se veía un Castillo al atardecer precioso.
Sidebar.
Sidebar.
El anterior tenía:
El anterior tenía:
- Facebook: lo puse el curso pasado, pero se veía mal.
- NOVEDADES: un listado de nuevas novelas, no actualizado desde hace tiempo.
- Imagen con el logo del IES.
- Blog recomendados
- Seguidores: hay 11 en diciembre de 2018
- Páginas vistas.
- Archivo del blog: lista con todas las entradas por meses y años.
- Etiquetas en línea
Sidebar.
Sidebar.
El nuevo tiene:
El nuevo tiene:
- Reloj-calendario mini.
- Traductor de Google.
Vídeo destacado responsive.
Vídeo destacado responsive.
- Logo de la Junta de Extremadura.
Menú desplegable de Etiquetas.
Menú desplegable de Etiquetas.
- Buscador por palabras.
- Archivo histórico desplegable: nº de entradas/meses/años.
Lecturas recomendadas.
Lecturas recomendadas.
- Facebook del IES
- Seguidores: hay 11 en diciembre de 2018
- Entrada destacada.
- Safecreative.
En cursiva, los elementos que he puesto pero son totalmente prescindibles.
En naranja los que hay que trabajarse en HTML.
Longitud.
Longitud.
- Limito la longitud de las entradillas a 26 palabras.
- Limito el número de entradas en portada a 8.
- Adaptar elementos del sidebar a la misma longitud que el bloque de entrada.
- Reducir el "footer" al mínimo: créditos, redes sociales con iconos (cuando las tenga), enlaces externos.
Botón subir
Botón subir
Agiliza la lectura. Para hacerlo hay que añadir código a CSS a través de Diseño>Avanzado y también modificar HTML de la plantilla. Todos los códigos que he ido modificando están en Drive, junto con las copias de seguridad.
Menú desplegable de etiquetas
Menú desplegable de etiquetas
En unos cuantos píxeles se queda comprimido todo el listado de etiquetas. También se hace añadiendo código a CSS e insertando nuevo código en el HTML de la plantilla.
Vídeo destacado "responsive"
Vídeo destacado "responsive"
Este ya ha llevado más tiempo.
Poner el vídeo no tiene dificultad, pero no es inmediato hacer que se adaptara a todo el ancho disponible según el dispositivo: tablet o móvil. En la pantalla del ordenador sí se veía perfecto, ocupando el ancho del lateral disponible.
◄ Al final ha quedado bien (en la imagen vista en el móvil); para ello he creado una clase "contenedor" en la CSS para luego incluirla en el gadget:
Nueva clase en CSS:
Nueva clase en CSS:
Pegando este código antes de </b:skin>
/* Podemos eliminar este estilo si no queremos que se adapte al ancho máximo */.delimitador{ width:560px; /* Ancho máximo */ margin:auto; /* Centramos el vídeo */}/* El contenedor con el padding-top crea el tamaño del vídeo */.contenedor{ height:0px; width:100%; padding-top:56.25%; /* Relación: 16/9 = 56.25% */ position:relative;}/* El iframe se adapta al tamaño del contenedor */.contenedor iframe{ position:absolute; height:100%; width:100%; top:0px; left:0px;}Gadget de HTML:
<div class="contenedor"> <iframe src="https://www.youtube.com/embed/EfLAqknCSYs"></iframe> </div>Gadget de HTML:
Formulario Contacta
Formulario Contacta
Formulario "Contacta"
Formulario "Contacta"
Aunque Blogger trae la opción de incluir un gadget de formulario de contacto, carece de cláusula de protección de datos.
Así que he optado por crear un formulario en Educarex, con todas las garantías de seguridad. Está alojado en Drive, compartido con los responsables del centro, y lo he incluido en el blog como página independiente y acceso en el lateral:
Report abuse