Widget de entradas del blog de blogger

Widget de entradas del blog

<b:section class='main' id='main' maxwidgets='1' name='Main Posts' showaddelement='yes'>
          <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='commentLabel'>Comments</b:widget-setting>
              <b:widget-setting name='showShareButtons'>true</b:widget-setting>
              <b:widget-setting name='authorLabel'>by</b:widget-setting>
              <b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
              <b:widget-setting name='timestampLabel'/>
              <b:widget-setting name='reactionsLabel'/>
              <b:widget-setting name='showAuthorProfile'>true</b:widget-setting>
              <b:widget-setting name='style.layout'>1x1</b:widget-setting>
              <b:widget-setting name='showLocation'>false</b:widget-setting>
              <b:widget-setting name='showTimestamp'>false</b:widget-setting>
              <b:widget-setting name='postsPerAd'>1</b:widget-setting>
              <b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
              <b:widget-setting name='showDateHeader'>false</b:widget-setting>
              <b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting>
              <b:widget-setting name='showCommentLink'>false</b:widget-setting>
              <b:widget-setting name='style.urlcolor'>#ffffff</b:widget-setting>
              <b:widget-setting name='postLocationLabel'>Location:</b:widget-setting>
              <b:widget-setting name='showAuthor'>true</b:widget-setting>
              <b:widget-setting name='style.linkcolor'>#ffffff</b:widget-setting>
              <b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
              <b:widget-setting name='showLabels'>true</b:widget-setting>
              <b:widget-setting name='postLabelsLabel'>Tags</b:widget-setting>
              <b:widget-setting name='showBacklinks'>false</b:widget-setting>
              <b:widget-setting name='showInlineAds'>false</b:widget-setting>
              <b:widget-setting name='showReactions'>false</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main' var='this'>
<b:include name='homePostsHeadline'/>
              <b:include name='searchMessage'/>
              <div class='blog-posts hfeed container'>
                <b:class cond='data:view.isMultipleItems' name='index-post-wrap'/>
                <b:class cond='data:view.isSingleItem' name='item-post-wrap'/>
                <b:tag class='grid-posts' cond='data:view.isMultipleItems' name='div'>
                  <b:loop index='i' values='data:posts' var='post'>
                    <b:include data='post' name='postCommentsAndAd'/>
                  </b:loop>
                </b:tag>
              </div>
              <b:include cond='data:view.isMultipleItems' name='indexBlogPager'/>
              <b:include name='feedLinks'/>
<b:include name='messagesJs'/>
            </b:includable>

Este código en Blogger crea un widget de entradas del blog dentro de una sección, que muestra las publicaciones principales en una página. A continuación, te explico los componentes clave:

<b:section class='main' id='main' ...>
- Define una sección de Blogger donde se colocarán los widgets.
- id='main': Identificador único de esta sección.
- maxwidgets='1': Permite un máximo de un widget en esta sección.
- name='Main Posts': Nombre de la sección para identificarla en el panel de diseño de Blogger.
- showaddelement='yes': Permite agregar widgets desde el panel de administración de Blogger.
<b:widget id='Blog1' ...>
- Crea un widget de entradas del blog. Este es el widget predeterminado en Blogger para mostrar publicaciones.
- id='Blog1': Identificador del widget.
- locked='true': Indica que este widget está bloqueado para edición desde el panel de Blogger.
- title='Entradas del blog': Título del widget que aparecerá en la página.
- type='Blog': El tipo de widget es "Blog", lo que significa que mostrará entradas.
- version='2': Versión del widget que permite nuevas características.
<b:widget-settings>
- Contiene las configuraciones del widget. Las configuraciones ajustan cómo se muestran las entradas:
  - commentLabel: Texto para los comentarios, en este caso, "Comments".
  - showShareButtons: true permite mostrar botones de compartir en redes sociales.
  - authorLabel: Muestra el autor de las publicaciones con la etiqueta "by".
  - style.unittype: Configura el estilo de presentación como "TextAndImage" (texto con imagen).
  - showAuthorProfile: true muestra el perfil del autor.
  - style.layout: Define el layout como "1x1", una sola columna.
  - Otras configuraciones personalizan colores, etiquetas, visibilidad de elementos como fecha, etiquetas, enlaces de comentarios, etc.
<b:includable id='main'>
- Define la plantilla que se reutiliza para mostrar las entradas.
<b:include name='homePostsHeadline'/>
- Inserta el título de las publicaciones en la página principal.
<b:include name='searchMessage'/>
- Inserta un mensaje para la búsqueda, si es necesario.
<div class='blog-posts hfeed container'>
- Contenedor para las publicaciones del blog.
<b:loop index='i' values='data:posts' var='post'>
- Ciclo que recorre las publicaciones (data:posts) y muestra cada una.
- <b:include data='post' name='postCommentsAndAd'/>: Incluye los comentarios y la publicidad en las publicaciones.
<b:include cond='data:view.isMultipleItems' name='indexBlogPager'/>
- Inserta un paginador si hay múltiples publicaciones.
<b:include name='feedLinks'/>
- Inserta enlaces al feed RSS.
<b:include name='messagesJs'/>
- Inserta un script JavaScript necesario para mostrar los mensajes de Blogger.

¿Cómo reutilizarlo en otro blog de Blogger?

Copia el código completo y pégalo en la sección de HTML de la plantilla de tu blog de Blogger.
Verifica la estructura de tu plantilla:
- Asegúrate de que tu plantilla tenga una estructura compatible con secciones (<b:section>) y widgets (<b:widget>).
Personalización:
- Si deseas cambiar el título del widget, edita el atributo title='Entradas del blog'.
- Personaliza el número de publicaciones mostradas, el estilo y la disposición de los elementos (colores, etiquetas, botones de compartir) mediante los ajustes en <b:widget-settings>.
Configuración visual:
- Asegúrate de que tu plantilla tenga CSS adecuado para el diseño del blog y las publicaciones.
Ajustes adicionales:
- Si quieres mostrar las publicaciones en varias páginas o cambiar la forma en que se organizan (paginador, layout), puedes modificar los valores dentro de <b:widget-settings>.

Este código es totalmente reutilizable en cualquier blog de Blogger, siempre que la estructura básica de la plantilla soporte widgets y secciones.

Información sobre el autor, comentarios, backlinks

<b:includable id='aboutPostAuthor'>
              <div class='about-author'>
                <div class='avatar-container'>
                  <b:if cond='data:post.author.authorPhoto.image'>
                    <img class='author-avatar' expr:alt='data:post.author.name' expr:src='data:post.author.authorPhoto.image resizeImage 100'/>
                    <b:else/>
                    <img class='author-avatar' expr:alt='data:post.author.name' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjKCHyhwqgDuixaKxcLPPXBGYLZ-LIpGYo_T0jUacMOXN2toQTc9GBLOLJk4kZJUPiS_XDWKlAuQCN-D_54j4vc-UIzboSbKdWAJcyJRGotsJUzrWl1-8_mqV8PxM0aYuH9TTSqyTfxRSM/s100/avatar.png'/>
                  </b:if>
                </div>
                <h3 class='author-name'>
                  <span><data:messages.postedBy/></span><a expr:alt='data:post.author.name' expr:href='data:post.author.profileUrl' target='_blank'> <data:post.author.name/></a>
                </h3>
                <span class='author-description'><data:post.author.aboutMe/></span>
              </div>
            </b:includable>
            <b:includable id='addComments'>
              <a expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
                <b:message name='messages.postAComment'/>
              </a>
            </b:includable>
            <b:includable id='backLinks' var='post'>
              <b:comment>Disabled</b:comment>
            </b:includable>
            <b:includable id='blogThisShare'>
  <b:with value='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' var='onclick'>
    <b:include name='platformShare'/>
  </b:with>
</b:includable>

Este fragmento de código en Blogger está diseñado para mostrar información sobre el autor de la publicación, agregar un enlace a los comentarios, desactivar retroenlaces (backlinks), y compartir la publicación en redes sociales. Explicaré cada parte de forma precisa:

<b:includable id='aboutPostAuthor'>
- Este bloque crea un componente reutilizable con el ID aboutPostAuthor, que se refiere a la sección de información sobre el autor del post.
<div class='about-author'>
- Un contenedor que agrupa la información del autor del post.
Foto del autor:
- <b:if cond='data:post.author.authorPhoto.image'>: Si el autor tiene una foto asociada, se muestra con la etiqueta <img>.
- expr:src='data:post.author.authorPhoto.image resizeImage 100': Muestra la imagen del autor y la redimensiona a 100px.
- <b:else/>: Si no hay imagen del autor, muestra una imagen predeterminada (avatar.png).
Nombre del autor:
- <h3 class='author-name'>: Muestra el nombre del autor con un enlace a su perfil.
- <a expr:href='data:post.author.profileUrl' target='_blank'>: El nombre del autor enlaza a su perfil, abriendo en una nueva pestaña.
Descripción del autor:
- <span class='author-description'><data:post.author.aboutMe/></span>: Muestra una breve descripción del autor si está disponible en su perfil.

<b:includable id='addComments'>
- Componente que muestra un enlace a la sección de comentarios.
- <a expr:href='data:post.commentsUrl'>: Crea un enlace dinámico que apunta a la URL de los comentarios del post.

<b:includable id='backLinks'>
- Sección para los backlinks (retroenlaces) de la publicación.
- <b:comment>Disabled</b:comment>: Actualmente está desactivado con un comentario, lo que significa que esta función no está habilitada.

<b:includable id='blogThisShare'>
- Sección para compartir la publicación en redes sociales.
- <b:with value='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' var='onclick'>: Define el comportamiento para compartir en una ventana emergente con dimensiones específicas.
- <b:include name='platformShare'/>: Instrucción para incluir las opciones de compartir en plataformas sociales.

¿Cómo reutilizarlo en otro blog de Blogger?

Copiar el código y pegarlo en la plantilla de tu blog de Blogger, preferiblemente en la sección de publicaciones o en el lugar donde desees que aparezca la información sobre el autor, los comentarios y las opciones para compartir.
Ajustes personalizados:
- Estilo y clases: Puedes modificar las clases CSS, como author-avatar, author-name, y author-description, para que coincidan con el diseño de tu blog.
- Imagen predeterminada: Cambia la URL https://4.bp.blogspot.com/.../avatar.png si deseas usar una imagen predeterminada diferente para los autores sin foto.
- Descripción del autor: Si los autores de tu blog no tienen una descripción en su perfil, esta parte del código puede quedar vacía.
Compartir en redes sociales:
- Si quieres personalizar las opciones de compartir, asegúrate de revisar o modificar el bloque <b:include name='platformShare'/> para incluir los botones de las plataformas que prefieras.
Activar o desactivar Backlinks:
- Si deseas habilitar los retroenlaces (backlinks), elimina o modifica el comentario <b:comment>Disabled</b:comment> y agrega el código necesario para mostrar los backlinks.

Este código es fácil de reutilizar y ajustar según las necesidades de cualquier blog en Blogger, ya que hace uso de las funciones dinámicas que ofrece la plataforma para personalizar el contenido.

Parte inferior de una publicación

<!-- Post Footer Extras -->
<b:include data='post' name='postLabels' />
<b:include data='post' name='postReactions' />
<b:include data='post' name='postShareButtons' />
</b:includable>
<b:includable id='googlePlusShare'>
    <div class='goog-inline-block google-plus-share-container'>
        <g:plusone annotation='inline' expr:href='data:originalUrl.canonical.http' size='medium'
            source='blogger:blog:plusone' />
    </div>
</b:includable>
<b:includable id='headerByline' var='post'>
    <!-- Post Header Meta -->
    <div class='post-meta'>
        <b:include data='post' name='postAuthor' />
        <b:include data='post' name='postTimestamp' />
    </div>
</b:includable>
<b:includable id='homePageLink'>
    <b:comment>Disabled</b:comment>
</b:includable>
<b:includable id='homePostsHeadline'>
    <b:if cond='data:view.isHomepage'>
        <div class='home-posts-headline title-wrap Label'>
            <h3 class='title'>
                <data:messages.recentPosts />
            </h3>
            <a class='view-all' href='/search'>
                <data:messages.showMore />
            </a>
        </div>
        <div class='clearfix' />
    </b:if>
</b:includable>
<b:includable id='iframeComments' var='post'>
    <b:if cond='data:post.allowIframeComments'>
        <script expr:src='data:post.iframeCommentSrc' type='text/javascript' />
        <div class='cmt_iframe_holder' expr:data-href='data:post.url.canonical'
            expr:data-viewtype='data:post.viewType' />
        <b:if cond='!data:post.embedCommentForm'>
            <b:include data='post' name='commentsLink' />
        </b:if>
    </b:if>
</b:includable>
<b:includable id='indexBlogPager'>

Este código de Blogger incluye varios componentes reutilizables que se centran en la parte inferior de una publicación (footer), así como algunos elementos de metadatos y funcionalidades de la página principal. Estos componentes se pueden reutilizar para mejorar la interacción en cada post, mostrar metadatos, botones de compartir, y gestionar los comentarios de una manera estructurada.

Explicación detallada de cada bloque:

Post Footer Extras:
- <b:include data='post' name='postLabels'/>: Incluye las etiquetas asociadas a la publicación.
- <b:include data='post' name='postReactions'/>: Incluye las reacciones (me gusta o similares) para la publicación.
- <b:include data='post' name='postShareButtons'/>: Incluye los botones para compartir la publicación en redes sociales.
Google Plus Share:
- <b:includable id='googlePlusShare'>: Añade el botón de compartir en Google Plus.
  - Google Plus está descontinuado, por lo que este bloque se puede eliminar o actualizar con otra red social actual.
  - <g:plusone ...: Era el código usado para compartir en Google Plus.
Post Header Meta:
- <b:includable id='headerByline' var='post'>: Muestra los metadatos del autor y la fecha al principio de cada post.
  - <b:include data='post' name='postAuthor'/>: Muestra el nombre del autor.
  - <b:include data='post' name='postTimestamp'/>: Muestra la fecha y hora en que se publicó.
Home Page Link (Deshabilitado):
- <b:includable id='homePageLink'>: Este bloque está comentado o deshabilitado mediante <b:comment>Disabled</b:comment>, por lo que no tiene funcionalidad visible.
Home Posts Headline:
- <b:includable id='homePostsHeadline'>: Muestra un título y un enlace de "Ver más" para publicaciones recientes en la página principal.
  - <b:if cond='data:view.isHomepage'>: Este bloque se muestra solo si estás en la página principal.
  - <data:messages.recentPosts/>: Texto "Publicaciones Recientes".
  - <data:messages.showMore/>: Texto "Mostrar más", que enlaza con la página de búsqueda para ver más publicaciones.
Iframe Comments:
- <b:includable id='iframeComments' var='post'>: Incluye la opción de cargar comentarios en un iframe si está permitido en la configuración del post.
  - <b:if cond='data:post.allowIframeComments'>: Verifica si los comentarios en iframe están permitidos para la publicación.
  - <script expr:src='data:post.iframeCommentSrc' ...: Carga el iframe de comentarios.
  - <b:if cond='!data:post.embedCommentForm'>: Si el formulario de comentarios incrustado no está habilitado, se muestra un enlace a la sección de comentarios.
Index Blog Pager:
- <b:includable id='indexBlogPager'>: Aunque no se ve completo en este código, se trata de un paginador que permite navegar entre páginas de publicaciones del blog.

¿Cómo reutilizarlo en otro blog de Blogger?

Copiar el código:
- Inserta todo el código o solo las partes que necesites en la plantilla de tu otro blog. Ve a Diseño > Edición de HTML en el panel de Blogger para hacer las modificaciones.
Personalización:
- Etiquetas, reacciones y botones para compartir: Puedes ajustar o eliminar partes de estos elementos si no necesitas algunos de ellos. Blogger proporciona ajustes predeterminados para estos componentes, pero también puedes incluir o personalizar botones de compartir para otras redes sociales si lo prefieres.
- Metadatos del post: Personaliza el formato de la fecha o el nombre del autor según el estilo de tu blog.
- Comentarios en iframe: Si no quieres utilizar comentarios en iframe, puedes eliminar ese bloque de código o ajustarlo para usar el sistema de comentarios que prefieras.
Ajustes CSS:
- Asegúrate de tener un CSS adecuado en tu plantilla para dar formato a los elementos como la fecha, el autor, las etiquetas, y los botones de compartir. Si no tienes un estilo definido, los elementos podrían no verse correctamente.
Eliminar funcionalidades desactualizadas:
- Como Google Plus ya no existe, puedes reemplazar ese bloque por botones de compartir en redes sociales más actuales, como Facebook, Twitter, o LinkedIn.
Enlazar con el paginador:
- Si decides usar el paginador (indexBlogPager), asegúrate de que esté correctamente configurado en tu blog para facilitar la navegación entre las páginas de publicaciones.

Este código es útil para mejorar la interacción en las publicaciones de tu blog y asegurarte de que los lectores puedan comentar, compartir, y navegar fácilmente entre las publicaciones.

Uso de widget con codigo HTML

<b:if cond='data:view.isHomepage'>
      <!-- featured-posts-3 -->
    <div class='clearfix'/>
    <div class='featured-posts section' id='featured-posts-3' name='Featured Section 1'>
    
      <div class='widget HTML' data-version='2' id='HTML10'>
        <div class='widget-title'>
          <h3 class='title'>Food</h3>
        </div>
        <div class='widget-content'>3/Marketing/feat-list</div>
      </div>
      
      <div class='widget HTML' data-version='2' id='HTML6'>
        <div class='widget-title'>
          <h3 class='title'>Photography</h3>
        </div>
        <div class='widget-content'>6/Informática/grid-post</div>
      </div>
      
      <div class='widget HTML' data-version='2' id='HTML12'>
        <div class='widget-title'>
          <h3 class='title'>Nature</h3>
        </div>
        <div class='widget-content'>3/Cursos educativos/grid-small</div>
      </div>
    </div>
    <div class='clearfix'/>
    <!-- *** -->
</b:if>

Este código de Blogger muestra una sección de publicaciones destacadas en la página de inicio del blog. La funcionalidad está activada condicionalmente usando la etiqueta <b:if> para asegurarse de que solo se cargue cuando el usuario esté en la página principal.
1- Condición para la página de inicio: <b:if cond='data:view.isHomepage'> Este bloque asegura que la sección solo se muestre si el visitante está en la homepage (página principal) del blog.

 <b:if cond='data:view.isHomepage'>     <!-- lo que se muestra -->
</b:if>

2- Div contenedor featured-posts: Crea una sección con el ID featured-posts-3 para agrupar las publicaciones destacadas. Es un contenedor principal para varios widgets de publicaciones destacadas.

<div class='featured-posts section' id='featured-posts-3' name='Featured Section 1'>

3- Widgets de publicaciones destacadas: Dentro de este contenedor, hay tres widgets que presentan publicaciones relacionadas con diferentes temas:

Food (Marketing),
Photography (Informática),
Nature (Cursos educativos).

Cada uno de estos bloques tiene una estructura similar:

<div class='widget HTML' data-version='2' id='HTML10'>
   <div class='widget-title'>
      <h3 class='title'>Food</h3>
   </div>
   <div class='widget-content'>3/Marketing/feat-list</div>
</div>

<h3 class='title'>: El título del bloque de publicaciones (Food, Photography, Nature).
<div class='widget-content'>: El contenido del widget, que muestra las publicaciones de una categoría específica en diferentes formatos (feat-list, grid-post, grid-small).

Widgets adicionales:

Cada widget incluye contenido en formatos de listas o cuadrículas según el tipo especificado en widget-content:
- feat-list: Lista destacada.
- grid-post: Publicaciones en cuadrícula.
- grid-small: Cuadrícula pequeña.

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

Copiar y pegar el código:
- Copia todo el bloque de código y pégalo en el lugar adecuado dentro de la plantilla HTML del nuevo blog (en la sección donde deseas que aparezcan las publicaciones destacadas en la página principal).
Personalizar las categorías:
- Cambia los valores dentro de widget-content para que reflejen las categorías de tu nuevo blog. Ejemplos:
```
3/CategoríaNueva/feat-list
6/CategoríaNueva/grid-post
```
  - El número inicial (3, 6, etc.) define cuántas publicaciones mostrar.
  - Cambia "CategoríaNueva" por las categorías del nuevo blog.
Actualizar títulos:
- Cambia los títulos de las secciones (<h3 class='title'>) para que reflejen las temáticas del nuevo blog.
Estilos CSS:
- Si el nuevo blog tiene un estilo diferente, es posible que debas ajustar los estilos CSS para que la sección de publicaciones destacadas se vea bien en el diseño.

Con estos cambios, puedes reutilizar y adaptar fácilmente el código para que muestre publicaciones destacadas según el contenido del nuevo blog de Blogger.

Widget de entradas del blog de blogger

1- Widget de entradas del blog 👉