WEBYBLOG Template Blogger Documentacion

GUÍA DE CONFIGURACIÓN & SHORTCODES

Manual completo para personalizar menús, redes sociales, widgets de feeds y elementos multimedia en tu plantilla de Blogger.

1. Video Tutorial e Introducción

Visualiza el siguiente video para comprender el funcionamiento general y los puntos clave de personalización de la plantilla antes de aplicar los códigos:

Configuración inicial del Menú Lateral:

Para modificar los accesos del menú lateral, accede al panel de Blogger, dirígete a Tema > Editar HTML y busca el siguiente bloque de códigos:

  1. Busca el fragmento con los enlaces del menú lateral en el editor XML de tu plantilla.
  2. Reemplaza el símbolo # por las rutas o enlaces URL de destino de tus categorías.
  3. Si deseas que un enlace apunte directamente a una etiqueta específica de Blogger, utiliza la estructura: /label/nombre-etiqueta?&max-results=9
  <a href='#' itemprop='url'><i class='fa-regular fa-star-half-stroke'/> Emprendimiento</a>
  <a href='#' itemprop='url'><i class='fa-solid fa-cube'/> Ilustración</a>
  <a href='#' itemprop='url'><i class='fa-regular fa-file-lines'/> Estilo de vida</a>
  <a href='#' itemprop='url'><i class='fa-solid fa-bullhorn'/> Marketing</a>
  <a href='#' itemprop='url'><i class='fa-regular fa-clone'/> Coleccionables</a>

2. Botones de WhatsApp, Contacto y Redes Sociales

Actualiza los canales de comunicación y perfiles sociales buscando sus respectivos fragmentos en el código HTML de la plantilla:

  • WhatsApp: Modifica TU_NUMERO_AQUI ingresando tu código de país y número telefónico dentro del enlace de mensajería.
  • Página de Contacto: Reemplaza la ruta /p/contact-us.html por el enlace de tu formulario interno o canal externo.
  • Redes Sociales: Sustituye las cadenas en mayúsculas (YOUR-FACEBOOK-URL, YOUR-TWITTER-URL, etc.) con los enlaces oficiales de tus perfiles.
  <li><a class='btn-whatsapp' href='https://wa.me/TU_NUMERO_AQUI?text=Hola,%20visité%20tu%20blog%20y%20quiero%20más%20información' rel='noopener' target='_blank'><i class='fa-brands fa-whatsapp'/> Whatsapp</a></li>
  <li><a class='btn-contacto' href='/p/contact-us.html'><i class='fa-solid fa-envelope'/> Contacto</a></li>

3. Configuración del Slider y Menús de Pie

Para controlar los elementos dinámicos superiores y la navegación secundaria del sitio, aplica las siguientes pautas de personalización:

NOTA DE ETIQUETA: En el script del slider, puedes cambiar la palabra juegos por cualquier otra categoría o etiqueta de tu blog para filtrar de forma automática las publicaciones destacadas.

Script de llamada para el Slider:

    <script src='/feeds/posts/summary/-/juegos?published&amp;alt=json-in-script&amp;start-index=1&amp;max-results=8&amp;callback=postshow'/>

Para el menú de pie de página, dirígete a la sección Tema > Diseño de tu panel de Blogger, ubica el gadget correspondiente y configura los enlaces de forma visual.

4. Shortcodes para Entradas y Páginas

4.1 Contenedor Responsive para Videos de YouTube:

Utiliza este bloque en modo HTML al redactar entradas para incrustar reproductores adaptables cambiando únicamente el ID del video:

<div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/q5dci7fbUio" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="true"></iframe>
</div>

4.2 Botones de Demostración y Descarga:

Inserta este fragmento para habilitar botones duales estilizados en tus artículos de descargas o recursos:

<div style="text-align: center; margin: 30px 0;">
  <div class="button" style="display: inline-flex; gap: 15px;">
    <a class="demo" href="TU-LINK-AQUI" rel="nofollow" target="_blank">DEMOSTRACION</a>
    <a class="download" href="TU-LINK-AQUI" rel="nofollow" target="_blank">DESCARGAR</a>
  </div>
</div>

❓ ¿Necesitas asistencia técnica adicional? Consulta nuestros canales de ayuda oficial o comunícate mediante nuestro soporte directo.

COMENTARIOS