add

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.

Como insertar un Breaking News en 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

Como insertar un Breaking News en Blogger

3 Luego un clic en “Editar HTML

Como insertar un Breaking News en Blogger

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Como insertar un Breaking News en Blogger

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.

Como insertar un Breaking News en Blogger

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 == &quot;item&quot;'>
<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 == &quot;item&quot;'>
<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 == &quot;item&quot;'>
<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 == &quot;item&quot;'>
<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

2 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

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios