.

24 de junio de 2014

Plantilla Copyblogger Responsive para Blogger

Escrito por
A poco que hayas entrado en el blog otras veces te habrás dado cuenta que desde anoche blogeninternet.com está en fase de transformación. He cambiado a una nueva plantilla con diseño responsive: el template Copyblogger Responsive. La idea es que los usuarios que visualizais el blog desde un smartphone o una tableta os resulte más atractivo. Al mismo tiempo estoy implementando un menú desplegable y nuevas categorías para que puedas navegar más fácilmente por los contenidos. Mientras termino de ajustar todo el blog, he decidido presentaros la plantilla Copyblogger Responsive para Blogger, muy interesante para aquellos blogs que ya tienen una gran cantidad de entradas.
La plantilla Copyblogger Responsive fue creada inicialmente por Studiopress para la plataforma Wordpress, y posteriormente adaptada a Blogger por Blogipstricks. Su principal característica es que es una plantilla que se visualiza perfectamente en teléfonos móviles y otras pantallas de tamaño pequeño, re-ordenando sus contenidos. La podrás encontrar en algunas reviews sobre las mejores plantillas adaptativas, pero allí no te explicarán las cualidades de la plantilla y los problemas con los que te puedes encontrar si la instalas en un blog que ya lleva cierto tiempo en funcionamiento.

Ver demo de la plantilla Copyblogger Responsive para Blogger.

Descarga la plantilla en la página del autor.

Analisis de la Plantilla Copyblogger Responsive

Diseño y programación

  • Codificación. HTML5, aunque usa sobretodo la etiqueta <div>.
  • Verificación W3C. Excelente, no da casi errores. Si te da muchos errores es por el contenido de tus artículos, por ejemplo por no incluir el atributo alt en tus imágenes. 
  • Reset. Sí.
  • Código bien estructurado. Sí, excelente.
  • Responsive design. Sí. Se adapta a todos tablets y otros dispositivos móviles de maravilla. Desactiva la plantilla para móviles.
  • Variable definitions. No tienes. Eso significa que tu blog cargará más rápido, pero los cambios que quieras hacer en la plantilla tendrás que hacerlos a mano, picando código.
  • Widgets personalizados. Sí.
  • Estilos titulares personalizados. Sí, de <h1> a <h6>
  • Idioma. En inglés, hay que personalizar los textos a mano.

Estructura y Widgets

  • Sidebar. Sí a la derecha.
  • Pie de página. Sencillo.
  • Entradas resumidas. Sí.
  • Menú Excelente, tiene dos menús horizontales desplegables. No es un gadget, por lo que tienes que cambiar las palabras y ajustarlo de forma manual.
  • Paginación. Sí, sencilla y funciona bien.
  • Marcadores sociales: no tiene y es difícil añadirlos, es uno de los principales problemas de esta plantilla.
  • Buscador. En la cabecera a la derecha, funciona bastante bien.
  • Afiliación: Sí, por feed. No tiene integrada lista para newsletter.
  • Widget-multi autor. Sí, hay que personalizarlo.
  • Copyright. Sí, los autores tienen enlace a pie de página y en el menú. El del menú logicamente se puede quitar. El de pie de página hay que mantenerlo como atribución. Se puede incluir el atributo no-follow si se desea.

Problemas y cosas raras

Cambiar de plantilla en Blogger siempre supone una cantidad de trabajo importante, porque muchos de los códigos que estabas usando para tu blog los tendrás que volver a poner a mano. Aparte de eso puedes encontrarte que la plantilla tiene algunas cosas raras que no te cuadran y tienes que solucionar.
  • Widgets no modificables. Si abres en el editor la sección de Gadgets de Blogger verás que hay algunos que te marca como no modificables como por ejemplo la cabecera. Puedes tocarlos, pero entonces se va al traste la plantilla. Lo único recomendable es añadir algunos gadgets en la columna lateral.
  • Widgets posicionados: Una vez que crees un nuevo Gadget verás que no los puedes insertar donde quieres. Siempre los traslada a la columna derecha, impidiendo que por ejemplo estén encima de los artículos.
  • Usa capitalize para los artículos. La primera letra de cada palabra la pone en mayúscula, algo que me resulta raro.
  • Muchas referencia a imágenes en el código. Por ejemplo la cabecera de color negro está formada con la repetición de una imagen vertical. Hay que eliminarlas o substituirlas por imágenes propias.
  • Comentarios mal ajustados. La ventana de los comentarios se desplaza a la derecha y si escribes una aviso las letras se pegan al espacio que tienen y son grandes.
  • No permite los marcadores sociales propios de Blogger.
  • No se activa la edición rápida de Blogger.

Personalizando la Plantilla Copyblogger Responsive

Como podrás ver en blogeninternet.com no estoy usando la plantilla original, sino que estoy modificando el código CSS para ajustar el estilo del blog. Lo más evidente es la eliminación de un menú y la transformación de los colores, pero también hay otros cambios menores.
  • Cambiar colores.
  • Personalizar el menú principal y crear los vínculos
  • Eliminar el menú secundario.
  • Quitar capitalize para los títulos.
  • Eliminar las imágenes usadas para el diseño.
  • Ampliar el ancho máximo del cuerpo de la plantilla.
  • Modificar el menú principal en versión movil, no me gusta como queda.
  • Ajustes de diseño.
Espero que el artículo te ayude a conocer mejor la plantilla Copyblogger Responsive para Blogger y a personalizarla si es que eliges usarla en tu blog. Si crees que hay alguna característica, ventaja u otro detalle que me dejado en el tintero, por favor deja tu comentario. ¿Te ha parecido útil la ficha sobre la plantilla? ¿Es demasiado compleja? ¿Te interesaría ver más valoraciones de plantillas de Blogger y ayuda para personalizarlas? Usa el +1 de Google+, o deja tus impresiones abajo. Me interesan mucho vuestro feedback.

0 comentarios:

Publicar un comentario en la entrada

Bienvenido, en este blog encontrarás información para crear y personalizar tu blog de Blogger o Wordpress, además de artículos sobre Internet, las nuevas tecnologías, programación con HTML y CSS, educación y otros temas. Espero que los tutoriales, artículos y recursos del blog te resulten útiles. Si quieres mantener el contacto puedes hacerlo a través de mis cuentas de Twitter o Google Plus.