Trucos Blogger

Contador de vistas/lecturas de posts para Blogger

2009-06-27T18:59:00.000-07:00

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

2009-06-23T09:20:00.000-07:00

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.

2009-06-23T09:11:00.000-07:00

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

2009-06-19T09:55:00.000-07:00

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

2009-06-19T09:35:00.000-07:00

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

2009-06-19T09:03:00.000-07:00

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

2009-06-19T08:39:00.000-07:00

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

2009-06-19T08:32:00.000-07:00

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

2009-06-15T08:30:00.000-07:00

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

2009-06-14T10:44:00.000-07:00

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

2009-06-08T09:27:00.000-07:00

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

2009-06-08T08:48:00.000-07:00

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

2009-06-08T08:42:00.000-07:00

¿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

2009-06-04T11:06:00.000-07:00

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

2009-06-04T09:46:00.000-07:00

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

2009-06-04T09:10:00.000-07:00

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.

Limitar la lista de categorías de Blogger

2009-04-05T20:22:00.000-07:00

Visitando algunos blogs, me he fijado que aquellos que usamos Blogger sufrimos un pequeño problemilla a la hora de presentar la lista con las etiquetas principales de nuestros posts: mostramos todos los tags, por insignificantes que hayan sido, aunque sólo los hayamos tocado de refilón.

Personalmente, creo que la lista de etiquetas aportan una forma rápida y clara de ver de qué trata principalmente nuestro blog, y no es muy positivo tener una lista interminable de tags, la mayoría de ellos con una única entrada asociada.

Aunque Blogger permite dos formas de verlas, en orden alfabético o según su frecuencia, el resultado es igual de terrible. En el primer caso se entremezclan los tags significativos con los que no lo son; en el segundo, la lista de etiquetas importantes vendría seguida de la lista de tags sin peso, que alargan y hacen más pesada la página innecesariamente.

Sin embargo, el potente sistema de plantilla de Blogger permite "retocar" de forma sencilla este comportamiento. En este caso, vamos a hacer que sólo aparezcan en esta lista los tags que tengan más de una entrada, aunque de la misma manera podríamos hacerlo para incorporar otras lógicas más o menos complejas.

Vamos a ver cómo se hace.

En primer lugar, debemos acceder, desde el panel de Blogger a la opción "Plantilla", seleccionando la subopción "Edición HTML".

Importante antes de seguir: si no lo has hecho ya, no vendría mal realizar una copia de seguridad de tu plantilla actual. Puedes hacerlo simplemente pulsando el enlace "Descargar plantilla completa" que encontrarás en la zona superior de la página. De esta forma, si metes la pata podrás volver a dejarlo todo como estaba. :-)

Ahora, fíjate que aparece un cuadro de edición con el código fuente de la plantilla, aunque debes marcar la casilla "Expandir plantillas de artilugios" para tener acceso a las zonas que necesitamos retocar.

Como ayuda, si os es incómodo manipular el texto sobre el cuadro de edición de la web, podéis copiarlo y pegarlo en vuestro editor favorito. Una vez hechas las modificaciones en el código, se vuelve a pegar sobre Blogger y listo.

El siguiente paso es buscar un texto parecido al siguiente (en mi caso está casi al final del código fuente). Puede no ser igual, pero sí que debe ser muy parecido a:

<b:widget id='Label1' locked='false' title='Categorías' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
  <li>
    <b:if cond='data:blog.url == data:label.url'>
      <data:label.name/>
    <b:else/>
      <a expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    (<data:label.count/>)
  </li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

A simple vista, se entiende que se trata del Widget (en mi caso su título es "Categorías") que muestra las etiquetas de los posts del blog, iterando sobre el conjunto de labels registrados (loop sobre data:labels), y montando una lista (ul) donde en cada elemento (li) se dibuja la etiqueta (label.name) y el número de veces que aparece (label.count).

Por tanto, lo que queremos hacer es realmente sencillo. Vamos a incluir en el interior del bucle un condicional que realice estas tareas sólo si el número de veces que se utiliza una etiqueta (label.count) es mayor de uno. El resultado, con el nuevo código resaltado es el siguiente:

<b:widget id='Label1' locked='false' title='Categorías' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
   <b:if cond='data:label.count > 1'> 
   <li>
     <b:if cond='data:blog.url == data:label.url'>
       <data:label.name/>
     <b:else/>
       <a expr:href='data:label.url'><data:label.name/></a>
     </b:if>
     (<data:label.count/>)
   </li>
   </b:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Una vez realizado este cambio, podéis previsualizar el resultado usando el botón de "vista previa", y una vez esté todo a vuestro gusto podéis guardarla, pasando desde ese momento a estar activa. Si os aparece algún problema a la hora de previsualizar es posible que hayáis olvidado algún carácter a la hora de copiar y pegar el código: revisadlo detalladamente y seguro que solucionáis el problema. Si, a pesar de todo la cosa se os pone fea, volved a cargar la plantilla que habéis salvado previamente y todo volverá a su estado inicial.

El resultado podéis verlo a la izquierda: mi lista de categorías sólo muestra aquellas que tienen más de una entrada. :-)

Espero que os sea de utilidad, o al menos de inspiración para hacer vuestros propios ajustes de Blogger.

Muestra las entradas más populares en Blogger

2009-04-03T14:40:00.000-07:00

De nuevo Bloggerbuster tiene otro interesante recurso para todos los usuarios Blogger. Esta vez se trata de un widget basado en javascript que muestra las entradas más populares de tu blog de Blogger. El script verifica los últimos 5000 comentarios de tu blog y las entradas con más comentarios son consideradas como las más populares.

Para agregarlo a tu blog solo entra a Blogger Buster e introduce un nombre para el widget, la URL de tu blog sin “http://” y clic en el botón “customize” y después “add to blog”.

Adicionalmente es posible configurar la cantidad de post populares a mostrar, para ello entramos a “Diseño/Elementos de página” y editamos el widget HTML que acabos de agregar. Ahí buscamos:

&num=10

Y sustituimos el número 10, por la cantidad de entradas populares que deseamos mostrar.

Otro aspecto es que el widget trae definido un estilo para mostrar los títulos de los post en mayúsculas, cosa que siempre va con el estilo del blog, para evitarlo, dentro del código del widget buscamos y eliminamos:

style="text-transform: uppercase;"

Fecha en todos los post

2009-03-30T13:38:00.000-07:00

Como todos sabemos cuando actualizamos varias veces el mismo día ocurre que la fecha sólo aparece en la primera entrada, en el resto no veremos fecha.
J.Miur nos explica con todo detalle como conseguir que nuestras entradas aparezcan todas con fecha.

Las indicaciones son sencillas pero aún así recomiendo leer su entrada porque estoy segura que con ella entenderemos como maneja Blogger las fechas.
Nos situamos en plantilla Edición de HTML y marcamos para expandir la plantilla.
Buscamos:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Y lo sustituimos por:

<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>

A partir de ahí todos nuestros post contendrán la fecha.

Blogger Hack - Entradas Relacionadas

2009-03-30T13:32:00.000-07:00

A veces podría ser una buena práctica agregar una lista de posts relacionados con ese que estamos viendo, es una forma de reavivar artículos "viejos" y promover la lectura de nuestro blog.

En Blogger no hay una herramienta específica para esto pero podemos valernos de las que existen, por ejemplo, las etiquetas o categorías.

Primero que nada, vamos a la plantilla y buscamos la etiqueta </b:skin> y justo debajo de esta, agregamos el script. Esto es así ya que debe estar ANTES que cualquier otro script que hayamos definido:

<script type='text/javascript'>
//<![CDATA[

 var relatedTitles = new Array();
 var relatedTitlesNum = 0;
 var relatedUrls = new Array();

 function related_results_labels(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
       var entry = json.feed.entry[i];
       relatedTitles[relatedTitlesNum] = entry.title.$t;
       for (var k = 0; k < entry.link.length; k++) {
          if (entry.link[k].rel == 'alternate') {
             relatedUrls[relatedTitlesNum] = entry.link[k].href;
             relatedTitlesNum++;
             break;
          }
       }
    }
 }

 function removeRelatedDuplicates() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    for(var i = 0; i < relatedUrls.length; i++) {
       if(!contains(tmp, relatedUrls[i])) {
          tmp.length += 1;
          tmp[tmp.length - 1] = relatedUrls[i];
          tmp2.length += 1;
          tmp2[tmp2.length - 1] = relatedTitles[i];
       }
    }
    relatedTitles = tmp2;
    relatedUrls = tmp;
 }

 function contains(a, e) {
    for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
       return false;
 }

 function printRelatedLabels() {
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;
    var dirURL = document.URL;
    document.write('<ul>');
    while (i < relatedTitles.length && i < 20) {
       if (relatedUrls[r] != dirURL) {
          document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
             + relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
       }
       if (r < relatedTitles.length - 1) {
          r++;
       } else {
          r = 0;
       }
       i++;
    }
    document.write('</ul>');
 }

//]]>
</script>

Donde relatedTitles.length && i < 20 filtra los posts a mostrar según la longitud de su título. En este caso, si contienen más de 20 caracteres, no serán mostrados. El valor 20 puede ser reemplazado por cualquier otro.

Guardamos la plantilla y marcamos Expandir elementos.

Ahora, debemos buscar la siguiente sección de código:

<b:if cond='data:post.labels'>
 <data:postLabelsLabel/>
 <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'>
       <data:label.name/>
    </a>
    <b:if cond='data:label.isLast != "true"'>,</b:if>
    aquí agregaremos el código del script
 </b:loop>
</b:if>

Eso que está entre <b:loop> y </b:loop> es lo que muestra las etiquetas y generalmente aparece en el pie de página de cada post. Lo que debemos hacer es agregar en el lugar indicado, el siguiente código:

<b:if cond='data:blog.pageType == "item"'>
 <script expr:src='"/feeds/posts/default/-/" + data:label.name +
    "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"'
    type='text/javascript'/>
</b:if>

Donde max-results=10 es la cantidad máxima de posts que se mostrarán y puede modificarse por el valor que más nos guste aunque es conveniente poner un valor bajo para evitar que la página tarde mucho en cargarse. Personalmente, no recomendaría que fueran más de cinco.

Hasta aquí lo que estamos haciendo es decirle que, si estamos en una página individual, se ejecute el script. Por el momento, no veremos resultados de ninguna clase así que nuevamente guardamos la plantilla.

Lo más sencillo sería mostrar todo en un elemento HTML que agregaremos a la sidebar. Le ponemos un título, por ejemplo POSTS RELACIONADOS y escribimos el siguiente código:

<script type="text/javascript">
 removeRelatedDuplicates();
 printRelatedLabels();
</script>

Pero, eso no es todo, volvemos a la plantilla, expandimos elementos y debemos editar el elemento que acabamos de crear. Como no lo hemos movido, será el primero de la sidebar pero, lo más sencillo es buscarlo utilizando el título; en este ejemplo, veremos algo así:

<b:widget id='HTMLXX' locked='false' title='POSTS RELACIONADOS' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
 <b:if cond='data:blog.pageType == "item"'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != ""'>
       <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
       <data:content/>
    </div>
    <b:include name='quickedit'/>
 </b:if>
</b:if>
</b:includable>
</b:widget>

Y allí agregamos las dos líneas resaltadas con color.

Ahora sí, todo está listo para probarlo así que guardamos la plantilla por última vez pero, tengamos en cuenta que este hack sólo será visible cuando estemos en una página individual y siempre y cuando haya etiquetas.

Una alternativa sería colocar este elemento debajo de los posts. Sin duda, esa sería la forma perfecta de mostrarlos.

Una vez creado, podemos ir a Elementos de la página, arrastrarlo y moverlo hasta colocarlo debajo del elemento Blog pero, probablemente deberemos personalizarlo para que se adapte a la estética general.

Añadir un menú en cualquier parte de la cabecera.

2009-03-30T13:12:00.000-07:00

Hay plantillas a las que añadir un menú transforma completamente la estética, les resta protagonismo a la cabecera o simplemente no encontramos un menú discreto y acorde con la plantilla. pero no por ello tenemos que prescindir de un menú.
En estos casos bastaría con añadir un menú tipo texto y ubicarlo en la cabecera de nuestro blog.

Nos situamos en la plantilla sin expandir y buscamos:

<div id='header-wrapper'>
_ _ _ _más código de widget_ _ _ _
</div>

Justo después añadimos un bloque conteniendo un div para albergar el menú.

<div style='position:relative;left:590px;bottom:80px;'>
<a href='url-de-la-página'>Home</a> | <a href='url-de-la-página'> Posts RSS</a> | <a href='url-de-la-página'>Comments RSS |</a>
</div>

A ese bloque le estamos añadiendo la ubicación.
position:relative;left:590px; (podemos aumentar o disminuir para ubicarlo a izquierda o derecha)

bottom:80px; (le otorgamos la altura)

Añadí Home para ir a inicio, Posts RSS para suscribirse a los post y Comments RSS para suscribirse a los comentarios pero podría ser cualquier otro enlace.
Perfil, contacto, una entrada especifica del blog o enlaces externos.

Sustituir texto de entradas recientes/antiguas por iconos de navegación

2009-03-21T22:37:00.000-07:00

Sustituir el texto por imagen: Nos situamos en Plantilla/Edición HTML/Expandir plantilla de artilugios hasta encontrar esta parte de código:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Y lo sustituimos por este otro:

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='http://img58.imageshack.us/img58/8076/leftxv5.png'/>
</a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='http://img260.imageshack.us/img260/9691/rightli5.png'/>
</a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='http://img260.imageshack.us/img260/6710/homepngrg7.jpg'/>
</a>
</div>
<div class='clear'/>
</b:includable>

Las imágenes que van en el código son las siguientes:

<img src='http://img58.imageshack.us/img58/8076/leftxv5.png'/>
<img src='http://img260.imageshack.us/img260/9691/rightli5.png'/>
<img src='http://img260.imageshack.us/img260/9691/rightli5.png'/>

Podemos cambiar las imágenes de los iconos pero hay que prestar atención en el orden que deben ir :

1º Izquierda 2º Derecha 3º Inicio (Centro)

Sustituir el texto por otro

Lo que hicimos anteriormente fue sustituir las etiquetas por una imagen tipo icono, esas etiquetas son:

<data:newerPageTitle/> Sustituyendo esta etiqueta estamos modificando Entradas más recientes.

<data:olderPageTitle/> Sustituyendo esta etiqueta estamos modificando Entradas antiguas.

<data:homeMsg/> Sustituyendo esta etiqueta estamos modificando Página principal.

Quiere eso decir que si nuestra idea no es añadir una imagen pero nos gustaría cambiar el texto podemos hacerlo sustituyendo las etiqueas por el texto deseado.

Caja contenedora de código personalizada

2009-03-21T11:09:00.000-07:00

Me preguntan la forma de crear la caja donde suelo mostrar los códigos y ahí va la respuesta. Para hacerlo agregaremos estilos CSS donde personalizaremos la caja, es decir background, color, margin, padding etc. Lo podemos hacer agregando las propiedades en la plantilla, antes de ]]></b:skin> y el código a añadir es el siguiente:

aqui el codigo

/* Caja de código */
pre {
background:transparent url(aquí la url de una imagen) no-repeat 0 0; /* Imagen Superior, si deseas cambiarla modifica lo que se encuentra dentro de url(AQUI) */
padding-top:22px; /* Relleno - para ajustar Fondo */
}
pre code {
overflow:auto; /* Determina si es necesario agregar barras de Scroll */
background-color:#E9E9E9; /* Color de Fondo en Hex */
border:1px solid #999999; /* Color de Borde en Hex */
color:#990000; /* Color de letra en Hex */
display:block; /* No tocar */
padding:8px; /* Relleno del cuadro */
white-space:pre; /* No tocar */
text-align:left; /* Alineacion del Texto , left=izquierda, center= centrado, right=derecha */su
min-height:63px; /* Altura minima del Cuadro */
}
/* Cuando pase el Mouse sobre la caja ocurrirá lo siguiente: */
code:hover {
background-color:#ffffff; /* Color de Fondo en Hex */
border:1px solid #666666;/* Color de Borde en Hex */le
}
/* FIN Caja de código */

Mostrar los últimos comentarios y los últimos artículos en la sidebar

2009-03-21T10:48:00.000-07:00

Este “truco” se basa en usar la dirección sindicación de comentarios y los artículos que todos los blogs de Blogger tienen. Estas direcciones son:

Para comentarios: http://tublog.blogspot.com/feeds/comments/default
Para artículos: http://tublog.blogspot.com/posts/comments/default

Donde tublog.blogspot.com es la dirección de tu blog.

Ahora solo hay que ir a Diseño/Elementos de página y dar clic en Añadir un gadget, en la ventana que se abre se selecciona un gadget de Feed y se escribe la dirección de comentarios para mostrar los últimos comentarios, se repite el proceso para crear un nuevo gadget de feed pero esta vez usando la dirección de los artículos.

Eliminar la navbar o barra Blogger

2009-03-21T08:59:00.000-07:00

Aunque esta barra puede tener algunos atajos para manejar nuestro blog, su valor es poco o nulo para el lector, ocupa espacio extra y es poco estética. Eliminarla es sumamente sencillo, solo hay dirigirse a Diseño/Edición HTML y buscar el siguiente código:

 ]]></b:skin>

Y justo antes pegar lo siguiente:

#navbar-iframe { height:0px; display:none; visibility:hidden; }

Politica De Privacidad

2009-01-11T20:01:00.000-08:00

Politica De Privacidad:

Nuestra política de privacidad describe como recogemos, guardamos o utilizamos la información que recabamos a través de los diferentes servicios o páginas disponibles en este sitio. Es importante que entienda que información recogemos y como la utilizamos ya que el acceso a este sitio implica la aceptación nuestra política de privacidad.

Logs

Como muchos sitios web, nosotros usamos logs. Esto incluye tu dirección de protocolo de Internet (IP), tipo de navegador, internet service provider (ISP), páginas referidas y de salida, tipo de plataforma, fecha/tiempo , y número de clicks para motivos de análisis, administración del sitio, y conseguir información demográfica. Las direcciones IP no revelan información personal.

Cookies

El acceso a este puede implicar la utilización de cookies. Las cookies son pequeñas cantidades de información que se almacenan en el navegador utilizado por cada usuario para que el servidor recuerde cierta información que posteriormente pueda utilizar. Esta información permite identificarle a usted como un usuario concreto y permite guardar sus preferencias personales, así como información técnica como puedan ser visitas o páginas concretas que visite.
Aquellos usuarios que no deseen recibir cookies o quieran ser informados antes de que se almacenen en su ordenador, pueden configurar su navegador a tal efecto.

La mayor parte de los navegadores de hoy en día permiten la gestión de las cookies de 3 formas diferentes:

1. Las cookies no se aceptan nunca.
2. El navegador pregunta al usuario si se debe aceptar cada cookie.
3. Las cookies se aceptan siempre.

El navegador también puede incluir la posibilidad de especificar mejor qué cookies tienen que ser aceptadas y cuáles no. En concreto, el usuario puede normalmente aceptar alguna de las siguientes opciones: rechazar las cookies de determinados dominios; rechazar las cookies de terceros; aceptar cookies como no persistentes (se eliminan cuando el navegador se cierra); permitir al servidor crear cookies para un dominio diferente. Además, los navegadores pueden también permitir a los usuarios ver y borrar cookies individualmente.

Google, como proveedor asociado, utiliza cookies para publicar anuncios en su sitio. Los usuarios pueden inhabilitar el uso de la cookie de DART a través del anuncio de Google y accediendo a la política de privacidad de la red de contenido.

Dispone de más información sobre las Cookies en: http://es.wikipedia.org/wiki/Cookie

Web Beacons

Este sitio puede albergar también web beacons (también conocidos por web bugs). Los web beacons suelen ser pequeñas imágenes de un pixel por un pixel, visibles o invisibles colocados dentro del código fuente de las páginas web de un sitio. Los Web beacons sirven y se utilizan de una forma similar a las cookies. Además, los web beacons suelen utilizarse para medir el tráfico de usuarios que visitan una página web y poder sacar un patrón de los usuarios de un sitio.

Dispone de más información sobre los web beacons en: http://es.wikipedia.org/wiki/Web_bug

Terceros

En algunos casos, compartimos información sobre los visitantes de este sitio de forma anónima o agregada con terceros como puedan ser anunciantes, patrocinadores o auditores con el único fin de mejorar nuestros servicios. Todas estas tareas de procesamiento serán reguladas según las normas legales y se respetarán todos sus derechos en materia de protección de datos conforme a la regulación vigente.

Este sitio mide el tráfico con diferentes soluciones que pueden utilizar cookies o web beacons para analizar lo que sucede en nuestras páginas. Actualmente utilizamos las siguientes soluciones para la medición del tráfico de este sitio. Puede ver más información sobre la política de privacidad de cada una de las soluciones utilizadas para tal efecto.

Este sitio también puede albergar publicidad propia, de afiliados, o de redes publicitarias. Esta publicidad se muestra mediante servidores publicitarios que también utilizan cookies para mostrar contenidos publicitarios afines a los usuarios. Cada uno de estos servidores publicitarios dispone de su propia política de privacidad, que puede ser consultada en sus propias páginas web.

Google utiliza empresas publicitarias asociadas para publicar anuncios cuando visita nuestro sitio web. Es posible que estas empresas usen la información que obtienen de sus visitas a este y otros sitios web (sin incluir su nombre, dirección, dirección de correo electrónico o número de teléfono) para ofrecerle anuncios sobre productos y servicios que le resulten de interés.

Actualmente este sitio alberga publicidad de:
Google Adsense: http://www.google.com/intl/es_ALL/privacypolicy.html

Condiciones de uso

http://zonatrucosblogger.blogspot.com/ usa una licencia Creative Commons que permite la utilización de sus contenidos con fines no comerciales, exigiendo sólo la atribución al autor. Esto significa que todos los contenidos de http://zonatrucosblogger.blogspot.com/, salvo las fotos, pueden ser usados libremente, cualquiera puede copiarlos, reproducirlos, distribuirlos y modificarlos, las únicas condiciones que se imponen son que sea con un fin no comercial y que se mantenga la atribución original a su autor.

1. Para consultar las condiciones de la licencia puedes visitar Licencia Creative Commons.
2. Para consultar el texto legal puedes ir a Legal Code para Licencia CC.

Información de contacto

Si tienes alguna duda acerca de la política de privacidad o deseas más información, puedes escribirme a everth21@zonazoft,com.