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

0

Analiza un archivo online con varios antivirus

Virus total
Virus Total es un servicio online y gratuito de Hispasec que nos permite de forma rápida y sencilla, examinar un archivo concreto con los antivirus más conocidos.
Yo misma lo he usado en varias ocasiones cuando algún archivo concreto me resultaba sospechoso a pesar de que mi antivirus no detectaba nada e, incluso, una vez que mi antivirus no dejaba de marcar un archivo como positivo, a pesar de que yo estaba casi segura de su error. En alguna de estas ocasiones, los resultados devueltos por el servicio, mostraban que el archivo había sido escaneado con 32 antivirus distintos.

Podemos subir directamente el archivo sospechoso desde nuestro PC, usando el botón "Examinar" y, una vez subido, pinchar en "Enviar Archivo", en unos minutos tendremos el resultado en pantalla.
Otra opción es enviar el archivo por correo electrónico como adjunto a analiza@virustotal.com poniendo como asunto "ANALIZA".

0

Publicar entradas futuras con Blogger in Draft

Logo Blogger in Draft
Esta tarde me avisa Jose, a secas, mediante un email de una nueva función que han incluido en Blogger in Draft.

Es una mejora extraordinaria que nos posibilita la tarea de publicar entradas en nuestro blog cuando, por el motivo que sea, no podemos actualizar. Podremos redactar una entrada como hacemos siempre, o varias, y a la hora de publicarlas, colocarles una fecha y hora futuras, llegado ese día y hora, la entrada se publicará de forma automática.

La forma de hacerlo es prácticamente idéntica a la que seguimos normalmente:

[1] Creamos la nueva entrada como hacemos siempre y, antes de publicarla, cambiamos la fecha y hora en "Opciones de entrada" colocando la fecha y hora futura en la que se va a publicar la entrada.
Publicamos la entrada como hacemos otras veces en "Publicar entrada".

Paso uno
[2] Comprobamos ahora como en la parte de "Editar entradas" aparece la nueva entrada como "programado", arriba veremos un mensaje informativo que nos indica la fecha y la hora en la que será publicada.

Paso dos
Recordad que no podremos usar de momento esta función, si no accedemos a nuestro panel desde Blogger Draft.

¡Gracias Jose!

0

No Follow

NoFollow
Blogger incluye por defecto en el código de nuestros blogs la opción "nofollow".

Esta opción impide que los buscadores registren las direcciones que se incluyen en los comentarios y en los backlinks, por lo que no serán tenidas en cuenta para mejorar el posicionamiento del blog y, por supuesto, para el cálculo del PageRank.

¿Qué es el PageRank?
PageRank (PR) es un valor numérico que representa la importancia que una página web tiene en Internet. Google se hace la idea de que cuando una página coloca un enlace (link) a otra, es de hecho un voto para esta última.

¿Qué son los backlinks o enlaces externos?
El término backlinks se refiere al número de páginas que enlazan a una web concreta (tus enlaces entrantes). Por ejemplo, si 10 directorios tienen un enlace a tu página web, tendrías 10 backlinks. El número de backlinks (enlaces externos), es importante para el posicionamiento en los buscadores y es indicativo de la popularidad o importancia de una web.

La intención de Blogger al incluir la opción "nofollow" en nuestros blogs, es la de evitar o, al menos disminuir, el spam en nuestros comentarios.
Buscando información sobre el tema en Internet, he leído opiniones para todos los gustos...a favor, en contra, indecisos...e incluso gente que se las ha ingeniado para conseguir dinero extra manipulando esta opción.
Yo acabo de retirar dicha etiqueta de mi blog ya que pienso que no influirá para nada en el aumento del spam, como todos sabemos en Blogger existe la posibilidad de moderar los comentarios e incluso de eliminarlos. Así que no me supondrá demasiado problema el controlar esta posibilidad de spam, al menos voy a probar una temporada...
Ya que muchas de mis visitas se toman el tiempo de comentar (a veces simplemente para agradecer mi ayuda), es justo que les devuelva el favor en forma de enlace adicional a su blog.
Así, a partir de hoy, cualquier comentario que dejéis en el Escaparate, será considerado por el gran Google como un enlace a vuestro blog, y afectará positivamente a vuestro Pagerank, eso si no lo hacéis como anónimo o alias, claro está.
Por supuesto que controlaré, como hasta ahora, la calidad de cualquier enlace adicional que se incluya en los comentarios, si lo considero como spam eliminaré el comentario y listo.
Por lo pronto he incluido un botoncito en el blog, en las páginas de etiquetas, debajo de "comentarios" y en la sidebar he puesto otro debajo de "últimos comentarios".
También he incluido El Escaparate en el Directorio de blogs sin nofollow aunque aún estoy pendiente de su revisión.
Para enviar vuestra url al directorio, antes tenéis que retirar el "nofollow" de vuestro blog y una vez confirmen que lo habéis hecho, incluirán vuestro blog en el directorio.
No piden nada a cambio, eso si, no estaría más el incluir un botón en vuestro blog, con un enlace a su web.

Como eliminar el NoFollow en los comentarios

[1] Ve a la parte del código de tu plantilla y expande los artilugios.
[2] Localiza esta línea de código:
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

[3] Elimina el rel='nofollow':
<a expr:href='data:comment.authorUrl'>
<data:comment.author/></a>


Como eliminar el NoFollow en los backlinks

[1] Seguimos los mismos pasos que para los comentarios, localizando en el paso [2], esta línea de código:
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>

Igual que antes, hemos de eliminar el rel='nofollow':
<a expr:href='data:backlink.url'>
<data:backlink.title/></a>

0

Eliminar numeración en etiquetas y archivos

Me pregunta Dimas en un email, como podría eliminar la numeración en las etiquetas y archivos, es decir, el dato que aparece a la derecha de cada etiqueta entre paréntesis y que muestra el número de cada una de ellas que empleamos en el blog.
Usamos en cada paso la vista previa antes de guardar nada.

En las etiquetas:

Hemos de ir a nuestra plantilla, expandir plantilla de artilugios y localizar el widget de las etiquetas, que empieza así:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>

Unas líneas de código más abajo veremos esto:
(<data:label.count/>)

Eliminamos esa línea y ya no aparece el "contador" de etiquetas.

En los archivos:

Para hacer lo mismo con los archivos del blog, expandimos los artilugios y localizamos el widget de los archivos, que empieza con esta línea de código:
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>

Unas líneas de código más abajo, localizamos esta parte del código y la borramos las veces que aparezca en el código:
(<data:i.post-count/>)

0

Ver quien nos enlaza desde nuestra sidebar

Links
Usando la "Búsqueda de Blogs" de Google, vamos a colocar un widget en nuestro blog que mostrará, en tiempo real, quién nos ha enlazado en su página.


[1] Accederemos a la página de Búsqueda de Blogs de Google y en la casilla de búsqueda colocaremos la dirección de nuestro blog precedida de link::

link:http://elescaparatederosa.blogspot.com


[2] Pinchamos en "Buscar Blogs" y en la página que se abrirá veremos los últimos enlaces que apuntan a nuestro blog.
A la izquierda de la misma página veremos que dice: Suscribir: Atom|RSS, elegimos una de las dos opciones (sirve cualquiera de las dos), pinchamos sobre ella con el botón derecho del ratón y escogemos "Copiar la ruta del enlace".

[3] Vamos a la parte de editar de nuestra plantilla, añadimos un nuevo elemento "Feed" y pegamos la url que acabamos de copiar. Si no hay problema, Blogger tardará unos segundos en mostrarnos los últimos cinco enlaces a nuestro blog, ahora solo tenemos que colocar un título apropiado para el widget y marcar si vamos a mostrar fecha y autor.

0

Cumpleaños feliz, feliz.

Aún quedan unos días para celebrar el primer año de vida del Escaparate, y aunque no tenía la intención de celebrar su cumpleaños, no he podido resistir la tentación e incluso me he adelantado a la fecha unos días, cinco para ser más exacta.
No tendría mejor oportunidad que esta para agradecer a todos los que alguna vez habéis pasado por aquí en este casi año del Escaparate y me habéis hecho sentir tan bien como me he sentido hoy.
Y es que esta mañana he recibido un correo muy especial de E Bosch con un inesperado regalo, que no puedo por menos que compartir con vosotros y, que no solo es para mi, en realidad es un homenaje a todos los blogs de ayuda.
Además de demostrar su agradecimiento con un emotivo artículo al respecto, E Bosch ha tenido la genial idea, creo yo, de diseñar un botón exclusivo para que los blogs que nos dedicamos a ayudar a otros en la mejora de los suyos, podamos lucirlo en nuestra sidebar. Los botones son a cual más bonito y digo bien,los botones, porque además del trabajo que supone el diseño de un botón, E Bosch se ha tomado la molestia de diseñar hasta ¡ocho modelos distintos!, con el único interés de (cito sus palabras):

Acabo de añadir una serie de botones que ofrezco a todos los que querais usarlos, son para uso exclusivo de los blogs de ayuda y la única intención es la de que ayuden a identificarlos (una especie de distintivo).


Me tomo también la libertad de copiar y pegar aquí una parte de su entrada, más que nada para que quede constancia de que subscribo sus palabras totalmente:
Los blogs de ayuda funcionan como una red. Se comunican los mutuos descubrimientos y se apoyan entre ellos para prestar ayuda a los que podemos necesitarla. Forman una comunidad virtual que funciona sin reglas explícitas y se rigen por la generosidad y el sentido común.

Sobra decir que me gustaría muchísimo empezar a ver el botón en "nuestra comunidad" que, como bien dice E Bosch, "funciona sin reglas explicitas" pero eso es, pienso yo, porque no se necesitan reglas cuando se usa "el sentido común".

En fin...no soy buena con esto de las palabras, así que lo mejor será que vosotros mismos comprobéis de que os hablo y que escojáis vuestro botón:
Los blogs de ayuda
¡Gracias E Bosch!

0

Taggify, añade comentarios en las imagenes de tu blog

En una de mis visitas habituales a UBH me he encontrado con un post donde Carmen explica de forma clara y sencilla, el uso de esta herramienta online.

Taggify, es un sistema que te permite añadir en línea anotaciones en las fotos de tu blog. Tus visitas verán una tooltip (pequeña ventana emergente), cuando pasan el puntero del ratón sobre la zona de la imagen que hayas seleccionado previamente.

[1] Nos registramos en la web de Taggify. Es un registro sencillo, solo te solicitan nick, password y correo electrónico, ni siquiera envían confirmación al email, por lo que el registro es instantáneo.

[2] En la siguiente página que se abre, personalizamos los colores, opacidad y demás de la imagen, para ello nos facilitan una imagen de guía donde vamos comprobando como quedarán las opciones elegidas.

[3] Una vez conseguido el aspecto deseado, abajo en "HTML Code" pinchamos en "Generate". Mantenemos la página de Taggify abierta.

[4] Vamos a nuestra plantilla (no hace falta expandir artilugios) y pegamos el código obtenido justo antes de </body>.

He de matizar en este punto, que al intentar pegar el código tal cual nos lo proporcionan allí, me saltó un mensaje de error que impedía guardar la plantilla, esto se soluciona añadiendo amp; justo después y sin espacios, de cada símbolo & que vemos en el código.


[5] Volvemos a la página en Taggify, al lado de la ventana con el código que hemos copiado, a la derecha, vemos un enlace que pone "Taggify Editor", lo arrastramos hacia la barra de nuestro navegador Firefox (al igual que Carmen, digo Firefox, porque es con el que lo he usado).

[6] Una vez en el blog, entramos en un post con foto o con imagen y pinchamos el marcador del editor de Taggify en el navegador. Nos pedirá los datos (nick y password) para poder editar la imagen y se abrirá el editor.
Seleccionamos ahora con el ratón el área de la imagen en el que vamos a colocar el mensaje e incluimos los datos a mostrar en el tooltip.
Guardamos y ya tendremos nuestro mensaje incluido en la imagen elegida.

Catedral de Oviedo

0

Kaspersky marca como Phishing algunos blogs en Blogger

Logo de kaspersky
Me han estado llegando varios emails con este problema.

A muchos usuarios de blogspot les está pasando que al acceder como visita a su mismo blog o al de otros alojados en Blogger, si están usando el antivirus Kaspersky, este les marca una alerta de posible Phishing.

He estado investigando sobre el tema y he encontrado que en varios foros los usuarios han estado consultando sobre el mismo problema...
Parece ser que sencillamente es un fallo de Kaspersky, que la compañía de este antivirus ya está informada, y que están tratando de solucionarlo.
Así que los usuarios que se están viendo afectados tendrán que tener paciencia, supongo que no tardarán en solucionarlo, por su propio interés...

En el foro de Kaspersky en español podréis ampliar la información al respecto.

0

Añadir un menú-bar al blog

Es un hack de Beautiful Beta, muy fácil de implementar en el blog.
En solo dos pasos, tendremos una barra para menú sobre la cabecera del blog.
Pensad que estas explicaciones son para la plantilla Mínima de Blogger, si estáis usando otra, pudiera ser o no, que la colocación de los códigos fuese distinta...


[1] Vamos al html de nuestra plantilla y buscamos esto:

<div id='header-wrapper'>


Justo a continuación añadimos este código:

<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>


En el ejemplo se supone que ya tienes un elemento "Lista" añadido, de ahí el id='LinkList2', si se da el caso de que ya tenemos varios elemento "Lista" añadidos hemos de saber "cual toca" para cambiar su id. Para no complicarnos demasiado, lo mejor es poner en el id un número elevado:

<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList50' locked='true' title='Menubar' type='LinkList'/>
</b:section>



[2] En el CSS de la plantilla añadimos el código para nuestro menubar, si tenemos alguna duda de donde situar el código, lo ponemos antes de ]]></b:skin>:

#menubar h2 {display:none;}

#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}

#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: #003399;
}

#menubar a:hover {
background-color: #CC3300;
}


Cambiamos los colores de los links a nuestro gusto.
Vamos a plantilla y veremos el nuevo elemento menubar sobre la cabecera, pinchamos en editar y vamos completando los campos como cuando añadimos un nuevo elemento "lista".

Podéis ver como queda en Beautiful Beta, ellos lo tienen sobre la cabecera, pero si lo queremos justo debajo de nuestra cabecera (también queda muy bien), ponemos el primer código justo después de esto :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nbgeyhtuytk (cabecera)' type='Header'/>
</b:section>


¡Gracias por tus aportes Eulalia!

0

Eliminar los iconos de Blogger en los comentarios

Hace unos días a través de un email me comenta Diego que le gustaría eliminar la nueva opción que Blogger ha añadido para identificar a los comentaristas y que muestra un icono delante de cada nombre:
Iconos comentario
[1] Nos situamos en la parte de Edición-HTML de nuestra plantilla y con los artilugios expandidos localizamos esta línea:

<dl id='comments-block'>


[2] Un par de líneas más abajo de la línea anterior veremos esto:

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>


[3] Lo eliminamos todo y lo sustituimos por esta línea de código:

<dt class='comment-author' expr:id='data:comment.anchorName'>


[4] Guardamos cambios.

Siento la tardanza en responder Diego.

0

Escuchar una emisora de radio en el blog

Para escuchar nuestra emisora de radio favorita en el blog, utilizaremos un sencillo código que mostrará un mini reproductor de Windows Media Player.
El código lo pegaremos en un elemento HTML-Javascrip que luego colocaremos donde nos convenga. Funciona correctamente en IE y Firefox, con la única diferencia de que el reproductor se ve ligeramente distinto en uno u otro navegador.

Código:

<embed pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" align="middle" loop="true" volume="100" autostart="true" showstatusbar="true" src="URL_DE_LA_EMISORA" type="application/x-mplayer2" height="46" width="200"><br/>
</embed>

Tendremos que colocar la url de nuestra emisora favorita, donde dice: URL_DE_LA_EMISORA. Normalmente podemos conseguirla en la página web desde donde se escucha online la emisora elegida. Pinchando con el ratón derecho sobre el reproductor de la web, una vez la emisora está emitiendo, obtendremos la url en "propiedades".

Url de algunas emisoras online

* Los cuarenta principales. Emisora musical española, con las últimas noticias,
lanzamientos y éxitos del panorama internacional.
http://www.los40.com/nuevo_player/m80.asx

* Radio 3 Emisora de Radio Nacional de España, sin publicidad y con música de calidad.
http://www.rtve.es/rne/audio/RNE3.asx

* Cadena 100. Emisora española especializada en contenidos musicales.
http://cope.stream.flumotion.com/cope/cadena100.asf.asx

* La COPE Popular emisora española de radio.
mms://live.cope.edgestreams.net/reflector:34744

* Radio Beethoven Emisora chilena especializada en música clásica.
http://sc3.digitalproserver.com:8086

* Radioactiva Emisora colombiana dedicada en exclusiva al panorama musical.
http://audio.grupolatinoderadio.com/envivo.ASX?EMI=COACTIVA

* FM Córdoba Emisora argentina.
mms://lv3canal1.telecomdatacenter.com.ar/lv3canal1

* FM Latina 92.5 La mejor música latina.
http://200.32.8.172:15008

Aportes de: RedrumRoger

* Expres 90.3FM Muy buena radio formula, en checo.
http://www.play.cz/radio/expres64.asx

* Radio Oh La La! Musica francesa de los años 60.
http://212.72.165.26:9476/listen.pls

* La Mega Emisora La mejor emisora de Venezuela.
http://methusen-stream3.wm.llnwd.net/methusen_stream3

*Indy Radio Pop español
http://213.139.27.131:8145/

0

PicMarkr, marcas de agua online

PickMarkUna herramienta online gratuita con la que podremos añadir marcas de agua digital a nuestras imágenes sin muchas complicaciones.

El watermarking o marca de agua digital es una técnica de ocultación de información que forma parte de las conocidas como esteganográficas. Su objetivo principal es poner de manifiesto el uso ilícito de un cierto servicio digital por parte de un usuario no autorizado.


Pueden subirse hasta cinco imágenes al mismo tiempo, desde nuestro PC o desde Flickr, con un peso máximo en total de 25 MB, además tendremos la opción de redimensionar las imágenes antes de añadirles la marca de agua.
La marca de agua se puede colocar de tres formas distintas: un texto con varios efectos a escoger, una imagen o cualquiera de ellos repartidos por toda la imagen.

0

Entradas Relacionadas

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
Desde que coloqué en El Escaparate el widget para mostrar las entradas relacionadas, son muchos los que se han interesado por la forma de hacerlo.
Antes de nada he de aclarar que es un hack del genial JMiur de Vagabundia, así que como en otras ocasiones, me limito a explicar los pasos a seguir tal como lo hice yo antes con las explicaciones de JMiur.
Quedará como un nuevo elemento del pie de los post y se mostrará solamente en las páginas individuales, no en la principal.

[1] Nos situaremos en la vista HTML de la plantilla, expandiremos los artilugios y buscaremos la etiqueta ]]></b:skin>. Justo debajo, agregaremos el script. Hemos de colocarlo exactamente ahí ya que para que funcione correctamente, debe estar antes que cualquier otro script que hayamos colocado:

<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 cuantosPosts = 0;
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++;
cuantosPosts++;
if (cuantosPosts == 3) {
break;
}
}
document.write('</ul>');
}

//]]>
</script>


En el código del script, donde dice relatedTitles.length && i < 20), se escogen los posts que se mostrarán según los caracteres que formen su título. En el ejemplo no se mostraran si contienen más de 20 caracteres, pero podemos cambiar ese valor por el que queramos.

[2] Buscamos ahora esta parte del código y añadimos lo que he marcado en negrita:

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

</b:loop>
</b:if>


Donde dice max-results=10 es donde podemos controlar la cantidad máxima de posts que se mostrarán, podemos cambiar "10" por el valor que nos interese, aunque según nos recomienda JMiur "es conveniente poner un valor bajo para evitar que la página tarde mucho en cargarse".

[3] Una vez hecho esto, localizamos esta línea de código:

<p class='post-footer-line post-footer-line-3'/>


Normalmente esta parte del post-footer no tiene uso, así que colocaremos nuestro nuevo código justo a continuación:

<div class='post-footer-line post-footer-line-4'>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div>


Si hay varias etiquetas, es muy probable que la lista mostrada pueda contener muchos posts, por lo que JMiur ha encontrado la solución modificando el script para limitar el número absoluto de posts relacionados. Yo he incluido la modificación en el script para que solo muestre tres entradas relacionadas, si queremos aumentar la cantidad de posts a mostrar, cambiamos el valor en esta línea del script:

if (cuantosPosts == 3) {


[4] Como no se ve en vista previa, mejor nos cercioramos de que antes hemos guardado una copia de la plantilla y, si es así, guardamos cambios.

Más información en: Vagabundia ¡Gracias JMiur!

0

Botones para mostrar el Page Rank

Solo hay que copiar y pegar el código donde vayamos a mostrarlo, por ejemplo, en un elemento HTMLJavascrip en la sidebar:

boton 1

<!-- Start Set 1-->
<a href="http://www.graphicsguru.com" target="_blank">
<img src='http://www.graphicsguru.com/pagerank/google.php'
title="Google Page Rank" alt="Google Page Rank" width='80' height='15' border='0' /></a>
<!-- End set 1-->


boton 2

<!-- Start Set 2-->
<a href="http://www.graphicsguru.com" target="_blank">
<img src='http://www.graphicsguru.com/pagerank/pagerank.php'
title="Google Page Rank" alt="Google Page Rank" width='80' height='15' border='0' /></a>
<!-- End Set 2-->


boton 3

<!-- Start Set 3-->
<a href="http://www.graphicsguru.com" target="_blank">
<img src='http://www.graphicsguru.com/pagerank/rank.php'
title="Google Page Rank" alt="Google Page Rank" width='80' height='15' border='0' /></a>
<!-- End Set 3-->


boton 4

<!-- Start Set 4-->
<a href="http://www.graphicsguru.com" target="_blank">
<img src='http://www.graphicsguru.com/pagerank/rankgoogle.php'
title="Google Page Rank" alt="Google Page Rank" width='80' height='15' border='0' /></a>
<!-- End Set 4-->


Visto en: GraphicsGuru

0

Numerar los comentarios

Supongo que mas de un@ se habrá fijado en que los comentarios del Escaparate aparecen numerados en las páginas de etiquetas (donde se ven los comentarios expandidos debajo de las entradas).
Lo he hecho guiándome por una entrada del genial Jmiur de Vagabundia y, como podéis ver en su post, se consigue con el uso de un script.
En este caso cada número actúa como un vinculo o enlace al comentario, pero si lo que nos interesa es simplemente numerarlos, sin más, podremos conseguirlo de forma muy simple usando las mismas etiquetas que para numerar cualquier tipo de lista.

[1] Nos situamos en la parte de Edición - HTML de nuestra plantilla y expandimos los artilugios para encontrar la parte del código que nos interesa.
Hemos de añadir en esa parte las etiquetas <ol>, </ol>, <li> y </li>, tal como están colocadas en el código siguiente (están en negrita):

<ol><dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<li><dt class='comment-author' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<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></li>

<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>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl></ol>


[2] El resultado no podemos verlo en "vista previa", pero si algo ha ido mal no será demasiado difícil volver a localizar y retirar las etiquetas.

ResultadoEjemplo de comentarios numerados

Nota:
En IExplorer el efecto numeración no se ve.

0

Messenger en el blog

Si tienes una cuenta de Hotmail podrás colocar un widget en el blog con el que podrás chatear con tus visitas cuando estés conectado en tu messenger.



[1] Iniciamos sesión en Windows Live y allí nos pedirán nuestra dirección de correo de hotmail y la contraseña.

[2] Pinchamos en "Iniciar sesión" y en la nueva página que se abrirá marcamos la casilla en "Permitir que tu estado de Messenger se muestre en los sitios Web y te envíen mensajes" y pinchamos en "guardar".

[3] Una vez guardados los datos, pinchamos en "HTML" y allí configuramos nuestro "chat" y copiamos el código que nos proporcionan para colocar en el blog.