Como insertar un Breaking News en Blogger
Muchos bloggers se preguntan siempre ¿Cómo
insertar un Breaking News en mi blog de Blogger de forma sencilla y sin
complicaciones? Bueno para esas personas que les gusta personalizar sus blogs y
convertirlos en un Diseño web profesional, les presento un nuevo truco para Blogger, con el cual tendrán la oportunidad de insertar un Breaking News en su
blog de Blogger de forma sencilla, claro que deberán seguir mis instrucciones
tal como lo voy a mostrar en este Tutorial de Blogger. Este Breaking News para Blogger
mostrara de forma automática sus 10 últimas publicaciones, y solo se mostrara arriba
de las entradas de su blog. Lo que vamos hacer es instalar los códigos dentro
del Editor HTML de nuestra plantilla. Tendremos que hacer un solo cambio e
insertar correctamente la dirección URL de nuestro blog para que funcione. El
Breaking News funciona perfectamente en todos los navegadores web como Firefox,
Google Chrome, Internet Explorer etc. Tiene una carga ligera y no le complicara
para nada a la estructura de su blog de Blogger.
Además, anteriormente di a conocer otros
dos tipos de Breaking News para Blogger de los cuales les dejo los enlaces:
Pueden ver su demostración en este blog,
justo abajo del menú principal
Les gusto verdad!
Vamos a trabajar
1 Ir a Blogger
2 Un clic en “Plantilla”
3 Luego un clic en “Editar HTML”
Ahora se te abrirá el editor HTML de tu
plantilla, se mostrara igual como la imagen que esta a continuación
En este punto deberás presionar la tecla
“Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador
integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que
insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación
mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en
tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al
momento que yo diga busca este código.
Primero les quiero indicar un ejemplo de
una estructura de una plantilla, en la cual quiero que ustedes se den cuenta
como está más o menos estructurado su plantilla. Esto les servirá para que
puedan visualizar perfectamente en donde debemos colocar nuestro código principal
Mire el ejemplo:
<body >
<div id='outer-wrapper'> <!—Tag
id outer-wrapper -->
<header id='header-wrapper'>
<!-- Tag header -->
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='Demo de Plantillas (Header)' type='Header'/>
</b:section>
</header> <!-- Tag end
header -->
<nav id='nav'> <!--
Tag navigasi -->
<ul>
<li><a href='/'>Inicio</a></li>
<li><a href='/'>Contactos</a></li>
<li><a href='/'>Documento</a></li>
<li><a href='/'>Inversiones
</a></li>
</ul>
</nav> <!-- tag end navigasi
-->
<div id='content-wrapper'> <!-- Tag content sidebar -->
<div id='main-wrapper'> <!-- Tag para postear y comentarr -->
<b:section
class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true'
title='Entradas del Blog'
type='Blog'/>
</b:section>
</div> <!-- Tag end
-->
<aside id='sidebar-wrapper'>
<!-- Tag sidebar -->
<b:section class='sidebar' id='sidebar'
preferred='yes'/>
</aside> <!-- Tag end sidebar
-->
</div> <!-- Tag end
sidebar -->
<footer id='footer-wrapper'><!--
Tag footer -->
<b:section class='footer' id='footer'/>
</footer><!-- Tag end footer
-->
</div> <!-- Tag end id
outer-wrapper -->
</body>
|
Busca cualquiera de estos dos códigos
<div id='main-wrapper'>
|
<div id='content-wrapper'>
|
Vamos a ubicar nuestro primer código debajo
de cualquiera de los dos códigos que hayas encontrado
<b:if cond='data:blog.pageType ==
"item"'>
<div id='beakingnews'><span
class='tulisbreaking'>Breaking News</span>
<div id='recentpostbreaking'>Cargando...</div>
</div>
</b:if>
|
Algunas plantillas no tienen estos códigos
de identificación, si no los encuentran le sugiero que inserten el primer código
justo arriba del código que está marcado de color rojo en mi ejemplo e
identifique con las Entradas del Blog, es por eso que puse el ejemplo anterior.
A continuación mire el ejemplo de cómo debería
estar insertado el primer código en su plantilla:
Recuerde que esto es un ejemplo y no
copie el código que les pongo a continuación
<body >
<div id='outer-wrapper'> <!—Tag
id outer-wrapper -->
<header id='header-wrapper'>
<!-- Tag header -->
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='Demo de Plantillas (Header)' type='Header'/>
</b:section>
</header> <!-- Tag end
header -->
<nav id='nav'> <!--
Tag navigasi -->
<ul>
<li><a href='/'>Inicio</a></li>
<li><a href='/'>Contactos</a></li>
<li><a href='/'>Documento</a></li>
<li><a href='/'>Inversiones
</a></li>
</ul>
</nav> <!-- tag end navigasi
-->
<div id='content-wrapper'> <!-- Tag content sidebar -->
<div id='main-wrapper'> <!-- Tag para postear y comentarr -->
<b:if
cond='data:blog.pageType == "item"'>
<div
id='beakingnews'><span class='tulisbreaking'>Breaking
News</span>
<div
id='recentpostbreaking'>Cargando...</div>
</div>
</b:if>
<b:section
class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true'
title='Entradas del Blog'
type='Blog'/>
</b:section>
</div> <!-- Tag end
-->
<aside id='sidebar-wrapper'>
<!-- Tag sidebar -->
<b:section class='sidebar' id='sidebar'
preferred='yes'/>
</aside> <!-- Tag end sidebar
-->
</div> <!-- Tag end
sidebar -->
<footer id='footer-wrapper'><!--
Tag footer -->
<b:section class='footer' id='footer'/>
</footer><!-- Tag end footer
-->
</div> <!-- Tag end id
outer-wrapper -->
</body>
|
Bueno, luego de explicar con claridad
esto vamos a buscar el siguiente código
Busca este código
</head>
|
Una vez que hayas encontrado el código
inserta las siguientes líneas justo arriba del código que encontraste
<b:if cond='data:blog.pageType ==
"item"'>
<style type='text/css'>
#beakingnews{line-height:25px;height:25px;background:#F7F7F7;overflow:hidden}
#beakingnews
.tulisbreaking{display:block;float:left;padding:0 7px;margin:0 5px 0
0;color:#FCFCFC;background:#008D17}
#recentpostbreaking{float:left}
#recentpostbreaking
ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
</style>
</b:if>
|
Por último, busca este otro código
</body>
|
Inserta el siguiente código, arriba del código
que encontraste
<b:if cond='data:blog.pageType ==
"item"'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'Inserta aquí la dirección URL de tu blog',
numpostx = 10; //
Número de entradas a mostrar
$.ajax({
url:
''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' +
numpostx + '',
type: 'get',
dataType: "jsonp",
success: function(data) {
var posturl, posttitle, skeleton = '',
entry = data.feed.entry;
if (entry !== undefined) {
skeleton =
"<ul>";
for (var i = 0; i < entry.length; i++) {
for (var j=0; j <
entry[i].link.length; j++)
{
if (entry[i].link[j].rel
== "alternate")
{
posturl = entry[i].link[j].href;
break;
}
}
posttitle = entry[i].title.$t;
skeleton += '<li><a
href="' + posturl + '" target="_blank">' + posttitle +
'</a></li>';
}
skeleton += '</ul>';
$('#recentpostbreaking').html(skeleton);
// kode untuk efek pada breaking
news
function tick(){
$('#recentpostbreaking
li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking
ul')).slideDown(); });
}
setInterval(function(){ tick () }, 5000);
} else {
$('#recentpostbreaking').html('<span>No result!</span>');
}
},
error: function() {
$('#recentpostbreaking').html('<strong>Error Loading
Feed!</strong>');
}
});
});
//]]>
</script>
</b:if>
|
Realiza este cambio:
Borra la frase que dice Inserta aquí la dirección
URL de tu blog y pon ahí la dirección URL de tu blog de Blogger
Si necesitas aumentar o disminuir el número
de entradas a mostrar en el Breaking News basta con cambiar el número 10 que está
marcado de color rojo y pon ahí el número que tú quieras.
Eso es todo, es momento de dar un clic
en “Guardar plantilla” y ver tu nuevo Breaking News en cualquier entrada de tu
blog de Blogger
Felicidades has hecho un buen trabajo
Espero haber sido lo más explicativo
posible en este nuevo Tutorial de Blogger
Recuerda suscribirte y así recibirás
diariamente mis nuevas actualizaciones directamente en tu correo electrónico.
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé
Saludos
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
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.