El Perro de Papel Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

Cómo hacer tus tablas responsive en blogger


Desde que empecé el blog siempre he trabajado con tablas html estáticas. Sabía que no era la solución más acertada para visualizarlas en un dispositivo móvil, pero me gustaba la funcionalidad que presentaban. Son ideales para mostrar:
Galerías de imágenes.
Comparaciones de productos / servicios.
Organizar datos.
...Y todo de forma personalizada y ordenada. De hecho te conté cómo crear tu tienda en blogger gracias a este tipo de tablas y paypal. Puedes recordar cómo hacerlo en la siguiente entrada:
Crear tienda con tablas html en blogger
Es muy sencillo y una vez que entiendes y memorizas el código, te sale sola en vista HTML. De hecho, yo solo cambio a vista Redactar en las entradas de blogger cuando quiero ver el resultado final.
Así que hoy quiero compartir contigo otra forma de crear tablas optimizadas para adaptarse a dispositivos móviles. Para comprobar si tu tabla se ve bien o no en un móvil, no hace falta entrar desde el móvil, puedes hacerlo de la siguiente manera en apenas unos segundos:
1.- Copia la URL de la página dónde aparece la tabla. Como ejemplo voy a usar la página de Packs de Diseño para Wordpress que está pendiente de optimizar.
http://www.elperrodepapel.com/p/packs-de-diseno-para-wordpress.html
2.- Abre una nueva página de tu navegador y pega la url añadiendo ?m=1 al final. Así:
http://www.elperrodepapel.com/p/packs-de-diseno-para-wordpress.html?m=1
Y automáticamente verás la versión móvil de tu web. Si la resolución de tu pantalla es amplia, verás la tabla sin problemas, como en el caso de mi página:

Pero si reduces tu página y la vas haciendo más pequeña, como sucedería al visitarla desde el móvil, aparecen los fallos:


El tercer Pack se sale fuera de la zona marcada... vamos, que no se adapta a dispositivos móviles, va por libre. Y es que las tablas HTML son geniales para mostrar este tipo de información pero... no son dinámicas, sino estáticas.
Ahora que ya sabes cómo se ven tus tablas en os dispositivos móviles ha llegado la hora de decidir qué vas a hacer. Es un engorro empezar a cambiar todas las tablas si tienes muchas... pero recuerda que el resultado final es el más importante. Y que las primeras apariencias son las que cuentan.
Ahora el tráfico desde dispositivos móviles está en alza, así que no te dejes llevar por la pereza, organízate y empieza a optimizar tu blog en condiciones. Sobre todo si quieres ofrecer una imagen profesional y comprometida con lo que haces.
Lo que te propongo es esto:

¿Ves los tres cuadrados de colores debajo de Blogueras Opinan? En la versión para ordenador se ve así:

Y en la versión móvil como te mostraba más arriba, el cuadrado verde pasa automáticamente a segunda fila. Es una tabla completamente dinámica que se adapta a la resolución de la pantalla. ¡Es genial!
Puedes comprobarlo visitando mi página de Packs para Blogger que ya está optimizada:
Diseño para Blogger versión ordenador
Diseño para Blogger versión móvil
Y ahora voy a explicarte cómo hacerlo. Usando divs en lugar del código habitual de las tablas. Y haciéndolos flotar hacia la izquierda para que se vayan alineando automáticamente rellenando el espacio disponible.
Si sabes un poco de programación no creo que te sorprenda la solución que he encontrado ¿verdad? Llevaba meses dándole vueltas y por fin pude llevarlo a la práctica. El resultado me ha encantado así que voy a contarte paso a paso cómo lo hice:
CÓMO CREAR UNA TABLA RESPONSIVE EN BLOGGER
Vamos a crear un nuevo contenedor (div) que hará a la vez de celda de nuestra tabla. Es decir, su función será la misma que la de los códigos <td></td>.
1.- Abre tu plantilla HTML y haz click en cualquier parte dentro del código. Este punto es MUY IMPORTANTE, muchas de las dudas que me llegan por correo es porque no hacen click dentro de la plantilla antes de abrir el buscador.
Cuando hayas hecho click, pulsa las teclas Control (Ctrl) y F a la vez. Se abrirá el buscador interno de la plantilla de blogger. Se diferencia del buscador del navegador porque te aparecerá DENTRO de la plantilla, arriba a la derecha y pondrá Search.
2.- Escribe en el buscador:
]]></b:skin>
Y pulsa INTRO
3.- Justo encima de ]]></b:skin> pega:
Cajas Responsive
---------------------------------
.cajaflotante {
width: 250px;
float: left;
text-aling: center;
border: 0px solid #8FE1D8;
background:#ffffff;
padding: 10px;
margin-left: 0px;
}
.clear {
clear:both;
}
]]></b:skin>

4.- Personalización del código: esto se hace mejor cuando tienes el código activo en el blog, pero te cuento un poco lo que puedes variar para adaptarlo a tu imagen corporativa:
width: el ancho de la caja. Recuerda que es para verlo en dispositivos móviles, te aconsejo que no sea superior a 300px.
text-align: alineación del texto del interior de la caja.
border: aquí puedes añadir un borde del color y formato que quieras a tu caja flotante. Puedes ver más sobre cómo añadir bordes en la siguiente entrada:
Tipos de bordes en HTML
background: color de fondo de tu caja flotante. En esta web puedes escoger el código de color que quieras y sustituirlo por el mío:
Colores HTML
padding: espacio que quedará alrededor, entre el contenido y el borde de la caja.
Guarda los cambios y vamos a probar nuestro código en una entrada, verás que sencillo. Abre una nueva página y entrada de pruebas, mira que puedas publicarla una vez hayamos terminado la práctica o utilizar la vista previa.
Cómo aplicar el código de tablas responsive a tus entradas del blog
Pasa a vista HTML y escribe lo siguiente:
<div align="center" class="cajaflotante">
EL TEXTO QUE QUIERAS QUE APAREZCA DENTRO DE TU CONTENEDOR FLOTANTE
</div>

Si usas el código del ejemplo sin modificar nada, el resultado sería idéntico al de mi página de Packs de Diseño en Blogger que te mostraba al principio pero sin los bordes de colores.
Puedes añadir tantas cajas flotantes seguidas como quieras:
<div align="center" class="cajaflotante">
EL TEXTO QUE QUIERAS QUE APAREZCA DENTRO DE TU CONTENEDOR FLOTANTE
</div>
<div align="center" class="cajaflotante">
EL TEXTO QUE QUIERAS QUE APAREZCA DENTRO DE TU CONTENEDOR FLOTANTE
</div>
<div align="center" class="cajaflotante">
EL TEXTO QUE QUIERAS QUE APAREZCA DENTRO DE TU CONTENEDOR FLOTANTE
</div>

Su disposición se adaptará a la resolución de la pantalla en la que se visualicen. Pueden verse dos, tres, cuatro o incluso una y alinearse en vertical para que no se corte la información.
Esos pequeños detalles que marcan la diferencia
Pero seguro que si has personalizado el código para adaptarlo a tu imagen corporativa, habrás notado que no puedes variar el color de los bordes como yo hice:

¿Quieres saber cómo conseguir este efecto?
Comparte esta entrada en cualquiera de tus redes sociales y podrás ver el resto de la entrada para aprender a añadir cuadros de colores y diferenciar el contenido de tus cajas de una forma mucho más visual y atractiva. Es muy fácil, tardarás lo mismo que en crear tus cajas flotantes :)
Además he incluido un pequeño truquillo para que cuando añadas texto después de tus cajas flotantes no se solape el contenido. A mí me funciona ¡seguro que a ti también!
Haz click en el siguiente botón ahora, elige en qué red social quieres compartirlo y descarga completamente gratis el PDF de 7 páginas que he preparado para ti con toda la información que acabo de contarte. Dos tutoriales al precio de uno ¿qué te parece?

¡No olvides pasar por aquí y dejarme el enlace a la página de tu blog dónde lo hayas usado! Me da igual si Google lo considera o no SPAM, lo que quiero es saber qué te ha sido útil y te han gustado los resultados. Así que ya me contarás.




Fuente: este post proviene de El Perro de Papel, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Recomendamos

Relacionado

BLOG intermedio tblog ...

Cómo hacer listas con iconos de colores en Blogger

Esta entrada surgió también en la fanpage, tuvo buena respuesta y me decidí a cambiarla por otra sobre marketing que tenía preparada. Llevamos ya un tiempo sin publicar tutoriales sobre blogger y este detalle que voy a compartir contigo hoy es muy original, además de sencillo, verás que si ya has tocado la plantilla HTML y tienes nociones básicas de programación, no te cuesta nada diseñar tu prime ...

internet blog intermedio ...

Cómo poner la fecha debajo del título en Blogger

Si has visitado mi página de Cursos para Bloggers puede que te hayas fijado en la posición de la fecha de las entadas del blog, centrada debajo del título. Me han llegado varios emails preguntándome una manera sencilla de mover la fecha en Blogger... Y bueno, no sé si será la más sencilla de todas, pero es la que he usado yo y puedo asegurarte que funciona.Mover la fecha debajo del título 1.- Abri ...

general

Curso Blogger: crea tus contenedores

En la anterior entrega aprendimos a crear nuestra primera plantilla. La idea no era copiar y pegar el código que "nos dan hecho", esta vez se trataba de conseguir entender bien cómo y porqué se hace cada cosa en Blogger. Con el mismo espíritu de dominar el código que lo conforma y la filosofía del "poco a poco", hoy continuamos con la "maquetación", el siguiente gran ...

internet blog intermedio ...

Cómo poner un contador regresivo en Blogger

Si pasaste por mi blog de Servicios de Diseño Gráfico entre el 28 y 29 de noviembre seguro que viste el contador regresivo que instalé para que se viera el tiempo que quedaba para poder disfrutar de la oferta. Me gustó porque es sencillito pero puede personalizarse y queda bastante integrado en la web. Ahora que se acerca la Navidad puede usarse para contabilizar los días que faltan para fin de añ ...

general seo

Metadescripciones duplicadas en Blogger

La herramientas para webmaster de Google poseen una utilidad llamada Herramienta de mejoras HTML que expone los problemas registrados durante el análisis y rastreo de tu Blog en Google. Muchos Blogger se encuentran con el error de metadescripciones duplicadas y no saben en qué consiste o qué se puede hacer con él. Veamos qué es y porqué se produce este aviso en las herramientas para webmaster. ¿Qu ...

general programas y servicios online plugins ...

Copiar tablas en Excel desde internet con y sin formato

En repetidas ocasiones me he visto en la necesidad de copiar tal cual una tabla de alguna página web a Excel, con resultados lamentables, algo que es conmún ya que estas tablas muchas veces están en código HTML… Por suerte hace unos días encontré una extensión que nos facilitará mucho la tarea: Table2Clipboard. Antes que nada, esta extensión es para Firefox, desconozco si hay una opción simi ...

BLOG blogging intermedio ...

Instalar los iconos de redes sociales en el header y sidebar de blogger

En una entrada anterior te conté cómo instalar una fuente llamada fontawesome para utilizar iconos en tus listas, páginas y entradas de blogger, para darles ese toque diferente y original que las haga especiales y visualmente atractivas. Puedes volver a revisar la entrada e instalar la fuente que te digo en el siguiente botón: CÓMO INSTALAR ICONOS EN BLOGGER Hoy, vamos a utilizar nuestros iconos p ...

avanzado BLOG blogging ...

Cómo instalar un slider de imágenes en blogger

Esta semana he recibido un correo con esta duda: ¿Cómo instalar un slider de imágenes debajo del cabecero en blogger? Y no es la primera vez que me preguntan por el mismo tema. Este tipo de correos no puedo contestarlos uno a uno, prefiero anotar las dudas y cuándo se repiten mucho, desarrollar un tutorial en el blog, para que pueda verlo todo el mundo. Si me conoces un poco, ya sabes que no soy m ...

general propuestas

Cómo añadir suscripción por correo electrónico en Blogger

Los componentes de suscripción por correo electrónico, sirven para que los usuarios que visitan un sitio web, puedan suscribirse a sus actualizaciones recibiéndolas por correo electrónico. Se trata de una herramienta fundamental para cualquier blog o sitio web, pues crea un vínculo directo entre sus visitantes y su autor. Cuando el creador de la página web publica un contenido, éste llega a todos ...

internet blog community manager ...

Community Manager: ¡Comparte tus entradas en Twitter y Google Plus!

Serie de entradas: Habilidades necesarias para ser tu propio Community Manager. Leer La importancia del Contenido. Leer La importancia de la Cercanía y el Cariño. Leer ¿Qué es la Cultura 2.0? Leer Fomentar la Conversación. Leer Ser Creativo cada día. Leer El carácter de tu marca. Leer La constancia. Leer Facebook I: Perfil personal versus Fanpage. Leer Facebook II: Fanpages y Grupos. Leer Facebook ...