Trucos Blogger

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.