Breaking news para Blogger utilizando el Feed del blog

Breaking News para Blogger: Guía Completa con Feed del Blog

¡Hola, bloggers! ¿Quieres darle un toque dinámico a tu blog con una barra de noticias de última hora? Con esta guía completa para agregar un news ticker en Blogger, transformarás tu sitio en un espacio moderno y atractivo. Usando el feed del blog con la API JSON de Blogger, este widget es fácil de instalar, responsivo y sin dependencias externas. ¡Vamos a ello!

¿Qué es el News Ticker para Blogger?

Un news ticker es una barra que muestra las últimas entradas de tu blog en tiempo real. Este widget se fija en la parte superior, es responsivo para móviles, tablets y escritorios, y usa CSS moderno para un posicionamiento automático. ¡Lo mejor? Solo necesitas copiar y pegar el código.

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

Demo Clic aquí

Cómo Instalar el Breaking News en Blogger

Paso 1: Accede a tu Panel de Blogger

Dirígete al panel de control de Blogger, selecciona tu blog y ve a Diseño. Añade un nuevo gadget de HTML/JavaScript en la parte superior.

Paso 2: Copia el Código

Copia el siguiente código, reemplaza la URL https://www.ayudadeblogger.com/ con la de tu blog y pégalo en el gadget. Este código utiliza la API JSON de Blogger para cargar automáticamente tus últimas entradas.

<div class="contenedor-news-ticker">
  <div id='breakingwrapper'>
   <div id='breakingnews'>
     <span class='tulisbreaking'>News Update</span>
      <div id='recentbreaking'>Loading...</div>
      <div class='blog-date'>
         <script language='Javascript'>
            var dayName = new Array("Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado");
            var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
            var now = new Date();
            document.write("" + " " + dayName[now.getDay()] + "," + " " + now.getDate() + " " + monName[now.getMonth()] + "");
         </script>
      </div>
   </div>
</div>
</div>

<style>
/* Estilos base para todos los dispositivos */
body,
.header-wrapper {
  margin-top: 44px;      
}
.contenedor-news-ticker {
    /* 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 */
    width: 100%;
    margin: auto;
    box-shadow: 0 4px 40px -8px rgb(0, 51, 98);
}
/* Breaking News */
#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;overflow:hidden;border-radius:5px;box-shadow:0 2px 3px -2px rgba(0,0,0,0.1)}#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:42px;height:42px;overflow:hidden;font-size:13px;padding:0}#breakingnews .tulisbreaking{background:#e74c3c;color:#fff;display:block;padding:0 15px;font-size:13px;font-weight:600;height:28px;line-height:28px;float:left;margin: 8px 5px 4px 3px;text-align:center;border-radius:3px}#recentbreaking{float:left;margin:0;font-size:13px;color:#222;font-weight:600}#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#222;text-decoration:none}#recentbreaking li a:hover{color:#222;text-decoration:underline}.blog-date{display:inline-block;float:right;margin:0 20px 0 2px;font-size:13px;border-radius:2px;cursor:pointer}#recentbreaking li i{margin:0 10px 0 0}
@media screen and (max-width:768px) {
#breakingwrapper{background-color:#e74c3c;color:#fff;border-radius:0}#breakingnews{padding:0 20px;color:#fff;overflow:hidden;text-overflow:ellipsis}#recentbreaking{color:#fbc531;text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}#recentbreaking li a,#recentbreaking li a:hover{color:#fff}}
a.artikel {text-decoration:none;color:white;display:block;margin:auto;text-align:Center;font-weight:Bold}
</style>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">
//----------------------------Defaults
  $(document).ready(function(){var e="https://www.ayudadeblogger.com/",t=10;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentbreaking li:first").slideUp(function(){$(this).appendTo($("#recentbreaking ul")).slideDown()})}var n,r,a="",i=e.feed.entry;if(void 0!==i){a="<ul>";for(var l=0;l<i.length;l++){for(var s=0;s<i[l].link.length;s++)if("alternate"==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+='<li><i class="fa fa-check-square"></i><a href="'+n+'" target="_blank">'+r+"</a></li>"}a+="</ul>",$("#recentbreaking").html(a),setInterval(function(){t()},5e3)}else $("#recentbreaking").html("<span>No hay nada aqui?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});
</script>

Paso 3: Personaliza y Guarda

Guarda el gadget y verifica tu blog. La barra de noticias aparecerá fija en la parte superior, con un diseño moderno y adaptado a cualquier dispositivo.

Beneficios del Widget

- Fácil instalación: Solo copia y pega.
- Responsivo: Perfecto para móviles y escritorios.
- Sin dependencias externas: Usa la API de Blogger para estabilidad.
- Posicionamiento fijo: Siempre visible al hacer scroll.

¡Listo! Con este news ticker para Blogger, tus lectores estarán al día con tus publicaciones. ¡Pruébalo y dale vida a tu blog!

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.