Entrada destacada

PƁGINA DE BIENVENIDA

PƁGINA DE BIENVENIDA

Insertar un Breaking News en Blogger

Insertar un Breaking News en Blogger


En este Tutorial voy a mostrar de forma sencilla insertar un Breaking News en tu blog 
claro que deberÔs 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.

Tutoriales Blogger Kiradober; PolĆ­ticas de Uso





Vamos al Lio:


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.




Nota primero os quiero indicar un ejemplo de una estructura de una plantilla, en la cual quiero que vosotros os deis cuenta como estÔ mÔs o menos estructurado en tu plantilla. Esto os servirÔ para que puedan visualizar perfectamente en donde debemos colocar nuestro código principal

---------------------------------------------------------------------------------------------------------------------

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 encuentrasos sugiero que
inserteis el primer código justo arriba del código que estÔ marcado de color azul en mi ejemplo e identifique con las Entradas del Blog, es por eso que puse el ejemplo anterior.

A continuación mira el ejemplo de cómo debería estar insertado el primer código en su plantilla:

Recuerde que esto es un ejemplo y no copies el código que os pongo a continuación

------------------------------------------------------------------------------------------------------------------------
Ejemplo 2

<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, despues 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 en la parte de arriba del código </head>


<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>

De igual manera 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


Fuente; ayudadeblogger

Fecha:17/01/2017

Publicado por:










CONVERSATION

0 comentarios:

Publicar un comentario

AddToAny

Printfriendly

Back
to top