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
- Entra a tu panel de Blogger
- Ve a "Diseño" → "Añadir un gadget"
- 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
ensetInterval(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:
- Usa palabras clave en los títulos de tus posts destacados
- Enlaza contenido relevante para mejorar la estructura de enlaces internos
- Mantén actualizadas las noticias mostradas
- 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!
Hola buenas, he seguido todos los pasos pero no me aparece el braking news en mi blog :(
ResponderEliminarhola 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
ResponderEliminarno 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/
ResponderEliminarHola 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.
EliminarPor 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.
me funciona mejor lo invio mi platillas pero pere me lo invias por correo
ResponderEliminarHola BEROMASYSTEM, es bueno saber que le dio solución. saludos.
Eliminarel otro url http://www.ayudadeblogger.com/... que falta
ResponderEliminarHola 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.
EliminarPara 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 == "item"'>
</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.