Breaking News para Blogger con un solo widget - Nueva versión

Breaking News para Blogger con un Solo Widget - Tutorial Completo

¿Quieres añadir una barra de noticias dinámica a tu blog de Blogger? ¡Estás en el lugar correcto! Con este tutorial para crear una barra de noticias en Blogger, te mostraré cómo implementar un widget de "Breaking News" moderno, responsivo y sin complicaciones. Lo mejor: todo en un solo bloque de código.

¿Por Qué Usar Este Widget de Breaking News?

Este widget es una solución ideal para destacar tus últimas publicaciones. Sus características lo hacen único:

• Sin dependencias externas: Utiliza la API JSON de Blogger, garantizando estabilidad y modernidad.
• Fijo y responsivo: Se mantiene en la parte superior al hacer scroll y se adapta a móviles, tablets y escritorios.
• Fácil instalación: Solo copia y pega el código en un gadget de HTML/Javascript.
• Posicionamiento automático: Gracias a CSS moderno, siempre estará en la cima de tu página.

A continuación puede ver su demostración en el siguiente blog de demos

Demo Clic aquí

Código del Widget de Breaking News

A continuación, te proporcionamos el código completo. Cópiarlo y pégalo en un gadget de HTML/Javascript en tu blog:

<!-- Breaking News Ticker by Blogger Expert -->
<style>
  /* Estilos base para todos los dispositivos */
body,
.header-wrapper {
  margin-top: 44px;      
}
  
  /* --- Estilos para la barra de noticias --- */
  #breaking-news-bar-container {
    /* Posicionamiento Fijo y en la parte superior */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* Asegura que esté por encima de otros elementos */
    
    /* Estilos visuales */
    background: linear-gradient(90deg, #FBC7D4 0%, #9796F0 100%);
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif;
    
    /* Ocultar hasta que el contenido esté listo para evitar parpadeos */
    display: none; 
  }

  /* Efecto de gradiente animado */
  #breaking-news-bar-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgb(255, 65, 108) 0%, rgb(255, 75, 43) 100%);
    animation: 6s linear 0s infinite normal none running rainbow;
    z-index: 0;
  }
  @keyframes rainbow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

  .breaking-news-bar {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1200px; /* Ancho máximo para pantallas grandes */
    margin: 0 auto; /* Centrar la barra */
    height: 40px; /* Altura de la barra */
    overflow: hidden; /* Oculta el contenido que se desborda */
  }

  .news-label {
    flex-shrink: 0; /* Evita que la etiqueta se encoja */
    background-color: #d32f2f; /* Color de fondo para la etiqueta */
    color: #ffffff;
    font-weight: bold;
    font-size: 14px;
    padding: 0 15px;
    height: 100%;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    position: relative;
  }

  .news-content {
    flex-grow: 1; /* Ocupa el espacio restante */
    overflow: hidden; /* Crucial para el efecto marquee */
    white-space: nowrap; /* Evita que los elementos se partan en varias líneas */
  }

  .news-ticker {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block; /* Permite la animación de desplazamiento */
    padding-left: 100%; /* Inicia el texto fuera de la pantalla a la derecha */
    animation: marquee-animation 30s linear infinite; /* Duración de la animación */
  }
  
  /* Pausar la animación al pasar el ratón por encima */
  .news-ticker:hover {
    animation-play-state: paused;
  }

  .news-ticker li {
    display: inline-block; /* Muestra los elementos en una sola línea */
    margin: 0 25px;
    font-size: 14px;
  }

  .news-ticker li a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .news-ticker li a:hover {
    color: #ffffff;
    text-decoration: underline;
  }

  /* --- Animación de desplazamiento (Marquee) --- */
  @keyframes marquee-animation {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
</style>

<div id="breaking-news-bar-container">
  <div class="breaking-news-bar">
    <span id="breaking-news-label" class="news-label"></span>
    <div class="news-content">
      <ul id="breaking-news-ticker" class="news-ticker">
        <!-- Las noticias se cargarán aquí con JavaScript -->
      </ul>
    </div>
  </div>
</div>

<script>
//<![CDATA[
(function() {
  
  // --- CONFIGURACIÓN ---
  // Cambia los siguientes valores según tus necesidades
  
  // 1. URL de tu blog de Blogger (sin http o https)
  const blogURL = "ayudadeblogger.com"; 
  
  // 2. Número máximo de entradas a mostrar
  const maxPosts = 10;
  
  // 3. Etiqueta que quieres mostrar en la barra
  const newsLabelText = "Noticias";

  // --- FIN DE LA CONFIGURACIÓN ---

  // Construye la URL de la API JSON de Blogger
  const feedURL = `https://${blogURL}/feeds/posts/default?alt=json-in-script&max-results=${maxPosts}&callback=showBreakingNews`;

  // Función que se ejecutará cuando los datos del feed se carguen
  window.showBreakingNews = function(json) {
    const ticker = document.getElementById('breaking-news-ticker');
    const container = document.getElementById('breaking-news-bar-container');
    const label = document.getElementById('breaking-news-label');
    let html = '';

    if (json.feed && json.feed.entry) {
      const entries = json.feed.entry;

      for (let i = 0; i < entries.length; i++) {
        const entry = entries[i];
        const postTitle = entry.title.$t;
        let postLink = '';

        // Buscar el enlace correcto de la entrada
        for (let j = 0; j < entry.link.length; j++) {
          if (entry.link[j].rel === 'alternate') {
            postLink = entry.link[j].href;
            break;
          }
        }
        
        if (postTitle && postLink) {
          html += `<li><a href="${postLink}" target="_blank">${postTitle}</a></li>`;
        }
      }
      
      // Si se generaron noticias, las añadimos y mostramos la barra
      if (html) {
        label.textContent = newsLabelText;
        ticker.innerHTML = html;
        container.style.display = 'block'; // Mostramos la barra
      }
    }
  };

  // Crea y añade el script al documento para cargar el feed
  const script = document.createElement('script');
  script.src = feedURL;
  document.body.appendChild(script);

})();
//]]>
</script>
        

Cómo Instalar la Barra de Noticias en Blogger

Paso a Paso para Configurar el Widget

1. Accede al panel de Diseño en tu blog de Blogger.
2. Selecciona una sección (recomiendo sidebar-top o la cabecera).
3. Añade un gadget de HTML/Javascript.
4. Deja el título en blanco y pega el código proporcionado en el campo de contenido.
5. Guarda el gadget y arrástralo al inicio de la lista para una carga óptima.
6. Haz clic en Guardar para aplicar los cambios.

Personaliza Tu Barra de Noticias

En la sección de configuración del código, ajusta:

• blogURL: Aquí debes poner la URL de tu blog sin http:// ni https://. Por ejemplo, si tu blog es miincreibleblog.blogspot.com, pones "miincreibleblog.blogspot.com". He dejado el del ejemplo original. (ej. "miincreibleblog.blogspot.com").
• maxPosts: Define cuántos titulares mostrar.
• newsLabelText: Cambia "Noticias" por "Última Hora" o lo que prefieras.

Conclusión

Con este widget de noticias para Blogger, tu blog lucirá profesional y mantendrás a tus lectores informados. ¡Pruébalo y lleva tu sitio al siguiente nivel!

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Breaking News para Blogger

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.