¿Quieres un contador de visitas como el que hay al pie de esta página? Una de las formas más sencillas y rápidas de poner un contador en las páginas de tu blog es utilizar el servicio gratuito de contadores NedStat. Sigue estos pasos:

1. Ve a NedStat, elige NedStat Basic y pulsa en Crear Cuenta para crear tu cuenta personal con la que gestionar el contador (puedes tener varios si quieres, incluso en blogs o páginas webs distintas, con una sola cuenta)..

2. Introduce los datos: tu nombre, apellidos, correo electrónico, etc. Debes elegir un número de Cuenta y una Contraseña que te servirán para administrar el servicio.

3. Elige Crear Contador e indica los siguientes datos:

URL	blogs.ya.com/nombreweblog
Título	El título de tu weblog
Descripción	Una descripción de tu weblog
Categoría Principal	Ordenadores/Internet
Subcategoría	Weblogs

Nota: puedes elegir cualquier otra categoría, pero casi todos los weblogs españoles están en Internet > Weblogs.

4. Al cabo de un rato recibirás por correo un mensaje de NedStat titulado Tu(s) nuevo(s) contador(es). Allí verás el código de tu contador, que es algo como esto:

<!-- Begin Nedstat Basic code -->
<!-- Title: Trucos Blogs.ya.com -->
<!-- URL: http://blogs.ya.com/trucos/ -->
<script language="JavaScript" type="text/javascript" src="http://m1.nedstatbasic.net/basic.js">
</script>
<script language="JavaScript" type="text/javascript" >
<!--
nedstatbasic("AC00gAAjfPibKfrXaNFYUK8bSlkQ", 0);
// -->
</script>
<noscript>
<a target="_blank" href="http://www.nedstatbasic.net/stats?AC00gAAjfPibKfrXaNFYUK8bSlkQ"><img
src="http://m1.nedstatbasic.net/n?id=AC00gAAjfPibKfrXaNFYUK8bSlkQ"
border="0" width="18" height="18"
alt="Nedstat Basic - Web site estadÌsticas gratuito
El contador para sitios web particulares"></a><br>
<a target="_blank" href="http://www.nedstatbasic.net/">Contador gratuito</a>
</noscript>
<!-- End Nedstat Basic code -->

5. Debes hacer una pequeña modificaciones a ese código para que funciona correctamente en las páginas XHTML de Blogs.ya.com. Donde pone:

... El contador para sitios web particulares"></a><br>

cámbialo por

...El contador para sitios web particulares"/></a><br/>

(es decir: añade las dos / al final de los códigos image y br)

6. Copia ese código en tu plantilla. Para hacerlo, en Blogs.ya.com ve a la opción 2. Configuración Avanzada > Editar HTML Plantilla

7. Pega el código al final del todo, antes del código DIV que hay donde dice "un servicio ofrecido por Ya.com". Puedes añadir dos retornos <br/><br/> para separar las líneas.

8. Pulsa Validar, Guardar... ¡Listo! Ya tienes tu contador.

Haciendo clic en el contador verás cada día cuántas visitas tienes, desde dónde llegan (eso es muy importante), con qué palabras de búsqueda (si llegaron a través de un buscador), etc.

Como puedes ver, el estilo de este blog -colores y tipos de letra-- no es ninguno de los de las plantillas de blogs.ya.com, aunque está basado en uno de ellos y tiene los mismos elementos. ¿Cómo se pueden editar fácilmente los estilos del blog?

Cada página de blogs.ya.com tiene asociado un archivo de estilos CSS que es donde se encuentran los atributos sobre colores, tipos de letra, etc. separando el diseño de lo que es el contenido.

Pero no se puede editar directamente ese archivo desde el editor de blogs.ya.com -- sólo se puede editar la plantilla HTML.

Aunque... si sabes un mínimo de CSS o HTML puedes modificar esa hoja de estilos utilizando el siguiente truco "paso a paso":

1. Abres la URL de tu blog, miras el código fuente y buscas al principio, en la zona de la cabecera, la siguiente línea

<link type="text/css" rel="stylesheet" href="blog.css"/>

2. Abres en el navegador la URL de tu blog seguida del enlace .css (donde pone HREF) que indica esa línea, por ejemplo:

http://blogs.ya.com/microsiervos/blog.css

Eso es la hoja de estilo (suele llamarse blog.css, blog4.css, etc). Guárdala en el disco duro con otro nombre, por ejemplo estilos.css

3. Edita tu hoja de estilos localmente con un editor de textos para cambiar colores y tamaños, y vuélvela a guardar. Consejo: modifica lo mínimo posible y prueba un cambio cada vez. ¡Es fácil estropearlo todo o que las cosas dejen de verse correctamente! Recuerda que algunos estilos tienen variantes, por ejemplo a puede tener variantes cuando se pone el cursor sobre el enlace (a.hover), cuando se visita (a.visited) etc.

4. Sube la nueva hoja de estilos a tu blog con la opción 3. Publicación / Administrador de Ficheros. Indica en "Examinar..." el fichero que has guardado en tu ordenador y pulsa Subir. La nueva URL de ese fichero será la de tu blog seguida de /files/estilos.css

5. Abre el editor HTML de la plantilla de tu blog en 2. Configuración Avanzada / Editar HTML Plantilla

6. Al principio verás la referencia a la hoja de estilos original... Cámbiala por la nueva, en este ejemplo:

<link type="text/css" rel="stylesheet" href="files/estilos.css"/>

7. Pulsa Validar y luego Guardar.

8. ¡Listo!

Al visualizar el blog aparecerá ya con los nuevos estilos (pulsa Recargar si no se ven a la primera). Si necesitas hacer modificaciones, vuelve a subir el fichero tantas veces como necesites. Si "rompes algo" no te preocupes: en el editor HTML pulsa "Reestablecer el formato original" y volverás a la plantilla por defecto para empezar de nuevo.

Si creas algún nuevo diseño que quieras compartir, envíanos un correo para que publiquemos aquí el CSS.

Los acrónimos son abreviaturas de varias palabras utilizando las iniciales o siglas. En las anotaciones puedes utilizar (como en esta) el código

<acroynm title="texto completo">ABC</acronym>

para codificar un acrónimo correctamente en HTML. El texto completo se ve en pantalla cuando pasas el ratón por encima. Además, las arañas de los buscadores, como Google lo encontrarán e indexarán. Nota: recuerda que un tu hoja de estilos debe estar definido el estilo acronym con un subrayado, otro color, o algo parecido, para que se vea correctamente. Un ejemplo típico sería:
acronym {border-bottom: 1px dashed #666; cursor: help}
Hay gente que utiliza acronym sólo para los verdaderos acrónonimos, mientras que otros lo utilizan para explicar algunas palabras, no necesariamente siglas.

Un ejemplo de utilización: URSS que en inglés es CCCP, que a su vez significa SSSR.

A continuación tienes algunos ejemplos de códigos habituales de la edición en HTML que se pueden utilizar para dar más estilo al texto, resaltar lo importante, y hacerlo visualmente más agradable dentro del blog. Funcionan tanto en Blogs.ya.com como en otros sistemas de blogs. Es muy recomendable conocerlos y usarlos correctamente para mejorar el aspecto de tus textos y que sean más legibles. Una vez que te acostumbras, no es difícil.

Esta es parte de la colección:

• <b> o <strong> para texto en negrita
• <i> o <em> para texto en cursiva
• <strike> para tachar texto
• <tt> para texto con letra fija, a modo de teletipo
• <a href...> (bien conocido) para poner enlaces
• <u> para subrayado
• <h1> <h2> ... <h5> para cabeceras de distinto tamaño, ej:

Tamaño H1

Tamaño H2

Tamaño H3

Tamaño H4

Tamaño H5

• <blockquote> para citar...

... párrafos o indentarlos a la derecha con letra más pequeña; blockquote es uno de los tags más útiles para mejorar la lectura de los textos largos.

se pueden incluso indentar anidando varios bloquote unos dentro de otros.

• <li> para listas de ítems, con boliches automáticos, ej:

item 1 con li

item 2 con li

item 3 con li

Importante: todos estos códigos deben abrirse y cerrarse alrededor del texto. EL código de cierre es el mismo pero predecido de una barra. Hay que usar, por ej:

<b>negrita</b>

Puedes encontrar más información sobre estos y otros códigos en cualquier manual de HTML, por ejemplo en Formateo de texto en el curso de HTML del Rincón del Programador.

Queda inaugurado este weblog dedicado a explicar trucos sobre blogs.ya.com. Algunos serán relativos a la utilización del servicio, otros a cómo mejorar la legibilidad y estilo de tus anotaciones, otros sobre diseño...

Cada día un truco.

Si quieres colaborar puedes enviarnos tus trucos sobre blogs.ya.com a

trucosblogs@mixmail.com