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.

Añadir Metatags en Blogger

Las metatags son etiquetas con información sobre nuestro sitio, como puedes ser la tematica del sitio web o blog, su descripción, las palabras claves, su codificación, información del autor, el idioma, entre muchas otras. Son importantes por que apartir de estas los buscadores y otras aplicación clasificación tu web, de modo que sino las tienes dificiltas su trabajo y el resultado es menos visitas a tu sitio y visitas no relacionadas al tema de tu sitio.

Una de las partes más descuidadas en Blogger son precisamente las metatag, pues no coloca ninguna realmente de importancia para la indexación correcta de tu página. Bien, pues en este artículo te mostreremos como colocar las más importantes en la página principal y en las páginas de las etiquetas.

1. Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio, después a la opción “Edición HTML”

2. Busca el código siguiente:

<title><data:blog.pageTitle/></title>

3. Bajo de este código iran condicionales para mostrar los metatags en las páginas respectivas, de acuerdo con el siguiente esquema de código:

<!-- Metatags de la página principal -->
<b:if cond='data:blog.pageType == "index"'>
<meta content='aquí las palabras clave separadas por comas' name='keywords'/>
<meta content='una descripción del contenido general del blog' name='description'/>
</b:if>

<!-- Metatags de cada página de etiquetas -->
<b:if cond='"http://direccion-de-la-etiqueta" == data:blog.url'>
<meta content='aquí las palabras clave que describen esta etiqueta' name='keywords'/>
<meta content='descripción del contenido de esta etiqueta' name='description'/>
</b:if>

Como puedes ver, hay un código para la página principal y otro para las etiquetas y tendra que repetirse para cada etiqueta que quieras describir con sus respectivos contenidos.

Post Resumido (Leer Más) En Dos Pasos

Acabo de encontrar este SCRIPT en Quite Random y es sencillamente... cómo decirlo: ¡sencillo! Allí citan que el creador es BloggerSphera.

Sólo con dos cambios, podemos conseguir un blog estilo magazine. Incluye un resumen de las entradas e incorpora una imagen si el post tiene alguna. Por supuesto, incluye el consabido "leer más" y lo que es mejor, sin necesidad de incluir nada especial al crear tus entradas. Oséase... automático. Además, como no es muy largo se puede insertar directamente en la plantilla para no depender de servicios de almacenaje externos.

Quizás el único fallo es que necesita escalar la imagen para que todas se vean igualitas, en lugar de recortarlas que quizás sería lo óptimo. No obstante, el resultado me ha parecido muy bueno. Ver Blog De Demostracion.

Y sin más preámbulo, el montaje del sistema:

Paso 1. Localizar el </head> y justo antes insertar este código que incluye el estilo y el SCRIPT.

<!-- SUMARIOS AUTOMATICOS -->
<style type='text/css'>
.leermas {
}
.post-thumbnail {
float:right;
margin:0px 0 10px 10px;
}
.centrar-imagen {
display:block;
text-align:center;
margin:0px auto;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1) {
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = sumario_noimg;
if(img.length>=1) {
if(thumbnail_float) {
imgtag = '<img src="'+img[0].src+'" class="post-thumbnail" width="'+img_thumb_width+'" height="'+img_thumb_height+'" alt=""/>';
summ = sumario_img;
}
else {
imgtag = '<img class="centrar-imagen" style="width:'+img_thumb_width+'px; height:'+img_thumb_height+'px;" src="'+img[0].src+'" alt=""/></div>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

var thumbnail_float = true;
sumario_noimg = 340;
sumario_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
//]]>
</script>

Paso 2. Busca la línea <p><data:post.body/></p> y la sustituyes por esto otro.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary-&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary-<data:post.id/>&quot;);</script>
<a class='leermas' expr:href='data:post.url'>Leer más &#187;</a>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>

Puedes ver el resultado con Vista Previa y si te gusta, guardarlo.

Con esto ya tienes algo bastante majo, pero puedes personalizarlo un poco con las clases que se nombran en primer lugar y con los últimos parámetros del código del SCRIPT:

* .leermas: Aspecto del enlace, como color, tamaño, tipo de letra fondo. También se puede añadir un HOVER.
* .post-thumbnail: Tal como está, la imagen flota a la derecha. Se puede cambiar a la izquierda.
* .centrar-imagen: Esta clase se usa cuando se escoge (más adelante) que la imagen no flote. En ese caso, la centra.

* var thumbnail_float: Valor TRUE para que flote. FALSE para que se centre encima del texto del sumario.
* sumario_noimg: Número de caracteres a mostrar para post sin imágenes.
* sumario_img: Idem para post con imágenes. Normalmente menor que en el anterior caso para que ocupen más o menos lo mismo.
* img_thumb_height: Altura de la imagen miniatura en pixels.
* img_thumb_width: Anchura de la imagen miniatura en pixels.

Colocando imágenes alargadas tipo banner al principio de los posts, puede resultar muy interesante poner la variable var thumbnail_float con el valor FALSE y un ancho grande (por ejemplo 400x90px), para que simule cabecera de post.

Optimizar Los Titulos En Blogger

Optimizar los títulos aparentemente es algo que carece de importancia pero si la tiene.

Normalmente en los buscadores aparece primero el nombre del blog precedido del título de la entrada, si optimizamos los títulos el resultado será a la inversa, aparecerá en primer lugar el título de la entrada y después el del blog. ¿Y qué más da el orden?

Eso mismo me preguntaba yo, la respuesta es que si los títulos aparecen en primer lugar conseguimos un mejor posicionamiento porque parece ser que Google le da más importancia a las primeras palabras que se encuentran al inicio del título.

Supongamos que tengo una duda sobre el blog y busco en Google "Añadir sidebar" entre los muchos resultados encontraría " añadir sidebar (Columna)" si Google le da más importancia a las primeras palabras debemos tener el título en primer lugar para que esa entrada tenga un buen posicionamiento o al menos intentar que lo tenga.

Pasamos a optimizar los títulos.

En nuestra plantilla localizamos <head> (al principio) justo después encontraremos algo así:

<title><data:blog.pageTitle/></title>

Lo que haremos será sustituirlo por:

<b:if cond='data:blog.pageType == "item"'>
 <title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
 <title><data:blog.pageTitle/></title>
</b:if>

Hay mucha información en Google sobre como optimizar los títulos.

El Truco De Leer Mas En Blogger

A continuación explicaré un procedimiento cuya efectividad he verificado personalmente (puedes ver la prueba en www.zonazoft.com). Es un poco más complejo que el método original, pero permite una funcionalidad aparte que puede parecerte más interesante.

El truco de leer más consiste en mostrar en la página principal del blog sólo una parte de los post, y dejar un vínculo que conduzca al resto del texto, ya sea desplegandolo en la misma página principal del blog o conduciendo a la página individual del post. Esto permite al usuario ver más información y acceder sólo a aquella que es de su interés, en vez de pasearse por posts kilométricos para encontrar lo que desea.

Para utlizar esta función, debes hacer lo siguiente:

1. Selecciona la opción "Plantilla" en el panel de tu blog, y luego selecciona la pestaña "Edición de HTML". Lo primero que tienes que hacer siempre que modifiques tu plantilla HTML es guardar una copia de seguridad de ella, para que si la estropeas puedas recuperarla. Para descargar tu plantilla selecciona la opción "Descargar plantilla completa" en la pantalla de edición HTML. Guarda el archivo .xml (tu plantilla) y mantenlo en tu computadora.

2. Activa la casilla "Expandir plantilla de artilugios" del editor HTML. Ahora ubica el código: <head> e incluye debajo del mismo el código que se encuentra en este link o en este otro link (el código no se encuentra en esta página por ser muy extenso).

3. Ahora tienes que decidir cómo quieres mostrar el texto oculto (la segunda parte del post). Si quieres:

a. Mostrar el texto oculto en la misma página principal del blog, por medio de un enlace que "expande" o "contrae" la segunda parte del post, haz lo siguiente:

Ubica el código <div class=’post-body’> e introduce el código en rojo como se muestra más abajo:

<div class='post-body' expr:id='"post-" + data:post.id'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>
<style>.fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull("post-" + data:post.id + "");"'>Leer más</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull("post-" + data:post.id + "");"'>Contraer</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

b. Si quieres en cambio que al hacer clic en "Leer más" el usuario sea dirigido a la página individual del post, donde podrá encontrar el resto del texto, haz lo siguiente:

Ubica el código <div class=’post-body’> e introduce el código en rojo como se muestra más abajo;

<div class='post-body' expr:id='"post-" + data:post.id'>

<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>

<p><data:post.body/></p>

<span id='showlink'>
<a expr:href='data:post.url'>Leer más</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

4. Listo, esas son todas las modificaciones que le tienes que hacer a tu plantilla. En los códigos, puedes cambiar el "Leer más" (y el "Contraer" en el caso del método "a") por el texto que tú quieras para personalizarlo. Ahora lo que tienes que hacer cuando desees emplear el código es escribir la primera parte del post que deseas dividir, y luego la segunda parte del post (la que estará oculta) encerrada entre las etiquetas <span id="fullpost"> y </span>

Es decir, en la vista HTML tu post se vería así:

Primera parte del texto
<span id="fullpost">
Segunda parte del texto
</span>

Y eso es todo. Si vas a utilizar la división de post frecuentemente, puede incluir las etiquetas HTML necesarias automáticamente para cada vez que crees un nuevo post. Entérate cómo en este post.

Añade Un Texto Automatico a Todas Tus Entradas

¿Quieres incluir un link de social bookmarking (o marcadores sociales) para las entradas de tu blog? ¿Hay una frase que te gusta mucho y quieres incluirla en todos tus posts? Una opción sería escribir el texto que deseas cada vez que crees una entrada, pero si quieres ahorrarte tiempo (más aún si quieres utilizar texto con formato o un código HTML), utiliza la opción "Plantilla de entrada" de Blogger.

Lo que tienes que hacer es dirigirte a la opción "Configuración" en tu panel de Blogger del blog al que deseas incluir el texto automático. Luego, selecciona la pestaña "Formato" y dirigete a la opción "Plantilla de entrada" (al final de la página). Verás un cuadro de texto. Ahí deberás introducir el texto o código HTML que quieres que aparezca en todas tus entradas. De ahí en adelante, cada vez que crees una entrada aparecerá automáticamente lo que introdujiste en el cuadro "Plantilla de entrada".

En el siguiente ejemplo se introduce una imagen con un vínculo para descargar Firefox en cada entrada:

Puedes utilizarlo para incluir publicidad, algunos cuadros en las entradas como en www.zonazoft.com, un eslogan, una imágen, en fin, ¡lo que sea!.

Firma En Los Comentarios Del Autor

En una entrada anterior vimos como destacar los comentarios del autor del blog, dándoles un diseño distinto a los demás comentarios.

Usando este mismo sistema, voy a explicar como añadir una imagen como firma en los comentarios del autor del blog.

[1] En primer lugar incluimos las modificaciones en la plantilla que se explican en esa entrada si no lo hemos hecho anteriormente.

[2] Una vez tengamos incluidos todos los cambios para distinguir nuestros comentarios del resto, añadimos la llamada a la imagen en el mismo código que habíamos colocado:

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/><img class='firma' src='url_de_la_imagen_firma'/></p>
</dd>
<b:else/>

Como podéis ver, le hemos dado una clase (class) a la imagen (en el ejemplo "firma") aunque podéis poner cualquier nombre.

[3] Colocamos ahora en el CSS de la plantilla (antes de ]]></b:skin>) el código necesario para controlar la posición de la firma dentro del cuerpo del comentario:

.firma {
display:block;
width: 45px;
height: 28px;
}

En width: pondremos el ancho que tiene nuestra imagen y en height: el alto.

El resultado será entonces algo así:

Firma comentario

Para controlar la posición de la firma, añadimos una nueva instrucción en el mismo código anterior:

.firma {
display:block;
width: 45px;
height: 28px;
padding-left: 90%;
}

Tendremos que variar el porcentaje (90% en el ejemplo) según la posición que queramos conseguir para la imagen.

Destacar Los Comentarios Del Autor Del Blog

Aplicando una líneas de código en nuestra plantilla podemos conseguir que cuando nosotros mismo hagamos un comentario en nuestro blog, este se distinga del de nuestras visitas. Creo que es un "truco" muy útil, sobre todo cuando tenemos bastantes comentarios, así de un solo vistazo nos daremos cuenta donde hemos respondido.

De la misma manera cuando un visitante ha dejado un comentario y vuelve a comprobar si le hemos respondido le será más fácil y rápido comprobarlo. :-)

Empezamos!

Paso [1] Vamos a la parte de edición - HTML de la plantilla y expandimos los artilugios. Buscamos la parte del código que corresponde al bloque de comentarios y añadimos la parte que está en negrita:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Paso [2] Hecho esto subimos hacia arriba de la plantilla, a la parte del CSS y buscamos la zona de comentarios, en las plantillas Mínima, por ejemplo, veremos algo así:

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}

Paso [3] Si la plantilla es la Rounders, por ejemplo, será algo como esto lo que hemos de encontrar:

   .comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}

En las demás plantillas será algo más o menos parecido, en realidad no tiene demasiada importancia el lugar, pero mejor que este más o menos por esa zona para evitar problemas de localización del código cuando lo necesitemos.

Paso [4] Una vez situados en la zona del CSS de comentarios, añadimos debajo del código de los ejemplos anteriores este otro:

  .blog-author-comment {
 margin:.25em 0 0;
 }
 .blog-author-comment p {
 margin:0 0 .75em;
 padding:5px 10px;
 border:1px dotted #254117;
 background:#C3FDB8;
 }

Esto hará que cuando dejemos el comentario en nuestro blog, este se distinga de los demás:

En estas líneas del código podemos hacer los cambios de color del fondo, grosor y color del borde:

border:1px dotted #254117;
background:#C3FDB8;

Como Poner Emoticones En Comentarios De Blogger

Aquí les traigo un script que permite introducir emoticonos en los comentarios de blogger. Antes de nada quiero comentarles que para que el script funcione correctamente, deberemos tener los comentarios incrustados en el post.

¿Cómo funciona?

Se trata de un script que recibe todo el texto de nuestro comentario, busca una serie de caracteres y lo sustituye por la imágen que está asignada. También añadiremos una leyenda en la parte superior justo antes de la caja donde escribiremos el comentario, para que nuestros visitantes sepan en todo momento coo poner el emoticon que deseen.

¿Cómo añadirlo en nuestro blog?

Lo primero que debemos hacer es añadir justo antes de la etiqueta </body> el siguiente código:

<b:if cond='data:blog.pageType == "item"'>
<script src='http://agudovk.googlepages.com/Emoticonos.js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>

De está manera hemos añadimos el script que sustituira los caracteres por emoticonos. El siguiente paso será colocar la leyenda, para ello buscamos la etiqueta <iframe allowtransparency='true' y justo encima pegamos el siguiente código html:

<table width='400px'>
<tr>
<td colspan='10'>Emoticonos en blogger</td>
<td colspan='3'><a href='http://ayudaparamiweb.com'><img src='http://agudovk.googlepages.com/ayudaweb.png' style='border:0;'/></a></td>
</tr>
<tr>
<td><img src='http://agudovk.googlepages.com/com-smile.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-cry.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sad.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-tongue.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-lol.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-oops.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-blink.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-neutral.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-secreto.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sorpresa1.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sorpresa2.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-mad.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-confuso.gif'/></td>
</tr>
<tr>
<td>:)</td>
<td>:'(</td>
<td>:(</td>
<td>:P</td>
<td>:D</td>
<td>:$</td>
<td>;)</td>
<td>:-I</td>
<td>:-X</td>
<td>:o</td>
<td>:O</td>
<td>O</td>
<td>:/</td>
</tr>
</table>

Pues ya está, a partir de ahora vuestros comentarios disfrutarán de graciosos emoticones que animarán un poco más vuestro blog.