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.

Tabla de contenido


<div id="toc-container" class="toc-collapsed">
  <button id="toc-toggle" aria-expanded="false" aria-controls="toc">
    📑 Mostrar tabla de contenido
  </button>
  <nav id="toc" aria-label="Tabla de contenido" hidden></nav>
</div>

Reservar espacio para shortcodes (250px)


<div class="shortcode-container">      
<!-- Agrega aquí tu shortcode -->
</div>

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>

Tooltip con Miniatura


<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 id="autor-box" class="autor-box" data-autor="Juan Pérez"></div>

Bloque de código


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

Social Sharing


<!-- Compartir el post -->         
  <div class='custom-share-wrapper'>
  <h4 class='custom-share-title'>Compartir esta entrada</h4>
  <div class='custom-share'>
    <a expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url' target='_blank'>Facebook</a>
    <a expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url + "&text=" + data:post.title' target='_blank'>Twitter</a>
    <a expr:href='"mailto:?subject=" + data:post.title + "&body=Lee esto: " + data:post.url'>Email</a>
  </div>
</div>

Buscar en el blog


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

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>

Catálogo de productos


<div class="feed-catalogo" data-max="3"></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>

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>