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
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 == "item"'>
<div id='beakingnews'><span class='tulisbreaking'>Breaking News</span>
<div id='recentpostbreaking'>Cargando...</div>
</div>
</b:if>
<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 == "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, 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 == "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>
<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 == "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>
<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:
0 comentarios:
Publicar un comentario