Los Módulos personalizados para Blogger. Son shortcodes adaptados y personalizados exclusivamente para blogger, es decir, fragmentos abreviados de HTML (un <div> con clase y atributo data-code) que un código JavaScript detecta y reemplaza automáticamente con contenido dinámico. Funcionan como módulos reutilizables dentro del blog, facilitando la inserción y gestión de funcionalidades complejas con un solo clic. Aquí tienes algunos ejemplos listos para implementar fácilmente.

Slider de entradas


<div class="galeria-feed slider" data-etiqueta="demo" data-cantidad="6"></div>

Cluster de imágenes


<div class="galeria-feed cluster" data-etiqueta="demo" data-cantidad="6"></div>

Card de entradas


<div class="galeria-feed card" data-etiqueta="demo" data-cantidad="3"></div>

Lista de entradas


<div class="galeria-feed lista" data-etiqueta="demo" data-cantidad="4"></div>

Galería Tooltip


<div class="galeria-feed tooltip" data-etiqueta="demo" data-cantidad="6"></div>

Galeria Masonry


<div class="galeria-feed masonry" data-etiqueta="demo" data-cantidad="6"></div>

Galería Horizontal


<div class="galeria-feed horizontal" data-etiqueta="demo" data-cantidad="4"></div>

Galería Grid


<div class="galeria-feed lightbox" data-etiqueta="demo" data-cantidad="6"></div>

Caja de Autor personalizable

 <div class="autor-post" data-autor=""></div>

Tabla de contenido

<div id="toc-marker"></div>

Bloque de código

<pre><code>
// Ejemplo de código en JavaScript
function saludar() {
  console.log("Hola Mundo");
}
</code></pre>

Entradas relacionadas


<div class="feed-text" data-variant="grid" data-tag="demo" data-max="3"></div>

Lecturas recomendadas


<div class="feed-text" data-variant="alternate" data-tag="demo" data-max="3"></div>

Enlaces útiles


<div class="feed-text" data-variant="titles" data-tag="demo" data-max="6"></div>

Anuncios Adsense


<!-- Gadget index 1 -->
<div class="adsense-shortcode" data-code="adsense-index-1"></div>
<!-- algún listado de posts -->
<div class="adsense-shortcode" data-code="adsense-index-2"></div>
<!-- titulo de post -->
<div class="adsense-shortcode" data-code="adsense-post-1"></div>
<!-- contenido post -->
<div class="adsense-shortcode" data-code="adsense-post-2"></div>

Catálogo de productos por etiqueta

<div class="nivel3" data-etiqueta="camiseta" data-cantidad="6"></div>

Catálogo de productos sin etiqueta

<div class="nivel3" data-etiqueta="" data-cantidad="6"></div>

Catálogo de productos

<div class="feed-catalogo" data-max="3"></div>

Tabla de productos destacados

Productos en misma etiqueta diferente precio (máximo 4)


<div class="tabla-productos" data-tema="camiseta" data-max="4"></div>

Productos en misma etiqueta mismo precio (máximo 3)


<div class="tabla-productos" data-tema="camiseta" data-precio="$59.99" data-max="3"></div>

Multimedia

Youtube


<div class="media-player" data-type="youtube" data-id="dQw4w9WgXcQ"></div>

Vimeo


<div class="media-player" data-type="vimeo" data-id="76979871"></div>

Mp4


<div class="media-player" data-type="mp4" data-src="https://www.w3schools.com/html/mov_bbb.mp4" data-poster="https://placehold.co/800x450.png?text=Video+MP4"></div>

Reproductor de audio HTML5


<div class="shortcode-audio" 
     data-src="https://example.com/mimusica.mp3" 
     data-title="Mi canción favorita">
</div>

Página de descarga

<div class="download-box" data-url="https://example.com/archivo.zip" data-time="10"></div>

Buscar en el blog con AJAX

<div class="post-header">
  <form class="search-box" id="ajax-search-form" action="/search" method="get">
    <input type="text" id="ajax-search-input" name="q" placeholder="Buscar..." aria-label="Buscar" required>
    <button type="submit" aria-label="Buscar">🔍</button>
  </form>
</div>

<!-- Contenedor de resultados dinámicos -->
<div id="search-results"></div>

Plugin Ultimos Comentarios Blogger/Disqus

<!-- Marcador: aquí se insertará el widget de comentarios -->
<div class="recent-comments-marker"></div>

Acordeón automático

<div class="acordeon-feed" data-etiqueta="demo" data-cantidad="6" data-aleatorio="true"></div>