Sección Diseño de Blogger estilo Wordpress

Cambia los estilos del panel de administración de Blogger de la sección Diseño, que se utiliza para gestionar los widgets de la plantilla.

Este proyecto está diseñado para sobrescribir los estilos del panel de administración de Blogger, específicamente la sección para gestionar los widgets de la plantilla. Aunque este artículo está destinado principalmente a desarrolladores de Blogger, es fácil de instalar y no requiere conocimientos avanzados.

Instalar

Copia el contenido del archivo main.css o del archivo main.min.css si prefieres el codigo minificado, luego en tu plantilla XML de Blogger, agrega el siguiente código justo antes de la etiqueta </head>, no olvides colocar dentro el código copiado:

<b:template-skin><![CDATA[
  /* Pega el contenido de main.css o main.min.css */
]]></b:template-skin>

Si estás trabajando en un proyecto más grande utilizando un entorno de desarrollo (como por ejemplo Hamlet), puedes instalarlo como una dependencia de npm para mantenerlo separado de tu proyecto y a la vez actualizado:

npm install blogger-admin-wp

Luego, necesitarás incluir el archivo CSS al tema que estes desarrollando. Para facilitarte el trabajo, te dejo la ruta exacta de importación que necesitarás para incluir los estilos a tu proyecto:

node_modules/blogger-admin-wp/main.min.css

Modo de uso

Una vez instalado verás algunos cambios en el panel de administración de Blogger. El siguiente paso es crear el diseño que consiste en columnas. Cada columna debe tener un contenedor con la clase layout-section, como el siguiente ejemplo:

<div class='layout-section'>
  <!-- Resto del contenido -->
</div>

Esta clase solo afecta al modo de diseño, sin embargo, si este contenedor obligatorio interfiere con el diseño de tu plantilla, puedes crearlo de manera condicional para que el contenedor solo afecte a la sección diseño:

<b:tag cond='data:view.isLayoutMode' name='div' class='layout-section'>
  <!-- Resto del contenido -->
</b:tag>

De esta forma, el contenedor no afectará a la vista pública de tu plantilla. Alternativamente, puedes agregar la clase layout-section a un contenedor existente en tu diseño. Cada contenedor con la clase layout-section se mostrará como una columna en tu panel de administracion de Blogger.

Habilitar el botón de edición

Por defecto, para editar un widget puedes hacer clic en cualquier parte de un widget. Si deseas desactivar esta funcionalidad y mostrar un botón de edición, crea un contenedor que envuelva todas tus secciones de diseño y agrega la clase layout-edit:

<b:tag cond='data:view.isLayoutMode' name='div' class='layout-edit'>
  <!-- Resto del contenido -->
</b:tag>

Conclusión

Este proyecto es una forma sencilla de mejorar la experiencia de usuario en Blogger, ademas de facilitar la gestión de los widgets en la sección de diseño, sobre todo para usuarios de WordPress que estan acostumbrados a su panel de administración. Si tienes alguna pregunta o sugerencia, no dudes en dejar un comentario.