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.