Bienvenido a bloggertrucos.com un espacio para el blogger moderno donde buscar soluciones a nuestros problemas de cada día.

7

Como crear un contador de lecturas en los posts en Blogger

Bueno, ya sabemos que Blogger no tienes muchas opciones de estética como quisiéramos y una de ellas es agregar funciones a nuestros posts como un sistema de votación  valoración o rating o un contador de lecturas de los posts, por eso debemos de recurrir a herramientas exteriores para hacerlas funcionar.

Aunque las características que tenga cada blog depende de la temática,  como pueden ver en este sitio no necesito nada mas que las funciones básicas como botones para compartir contenido, suscripciones y formularios de comentarios, a muchas personas les gusta agregar en sus sitios de todo un poco.

Como funciona el contador de lectura en blogger?

Como les dije anteriormente, este es un servicio exterior a través de Firebase.com que agrega una base de datos sobre las veces que se lee un articulo en nuestro blog y va sumando al contador de forma dinámica cada vez que se carga la pagina.

Nota:  También puedes darle seguimiento a tus urls a través del sistema de Google Analytics.

Lo primero que debemos hacer es entrar a Firebase.com y crear nuestra cuenta gratuita.

Procedemos a crear un nuevo registro o firebase, puedes usar el nombre de tu blog para darle seguimiento fácilmente después  Tendremos una url del tipo: tublog.firebaseio.com, usaremos esta dirección para configurar el contador de lecturas en nuestro blog.

contador blogger

 

Ahora ingresa a tu cuenta de Blogger, selecciona la bitácora y ve a la opción de diseño de la plantilla. Ahí extendemos los artilugios y buscamos este código:

Buscamos:

]]></b:skin>

y agregamos el código css para darle el estilo al contador:

/*——– Post Views  ———-*/
#views-container {
width: 85px;
float: right;
}

.mbtloading {
background: url(‘http://4.bp.blogspot.com/-PZMStRDcchY/USOp3xFp4yI/AAAAAAAAJOo/rm5FSsaSKh0/s320/mbtloading.gif’) no-repeat left center;
width: 16px;
height: 16px;
}

.viewscount {
float: right;
color: #EE5D06; 
font: bold italic 14px arial;
}

.views-text {
float: left;
font: bold 12px arial;
color: #333;
}

.views-icon{
background: url(‘http://4.bp.blogspot.com/-_dXedKDHIws/USOp369zEPI/AAAAAAAAJOs/Cv3fTZUaBTU/s1600/postviews.png’) no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}

* Podemos cambiar el código de la linea en rojo para usar otro color a la cantidad de lectura a mostrar en nuestros posts.

Ahora buscamos el cierre de BODY (/body) y agregamos este código:

<script type=’text/javascript’>
window.setTimeout(function() {
document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
}, 10);
</script>
<script src=’https://cdn.firebase.com/v0/firebase.js’ type=’text/javascript’/>
<script>
$.each($(&#39;a[name]&#39;), function(i, e) {
var elem = $(e).parent().find(&#39;#postviews&#39;).addClass(&#39;mbtloading&#39;);
var blogStats = new Firebase(&quot;https://tublog.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;));
blogStats.once(&#39;value&#39;, function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr(&#39;name&#39;);
isnew = true;
}
elem.removeClass(&#39;mbtloading&#39;).text(data.value);
data.value++;
if(window.location.pathname!=&#39;/&#39;)
{
if(isnew)
blogStats.set(data);
else
blogStats.child(&#39;value&#39;).set(data.value);
}
});
});
</script>

Ahí podremos ver en texto de color rojo la url del registro que hemos creado, donde hemos usado el nombre de nuestro blog para agregarlo en este código  Debes de reemplazar tu URL.

Debemos de buscar el lugar donde vamos a agregar el contador, eso lo dejo a opción tuya y debemos de pegar el siguiente código:

<div id=’views-container’><span class=’views-icon’/><div class=’views-text’>leido </div> <div class=’mbtloading viewscount’ id=’postviews’/> veces</div>

Para que el script funcione debes de tener instalada la  librería jQuery en tu blog, si no la tienes aun debes de pegar este código antes de cerrar HEAD.

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ type=’text/javascript’></script>

Fuente

Show Comments

No Responses Yet

Leave a Reply