Cómo Agregar Widget Últimas Noticias en Blogger Animado

La función principal de este widget es mostrar una lista de enlaces con los últimos artículos publicados dentro del blog, enlaces con diapositivas animadas en movimiento, es similar al widget de publicaciones reciente. También cuenta con un agregado especial de una fecha actual.

Para instalar este widget de últimas noticias animadas en blogger seguiremos los siguientes pasos.

1º Abrir Blogger / Tema / Editar HTML, aquí debemos agregar el siguiente código CSS arriba del código de cierre </head>

<style type='text/css'>
/* Breaking News */
#breakingwrapper{position:relative;background-color:#fff;color:#000;display:block;margin:0px auto 0 auto;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:7px 14px 0 7px;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}#recentbreaking li a:hover{color:#222;text-decoration:underline}.blog-date{display:inline-block;float:right;margin:0 20px 0 0;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;margin:10px auto 20px auto;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}}
</style>

2º A continuación en la misma opción Editar HTML, agregar el siguiente código script arriba del cierre </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://tutorialesgratisdeinternet.blogspot.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>There nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Cambiar el código marcado "https://tutorialesgratisdeinternet.blogspot.com/"con la dirección url de su blog y reemplace el número t=10 con el número de publicaciones que se desea mostrar en el widget últimas noticias del blog.

3º A continuación en la misma opción Editar HTML, debemos agregar el siguiente código widget debajo de la apertura <body> , buscando establecer este código en la parte de arriba del menú principal de la página.

<div id='breakingwrapper'>
   <div id='breakingnews'>
     <span class='tulisbreaking'>Nuevo<span class='breakhidden'/></span>
      <div id='recentbreaking'>Cargando...</div>
      <div class='blog-date'>
         <script language='Javascript'>
            var dayName = new Array("Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado");
            var monName = new Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Setiembre", "Octubre", "Noviembre", "Diciembre");
            var now = new Date();
            document.write("" + " " + dayName[now.getDay()] + "," + " " + now.getDate() + " " + monName[now.getMonth()] + "");
         </script>
      </div>
   </div>
</div>
<div class='clear'/>

Después de eso hacer clic en el botón guardar tema y listo, ya puede ver los resultados en su sitio web.

VER RESULTADO

9 comentarios

Dossier63/29/2020
Hola, vengo de ver tu último video en youtube, me gustaría que visitaras un trabajo que he hecho basado en plantillas blogger en esta página: https://tecnolisto.blogspot.com/. Saludos
ResponderBorrar
Respuestas
Dossier64/08/2020
Buen día, cómo se hace para que a la fecha le aparezca el año.
Agradezco tu ayuda. Gracias
ResponderBorrar
Respuestas
Susje7/15/2021
Bro, ¿como le puedo cambiar el color Naranjado por uno azul?, por este #1087ff
ResponderBorrar
Respuestas
Anónimo4/01/2022
Bro puedes hacer un nuevo video sobre este tema hasta te puedo pagar si
ResponderBorrar
Respuestas
Jorge luis6/15/2023
lo he echo y no me salen las entradas solo queda cargando ...
ResponderBorrar
Respuestas