Como insertar un Breaking News en Blogger

📢 Cómo Insertar un Breaking News en Blogger con un Widget | Guía Definitiva

🌟 ¿Por Qué Usar un Widget Breaking News en tu Blog?

Un banner de noticias destacadas es esencial para blogs que publican contenido actualizado frecuentemente. Con este widget lograrás:

  • Captar la atención inmediata de tus visitantes
  • Destacar tus publicaciones más importantes
  • Mejorar la navegación con enlaces directos
  • Añadir dinamismo profesional sin afectar la velocidad

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

🚀 Cómo Insertar el Breaking News como Widget en Blogger

📌 Paso 1: Accede a la sección de Widgets

  1. Entra a tu panel de Blogger
  2. Ve a "Diseño""Añadir un gadget"
  3. Selecciona "HTML/JavaScript"

📌 Paso 2: Copia y Pega el Código Completo

Inserta este código optimizado en el widget:


<div id='breakingnews'>
  <span class='tulisbreaking'>ÚLTIMAS NOTICIAS</span>
  <div class='news-container'>
    <div id='recentpostbreaking'>Cargando noticias...</div>
  </div>
</div>

<style type='text/css'>
  /* Estilo principal del contenedor */
  #breakingnews {
    background: linear-gradient(90deg, #1a2a6c, #b21f1f, #fdbb2d);
    color: white;
    padding: 12px 15px;
    border-radius: 8px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
  }
  
  /* Efecto de gradiente animado */
  #breakingnews::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
      rgba(255,255,255,0) 0%, 
      rgba(255,255,255,0.2) 50%, 
      rgba(255,255,255,0) 100%);
    animation: shine 3s infinite;
    z-index: 0;
  }
  
  @keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  
  /* Estilo del título "Breaking News" */
  #breakingnews .tulisbreaking {
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 15px;
    flex-shrink: 0;
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
  
  /* Contenedor de noticias */
  .news-container {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    height: 25px;
    z-index: 1;
  }
  
  #recentpostbreaking {
    position: absolute;
    white-space: nowrap;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  
  /* Estilo de la lista de noticias */
  #recentpostbreaking ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
  }
  
  #recentpostbreaking li {
    margin-right: 30px;
    opacity: 0;
    position: absolute;
    right: 0;
    transform: translateX(100%);
    transition: none;
  }
  
  #recentpostbreaking li.active {
    position: relative;
    opacity: 1;
    transform: translateX(0);
    transition: all 0.5s ease-in-out;
  }
  
  #recentpostbreaking li.exiting {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.5s ease-in-out;
  }
  
  #recentpostbreaking a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  }
  
  #recentpostbreaking a:hover {
    color: #fffc00;
    text-decoration: underline;
  }
  
  /* Indicador de noticias (opcional) */
  .news-indicator {
    display: flex;
    gap: 5px;
    margin-left: 15px;
  }
  
  .news-indicator span {
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    display: block;
  }
  
  .news-indicator span.active {
    background: white;
  }
</style>

<script type='text/javascript'>
//<![CDATA[
(function() {
  var recentPostsContainer = document.getElementById('recentpostbreaking');
  var maxPosts = 5; // Número máximo de posts a mostrar
  var currentIndex = 0;
  var newsItems = [];
  var intervalId = null;
  
  // Función para mostrar las noticias
  function displayPosts(posts) {
    if (!posts || posts.length === 0) {
      recentPostsContainer.innerHTML = '<span>No hay noticias recientes</span>';
      return;
    }
    
    // Limpiar el contenedor
    recentPostsContainer.innerHTML = '';
    
    // Crear lista
    var ul = document.createElement('ul');
    newsItems = [];
    
    // Crear elementos de noticias
    posts.forEach(function(post, index) {
      var li = document.createElement('li');
      var a = document.createElement('a');
      a.href = post.url;
      a.textContent = post.title;
      a.target = '_blank';
      li.appendChild(a);
      ul.appendChild(li);
      newsItems.push(li);
      
      // Mostrar el primer item
      if (index === 0) {
        li.classList.add('active');
      }
    });
    
    recentPostsContainer.appendChild(ul);
    
    // Iniciar el carrusel si hay más de una noticia
    if (posts.length > 1) {
      startNewsCarousel();
    }
  }
  
  // Función para cambiar a la siguiente noticia
  function showNextNews() {
    // Salir si no hay items
    if (newsItems.length === 0) return;
    
    // Ocultar el item actual
    var currentItem = newsItems[currentIndex];
    currentItem.classList.remove('active');
    currentItem.classList.add('exiting');
    
    // Calcular el siguiente índice
    currentIndex = (currentIndex + 1) % newsItems.length;
    
    // Mostrar el nuevo item
    setTimeout(function() {
      currentItem.classList.remove('exiting');
      
      var nextItem = newsItems[currentIndex];
      nextItem.classList.add('active');
    }, 500);
  }
  
  // Iniciar el carrusel de noticias
  function startNewsCarousel() {
    // Limpiar intervalo anterior si existe
    if (intervalId) clearInterval(intervalId);
    
    // Cambiar de noticia cada 4 segundos
    intervalId = setInterval(showNextNews, 4000);
  }
  
  // Función principal para obtener las noticias
  function fetchPostsPrimary() {
    try {
      // Usar la API interna de Blogger si está disponible
      if (typeof _WidgetManager !== 'undefined' && 
          _WidgetManager._GetAllData && 
          _WidgetManager._GetAllData().blog && 
          _WidgetManager._GetAllData().blog.posts) {
        
        var blogPosts = _WidgetManager._GetAllData().blog.posts;
        var posts = blogPosts.slice(0, maxPosts).map(function(post) {
          return {
            url: post.url,
            title: post.title
          };
        });
        displayPosts(posts);
      } else {
        fetchPostsAlternative();
      }
    } catch (e) {
      console.error('Error:', e);
      recentPostsContainer.innerHTML = 'Cargando noticias...';
      fetchPostsAlternative();
    }
  }
  
  // Método alternativo usando el feed
  function fetchPostsAlternative() {
    var blogHomepageUrl = "<data:blog.homepageUrl/>";
    
    if (blogHomepageUrl === "" || blogHomepageUrl.startsWith("<data:")) {
      blogHomepageUrl = window.location.origin;
    }
    
    var feedUrl = blogHomepageUrl.replace(/^http:/, 'https:') + '/feeds/posts/default?alt=json&max-results=' + maxPosts;
    
    fetch(feedUrl)
      .then(function(response) {
        if (!response.ok) throw new Error('Error en la red');
        return response.json();
      })
      .then(function(data) {
        if (data.feed && data.feed.entry) {
          var posts = data.feed.entry.map(function(entry) {
            var postUrl = entry.link.find(function(link) {
              return link.rel === 'alternate';
            })?.href || '#';
            return {
              url: postUrl,
              title: entry.title.$t
            };
          });
          displayPosts(posts);
        } else {
          recentPostsContainer.innerHTML = 'No hay noticias disponibles';
        }
      })
      .catch(function(error) {
        console.error('Error:', error);
        recentPostsContainer.innerHTML = 'Error al cargar noticias';
      });
  }
  
  // Iniciar cuando el DOM esté listo
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', fetchPostsPrimary);
  } else {
    fetchPostsPrimary();
  }
})();
//]]>
</script>
        

💡 Nota importante: Este código está diseñado para funcionar en cualquier parte del blog al ser insertado como widget independiente.

🎨 Personalización Avanzada del Widget

🔧 Cambios Básicos

  • Texto del título: Edita ÚLTIMAS NOTICIAS por tu propio texto
  • Número de posts: Modifica var maxPosts = 5 según necesites
  • Velocidad: Ajusta 4000 en setInterval(showNextNews, 4000) (valor en milisegundos)

🎚️ Ajustes de Diseño Profesional

        
/* Cambia la paleta de colores del gradiente */
background: linear-gradient(90deg, #1a2a6c, #b21f1f, #fdbb2d);

/* Ajusta el estilo del texto */
#recentpostbreaking a {
  font-size: 15px; /* Tamaño de fuente */
  font-family: 'Roboto', sans-serif; /* Tipografía */
}
        

⚡ Optimización SEO para el Breaking News

Maximiza el impacto en buscadores con estos tips:

  1. Usa palabras clave en los títulos de tus posts destacados
  2. Enlaza contenido relevante para mejorar la estructura de enlaces internos
  3. Mantén actualizadas las noticias mostradas
  4. Aprovecha el rich snippet con schema markup (opcional)

❓ Preguntas Frecuentes

¿Funciona en móviles?

✅ Sí, el diseño es 100% responsive y se adapta a cualquier dispositivo.

¿Puedo mostrar más de 5 noticias?

¡Claro! Solo modifica var maxPosts = 5 por el número deseado.

¿Cómo cambio la posición del widget?

Simplemente arrastra el gadget en la sección "Diseño" de Blogger a tu ubicación preferida.

🔚 Conclusión

Ahora tienes un sistema de Breaking News profesional que:

  • Se instala en 2 minutos como widget
  • Muestra noticias con efectos visuales atractivos
  • Es totalmente personalizable
  • Mejora la experiencia de usuario

¿Viste lo fácil que fue? ¡No esperes más para darle ese toque profesional a tu blog! 🚀

¿Necesitas ayuda personalizada? ¡Déjame un comentario con tus dudas!

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



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.

Related post

Comentarios

8 comentarios:

  1. Hola buenas, he seguido todos los pasos pero no me aparece el braking news en mi blog :(

    ResponderEliminar
  2. hola que tal , ise todos los pasos y me aparecio el boton , pero siguio igual que como el que tiene, no aparecen las entradas... espero respuesta gracias... jordan-x5@hotmail.com www.elmillerourbano.com

    ResponderEliminar
  3. no me funciona en la pagina principal no sale pero en las entras siii yo quiero ponerlo en las pagina principal y las entradas ayuda por favorr https://fullprogramasmegapc.blogspot.pe/

    ResponderEliminar
    Respuestas
    1. Hola BEROMASYSTEM, gracias por escribir, con respecto a su pregunta, le he dejado el tutorial para que pueda mostrar el breaking news en la pagina principal y en sus entradas.

      Por favor desplacece con el maouse hacia abajo de este comentario y vera el tutorial que le deje en los comentarios de Discusión

      Me cuenta como le fue.

      Saludos.

      Eliminar
  4. me funciona mejor lo invio mi platillas pero pere me lo invias por correo

    ResponderEliminar
    Respuestas
    1. Hola BEROMASYSTEM, es bueno saber que le dio solución. saludos.

      Eliminar
  5. el otro url http://www.ayudadeblogger.com/... que falta

    ResponderEliminar
    Respuestas
    1. Hola Beromasystem, anteriormente vi que si instalo el breaking news en su blog, ademas tal como lo dice este tutorial, que el breaking news solo se mostrara en las entradas y no en la pagina principal.

      Para que se muestre también en la pagina principal solo es cuestión de eliminar los siguientes códigos y con ello se mostrara en la pagina principal.

      Por favor revise el tutorial y solo elimine los siguientes códigos:

      <b:if cond='data:blog.pageType == &quot;item&quot;'>



      </b:if>


      Notara que en todos los códigos que se encuentra en este tutorial, se encuentran los códigos que le deje, solo es cuestión de eliminarlos y vera que le funciona

      Saludos.

      Eliminar