Reutilizar un Widget - Tipos de widgets en Blogger

widgets en Blogger

Post Destacados

<!-- Featured Wrapper -->
<b:if cond="data:view.isHomepage">
    <div id="hot-wrapper">
        <b:section class="section" id="hot-section" maxwidgets="1" name="Hot Posts" showaddelement="yes">
            <b:widget id="HTML7" locked="false" title="Destacados" type="HTML" visible="true">
                <b:widget-settings>
                    <b:widget-setting name="content">recent/hot-posts</b:widget-setting>
                </b:widget-settings>
                <b:includable id="main">
                    <b:include name="widget-title" />
                    <div class="widget-content">
                        <data:content />
                    </div>
                </b:includable>
            </b:widget>
        </b:section>
    </div>
    <div class="clearfix" />
</b:if>

Este fragmento de código HTML y XML es específico para Blogger (plataforma de Google) y muestra una sección de "Publicaciones destacadas" en la página de inicio del blog. A continuación, explico cada parte de manera concisa:

  1. <b:if cond='data:view.isHomepage'>

    • Esta condición verifica si el usuario está en la página de inicio. Si es verdadera, el código dentro de este bloque se ejecuta.

  2. <div id='hot-wrapper'>

    • Contenedor principal con el ID hot-wrapper que envuelve la sección de publicaciones destacadas.

  3. <b:section class='section' id='hot-section' maxwidgets='1' name='Hot Posts' showaddelement='yes'>

    • <b:section>: Etiqueta específica de Blogger que crea una sección de widgets.
    • maxwidgets='1': Limita la sección a un solo widget.
    • name='Hot Posts': Nombre de la sección para identificarla.
    • showaddelement='yes': Permite agregar más widgets desde el panel de administración de Blogger.

  4. <b:widget id='HTML7' locked='false' title='Destacados' type='HTML' visible='true'>

    • Define un widget HTML dentro de la sección.
    • id='HTML7': ID del widget.
    • locked='false': Significa que este widget no está bloqueado y puede ser editado o eliminado desde el panel de Blogger.
    • title='Destacados': Título que se mostrará en la página.
    • type='HTML': El widget es de tipo HTML, lo que permite la personalización directa del contenido.

  5. <b:widget-settings>

    • Contiene la configuración del widget.

  6. <b:widget-setting name='content'>recent/hot-posts</b:widget-setting>

    • Este ajuste indica que el contenido del widget será publicaciones recientes etiquetadas como "hot-posts".
    • La ruta recent/hot-posts hace referencia a las publicaciones destacadas recientes.

  7. <b:includable id='main'>

    • Define una plantilla reutilizable dentro del widget.

  8. <b:include name='widget-title'/>

    • Incluye el título del widget que fue definido como "Destacados".

  9. <div class='widget-content'>

    • Contenedor del contenido dinámico del widget. Lo que se muestra dentro de este div es el contenido generado automáticamente por Blogger, en este caso, las publicaciones etiquetadas como "hot-posts".

  10. <data:content/>

    • Inserta el contenido dinámico del widget. Blogger inserta automáticamente aquí las publicaciones destacadas.

  11. <div class='clearfix'/>

    • Limpia los flotantes para asegurarse de que el diseño no se vea afectado.

  12. </b:if>

    • Cierra la condición if para que este código solo se ejecute en la página de inicio.

Reutilización en otro blog de Blogger:

  1. Copia el código completo y pégalo dentro de la plantilla HTML de tu blog de Blogger, asegurándote de que esté dentro del cuerpo de la plantilla (<body>).

  2. Personalización:

    • Cambia el id='hot-wrapper' y id='hot-section' si deseas personalizar los identificadores.
    • Si necesitas cambiar la categoría de las publicaciones destacadas, modifica la línea <b:widget-setting name='content'>recent/hot-posts</b:widget-setting>, reemplazando "hot-posts" por la etiqueta de tu elección.

  3. Edita desde el panel de administración de Blogger:

    • Este código crea un widget editable, por lo que puedes cambiar configuraciones o el contenido desde el panel de diseño de Blogger.

  4. Verifica la visibilidad:

    • Este código está diseñado para mostrarse solo en la página de inicio (data:view.isHomepage). Si quieres mostrarlo en otras páginas, elimina la condición <b:if cond='data:view.isHomepage'>.


Widget de categoría, columna izquierda

Este fragmento de código en Blogger define un widget HTML personalizado. A continuación, se desglosa:

<b:widget id="HTML8" locked="false" title="Informática" type="HTML" visible="true">
    <b:widget-settings>
        <b:widget-setting name="content">3/Informática/col-left</b:widget-setting>
    </b:widget-settings>
    <b:includable id="main">
        <b:include name="widget-title" />
        <div class="widget-content">
            <data:content />
        </div>
    </b:includable>
</b:widget>

  1. <b:widget id="HTML8" locked="false" title="Informática" type="HTML" visible="true">

    • Crea un widget con el identificador HTML8.
    • locked="false" significa que el widget no está bloqueado, por lo que puede moverse o eliminarse desde el panel de administración.
    • title="Informática" establece el título visible del widget.
    • type="HTML" indica que es un widget de tipo HTML.
    • visible="true" asegura que el widget es visible en el blog.

  2. <b:widget-settings>

    • Define la configuración del widget.

  3. <b:widget-setting name="content">3/Informática/col-left</b:widget-setting>

    • Establece una configuración con el nombre content cuyo valor es 3/Informática/col-left.
    • Este valor probablemente indica que se mostrará contenido de la categoría "Informática", con un límite de 3 entradas en una columna a la izquierda (col-left).

  4. <b:includable id="main">

    • Define una sección que puede ser reutilizada o incluida en otro lugar. id="main" significa que es el bloque principal del widget.

  5. <b:include name="widget-title" />

    • Incluye el título del widget, previamente definido como "Informática".

  6. <div class="widget-content">

    • Se utiliza para envolver y mostrar el contenido del widget.

  7. <data:content />

    • Este es el contenedor dinámico que muestra el contenido definido en el widget-setting. Aquí se mostrarán las publicaciones correspondientes a la categoría "Informática".

Cómo reutilizarlo en otro blog de Blogger:

  1. Copia y pega el código en la sección de diseño de tu blog en Blogger, dentro de la parte donde se permiten widgets personalizados de HTML/JavaScript.

  2. Cambia el valor de content en b:widget-setting si deseas mostrar diferentes categorías o ajustar el formato de columnas. Por ejemplo, podrías cambiar 3/Informática/col-left por 5/Tecnología/col-right para mostrar 5 publicaciones de la categoría "Tecnología" en una columna a la derecha.

  3. Personaliza el título del widget cambiando el valor de title="Informática" a lo que prefieras, como "Tecnología" o "Últimas Entradas".

  4. Reutiliza el widget en distintas secciones del blog simplemente cambiando su id, el contenido y su posición según el diseño de tu página.


Widget de categoría, Columna derecha

<b:widget id='HTML9' locked='false' title='Educación' type='HTML' visible='true'></b:widget>
<b:widget-settings>
    <b:widget-setting name='content'>3/Cursos educativos/col-right</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
    <b:include name='widget-title' />
    <div class='widget-content'>
        <data:content />
    </div>
</b:includable>
</b:widget>

Este código define un widget HTML personalizado para un blog en Blogger. A continuación explico cada parte de forma precisa:

  1. <b:widget id="HTML9" locked="false" title="Educación" type="HTML" visible="true">

    • <b:widget>: Elemento específico de Blogger que define un widget en el blog.
    • id="HTML9": ID único del widget, que puede ser usado para identificar o aplicar estilos personalizados en el CSS.
    • locked="false": El widget no está bloqueado, lo que significa que puedes editarlo o eliminarlo desde el panel de administración de Blogger.
    • title="Educación": El título del widget que se mostrará en la interfaz del blog. En este caso, está titulado como "Educación".
    • type="HTML": El tipo del widget es HTML, lo que significa que el contenido puede ser personalizado utilizando código HTML.
    • visible="true": El widget es visible en el blog.

  2. <b:widget-settings>

    • Contiene la configuración del widget.

  3. <b:widget-setting name="content">3/Cursos educativos/col-right</b:widget-setting>

    • Este ajuste indica el contenido del widget. En este caso, parece ser un enlace o ruta dinámica que Blogger interpreta para mostrar publicaciones de la categoría "Cursos educativos".
    • 3: Puede representar el número de publicaciones a mostrar.
    • Cursos educativos: Categoría o etiqueta de las publicaciones que aparecerán en el widget.
    • col-right: Puede hacer referencia a la posición del widget en el diseño, en este caso, probablemente en la columna derecha del blog.

  4. <b:includable id="main">

    • Define una plantilla reutilizable dentro del widget. Todo el contenido dentro de esta etiqueta puede ser reutilizado o modificado.

  5. <b:include name="widget-title" />

    • Incluye el título del widget. En este caso, el título será "Educatición", tal como se definió anteriormente.

  6. <div class="widget-content">

    • Un contenedor para el contenido dinámico que mostrará el widget. El contenido será generado automáticamente basado en la configuración anterior.

  7. <data:content />

    • Inserta el contenido dinámico en el widget. Blogger interpretará esta etiqueta para mostrar las publicaciones etiquetadas como "Cursos educativos" en el número especificado (3 publicaciones).

Cómo reutilizar este código en otro blog de Blogger:

  1. Copia el código y pégalo en la plantilla HTML de tu nuevo blog de Blogger, dentro de una sección donde quieras que aparezca el widget (como en el área de widgets del diseño de Blogger).

  2. Edita las configuraciones:

    • Título: Si necesitas cambiar el título, modifica el valor de title="Educatición".
    • Contenido dinámico: Cambia el valor de <b:widget-setting name="content">3/Cursos educativos/col-right</b:widget-setting>:
      • El número "3" puede ser ajustado para mostrar más o menos publicaciones.
      • "Cursos educativos" puede ser reemplazado por cualquier otra etiqueta de publicaciones en tu blog.
      • "col-right" puede hacer referencia a una clase CSS, así que asegúrate de que esté configurado correctamente para la ubicación donde quieres que se muestre el widget.

  3. Verifica que las etiquetas existan en el nuevo blog:

    • Asegúrate de que las publicaciones en el nuevo blog tengan la etiqueta que configures en el widget (Cursos educativos en este caso).

  4. Ajusta el diseño:

    • Si usas clases específicas como col-right, asegúrate de que la hoja de estilos (CSS) en tu nuevo blog esté preparada para aplicar los estilos deseados.

Al copiar y ajustar estos elementos, el widget funcionará de manera similar en el nuevo blog de Blogger.

Widget: "feat-big"

<b:widget id="HTML65" locked="false" title="Business" type="HTML" visible="true">
    <b:widget-settings>
        <b:widget-setting name="content">Marketing/feat-big</b:widget-setting>
    </b:widget-settings>
    <b:includable id="main">
        <b:include name="widget-title" />
        <div class="widget-content">
            <data:content />
        </div>
    </b:includable>
</b:widget>

Este código es un widget HTML dentro de la plataforma Blogger. Está diseñado para mostrar un contenido específico relacionado con la categoría Marketing y utiliza un diseño o estilo especial llamado "feat-big".

Elementos clave del código:

  1. <b:widget id='HTML65' locked='false' title='Business' type='HTML' visible='true'>

    • id='HTML65': Identificador del widget.
    • locked='false': Significa que el widget no está bloqueado, por lo que puedes modificarlo o eliminarlo desde el panel de control de Blogger.
    • title='Business': El título que se mostrará en la página, en este caso "Business".
    • type='HTML': El widget es de tipo HTML, lo que significa que puedes personalizar su contenido directamente con código HTML.
    • visible='true': El widget será visible en el blog.

  2. <b:widget-settings>

    • Contiene las configuraciones específicas del widget.

  3. <b:widget-setting name='content'>Marketing/feat-big</b:widget-setting>

    • El ajuste name='content' especifica que el contenido del widget está relacionado con la categoría Marketing, y utiliza un estilo o diseño denominado "feat-big".
    • La categoría Marketing hace referencia a publicaciones etiquetadas con esa palabra, y "feat-big" podría ser una clase o un diseño especial (definido por el tema o el CSS de tu plantilla) que resalta las publicaciones de forma más llamativa.

  4. <b:includable id='main'>

    • Define una plantilla reutilizable dentro del widget.

  5. <b:include name='widget-title'/>

    • Incluye el título del widget (en este caso, "Business").

  6. <div class='widget-content'>

    • Contenedor que alberga el contenido dinámico del widget, que en este caso está relacionado con la categoría "Marketing".

  7. <data:content/>

    • Inserta el contenido dinámico generado por Blogger, que proviene de las publicaciones etiquetadas como "Marketing" y renderizadas con el estilo "feat-big".

Funcionalidad:

Este widget muestra las publicaciones de la categoría Marketing en tu blog de Blogger, y las presenta con un diseño o estilo especial llamado "feat-big". El contenido se genera automáticamente desde las publicaciones etiquetadas como "Marketing".

Cómo reutilizar el código en otro blog de Blogger:

  1. Copia el código completo y pégalo dentro de la plantilla HTML de tu blog de Blogger, preferentemente en la sección de widgets o en un área donde desees que se muestre.

  2. Personalización del contenido:

    • Categoría: Si deseas mostrar otra categoría, cambia Marketing por cualquier otra etiqueta que estés utilizando en tu blog. Ejemplo: Tecnología/feat-big.
    • Estilo: El término "feat-big" probablemente sea una clase o un diseño especial en el tema de tu blog. Si el tema de tu nuevo blog no tiene esta clase, puedes adaptarlo o eliminarlo para utilizar el estilo predeterminado.

  3. Título del widget:

    • Cambia el valor del atributo title='Business' por el título que prefieras mostrar. Ejemplo: title='Tecnología'.

  4. Agregar desde el panel de administración:

    • Una vez agregado, podrás editar el widget desde el panel de control de Blogger, ya que no está bloqueado (locked='false').

Conclusión:

Este widget es útil para destacar publicaciones de una categoría específica en Blogger con un diseño especial. Puedes reutilizarlo en otro blog simplemente cambiando la categoría y el estilo según tus necesidades, y asegurándote de que el tema del nuevo blog soporte la estructura de diseño que usa.


Widget: grid-small

<b:widget id="HTML13" locked="false" title="Desarrollo web" type="HTML" visible="true">
    <b:widget-settings>
        <b:widget-setting name="content">3/Desarrollo web/grid-small</b:widget-setting>
    </b:widget-settings>
    <b:includable id="main">
        <b:include name="widget-title" />
        <div class="widget-content">
            <data:content />
        </div>
    </b:includable>
</b:widget>

Este código define un widget HTML en Blogger que muestra publicaciones relacionadas con la categoría "Desarrollo web". Aquí te explico cada parte de manera concisa:

  1. <b:widget id='HTML13' locked='false' title='Desarrollo web' type='HTML' visible='true'>

    • <b:widget>: Etiqueta específica de Blogger para crear un widget.
    • id='HTML13': Identificador del widget.
    • locked='false': Indica que el widget no está bloqueado, por lo que puedes editarlo o eliminarlo desde el panel de Blogger.
    • title='Desarrollo web': Título del widget, que se mostrará en la página.
    • type='HTML': Indica que este widget es de tipo HTML, lo que significa que muestra contenido HTML personalizado.
    • visible='true': Hace que el widget sea visible en el blog.

  2. <b:widget-settings>

    • Contiene la configuración del widget.

  3. <b:widget-setting name='content'>3/Desarrollo web/grid-small</b:widget-setting>

    • Define que el contenido del widget mostrará 3 publicaciones de la etiqueta "Desarrollo web" con un diseño de cuadrícula pequeña (grid-small).

  4. <b:includable id='main'>

    • Define una sección de contenido reutilizable dentro del widget.

  5. <b:include name='widget-title'/>

    • Muestra el título del widget ("Desarrollo web") en el blog.

  6. <div class='widget-content'>

    • Contenedor para el contenido dinámico del widget, en este caso, las publicaciones que cumplen con el filtro de la etiqueta "Desarrollo web".

  7. <data:content/>

    • Aquí Blogger inserta automáticamente el contenido relacionado (las publicaciones recientes bajo la etiqueta "Desarrollo web").

Reutilización en otro blog de Blogger:

Para reutilizar este widget en otro blog de Blogger, sigue estos pasos:

  1. Copia el código y pégalo en la plantilla HTML de tu blog de Blogger, preferiblemente dentro de una sección o lugar donde quieras que se muestre el widget.

  2. Modificación de la etiqueta:

    • Si deseas mostrar publicaciones relacionadas con una etiqueta diferente, cambia "Desarrollo web" en esta línea: 
      • <b:widget id="HTML13" locked="false" title="Desarrollo web" type="HTML" visible="true">
    • Reemplaza "Desarrollo web" por la etiqueta de tu elección.
      Ejemplo: Si deseas mostrar publicaciones etiquetadas como "tecnología", sería: 
      • <b:widget-setting name= 'content' > 3/tecnología/grid-small </b:widget-setting>
  3. Ajuste del número de publicaciones:
    • Si deseas mostrar más o menos de 3 publicaciones, cambia el número 3 en esta línea:
      • <b:widget-setting name='content'>3/Desarrollo web/grid-small</b:widget-setting>

  4. Diseño:

    • El diseño en cuadrícula pequeña está definido por grid-small. Puedes cambiar este valor para ajustar el diseño, como por ejemplo list para una lista en lugar de una cuadrícula.

  5. Personalización desde el panel de administración:

    • Este código genera un widget editable en el panel de Blogger, por lo que puedes cambiar el contenido o eliminar el widget desde el Diseñador de Blogger sin modificar el HTML directamente.
    • Este widget es ideal para mostrar una sección de publicaciones destacadas por etiqueta en tu blog de manera visualmente organizada.


Widget: "Mini Carousel"

<b:widget id="HTML15" locked="false" title="Mini Carousel" type="HTML" visible="true">
    <b:widget-settings>
        <b:widget-setting name="content">5/Informática/mini-slide</b:widget-setting>
    </b:widget-settings>
    <b:includable id="main">
        <b:include name="widget-title" />
        <div class="widget-content">
            <data:content />
        </div>
    </b:includable>
</b:widget>

Este código en Blogger genera un widget HTML que muestra un "Mini Carousel" o carrusel de diapositivas basado en las publicaciones de una categoría o etiqueta específica.

  1. <b:widget id="HTML15" ...>

    • Define un widget en Blogger con el ID HTML15.
    • title="Mini Carousel": El título que se mostrará en la interfaz del blog es "Mini Carousel".
    • type="HTML": Es un widget de tipo HTML, lo que permite personalizar el contenido directamente con código HTML.

  2. <b:widget-settings>

    • Esta sección contiene los ajustes del widget.
    • <b:widget-setting name="content">5/Informática/mini-slide</b:widget-setting>: Muestra un carrusel de publicaciones basado en la etiqueta "Informática", limitando el contenido a las 5 publicaciones más recientes que tienen esta etiqueta. El formato 5/Informática/mini-slide significa:
      • 5: Número de publicaciones a mostrar.
      • Informática: La etiqueta/categoría de las publicaciones a incluir.
      • mini-slide: Posible nombre del estilo o plantilla a aplicar para mostrar las publicaciones en formato de carrusel.

  3. <b:includable id="main">

    • Define una plantilla reutilizable para el widget.

  4. <b:include name="widget-title" />

    • Inserta el título del widget "Mini Carousel" que se definió anteriormente.

  5. <div class="widget-content">

    • Este div es el contenedor donde se muestra el contenido dinámico del widget. En este caso, las publicaciones más recientes etiquetadas como "Informática".

  6. <data:content />

    • Inserta el contenido dinámico del widget. En este caso, muestra las publicaciones de la etiqueta "Informática" en formato de carrusel.

¿Cómo reutilizarlo en otro blog de Blogger?

  1. Copia el código y pégalo en el HTML de la plantilla de tu blog de Blogger o agrégalo como un widget HTML/Javascript desde el panel de "Diseño" de Blogger.

  2. Personalización:

    • Modificar la etiqueta: Cambia "Informática" por la etiqueta de tu preferencia. Si tu blog utiliza una categoría o etiqueta diferente, asegúrate de sustituir "Informática" por esa etiqueta.
    • Cambiar el número de publicaciones: Cambia el número 5 para mostrar más o menos publicaciones en el carrusel.
    • Modificar el estilo: Si tienes diferentes plantillas o estilos para mostrar el carrusel, puedes cambiar "mini-slide" por otra plantilla disponible en tu tema de Blogger, o ajustarlo mediante CSS si es necesario.

  3. Configurar el CSS:

    • Si el carrusel requiere un estilo específico, asegúrate de tener el CSS adecuado en la plantilla de Blogger o agregar un CSS personalizado que dé formato al mini-slide.

  4. Verificar la funcionalidad:

    • Si el carrusel requiere de scripts adicionales, como un JavaScript que controle el desplazamiento de las diapositivas, asegúrate de que estén incluidos en la plantilla del blog o agregarlos en la sección de head o body del código.

Al reutilizar este código, puedes ajustarlo para mostrar publicaciones de diferentes categorías, y el formato de carrusel lo hará más atractivo y visualmente dinámico en tu blog de Blogger.


....