Contador de vistas/lecturas de posts para Blogger

Una pregunta que he visto en varios lugares es cómo mostrar en Blogger las veces que un post es visto o leído, tal y como haríamos en Wordpress. Buscando un poco en Google, encontré una excelente manera de hacerlo: usando un hit counter que corre con PHP, y que se muestra con condicionales en cada post individual.

Como ya sabemos, en Blogger es imposible usar PHP (o bueno, casi). La única manera de utilizar el contador es usando un hosting externo, pero por el momento no hay problema con eso: su autor ha alojado este contador php en un hosting gratuito y permite el hotlinking, por lo cual añadir el código a la plantilla será sólo cuestión de copiar y pegar.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span id='hit-counter'>
<font color='#999999'><script src='http://wizom.net/counter.php' type='text/javascript'/> lecturas</font>
</span></b:if>

Puedes modificar el color del texto (font-color) para que se integre con tu plantilla, y el texto “lecturas” por el que más te acomode.

Puedes pegar el código bajo el título del post, o bajo el cuerpo de la entrada, de la siguiente manera:

• Debajo del título

<div class='post-header-line-1'/>
Código

• O al final del post
  

<div class='post-footer-line post-footer-line-1'>
Código

Considera que:

• Para añadir el código debes tener los artilugios de la plantilla expandidos.
• El archivo counter.php (todavía en fase experimental) podría dejar de funcionar de aquí a mediano plazo, por lo cual podría ser necesario realojarlo. Sin embargo, hasta ahora su autor se ha preocupado de cambiar el hosting, y de ofrecer el archivo para descarga libre desde su blog, bajo Licencia GPL. Eso sí, es necesario tener conocimientos avanzados en PHP para hacer las modificaciones correspondientes.
• El contador será visible sólo en los posts individuales (por eso lleva condicionales). De otro modo, mediría las estadísticas del blog completo, en vez del número de lecturas de cada uno de los posts.

Boton agregar a favoritos en tu blog

Aqui les traigo otro truco sencillo, un boton que hará que tus visitas si así lo consideran conveniente agregarte facilmente a sus favoritos. Cambia la dirección que ves en rojo por la de tu página y el título en azul por el tuyo.

El siguiente código lo agregan desde:

Panel de control-> Diseño -> Añadir Gadget -> html/javascript

<center><script language="JavaScript">
function agregar(){
if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) {
var url="http://aquitublog.blogspot.com";
var titulo="Aqui pones el titulo de tu blog";
window.external.AddFavorite (url,titulo);
}
else {
if(navigator.appName == "Netscape")
alert ("Presiona Crtl+D para agregar Aqui otra ves el titulo de tu blog a tus favoritos");
}
}
</script>
<input value="Agregar a favoritos" onclick="javascript:agregar();" type="button"/></center>

Colocar en grande la primera letra de los posts.

Hola, hoy les trigo este truco mas comunmente llamado Dro Caps pero algunos no saben ese nombre por eso le pongo letra capital. Este truco consiste en hacer la primera letra mas grande que las otras, este truco es muy sencillo y lo explicare:

1.- En tu HTML, pega el siguiente codigo antes de ]]></b:skin>

.dropcaps {
float:left;
color:#1B703A;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}

2.- Cada que quieras aparecer el Drop Caps pega el siguiente codigo en la entrada:

<span class="dropcaps">D</span>

Remplaza la D por la letra que quiereas y listo :) .

Excelente Creador De Menus De Navegacion En Blogger

Navegando por la web, me encuentro con esta pagina la cual es perfecta para pode hacer menus muy buenos, con excelentes diseños y acabados, y lo mejor de todo es que son facilisimos de configurar. El unico problema que le encuentro es que nosotros mismos tenemos que subir las imagenes a un servidor, despues de descargarlas de su sitio.

La pagina se llama Cssmenumaker.com, en esa pagina, podremos elegir entre varios diseños de menus, ya sean horizontales, o verticales.

Con unos cuantos datos que agregemos, ya estaran listos nuestros menus, solo nos pediran:

Numero de enlaces
La url de los enlaces

Y eso es todo, la paigna configura todo, y al final nos da dos codigos:

El primer codigo (CSS Code) lo tendremos que agregar antes de ]]></b:skin>,(en la Plantilla en edicion HTML) es el codigo que dice CSS Code, es el segundo que se muestra en la pagina. recuerden que en este codigo tenemos que modificar la URL de la imagenes que nosotros hayamos subido a nuestro servidor.

Despues el segundo codigo que agregaremos, es el primero que sale en la pagina (HTML Code) sera agregado, en Plantilla->agregar Nuevo elemento, y ahi pegan el codigo HTML Code.

Eso es todo, es una forma rapida y muy efectiva de crear sus menus.

Mostrar Un Post Al Azar En Blogger

Lo que hoy les mostraré será un script con el cual podrás poner un boton o un enlace a un post random en tu blog. Es muy fácil aplicarlo.

Primero nos vamosa nuestra Plantilla y buscamos </head>, justo antes colocaremos este codigo:

<script type="text/javascript">
//<![CDATA[
var _yourBlogUrl = "http://trucosblogg.blogspot.com";

function randomPost() {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTotalPostsCallback&start-index=
1&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};

function getTotalPostsCallback(json) {
var totalResults = json.feed.openSearch$totalResults.$t;
if (totalResults > 0) {
getRandomPostNumber(totalResults);
}

};

function getRandomPostNumber(totalResults) {
var randomNumber = Math.floor((Math.random() * totalResults) + 1);
getRandomUrl(randomNumber);
};

function getRandomUrl(randomNumber) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTheUrlCallback&start-index=" + randomNumber + "&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTheUrlCallback(json) {
var theUrl = json.feed.entry[0].link[0].href;
window.location.href = theUrl;
}
//]]>
</script>

Ahí solo cambiaremos la url que dice http://trucosblogg.blogspot.com por la de su blog.

Despues de eso nos iremos a Pantilla agregar Nuevo Elemento HTML / JAVASCRIPT, y agregamos este otro código:

<a href="javascript:randomPost();">Ver post al azar</a>

En este codigo pueden cambiar la frase "Ver post al azar" por cualquiera, incluso podemos usar un pequeño icono o imagen, es lo mismo.

Top De Comentaristas En Blogger

En esta ocasión les traigo un gadget que muestra el nombre de los que más comentan en el blog y que he encontrado en Blogger Widgets. La diferencia con el anterior es que el enlace del nombre de cada comentarista lleva directamente a su perfil de Blogger o a su blog en el caso de que haya comentado con su url.

Tienes que añadir el código en un gadget HTML-Javascript y cambiar donde dice trucosblogg por el nombre de tu blog. El gadget muestra los 10 comentaristas más activos, si quieres mostrar más o menos, cambia donde dice &num=10 por el número que necesites. Para que tu nombre no aparezca en la lista, lo colocas (tal como lo use en el blog) sustituyendo al mio (everth21) en el código.

Si además quieres filtrar el nombre de algún otro comentarista, coloca sus nombre a continuación del tuyo separados cada uno por una coma.

Hay que tener en cuenta que la carga de las Pipes no es demasiado rápida, por lo que es conveniente ser prudente con el número de comentaristas a mostrar en la lista. Es también recomendable no usar el gadget en la parte superior de la sidebar, ya que si demora en cargar podría interrumpir la carga de esta.

• Top comentaristas basado en los últimos 500 comentarios del blog.
  

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; if(obj.value.items[i].link == "") var item ="<li>" + obj.value.items[i].title + "</li>"; else var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=2351a7b3195ee95ef3643998bc8def5e&url=http%3A%2F%2Ftrucosblogg.blogspot.com&num=10&filter=everth21" type="text/javascript"></script>

• Top comentaristas basado en los últimos 5000 comentarios del blog.

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; if(obj.value.items[i].link == "") var item ="<li>" + obj.value.items[i].title + "</li>"; else var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a55cb97ebb368bb1b89b7f6bdeb35336&url=http%3A%2F%2Ftrucosblogg.blogspot.com&num=10&filter=everth21" type="text/javascript"></script>

• Sustituir la numeración de la lista por un icono.

Una vez colocado el gadget, su aspecto será como cualquier lista numerada pero podemos fácilmente sustituir los números de la lista por un icono.

[1] Editamos el gadget donde hemos incluido el código para mostrar el Top de comentaristas, colocando todo el código en un <div>, es decir, ponemos
<div id="topcoment"> al comienzo del código y </div> al final.
Sustituimos en el código las etiquetas <ol> y </ol> por <ul> y </ul> respectivamente y guardamos los cambios en el gadget.

[2] Iremos entonces a "Edición HTML" de nuestro panel y en el CSS de la plantilla (antes de ]]></b:skin>) colocamos este código:

#topcoment li{
padding-left: 30px;
background: url(URL_DEL_ICONO) no-repeat top left;
}

Programar Las Entradas En Blogger

Hoy explicaré como podemos programar entradas en Blogger. Este servicio nos permitirá programar entradas cuando nos vayamos de vacaciones, vayamos a estar unos días fuera o sencillamente preveamos mucho trabajo y no podamos escribir.

El procedimiento para hacerlo será el siguiente:

1. En primer lugar, iremos a la pestaña entradas y escribiremos una nueva entrada.

2. Escribiremos nuestra entrada sin hacer ningún cambio aparente. Es especialmente importante que no lleguemos a pulsar la opción de publicar.

3. Posteriormente, hemos de pulsar “Opciones de entrada”, y en la fecha que nos aparece, la cambiamos por la fecha de publicación en que queremos que el mensaje sea publicado.

En caso de querer utilizar el cambio de fecha para crear una página de inicio en blogger, les recomiendo que sean este artículo que escribí hace algún tiempo.

Pagina De Inicio En Blogger

Explicare como hacerlo. Para ello utilizaré una técnica muy sencilla. Es cierto que existen técnicas más complejas modificando la plantilla e introduciendo un post en la plantilla pero creo que resultan muy complejas y no merecen la pena.

La solución que les explicaré es muy sencilla y la pueden observar en mi blog de descargas, en el que siempre hay 1 entradas al principio pase lo que pase.

Para hacer el truco en primer lugar procederemo a ir a la “Creación de entradas” y crearemos nuestra entrada con el mensaje que deseamos que aparezca de inicio cuando creamos una nueva entrada en blogger.

Una vez acabado el mensaje lo publicamos sin más. Comprobamos que el mensaje se haya publicado correctamente y posteriomente procedemos a ir a la pestaña de nuestro blogger de “Creación de entradas”, escogemos la pestaña “Editar entradas” y posteriormente pulsamos “editar” sobre la entrada que deseamos ver de inicio.

A continuación pulsamos en opciones de entrada que veremos que nos aparece en la parte inferior respecto a donde escribimos el mensaje.

A continuación, modificamos la fecha y la hora y seleccionamos una fecha muy lejana a la actual, por ejemplo el 2030 en lugar de 2008; una vez hecho esto publicamos la entrada, y hasta el 2030 aparecerá en primer lugar.

Esta solución no es para nada elegante pero sí muy sencilla, rápida y eficaz.