Añadir "Blog reactions" a nuestros posts

Con este pequeño truco vamos a añadir en cada una de nuestras entradas un vínculo que hace referencia a la repercusión en otros blogs de nuestros artículos. Muchos ya lo habréis visto en infinidad de páginas, pero para otros tal vez sea nuevo. Si tenemos un blog y queremos saber qué importancia o a qué otros bloggers les interesa nuestras entradas qué mejor manera que ver la repercusión que tiene cada una de nuestras aportaciones en la red de redes de los Blogs; Technorati.
Pues bien, con este sencillo código lo conseguiréis, eso si, tal vez los resultados no os gusten tanto... ;)

Lo primero es ir a la plantilla HTML y expandir los widgets.
Ahora buscamos la siguiente línea de código.

<p class="post-footer-line post-footer-line-3">

A continuación añadimos este script:

<script src="http://embed.technorati.com/linkcount" type="text/javascript"%gt;</script><a href="http://www.blogger.com/%22http://technorati.com/search/%22%20+%20data:post.url" rel="linkcount">View blog reactions</a>

Ojo con las aperturas y cierres de <p y </p>

Códigos en los posts

En uno de los comentarios me preguntan qué método uso para poder mostrar "widgets" dentro de un post. La verdad es que no tiene ninguna ciencia ya que lo único que hay que hacer es meter el código que nos dan en muchas aplicaciones de terceros. Se sigue el mismo método que al colocar un vídeo de Youtube dentro del post. No hay más que colocar el código que nos dan y listo. La pregunta venía por si tendríamos que usar alguna etiqueta especial para que Blogger lea el código y lo interprete como tal. Pues no, no hace falta hacer nada, de hecho el problema surge cuando queremos mostrar el texto de un código sin que Blogger lo interprete, pero eso ya es otra historia.

Existen infinidad de códigos proporcionados por terceros para mostrar en nuestros posts, sidebars o donde queramos. Por citar algunos ejemplos que uso a menudo (ya que hay infinidad de ellos), podríamos hablar de:

• Reporoducir vídeo: Youtube, Googlevideos ... etc
  
• Visualizar imágenes: Flickr, Slide ... etc
• Feeds: Feedostyle, Feeddigest, FeedBurner ... etc

Y un larguísimo etc, que abarcan desde juegos en flash hasta chats y demás utilidades.


Por ejemplo, el feed de zona de pruebas de FeedBurner embebido con SpringWidgets

Get this widget!

El mismo feed, esta vez con FeedDigest:

Mejora para el truco de Leer más

Una manera muy vistosa de redecorar el truco de leer más que ya vimos en este otro post. Con estos pasos conseguiremos un efecto fade in y fade out estupendo en el texto oculto. El truco es obra de Hackosphere (una vez más) y me parece realmente vistoso.
Para instalar el truco en nuestra página tendremos que hacer un par de incursiones en la plantilla. La apariencia final depende del color de fondo que tengamos en nuestros posts, así que para evitar el tener que andar entrando en el editor de HTML para ir cambiando los códigos de colores hasta encontrar el que más nos guste yo opto por crear una variable de color para poder cambiarla cómodamente desde "Colores y Fuentes" sin tener que bucear en la plantilla o liarnos con los códigos de colores.

Así pues buscamos en la plantilla, casi al principio, la zona en la que se definen las variables y añadimos esta:

<variable name="peekbgcolor" description="color fade" type="color" default="#fff" value="#f2984c">

Después buscamos la etiqueta de cierre </head> y justo encima ponemos este script:

<!-- EFECTOS PEKABOO -->
<script src='http://anniyalogam.com/scriptaculous/src/prototype.js' type='text/javascript'/>
<script src='http://anniyalogam.com/scriptaculous/src/scriptaculous.js?load=effects' type='text/javascript'/>
<script type='text/javascript'>
var fade = true;
var peekaboo_bgcolor = peekbgcolor$;
</script>
<!-- FIN EFECTOS -->

Tan sólo nos queda un paso más y es localizar esta línea en nuestra plantilla y borrarla:

<style>#fullpost {display:none;}</style>

Ahora el truco ya está instalado en la plantilla. Para usarlo no tendremos más que usar en los posts donde queramos que aparezca la siguiente estructura:

TEXTO SUMARIO
<span id="fullpost">
TEXTO OCULTO
</span>


Prueba a mostrar el texto


Tras la etiqueta fullpost colocamos todo el texto oculto que queramos mostrar sólo al pulsar sobre "sigue leyendo", "leer más" o lo que hayamos escogido. El efecto que se consigue con esta mejora es bastante vistoso.

Problemas con los Posts expandibles?

Tal vez hayas instalado los Posts Expandibles en tu blog siguiendo las instrucciones de este Blog, o tal vez desde otro pero igualmente experimentes (o vayas a experimentar) problemas en su funcionamiento. Esto es debido a que muchos trucos que usamos los Bloggers tienen la misma procedencia con lo que es posible que usemos el mismo script... lo que quiero decir es que si no estás seguro vale la pena que le eches un vistazo. La cuestión es que el sistema que usamos en esta página y otras muchas es gracias a un Script de Hackosphere. Lo que ha ocurrido es que la página en la que se haya hospedado dicho script se ha visto desbordada de tal manera que no funciona correctamente. Para solucionarlo deberemos eliminar la linea de código que instalamos en su momento e instalar el script completo en nuestra plantilla justo encima del cierre </HEAD>. Una vez hecho, los problemas desaparecerán.

Gracias a Hackosphere por compartir su script, su espacio y su tiempo.

El script completo lo teneis aquí


Actualizacion: Parece ser que la página con el script ya no está disponible... aquí os lo dejo:

<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}

function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}

</script>

Corregir "0 comentarios" y "1 comentarios"

Tal y como viene la plantilla de blogger, en aquellas entradas en las que no hay todavía ningún comentario podemos leer "0 comentarios", que hay que reconocer que no queda demasiado bien, aunque es bastante peor cuando sólo hay un comentario y leemos "1 comentarios". Con este truquillo sacado del Wiki de BeatifulBeta vamos a subsanar ese pequeño fallo.

Para ello tendremos que meternos de lleno en la plantilla, expandir los widgets y buscar este código:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'> <!-- if the page is NOT an itempage, display the link -->
<b:if cond='data:post.allowComments'> <!-- if the post allows comment to be made, display the link -->
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/><data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>
</b:if>
</b:if>
</span>

En este fragmento de código tenemos los condicionales que le dicen a Blogger que palabra añadir tras el valor numérico de los comentarios. Si quereis comprender este truco y hacerlo paso a paso podéis visitarlo en el propio Wiki donde está explicado, pero si lo que queréis es hacerlo todo de un tirón y evitar así problemas con los cierres de las etiquetas, ya que es fácil confundirse, mi consejo es que borréis toda esa sección y la sustituyáis por esta otra:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'> <!-- if the page is NOT an itempage, display the link -->
<b:if cond='data:post.allowComments'> <!-- if the post allows comment to be made, display the link -->
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'> No hay comentarios
<b:else/>
<b:if cond='data:post.numComments == 1'>1 comentario
<b:else/><data:post.numComments/> comentarios
</b:if>
</b:if>
</a>
</b:if>
</b:if>
</span>

Las zonas coloreadas son las que podemos cambiar para añadir el texto que deseemos. La primera es cuando no hay comentarios. La segunda cuando hay un comentario y la última para todas las demás posibilidades, es decir, de 2 comentarios en adelante.

Postreach

Un nuevo servicio orientado al mundo de los blogs. En este caso se trata de una utilidad que permitirá incluir un nuevo sistema de comentarios al estilo de los marcadores sociales ya que además de permitir a los más vaguetes dejar su opinión en un post con un solo click, desde la página de Postreach podremos ver los posts de diferentes blogs dependiendo de los clickeos acumulados en cada uno... vamos, al más puro estilo Digg, Fresqui, Meneame... etc.
Además de este novedoso sistema de comentar los posts, que podéis ver instalado en este mismo blog, nos permitirá tambien intercambiar posts con otros blogs registrados, esto quiere decir que en nuestro blog aparecerá una reseña de una entrada de otro blog (que en principio debería ser de la misma temática que el nuestro... pero ya veremos si con el tiempo esto se hacer realidad) y a cambio nuestras entradas saldrán en otros blogs. Un buen sistema para publicitarnos y darnos a conocer en otras páginas que en teoría, tienen temáticas similares.

Para instalar el sistema de comentarios simplemente tenemos que ir a su página y rellenar un sencillo formulario en el que incluimos nuestra URL, idioma y temática. Una vez hecho esto se autoinstalará en nuestra plantilla. Si luego queremos eliminarlo no tendremos más que ir a la edición HTLM de nuestro blog y buscar este código (sin expandir widgets):

<b:widget id='HTML13' locked='false' title='Comenta con un Click' type='HTML'/>

Este es el correspondiente a mi plantilla, pero depende del nombre que le pongais al widget en vuestro caso.

Para instalar el sistema de intercambio de Posts (Guestpost) deberemos rellenar una serie de campos en la página de Postreach similares a los que pusimos en el de los comentarios. Una vez hecho esto, deberemos añadir el código que nos proporcionan en la plantilla, pero esta vez hay que acordarse de expandir los widgets.

Truco de "Leer más..." (II parte)

Inconformista que es uno y haciendo honor al título del blog, el truco anterior no ha superado la Prueba y aunque el resultado no es malo y no en todos los blogs da problemas, me he puesto a buscar alternativas, que haberlas hailas y vamos a probar otro sistema.

Este otro sistema requiere un poquito más de trabajo a nivel plantilla y puede que alguno de los pasos sean necesarios en unos blogs si y otro no. Lo primero que hay que hacer es añadir un script justo encima del cierre </HEAD>

Añadimos este código:

<script type='text/javascript' src=
'http://www.anniyalogam.com/widgets/hackosphere.js' />

Si como yo, eres un habitual de los trucos de HACKOSPHERE es casi seguro que ya tengas esta línea incluída así que no será necesario añadirla.

El siguiente paso nos lleva a la zona de plantilla referida a los posts. Para encontrarla deberemos expandir la plantilla de artilugios y buscar este código:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Lo seleccionamos por completo y lo borramos, sustituyendolo por este otro:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

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

<div class='post-body'>

<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 + "\");"'>Sigue leyendo</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Ocultar texto</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

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

Una vez hecho esto el sistema ya está incluido y lo único que tendremos que hacer para utilizarlo es usar esta estructura en los posts:

TEXTO SUMARIO
<span id="fullpost">
TEXTO OCULTO
</span>

Truco de "Leer más..."

En muchas páginas vemos como muchos de sus posts tienen contenido expandible mediante un vínculo "leer más", "sigue leyendo" .. etc. Este truco es fácilmente incluible en cualquier blog y además, por su sencillez de uso es recomendable instalar para usar al menos en las entradas más largas que al final afean un poco la apariencia del blog, por lo que siempre es últil el contar con la posibilidad de poder mostrar un sumario o el post completo con un simple click.

Para incluir este truco en nuestra plantilla lo primero que hay que hacer es irnos al editor HTML y explandir la plantilla de artiluigios. A continuación buscamos este código:

<div class=’post-body’>

Y justo debajo añadimos este otro:

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

justo debajo debería aparecer esta línea:

<data:post.body/>

y a continuación introducimos lo siguiente:

<a expr:href='data:post.url'>Leer más...</a>
</b:if>

Hecho esto podemos guardar nuestra plantilla y ya estamos listos para usar el sistema de sumario/post completo en cualquier entrada. Para ello deberemos seguir la siguiente estructura en un post:

SUMARIO (texto que siempre se muestra)

<span class="fullpost">

TEXTO OCULTO (resto del post, que sólo se mostrará al pulsar en "leer más...")

</span>



Este truco lo he visto en Blogmundi

Actualizo: De momento voy a mantener este sistema, aunque he visto y no es cosa sólo mía que a pesar de que no uso este truco en todos mis posts, el vínculo de leer más aparece al final de cada una de mis entradas. En aquellas que no hay texto oculto lo único que hace es dirigirnos al permalink de esa entrada con lo cual una manera un poco cutre de solucionar este fallo, de momento es sustituir el texto "leer más..." del código que hemos visto por algo así como "ver post completo/ ver comentarios"... ;), un poco chafardero?... pues si...

Posts Expandibles (peekaboo)

Sin duda uno de los hacks para blogger más apetecibles. Con él conseguiremos ver de una manera muy limpia todos los posts de una categoría sin tener que leer el post completo. Gracias a este sistema veremos sólo los títulos de cada entrada, pero veremos [+/-] al lado de cada uno de los títulos. Si queremos leer alguno no tenemos más que pinchar ahí y veremos como se expande el post y con un nuevo click, como se retrae. Para poder usar este truco en nuestro blog tendremos que añadir unas cuantas lineas de código en diferentes partes de nuestra plantilla.

Lo primero que vamos a hacer es una copia de la plantilla para evitar problemas ya que no es difícil equivocarse al pegar los códigos y luego se puede hacer casi imposible localizar el error. Una vez hecha la copia, buscamos la etiqueta de cierre HEAD, que a estas alturas ya debe estar bastante recargada la pobre... :D Justo debajo del cierre pondremos el siguiente script:

<script type='text/javascript' src=
'http://www.anniyalogam.com/widgets/hackosphere.js' />

Después tendremos que buscar una cadena en nuestra plantilla. Tendreis que ir con cuidado para no cometer errores ya que hay que meter código en medio del código ya existente y un salto de línea puede echar al traste con todo el truco. Copiad las zonas en rojo y las copias exactamete igual que en el ejemplo. Después guarda los cambios y reza para que no hayas hecho nada mal.. ;), seguro que no.

Gracias a Hackosphere por el truco y a Gem@ por la simplificación


IMPORTANTE: Este truco requiere una actualización. Si es la primera vez que lo vas a utilizar o bien estás teniendo problemas de funcionamiento, por favor, échale un vistazo a este otro post.

Últimos artículos por categoría

Una buena alternativa al código de Últimos Artículos con un par de diferencias clave que harán que uséis uno u otro sistema. En este nuevo código no podremos ver las primeras líneas del post como hasta ahora, pero a cambio nos permite mostrar por orden cronológico los posts que deseemos organizados en función de las categorías que hemos creado. Para introducir este nuevo código deberemos tener bastante cuidado ya que hay que introducirlo exactamente entre dos etiquetas "b:widget" de nuestra plantilla y es fácil equivocarse. No hay que preocuparse entre que Widgets meterlo ya que después podremos moverlo de un sitio a otro desde la página de diseño de nuestro panel de Blogger sin tener que andar copiando y pegando códigos. El código completo lo podeis copiar directamente desde aquí, pero una vez introducido en nuestra plantilla tenemos que cambiar un par de cosas para ponerlo a nuestro gusto:

Buscamos en el código esta sección:

ar homeUrl3 = "hoctro.blogspot.com";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

Las partes coloreadas son las que deberemos cambiar por nuestra página, el número de posts por categoría que vamos a mostrar y el número de categorías que se mostrarán.

Además, este script sólo mostrará los posts de todas las categorías en la página principal, pero si seleccionamos una categoría en concreto, o bien visitamos un artículo concreto, mostrará sólo los artículos etiquetados en esa categoría/s.

He optado por no ponerlo en esta página por una sencilla razón, y es que , como ocurre con muchos scripts, tiene problemas con los acentos con lo que las categorías se muestrarn con errores tipográficos. Si quereis verlo en funcionamiento podeis pasaros por Manda Carallo.

Este truco es obra, una vez más, de Hoctro

Crear bloques de citas

En muchos blogs habreis visto que los bloques entrecomillados tienen una apariencia única y destacan completamente con respecto al resto del texto. Para poder hacer algo así en nuestro blog tenemos que hacer una serie de cambios en la plantilla, muy similar al truco de las "dropcaps" .
Necesitamos definir el bloque con lo que añadiremos este código en la zona CSS de la plantilla.

.pullquote {
width: 15%;
background-color:$pullquoteBgColor;
background-image: url(http://home.planet.nl/~hansoosting/images/quotes_grey.gif);
background-repeat: no-repeat;
color:$pullquoteTextColor;
float: right;
border:1px solid $borderColor;
font-weight:bold;
line-height:120%;
padding:40px 10px 10px 10px;
margin-top:10px;
margin-left:10px;
}

Para modificar a gusto de cada uno el estilo, deberemos definir los colores de cada uno de los parámetros en nuestra plantilla (pullquoteBgColor, borderColor y pullquoteTextColor). Todas las variables se definen en nuestra plantilla. Para encontrarlo hay que buscar este encabezado de texto:

/* Variable definitions
====================

A partir de ahí, copiamos la estructura de una variable y ponemos por ejemplo:

(Variable name="pullquoteBgColor" description="Color de fondo para cita"
type="color" default="#fff" value="#ffffff")

donde añadimos el color que queremos usar. Haremos lo mismo para cada una de las variables o bien, la manera más vaga y directa es sustituir esas variables en el código por otras ya usadas en la plantilla. También podemos usar una imagen distinta para las "comillas", como siempre, deberemos subir nuestro diseño a una página externa para poder luego usarla.

Ahora, cuando estemos escribiendo una entrada y queramos entrecomillar un bloque, en lugar de usar (blockquote)(/blockquote) usaremos :
(span class="pullquote") texto (/span)

Ejemplo:

También podemos usar una imagen distinta para las "comillas", como siempre, deberemos subir nuestro diseño a una página externa para poder luego usarla.

al mismo tiempo, se pueden definir diferentes parámetros para cambiar la apariencia del bloque. En este ejemplo se ha ensanchado el bloque y lo he alineado a la izquierda. Para controlar esos cambios no tenéis más que cambiar el código donde pone "width" y "float" (en este caso 50% y left)

Una cosa más, en la que ya no caía y creo que vale la pena comentar:
El hecho de definir cada una de las variables al estilo blogger, es que una vez terminado, podremos cambiar la apariencia del color de fondo, texto... etc con tan sólo ir a la página de Diseño en la opción "colores y fuentes".

Una vez más, este truco se lo debemos a BeatifulBeta.

Probando Dropcaps

Inauguramos este blog de pruebas con un pequeño hack que ya tenía ganas de probar, pero que sólo es útil si empiezas de cero un blog ya que si no tendrías que editar todas las entradas para poder verlos. Se trata de un código para que la primera letra del post se vea enorme. El código original lo he sacado de Beatiful Beta, un lugar muy recomendable para sacar jugo a blogger.

El truco viene a ser el siguiente:

Definimos una nueva clase denominada .dropcaps en las definiciones CSS de la plantilla.

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

En mi caso he cambiado $headerBgColor por $titlecolor ya que la primera variable no está definida en mi plantilla.

el ultimo paso es usar esta línea en todas las entradas del blog:

(span class="dropcaps")D(/spanclass)
Sustituye los paréntesis por ><>


Este ejemplo sería para la letra D. Si lo que queremos escribir en el post por ejemplo sería: Bienvenidos a esta página, la letra que habría que resaltar sería la "B" con lo que el código en modo HTLM sería algo así: (una vez más, recordad lo de los paréntesis...)

(span class="dropcaps")B(/span)ienvenidos a esta página

Gracias a Beatiful Beta por este hack