lunes, 8 de junio de 2009

El Truco De Leer Mas En Blogger

0 comentarios
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

0 comentarios
¿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!.

jueves, 4 de junio de 2009

Firma En Los Comentarios Del Autor

0 comentarios
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

0 comentarios
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

0 comentarios
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.
 

Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com