0

Comentarios que se expanden debajo de las entradas


Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
Es un hack de Singpolyma que nos permitirá ver los comentarios expandidos debajo de cada entrada en la página principal.
Su funcionamiento es sencillo: cuando pinchemos en "comentarios" debajo de una entrada, los comentarios aparecerán expandidos debajo de ella, si volvemos a pinchar de nuevo en "comentarios" se contraerán, volviendo a ocultarse.
Su inclusión en la plantilla, ya no lo es tanto, es decir, no tendrá ninguna complicación en una plantilla original de Blogger sin cambios anteriores, pero probablemente tendremos problemas al localizar los códigos, si previamente hemos hecho algún tipo de cambio en la zona.
Lo mejor sería probarlo antes en una plantilla de prueba, y mejor aún, descargar una copia de la plantilla donde queremos usarlo y cargarla en un blog de pruebas, antes de trabajar en la "de verdad".
Antes de empezar, lo mejor será ver como funciona, para ello podéis visitar Singpolyma y hacer la prueba pinchando en los comentarios debajo de una entrada.

[1] Iremos a la parte de edición HTML de nuestra plantilla y expandiremos los artilugios.
Localizamos el cierre de la cabecera </head> y justo antes, incluimos este script:
<script type="text/javascript">
//<![CDATA[
var comment_form_template = '<div class="commentelem"><div class="comment-poster">[[AUTHOR]]</div>\n'
+ '<div class="comment-body"><div class="innerCmntBody">[[BODY]]</div></div>\n'
+ '<div class="comment-timestamp"><a href="[[PERMALINK]]" title="comment permalink">[[DATE]]</a></div></div>\n';
if(typeof(thisblog_showCommentPhotos) == 'undefined')
thisblog_showCommentPhotos = false;
//]]>
</script>

<script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;amp;id=2941927' type='text/javascript'></script>

[2] Tendremos ahora que localizar estas líneas de código:
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>

Y sustituimos la segunda línea por este código:
<div class='comments' expr:id='"comments" + data:post.id'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"commentsul" + data:post.id'> </div>
<script type='text/javascript'>
document.getElementById('comments<data:post.id/>').style.display = 'none';
</script>
</b:if>

Por debajo de esto, localizamos ahora esta línea:<dl id='comments-block'> y justo encima, colocaremos esta otra:
<div expr:id='"commentsul" + data:post.id'> </div>

[3] Buscamos ahora estas otras dos líneas de código, que nos servirán de orientación:
<b:includable id='main' var='top'>
<!-- posts -->

Una vez localizada esa sección, veremos dentro de ella, normalmente algo más abajo, lo que en realidad nos interesa:
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if></b:if>

Cambiamos ese código completo por este otro:
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>

[4] Por último localizamos la parte correspondiente al comienzo de la sección de nuestras entradas, para situarnos:
<b:includable id='post' var='post'>

Más abajo veremos el código que en realidad hemos de modificar:
<b:if cond='data:post.allowComments'>
<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>

Lo eliminamos y colocamos este en su lugar:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<b:loop values='data:post.feedLinks' var='f'>
<a class="comments" rel="comments" expr:href='data:post.url + "#comments"' expr:onclick='"peekaboo_comments_display(&amp;quot;" + data:f.url + "&amp;quot;,&amp;quot;commentsul" + data:post.id + "&amp;quot;,&amp;quot;&amp;quot;,&amp;quot;" + data:post.url + "#comments&amp;quot;,&amp;quot;false&amp;quot;);toggleitem(&amp;quot;comments" + data:post.id + "&amp;quot;);return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:loop>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.url + "#comments"' expr:onclick='"toggleitem(&amp;quot;comments" + data:post.id + "&amp;quot;);return false;"'><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>

¡Suerte!

0

Vender un link en tu blog

Una amiga acaba de mandarme la dirección de este curioso servicio online.
¿Venderías un link de texto en tu blog? ¿Cuanto podrías cobrar por este servicio?
En Link Price Calculator sabrás en unos segundos la tarifa más justa para aplicar a tu "venta de links", tan solo has de poner la dirección (url) de tu blog y escribir el código que ves en una imagen (esto es para prevenir el spam).
Para mi no es útil en absoluto, ya que yo jamás haría eso, pero no he podido resistirme a saber a cuanto podría cobrarlos redface :

Precio del link

Podemos además incluir un widget en nuestro blog, para facilitar a nuestras visitas el calcular su propia "tarifa-link":

Obtener código para el widget.

0

Enlace a correo electrónico

Para crear un enlace hacia un correo electrónico usaremos el atributo href como para cualquier otro enlace , pero agregaremos al principio de la dirección el mailto: que vendría a sustituir el protocolo (http://, ftp://, etc).

Ejemplo con texto

<a href="mailto:lejaniaimposible@hotmail.com">Email del Escaparate</a>

En este ejemplo, lo que se vería donde coloquemos el enlace es "Email del Escaparate" y al pinchar sobre eso, se abrirá automáticamente el formulario para enviar el email.

Email del Escaparate

Ejemplo con imagen

<a href="mailto:lejaniaimposible@hotmail.com"><img src="http://img123.imageshack.us/img123/1621/iconoemaildn0.gif"/></a>

Como se observa en el ejemplo, hemos de sustituir el texto del enlace (Email del Escaparate) por la dirección (url) de la imagen.



Consulta también: Tu email en imagen (evitando el spam)

¡Suerte Javier!

0

Color de "seleccion de texto" personalizado

Gracias a Paula que me envia un email sobre el tema, he descubierto en Web Intenta una forma de conseguir con CSS cambiar el color de fondo de la selección de texto en nuestro blog.
Cuando pasamos el ratón sobre cualquier texto que queremos copiar, el navegador que estamos usando le aplica por defecto un color, aplicando unas líneas de código en la parte del css de nuestra plantilla, podremos escoger el color nosotros mismos.
Pero como casi todo tiene sus limitaciones, el efecto solo es válido, al menos de momento, en Firefox y en Safari.
Podéis ver un ejemplo en la página original del "truco" CSS-Tricks pasando el ratón como si fueseis a copiar el texto.

Aplicar el efecto a todo el blog

En la parte del CSS de nuestra plantilla, antes de ]]></b:skin> por ejemplo, colocamos estas líneas de código (en este ejemplo para el color amarillo):

::selection {
background: #fff2a8; /* Safari */
}
::-moz-selection {
background: #fff2a8; /* Firefox */
}


Aplicar el efecto solo en las entradas del blog

Las líneas del CSS que usaremos entonces serán estas (en el ejemplo de color naranja):

.post p::selection {
background: #FF9933 /* Safari */
}

.post p::-moz-selection {
background: #FF9933 /* Firefox */
}


Aplicar el efecto en una parte del blog concreta

[1] Colocaremos estas líneas de código en el CSS:
p.red::selection {
background: #ffb7b7;
}
p.red::-moz-selection {
background: #ffb7b7;
}


[2] Cada vez que queramos aplicar el efecto, hemos de añadir:

<p class="red"> ........ Aquí el contenido que luego se verá coloreado al pasar el ratón para marcarlo…………………… </p>


[3] Podemos pegar el último código en la plantilla de entrada, que está en "Configuración-formato" de nuestra plantilla, así lo tendremos siempre a mano cuando editemos una entrada y queramos usarlo para una parte de la misma, sino vamos a usarlo se borra y listo.

[4] En el ejemplo he escogido el color rojo (red), pero en CSS-Tricks, están también los códigos para el azul(blue) y el amarillo (yelow), aunque puede usarse cualquier color:

Azul
p.blue::selection {
background: #a8d1ff;
}
p.blue::-moz-selection {
background: #a8d1ff;
}


Amarillo
p.yellow::selection {
background: #fff2a8;
}
p.yellow::-moz-selection {
background: #fff2a8;
}

0

Scroll desaparecido en la parte de Diseño de la plantilla

Ejemplo Diseño
En mi anterior entrada hablaba precisamente sobre los problemas conocidos de Blogger, pues bien, unos de los problemas que Blogger ya conoce pero para el que no acaba de dar solución, es la desaparición de la barra de scroll en la parte de Diseño de la plantilla.

Este problema está afectando especialmente a las plantillas a las que se ha añadido una nueva columna o se ha modificado su anchura, en las que es imposible ver algunos de los elementos completos e incluso directamente no se ven, lo que hace muy complicado y, en algunos casos imposible, la posibilidad de trabajar en ellos.
Supongo que todos los llamados "blogs de ayuda" hemos estado recibiendo emails y comentarios al respecto, en algunos, como es el caso de Vagabundia se ha producido un intercambio de posibles soluciones u opiniones al respecto.
El caso es, que en uno de estos comentarios Jesgo aporta una solución interesante, y que además he comprobado que funciona. Se trata simplemente de usar las teclas de desplazamiento del cursor según nos interese, a derecha o izquierda, no es demasiado cómodo, pero nos sacará del apuro mientras el equipo de Blogger lo soluciona.

Teclas de direcciones

Teclas de direccion(Arrow keys). Grupo de botones de un teclado de computadora que sirven para mover el cursor de la pantalla hacia una determinada dirección.

Generalmente están ubicadas del lado inferior derecho del teclado, al lado del teclado numérico. Son cuatro botones con flechas que apuntan hacia arriba, abajo, a la derecha y a la izquierda.

Las teclas de direcciones se utilizan para moverse por los documentos y para los juegos de computadora. Antes del ratón, las teclas de direcciones eran la forma principal de moverse en la pantalla.

En los teclados extendidos, las teclas de direcciones están duplicadas en la parte númerica del teclado. Si Num Lock está desactivado, esas teclas pueden usarse como teclas de direcciones, pero si está activo, esas teclas se utilizan como números.


Ya me contaréis si os funciona a vosotros...

0

Problemas conocidos de Blogger

Report itEl equipo de Blogger tiene una blog que se llama "Known Issues for Blogger" o lo que viene a ser lo mismo "Problemas conocidos por Blogger".
En esta página se recogen los últimos problemas o errores en Blogger, que están afectando a un determinado número de sus usuarios. Esto quiere decir que ellos conocen el problema y que están tratando de solucionarlo.
Al lado de cada error o problema recogido en la página, podemos ver un botón que dice "Report it" que es algo así como, "Informar de este problema", para usarlo en el caso de que también estemos notando ese error, así el equipo de Blogger podrá estar al tanto de cuantos son los afectados aproximadamente, lo que supongo yo, les ayudará a valorar cuales son los errores más acuciantes: "mayor número de afectados = más prisa para solucionar el problema", o eso espero...

El mayor problema es que la página está en inglés, pero no es demasiado difícil conseguir entender lo que pone, más o menos, usando el traductor de Google o un servicio cualquiera de traducción online.

Está bien saber en determinado momento, que ese fallo que nos preocupa tanto, no es solamente de nuestra plantilla, ya que a veces nos "volvemos locos" tratando de solucionar algún error que, teniendo un poco de paciencia, solucionará el equipo de Blogger, tarde o temprano...vamos a ser pacientes y a darles un voto de confianza, ¿no os parece? wink

Eso si,mientras esperamos la solución, podemos usar el "Report it" para que se den un poquito más de prisa en reparar el error. wink

0

Buscadores de iconos

La forma más fácil y rápida para conseguir uno o varios iconos para el diseño de nuestro blog es usar un "buscador de iconos". El mayor problema de este tipo de buscadores (al menos los que yo conozco) es que están en inglés, es decir, que nosotros hemos de usar ese idioma para buscar el icono que necesitemos.

Iconlet Un práctico buscador de iconos en formato .GIF y .PNG. En su base de datos tiene más de 40.000 iconos todos de uso libre.
Usando su opción de búsqueda avanzada (Advanced Search) donde podemos además de la palabra clave especificar el tamaño, formato y licencia de uso.

SearchIcon Colocamos en su buscador una palabra clave para la búsqueda del icono (en inglés) y nos devuelve todas las coincidencias que tenga en su base de datos que, ahora mismo, consta de 61225.

IconDB Nos permite buscar iconos de varias fuentes. Introducimos la palabra en inglés (home, comments...). Pinchando en el icono que nos guste aparecerá la información al respecto: la url, el enlace de descarga, el tipo de imagen y las palabras claves por las cuales estaba incluido.
Es conveniente acceder a la url del propietario del icono y ver las condiciones de uso que este ha establecido para el icono.

Iconfinder Tiene indexados más de 21.000 íconos libres. Tenemos que ingresar una palabra relacionada con el icono que estamos buscando (mail, home, folder...), y el sistema devuelve una lista de iconos, que podemos filtrar por tamaño.

Iconspedia Aunque no es un buscador propiamente dicho, si podemos hacernos en la web con multitud de iconos, algunos muy originales y con muy buen diseño. Es una especie de "Wikipedia" de iconos, donde los encontraremos ordenados según su temática.

Y vosotros...¿Conocéis alguno más?

Aportes de: La Bloguería
-Website Iconshttp
-Real World Graphicshttp
-Icon Libraryhttp
-Iconos y más iconos

Aportes de: Yolanda
-Iconkits
-IconShock
-Virtuallnk
-Iconhaolic
-Interfacelift

Aporte de:E Bosch:
-IcoFX Una herramienta gratuita para aquellos que prefieran un diseño propio.

Aporte de: Seguros
-Warez Team

Aporte de: Un perro
-DryIcons.com