Módulo personalizado para Blogger

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.

Los shortcodes de NichoClean permiten insertar módulos dinámicos reutilizables mediante fragmentos de código que la plantilla detecta y transforma automáticamente.

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"><i class='fas fa-search' aria-hidden='true'></i></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>

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>

Reservar espacio para shortcodes (250px)


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