Buscar este blog

martes, 15 de marzo de 2011

Fecha de los posts al estilo Wordpress

Hola, al fin me he acordado de este truco, me lo tenia guardado, pero se me olvido y despues de unos meses me acorde haci que comenzemos:



1.- Nos dirigimos a Opciones-Formato y cambiamos la fecha por la que esta en la penultima opcion.
2.- Ahora en el HTML expandimos los artilugios y pegamos el siguiente codigo antes del /head:

<script>
function date_replace(d){
var da = d.split(' ');
day = "<span class='theDate'>"+da[0]+"</span>";
mon = "<span class='theMonth'>"+da[1].slice(0,3)+"</span>";
year = "<span class='theYear'>"+da[2]+"</span>";
document.write(day+mon+year);
}
</script>


3.- Ahora expandidos los artilugios buscamos el siguiente codigo:

<data:post.dateHeader/>

4.- Y reemplazamos el codigo anterior por este:

<div id='post-date'>
<script>date_replace('<data:post.dateHeader/>');</script>
</div>


5.- Si sos perezoso y no te quieres molestar en crear un estilo para la fecha usa este y lo pones JUSTO antes de ]]></b:skin> (dentro de la plantilla CSS:

div#post-date {
display: block;
float:left; /* set this to right if you want it go to the right */
padding: 1em; /* to keep the text away from the edges */
background-color: #555555; /* you can change this to hold a picture, will make it look nicer */
border: 3px double gray; /* a border to make it look nice */
}

div#post-date span.theDate {
display: block; /* to put this in a different line */
font-size: 3em; /* to make the date stand out */
background-color: transparent; /* to let the background show through */
color: white;
}

div#post-date span.theMonth {
display: block;
font-size: 1em; /* smaller compared to the date */
background-color: transparent;
color: white;
}

div#post-date span.theYear {
display: block;
font-size: 1em; /* smaller compared to the date */
background-color: transparent;
color: white;
}


<script>
function date_replace(d){
var da = d.split(' ');
day = "<span class='theDate'>"+da[0]+"</span>";
mon = "<span class='theMonth'>"+da[1].slice(0,3)+"</span>";
year = "<span class='theYear'>"+da[2]+"</span>";
document.write(day+mon+year);
}
</script>


Proximamente como comentar en blogger no siendo posible



Escuchar post



Eliminar el numero de etiquetas

En la lista de etiquetas de Blogger por defecto se muestra la cantidad de entradas que han sido clasificadas en cada una de ellas y por estética o espacio algunas personas me han consultado para saber como eliminarlas. Hacerlo es sencillo y rápido y aquí lo mostramos para quien lo desee:
numeracion-etiquetas.png
  • Entrar a la pestaña “Plantilla” y posteriormente a la opción “Edición HTML”.
  • Activar la opción de “Expandir plantillas de artilugios.
  • Buscar y eliminar el siguiente código:
  • (<data:label.count/>)
  • Guardar los cambios y ¡Listo!
En lo particular me agrada que se muestre la cantidad de entradas, pero queda a gusto y necesidades de cada quien.

Poner boton único en las entradas

Para que agreguen nuestro blog con un click a cualquier marcador social (o al menos, a una buena compilación), Get your botton nos proporciona una elegante manera, sin salir de nuestro blog.



Para conseguir tu botón, haz clic en "Get Your Button". También tendrás acceso a las estadísticas de marcación de tu blog. Escoge el botón que prefieres, indica dónde lo vas a poner (en mi caso, un blog de Blogger), y el siguiente paso es registrarte con tu correo y una contraseña.

Puedes agregarlo directamente como un widget, si quieres colocarlo en tu sidebar. Pero también puedes (y tienen la amabilidad de explicártelo ellos mismos) colocarlo al final de cada entrada, un buen lugar, dado que si al lector le ha gustado lo que ha leído, puede marcarlo a continuación.

Para ello, y con la plantilla de artilugios expandida, hemos de pegar el código a continuación de UNA de estas líneas, que indican la parte donde aparecen las etiquetas, comentarios, etc.:

<p class='post-footer-line post-footer-line-1'>

<p class='post-footer-line post-footer-line-2'>

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


Ahora bien: hemos de hacer un pequeño cambio en el código que nos proporciona ADDTHIS para que en Blogger no nos dé error al guardar la plantilla. Consiste en "parsear" o transformar en código el símbolo "&" que aparece dos veces en el script. Sustitúyelo por &amp; para que Blogger lo interprete como debe y puedas guardar la plantilla.

Y nada más, añade tu botón para que podamos agregarte a nuestros favoritos online, y si te ha gustado este artículo y usas estas redes, puedes marcarlo en el botón a continuación .

Imagen Flotante en tu blog

Supongo que os habreis fijado en que, en algunos blogs, hay una imagen bajo, a la derecha de la pantalla, que permanece estática aunque bajeis el scroll. Es lo que se llama imagen flotante. Como veis, he puesto una de prueba en mi blog para que veais un ejemplo de como queda.
Si quereis poner una imagen flotante en vuestro blog sólo teneis que pegar este código antes de </head>:

<a href='http://URL DE TU BLOG.blogspot.com/' style='display:scroll;position:fixed;bottom:0px;right:0px;'><img src='URL DE TU IMAGEN'/>

Nota:En el código de rojo tienes que sustituir don de pone lo de url.....

Mejora la zona de comentarios de tu blog

En muchos posts la parte de comentarios es casi tan importante como el artículo en sí. Por tanto merece la pena tomarte tu tiempo en construirla lo más amigable posible y tan atractiva como el resto del blog. Estas son algunas ideas que podrías tener en cuenta.
 1.- Separa claramente cada comentario bien con un borde alrededor, añadiendo color al fondo o incluyendo una línea entre cada uno
2.- Haz que se diferencien los datos del comentario (autor, fecha, link permanente… etc) del comentario en sí, dándole un estilo diferente. Usando combinaciones diferentes de fuentes, color o fondo. También puedes tratar de poner los datos en un lado de forma que no se encuentren en la línea del comentario.
3.- Si rellenas el fondo del comentario con un color, haz que el siguiente comentario se alterne con una versión distinta de ese color con el fin de diferenciarlos. Puedes poner por ejemplo el fondo en verde y el siguiente comentario en verde más clarito, el siguiente comentario aparecerá nuevamente en el verde principal y así sucesivamente.
4.- Añade un número al comentario para que la gente pueda hacer referencia a él en los suyos.
5.- Diferencia el comentario del autor para que los lectores pueden ver fácilmente su participación en la conversación. Añade un fonfo distinto, un borde de otro color o puedes añadir una etiqueta que diga, "Comentario del autor."
6.- Puedes añadir avatares para animar un poco los comentarios y dar a tus comentaristas algo más de reconocimiento.
7.- Añade links permanentes a cada comentario para que la gente puede enlazarlos bien en sus comentarios o desde otra web.
8.- Puedes añadir algún elemento gráfico usando iconos. Como una nube donde se encuentre la fecha o un icono al lado del nombre de los autores de los comentarios.
9.- Muestra cuántos comentarios se han escrito en la cabecera de los comentarios. Por ejemplo "5 Comentarios escritos. Añade el tuyo".
10.- Añade una previsualización al formulario de comentarios de forma que los que los escriban puedan ver como se verá mientras lo escriben. Esto es bastante útil para comprobar que los enlaces funcionan.
11.- Incluye la posibilidad de que los lectores se suscriban a los comentarios via RSS.
Estas ideas no son ni mucho menos definitivas, puedes darte una vuelta por diferentes webs y comprobar lo que han hecho. Existen diseños realmente originales y las posibilidades son ilimitadas.

Mejorar posicion en google de tu títulos

Ésta técnica no es mía y tampoco la he probado pero me parece interesante y probablemente valga la pena saber qué tal funciona a la hora de posicionar los posts del blog.
¿De qué hablo? Nos lo cuenta en SEOmoz Rand Fishkin. Hace poco comenté que Google ya te permite conocer el número de búsquedas de una palabra clave a través de su herramienta de Adwords.
Esto nos permite conocer que términos son los más utilizados por las personas en el buscador. Pues ahora se trata de sacarle provecho. Imagina que escribes un artículo acerca de cómo hacer que un blog posicione mejor en los buscadores. Bien, ya tienes uno de los mejores posts que nunca has escrito que además piensas, va a ser realmente útil para tus lectores y para los futuros visitantes del blog. Claro que, para que éstos últimos lo lean, tienen que encontrarlo. En ese momento te entran dudas de cual sería el mejor título que podrías ponerle para que posicione de la mejor manera posible en los buscadores.
Después de una fructífera “tormenta de ideas” se te han ocurrido varios pero todavía no sabes por cual decantarte. ¿Qué puedes hacer? Te acuerdas entonces que Google te da una idea aproximada, a través de su herramienta de Adwords, de cuántas veces buscan los usuarios de su buscador determinados términos.
adwords_select
Después de introducir varias palabras que tenías en mente Google te muestra cuáles pueden servir mejor a tu propósito y que quizá puedas incluir en el título de tu post.
Es importante aclarar ciertos puntos, en primer lugar no se trata de llenar los títulos de palabras clave dado que éstos tienen que ser a su vez descriptivos para los visitantes, es decir, no escribas para los buscadores sino para las personas. El punto clave radica en saber combinar el uso de palabras importantes con títulos efectivos.
En otras ocasiones, cuando las palabras están muy competidas, es decir, generan un enorme número de resultados, incluirlas, o no, no variará en exceso los resultados por lo que no tiene sentido intentar encajarlas de cualquier forma.
Recuerda que los títulos “describen el artículo y son el reclamo de los clicks”, por eso primero piensa en los usuarios, luego busca palabras clave que puedas incluir sin que quede extraño y cuando creas que te ha quedado bien, pincha en “Publicar”.

¿Qué tipo de fuente usar?

   Una parte fundamental de la usabilidad de un blog es su facilidad para ser leído. Además de otros aspectos del diseño y del formato que veremos más adelante, el tipo de fuente que usemos influirá en gran medida en lograr una lectura agradable para los ojos de nuestro visitante. Debemos pensar que la mayoría de los usuarios de Internet no se han adaptado todavía a la lectura en pantalla con lo cual, nuestra tarea debe ser facilitar al máximo dicha lectura.
Un blog cuya composición es de un 90% de texto la elección del tipo de fuente no es vanal. No obstante, mientras sigamos una serie de pautas y estándares el proceso no tiene porque ser excesivamente tedioso.
Las principales características que deberíamos tener en cuenta a la hora de elegir una fuente son:
- Que se ajusten al carácter de tu sitio.
- Facilidad de lectura en la pantalla del ordenador.
- Estén disponibles en diversos navegadores y sistemas operativos.

1.Tipos de fuentes.
Las fuentes podemos dividirlas en dos grandes grupos: serif, sans-serif
La diferencia entre una y otra radica en que las serifs tienen unas pequeñas rayas horizontales arriba y abajo, como pequeños rabitos. Un ejemplo de serif sería, Times New Roman y de sans-serif sería Arial.
En términos generales los usuarios consideran más fáciles de leer las fuentes sans-serif.
2.Tamaño de fuentes.
El tamaño medio de fuente usado en las webs es de 12px (size=3). Una cosa que parece clara es la contraindicación de usar fuentes excesivamente pequeñas, 9px. Desaconsejado además por el W3C. Lo ideal sería ofrecer al usuario la posibilidad de ajustar el tamaño de fuente a su necesidad, no obstante, en muchos blogs ofrecer ésta opción no es posible.
3. Análisis de diferentes fuentes.
- Arial
Es probablemente el formato de fuente sans-serif más común, su disponibilidad es amplia.
Es una de las fuentes más utilizadas, pero pierde calidad en tamaños pequeños, su carácter es moderno pero puede resultar algo plano y aburrido.
Su equivalente en Mac es Helvetica.
- Times New Roman
Su disponibilidad también es amplia y es el formato serif más común. Es la fuente predeterminada de los navegadores.
Su facilidad de lectura es aceptable para tamaños de fuente desde los 12px arriba pero nefasta para tamaños menores.
Su carácter es serio, formal y un poco anticuado.
El equivalente en Mac es Times.
- Verdana
Es una fuente sans-serif con alta disponiblidad, se incluyó con Internet Explorer 3, cuando se hacía necesario un tipo de fuente de mayor facilidad de lectura
Su lecturabilidad, por tanto, es excepcional incluso en tamaños pequeños.
Su carácter es moderno, amigable y profesional.
- Georgia
Su disponibilidad es buena, se introdujo con IE4.
Su facilidad de lectura es muy buena, es la mejor fuente serif para leer online dado que se creó con ese propósito.
Su carácter es moderno, profesional y amigable.
Existen otras fuentes como Comic Sans, cuya lectura es buena, no obstante, no parece indicada para dotar de un carácter serio a tu blog, además de ser una fuente un poco detestada por los diseñadores. Trebuchet es parecida a Arial y difícil de leer en tamaños pequeños. Por último, Courier New, es una fuente serif que imita a las máquinas de escribir antiguas y sule usarse para representar código HTML.
Conclusiones.
Parece que la mejor fuente para usar en la web podría ser tanto Verdana como Georgia, no obstante la decisión depende mucho de tí y en las preferencias de los usuarios que puedes ver en el gráfico obtenido de Usability News.

La longitud de la barra indica mayor preferencia entre los usuarios.