Imágenes con o sin borde en las entradas.

En el css de las plantillas de Blogger las imágenes que añadimos en nuestras entradas vienen con el atributo "border" añadido por defecto, así cada vez que subimos una imagen esta se muestra en el blog con borde, ya expliqué en un post anterior como "quitar el borde a las imágenes"

Suele suceder que eliminamos el borde, pero en alguna ocasión nos resulta más apropiado o simplemente nos apetece mostrar una imagen determinada en un post con borde.
La solución está añadiendo en el CSS un código con los atributos para las imágenes que queremos "bordear":

.post .img2 {
margin:0 0 5px 0;
padding:4px;
border:1px solid #C0C0C0;
}

Ahora cuando subimos una imagen al editor de entradas, hemos de añadirle el atributo class="img2" si queremos que tenga borde.
Así se muestra el código de una imagen en "edición de HTML" en nuestro editor de entradas una vez subida al blog:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/RoWk5JdlFyI/AAAAAAAABu4/QmpN87bWS9E/s1600-h/bannergcara.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/RoWk5JdlFyI/AAAAAAAABu4/QmpN87bWS9E/s200/bannergcara.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5081649056256956194" /></a>

Esta imagen se vería sin borde, pero al añadirle el atributo class="img2" (lo he puesto en negrita) se mostrará bordeada:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/RoWk5JdlFyI/AAAAAAAABu4/QmpN87bWS9E/s1600-h/bannergcara.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/RoWk5JdlFyI/AAAAAAAABu4/QmpN87bWS9E/s200/bannergcara.JPG" class="img2" border="0" alt=""id="BLOGGER_PHOTO_ID_5081649056256956194" /></a>

Por supuesto, también puede hacerse al revés, es decir, sino has modificado el CSS de las imágenes, puedes añadir el código igualmente para que las imágenes que quieras se vean sin borde, solo has de cambiar el "border" a cero pixeles:

.post .img2 {
margin:0 0 5px 0;
padding:4px;
border:0px solid #C0C0C0;
}

Podríamos pegar el class="img2" en Plantilla - Opciones - Formato - Plantilla de entrada, así aparecería automaticamente en nuestro editor de entradas cada vez que editamos un nuevo post, si queremos usarlo solo hay que copiarlo y colocarlo en el código de la imagen una vez subida y, si no vamos a usarlo, lo borramos y listo.

Decoración de texto

La propiedad "text-decoration"aplicada a una palabra o texto, permite añadir distintos tipos de efecto.
Los valores que podemos obtener con "text-decoration" son: "none" (ninguno), "underline" (subrayado), "overline" (sobrerayado), "line-through" (tachado) y "blink" (parpadeo), aunque, por ejemplo, Internet Explorer no reconoce el valor blink.
Podemos añadirlo en el CSS de la plantilla para dar el efecto que queramos a los títulos o los links, por ejemplo.

text-decoration: underline;

text-decoration: overline;

text-decoration: blink;

text-decoration: line-through;

Y también puede hacerse directamente en el texto que queramos, colocando el texto entre <span style> y </span>:

<span style="text-decoration: blink;">TEXTO AQUI</span>

TEXTO QUE SALTA (blink) (Con IE, no se ve el efecto)

TEXTO SUBRAYADO (underline)

TEXTO CON LINEA ARRIBA (overline)

TEXTO TACHADO (line-through)

Plantilla Snapshot: Sable, Modificar ancho

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Vamos a modificar el ancho de la plantilla Snapshot: Sable de Blogger.

1- Antes de nada hemos de ensanchar la totalidad del cuerpo del blog, para ello nos situamos en:

/* -- layout -- */
#outer-wrapper {
width: 700px;

Y cambiamos su ancho o width de 700px a 900px

2- Si usamos la "vista previa" podremos comprobar, que el ancho de nuestro blog aumenta, pero las imagenes no, así que tendremos que cambiarlas por unas de ese tamaño, empezaremos por el mismo #outer-wrapper{.
Cambiamos la url de la imagen por esta otra:
http://img243.imageshack.us/img243/3379/outherwrapperdp1.gif

Continuamos sustituyendo las imágenes de la cabecera. Buscamos esta parte del código:

#header-inner {
background: transparent url(http://www.blogblog.com/snapshot_sable/header-03.gif) bottom left no-repeat;
}

Y sustituimos la url de la imagen por esta otra:
http://img187.imageshack.us/img187/135/header03iu7.gif

Hacemos lo mismo en

#header-wrapper {
background: #D8DADC url(http://www.blogblog.com/snapshot_sable/bg-headerdiv.gif) 0 0 repeat-y;
}

Sustituyendo la imagen por esta otra:
http://img263.imageshack.us/img263/3261/headerwrappersu5.gif

3- Ahora vamos a sustituir la imagen del footer, es decir, del pie del blog, por esta otra:
http://img243.imageshack.us/img243/8451/bgfooterdm8.gif
En esta parte del código:
#footer {
clear: both;
background: #E9EAEB url(http://img243.imageshack.us/img243/8451/bgfooterdm8.gif) bottom left no-repeat;

4- Vamos a ensanchar la parte de las entradas, lo pondremos en 600px, para ello buscamos esta parte del código de la plantilla:

#main-wrapper {

En el width: 428px; pondremos width:600px.
Unas líneas más abajo, sin salirnos del #main-wrapper{ vemos que hay otro width: 404px; lo cambiamos también a width:600px.

Al usar la "vista previa" veremos que las barras que adornan la fecha, el título de las entradas y la sidebar, no aparecen como deberían, vamos a sustituirlas por unas nuevas, adaptadas al tamaño del main. Buscamos esta parte del código:
h2, #comments h4 {
Justo debajo vemos esta otra:
En h3 {
Y la única url de imagen que aparece en cada caso, la sustituimos por esta otra:
http://img218.imageshack.us/img218/3072/barraslk1.jpg

5- Buscamos ahora esta parte del código:
/* -- layout -- */
#outer-wrapper {
width: 700px;
margin: 0 auto;
text-align: left;
font: normal normal 100% Helvetica, Arial, sans-serif;
background: #fff url(http://www.blogblog.com/snapshot_sable/bg-body.gif) 0 0 repeat-y;
}

Y eliminamos la última línea, es decir, el background o fondo.

Mas abajo veremos la parte de las entradas, el #main-wrapper, vamos a colocar una línea nueva, lo que dará el fondo que tenían antes, de color gris clarito a los post.
background:url(http://img407.imageshack.us/img407/7474/nombrefo6.jpg);
Podemos ponerla, por ejemplo, debajo de la línea del width.

6- Nos toca ahora la sidebar, modificaremos su ancho de width: 264px; a width: 270px; y lo haremos aquí:

#sidebar {

7- Por último buscamos el #main-wrapper { y modificamos la línea del padding para acercar la sidebar a las entradas, quedará así:

padding: 10px 16px;




DESCARGAR PLANTILLA

Centrar el título y la descripción del blog

En algunas plantillas, como la Rounders, el título y la descripción del blog, aparece hacia la izquierda, me han consultado sobre como centrarlo:

Buscamos en el CSS de nuestra plantilla:

#header{

Y añadimos debajo esta línea: text-align: center;

Si en nuestra plantilla aparece centrado, como es el caso de las Mínima y queremos hacer lo contrario, es decir, colocarlo como en la Rounders, hacia la izquierda, en el #header{ veremos una línea como esta: text-align: center;
Cambiamos "center" (centro) por "left" (izquierda).

Cuanto tarda en cargar tu blog

Con esta herramienta online podremos averiguar cuanto "pesa" nuestro blog, además de una serie de datos interesantes, como el tiempo que tarda en cargarse.
Guiándonos por los resultados obtenidos, estaremos a tiempo de corregir o eliminar los objetos o códigos que están "pesando" demasiado.
Por cierto, que me parece que el mio está un poco "pasado de peso" :-) las ultimas modificaciones que he hecho en la plantilla lo ralentizan bastante, estoy trabajando en un diseño mucho más liviano, que aplicaré en breve.

Tools


He retirado del blog un script de google-analytics y he pasado de 9 segundos de carga total de la página a 3,9 segundos.
Podéis comprobar lo que más está "pesando" en el blog en la misma página, una vez introducida la url del blog arriba pinchamos en "Sort by" y escogéis "File size", se mostraran todos los elementos del blog, empezando por los más "pesados", pinchando en la url del elemento podemos identificarlo. Suelen ser imágenes o vídeos, por ejemplo, mi elemento más pesado es la imagen de cabecera y en segundo lugar, estaba el script que he retirado.

Ensanchar plantilla thisaway blue

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Esta es una de las plantillas de Blogger a la que es necesario modificar sus imágenes para conseguir ensancharla y que se vea optimamente.
Por supuesto, estas modificaciones parten de una plantilla "virgen", es decir, tal cual la proporciona Blogger.

1- Buscamos el #outer-wrapper { y modificamos su ancho en 950px:
width: 950px;
Hacemos lo mismo en #content-wrapper {
width: 950px;
2- En #main-wrapper { ponemos de ancho 600px:
width: 600px;
En
#sidebar-wrapper { ponemos de ancho 342px:
width: 342px;

3- En #sidebar { Cambiamos los pixeles de la imagen de adorno para que se vea un poco más hacia la derecha:
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar_arrow.gif) repeat-y 250px 0;
Si preferimos eliminarla (es ese adorno que parece un arbolito) borramos esa línea.

4- Ahora vamos a sustituir las imágenes del fondo por las que he modificado:

En #header-wrapper { cambiamos la url de la imagen por esta otra:

http://img142.imageshack.us/img142/2771/barraheaderjq1.gif

En #content-wrapper { cambiamos la url de la imagen por esta otra:

http://img225.imageshack.us/img225/2120/bgmainwrapperlq4.gif

En #footer-wrapper { cambiamos la url de la imagen por esta otra:

http://img524.imageshack.us/img524/5626/barrapiete3.gif

La he probado en Internet Explorer y Firefox con óptimos resultados.



DESCARGAR PLANTILLA

Chat personalizado para el blog

En xat.com podremos hacernos con el código para colocar con facilidad un original chat para nuestro blog que además podemos personalizar a nuestro gusto.

[1] Para empezar a crear nuestro chat haremos click en el menú de arriba donde dice "Make a chat box".

[2] El siguiente paso es elegir la imagen de fondo que más nos guste como fondo de nuestro chat; para ello hacemos click en la foto que queramos usar.

También tenemos la posibilidad de subir nuestra propia imagen y usarla como fondo en el chat, entre las fotos para escoger hay un cuadrado sin imagen que pone "Use a Photobucket picture" pinchamos sobre el y podremos escoger la imagen directamente desde nuestra cuenta en Photobucket (no admite otro servicio).

[3] Otra opción que nos proporcionan en la web, es elegir el tamaño del chat; hay 3 tamaños disponibles: Small (pequeño) Medium (mediano) Large (grande).

[4] Pinchamos en el botón de "Update & Get Code" para que se cargue una vista previa de nuestro chat y veremos el código para copiar y pegar en una entrada de nuestro blog o en un gadget.


Una forma vistosa y original de conversar con nuestras visitas.

Aquí tenéis una imagen del que me hice de prueba usando como fondo la misma imagen que tengo en el blog.

Los Diez Mandamientos del buen blogger.

Amarás a Google por encima de todas las cosas.

No tomarás el nombre de AdSense en vano.

Santificarás todos los días de...

Honrarás al pr0n y al gamerachan.

No matarás.

No harás spam.

No harás Copy & Paste.

No harás el Troll.

No consentirás Goatse.

No harás Hotlinking.

Visto en el blog de Liamngls

Color de la cabecera

Hay algunas plantillas de Blogger, por ejemplo, la Mínima, que no permiten cambiar el color de la cabecera si antes no añadimos un código en el CSS.
Buscamos esto en la plantilla:

#header-wrapper {

Y le añadimos una nueva línea debajo: background:#B38481;

El color #B38481, podemos cambiarlo por el que más nos guste.

Links externos con icono

Estaría bien diferenciar los links externos en nuestro blog de los que no lo son, o sea, los que al pinchar sobre ellos nos llevan a otras páginas, de los que nos envían a una parte dentro de nuestro blog.
Podemos hacerlo añadiéndoles un pequeño icono, que los distinga, para ello empleamos el CSS.

1- En el css de nuestra plantilla, por ejemplo justo antes de ]]></b:skin>, añadimos esto:

a[href^="http"] {
background: transparent url(URL DE NUESTRO ICONO) no-repeat center right;
padding-right: 18px;
}

a img[href^="http"],
a[href^="URL DE NUESTRO BLOG"],
a[href^="URL DE NUESTRO BLOG"] {
background-image: none;
padding-right: 0;
}

El primer código le ordena a nuestros links que aparezcan con el icono, fijaros que en padding-right: he puesto 18px, es la distancia del icono a el texto, si vuestro icono es mayor o menos, probablemente tengáis que modificar esto para conseguir un mejor efecto estático. Podéis ir modificando y usando la vista previa.
El segundo es para que los links internos y las imágenes con link, no lo muestren. No se os olvide poner la url (dirección que aparece en el navegador cuando entráis a vuestro blog) en el código, las dos veces que lo pide.

Los links externos se verían así:

Por si queréis usar la flechita verde, os dejo su dirección:

http://img213.imageshack.us/img213/6841/arrowrighttp6.png

Cambiar de forma aleatoria el fondo del blog

Cada vez que se refresca la página o se entra al blog, la imagen de fondo del blog es distinta. Para conseguir este efecto es necesario tener una imagen aplicada como fondo del blog:

body {
background-image: url(URL _dirección_de_tu_ imagen);

1- Añadimos un nuevo elemento html-javascript y pegamos este código dentro:

<script type="text/javascript">
var banner= new Array()
banner[0]="Image01URL"
banner[1]="Image02URL"
banner[2]="Image03URL"
banner[3]="Image04URL"
banner[4]="Image05URL"
banner[5]="Image06URL"
banner[6]="Image07URL"
banner[7]="Image08URL"
banner[8]="Image09URL"
banner[9]="Image10URL"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + banner[random] + '") repeat center center;');
document.write(" }");
document.write("</style>");
</script>

Fijaros que en "Math.floor está puesto el número 10, las imágenes se enumeran del cero a las que queramos y siempre se pone un número más de las imágenes que tenemos en Math.floor.
Hay que usar para el fondo una imagen pequeña para que al repetirse ( repeat center center;) ocupe toda la pantalla.

Rounders3 añadir sidebar

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Hace tiempo que Jorge me pidió si podría conseguir modificar su plantilla, la Rounders3, a tres columnas y para ser sincera después de intentarlo varias veces decidí dejarlo por imposible.
Hoy descubrí en Tips for New Bloggers el dato que me faltaba, aunque allí la explicación dada es para la Rounders4, supuse que al ser tan parecidas en su estructura las dos plantillas, podría aplicarlo a la rounders3, y este es el resultado:

1- En primer lugar modificaremos su ancho, que vamos a dejar en 985px, para ello buscamos esta parte del código CSS en nuestra plantilla, y cambiamos el valor de width de 740px a 985px:

#outer-wrapper {
width:985px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}

2- Más abajo del CSS encontramos este código:

#sidebar-wrap {

Justo después de la última llave } de cierre de ese código, añadimos el código CSS necesario para la nueva sidebar, quedará así:

#newsidebar-wrap {
width:240px;
float:left;
margin:15px 10px 0 0;
font-size:97%;
line-height:1.5em;
background:$newsidebarBgColor url(http://www.blogblog.com/rounders3/corners_side_bot.gif) no-repeat left bottom;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrap1 {
background: url("http://www.blogblog.com/rounders3/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $mainTextColor;
}

El color de la nueva sidebar podremos cambiarlo de forma automática en "fuentes y colores", pero antes hemos de añadir la variable necesaria en la plantilla para poder hacerlo. Arriba de la plantilla, donde vemos esas líneas que empiezan por <Variable name, añadimos la nueva, hasta que la cambiemos la nueva sidebar se verá de color blanco:

<Variable name="newsidebarBgColor" description="New Sidebar Background Color" type="color" default="#eec" value="#ffffff">

4- Hemos modificado el ancho del blog, así que necesitaremos cambiar las imágenes de la cabecera (header) y del pie (footer) para conseguir el efecto redondeado de sus bordes, para ello hemos de cambiar en #header-wrapper { y en #header { la url de la imagen que viene en Blogger para la cabecera por las que he modificado:

#header-wrapper {
background:$titleBgColor url("http://img146.imageshack.us/img146/6940/cornerscap985topmj2.gif") no-repeat left top;

#header {
background:url("http://img146.imageshack.us/img146/2779/cornerscap985botdl9.gif") no-repeat left bottom;

Haremos lo mismo en el footer:

#footer-wrap2 {
background:$titleBgColor url("http://img146.imageshack.us/img146/6940/cornerscap985topmj2.gif") no-repeat left top;

#footer {
background:url("http://img146.imageshack.us/img146/2779/cornerscap985botdl9.gif") no-repeat left bottom;

5- Por ultimo añadiremos el código html necesario para que se vea nuestra nueva sidebar. Nos situamos en esta parte de la plantilla:

<div id='main-wrap1'><div id='main-wrap2'>

Justo encima, colocamos este código:

<div id='newsidebar-wrap'>
<div id='newsidebar-wrap1'><div id='newsidebar-wrap2'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div></div></div>

Usamos la "vista previa" y si está correcto, guardamos cambios.

Notas
Estas modificaciones están hechas en una plantilla sin cambios de tamaño anteriores, es decir, en su forma original tal como nos la proporciona Blogger.
Si todo ha ido bien, la nueva sidebar estará situada a la izquierda de las entradas y mostrará una copia de vuestro perfil que podréis eliminar una vez guardados los cambios.

Abrir etiquetas y listas en una nueva página

Hace un rato me preguntaba toxicboy como hacer para que al pinchar sobre las etiquetas de su blog, los post relacionados con cada etiqueta, se mostraran en una nueva ventana.
La única solución que se me ocurre, es muy sencilla de conseguir, eso si, hay que tener en cuenta que si bien se abrirán en una página nueva, se mostraran tal como las vemos ahora, solo que en página aparte.

1- Hemos de tener aplicadas las etiquetas en el blog.
2- En plantilla - html, expandimos los artilugios.
3- Buscamos el widget de las etiquetas y añadimos la parte que está en negrita:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url' target='_blank'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

Fijaros que entre <a expr:href='data:label.url' y target='_blank'> tiene que haber un espacio, sino dará error al guardar los cambios.

Podemos hacerlo también con la lista de links:

1- Añadimos un nuevo elemento "lista de vínculos", (sino lo hemos hecho ya).
2- Buscamos esto en la plantilla - html con los artilugios expandidos y añadimos la parte en negrita:

<b:widget id='LinkList1' locked='false' title='vinculos' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>
</b:loop>
</ul>

Nota
Si tenéis más de una lista añadida en el blog, fijaros bien cual es la que queréis abrir en otra página, lo más fácil sería ponerle un título al elemento y así buscarlo con facilidad en la plantilla, luego podemos quitárselo:
<b:widget id='LinkList1' locked='false' title='vinculos' type='LinkList'>

Un maravilloso regalo

Acabo de cambiar la cabecera de mi blog y no se que opinaréis vosotros, pero a mi ¡me encanta! :-D
Ha sido una agradable e inesperada sorpresa que he recibido hace un momento de una persona que suele visitar mi blog.
No me cabe duda que es una personal genial, pues solo hay que ver el gesto desinteresado que ha tenido para conmigo.
Genial como persona y genial como artista, porque con la cabecera ha hecho un magnifico trabajo de diseño. ¿No os parece?
Ha sido además una casualidad, ya que precisamente hoy, en otro blog en el que se hablaba sobre El Escaparate, alguien se refirió a mi cabecera como "letras de sangre", por lo que se ve no le gustaban...y para ser sincera a mi tampoco, pero como los programas de diseño y yo nos llevamos fatal, fue lo mejor que pude conseguir de forma totalmente artesanal.
Así que rondaba en mi cabeza conseguir algo mejor y, mira tu por donde, apareció mi salvadora.
Esta desinteresada artista se llama (su nick) 2tintas.
Ahora mismo voy a incluir su blog en mis "recomendados" encabezando la lista, no es mucho para devolver tan gran detalle, pero es lo menos que puedo hacer.

Enlaces ¡qué importantes son!

Es una de las cosas más importantes en Internet, gracias a ellos podemos navegar en la red y conocer multitud de páginas web.
Es importante tener en cuenta que los buscadores se guían por ellos y los visitan continuamente. Sus robots recorren todas las web buscando enlaces, y cuando encuentran uno, añaden su dirección junto con las palabras que se han usado en el enlace para hacer referencia a la web enlazada.
Por esta razón, estaría bien que controlásemos el texto de nuestros enlaces.
Evitando en lo posible hacer cosas como estas:

Aquí puedes ver un post sobre sistemas de votación con estrellas.

La forma inteligente de hacerlo, sería algo como esto:

Puedes ver mi post sobre sistemas de votación con estrellas.

Porque no tendría ningún sentido querer que salga nuestro blog en Google, por ejemplo, cuando alguien busca "aquí", lo lógico es que nos interese que aparezca cuando alguien busque "sistemas de votación con estrellas". ;-)

Ocultar un blog en nuestro perfil

Cuando alguien deja un comentario en mi blog, suelo pinchar sobre el link de su nombre para visitar su blog, y muchas veces, al acceder al perfil, veo unos cuantos blog incluidos en el. Suele pasarme que al entrar en uno de ellos, veo que es un blog de pruebas, si tiene unos cuantos blogs, es un poco tedioso ir revisando uno por uno hasta dar con el "bueno".
Por este motivo, yo suelo ocultar mis blogs de pruebas y, aunque alguien pueda acceder por casualidad a ellos desde su buscador, al menos se evita la molestia de andar buscando en mi perfil.
Para ocultar un blog, no a los buscadores, sino a nuestro perfil en Blogger, hemos de ir a nuestro Escritorio de Blogger y en "Editar Perfil" veremos un enlace que dice "Selecciona los blogs que deseas mostrar".
Una vez pinchemos en ese enlace, hemos de desmarcar los blogs que no queremos se muestren en nuestro Perfil.

Ver todos los post del blog

A través de un link a nuestra página de etiquetas podemos permitir a nuestros visitantes,ver todos los post de nuestro blog (hasta un máximo de 999), independientemente de que en opciones de la plantilla tengamos un número de post limitado a mostrar en nuestra página principal. Para ello es indispensable estar usando etiquetas en el blog. Si tenemos implementado el truco para ver solamente el título del post en la página de etiquetas, así se mostrará, sino los post se verán completos.

Añadimos un nuevo elemento html-javascript y pegamos el link dentro:

<a href="http://elescaparatederosa.blogspot.com/search/label/?max-results=999">Ver todos los post</a>

Sustituimos "http://elescaparatederosa.blogspot.com" por la url de nuestro blog.

Podemos, o no, ponerle título al widget (nuevo elemento)y donde vemos "Ver todos los post" ponemos lo que queramos mostrar: "contenido del blog" "entradas completas", etc. Como puede verse en mi sidebar yo lo he llamado "Tabla de contenidos" y no le he puesto ningún título al widget.

Os sugiero algunos cambios para que quede más bonito, como incluir antes del texto a mostrar un pequeño icono, por ejemplo, una flechita:

<a href="http://elescaparatederosa.blogspot.com/search/label/?max-results=999"><img src="http://img58.imageshack.us/img58/7954/bulletgoro6.png"/>Ver todos los post</a>

Ver todos los post

He incluso usar My Live Signature para el texto:



<a href="http://elescaparatederosa.blogspot.com/search/label/?max-results=999"><img src="http://signatures.mylivesignature.com/54485/193/CAEF8A4EC549B67916FFF299C095F4DE.png" style="border: none; background: transparent;"/></a>

Imágenes tipo botón-pulsar

Podemos aplicar este efecto a cualquier imagen del blog, queda muy bien especialmente con las imágenes que hacen de botón-link o con los iconos de los marcadores sociales, por ejemplo.
El efecto es parecido al que ya expliqué anteriormente para los links, con la diferencia de que este se aplica solamente a las imágenes que queramos.

Tenemos, por ejemplo, un botón de marcador social, en este caso de technorati, al pinchar sobre el nos llevará a su web: http://technorati.com/, podemos hacer que el botón tenga el efecto de "pulsado":

Añadimos este código en el CSS de nuestra plantilla:
.pushbutton a:hover {position: relative; top: 1px; left: 1px;}

El botón de technorati tiene esta estructura:

<a href="http://technorati.com/"><img src="url del botón"></a>

Para darle el efecto de pulsado, hemos de "envolver" su estructura entre:
<span class="pushbutton"><a href="http://technorati.com/"><img src="url del botón"></a></span>

Sistemas de votación con estrellas

Hace unos días me preguntaba €r@sMö si conocía alguna forma de colocar en su blog un sistema de votación en cada post mediante estrellas.
A continuación voy a enumerar algunos de los que pueden usarse con cierta facilidad en nuestro blog, pero aclarando, eso si, que solamente he probado el de Blogalaxia, los demás los he visto colocados en algún que otro blog, pero no se mucho más al respecto...
El lugar de colocación del código en la plantilla, es para todos más o menos igual, ya que queremos que se vean debajo de cada post, así que hemos de colocarlo en la misma zona donde están la fecha, el autor, las etiquetas, etc, de cada post:
<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 /'>

Si lo colocamos antes o después de la última línea, por ejemplo, el ranking de estrellas se verá al final del pie del post, después de todo lo demás que tengamos debajo de las entradas.

Blogalaxia. En este post anterior ya había explicado el ranking de estrellas de Blogalaxia.

Spotback . En esta web se pueden escoger distintos widget para mostrar el rankingdevotosen tu blog, desde el clásico mediante estrellitas para cada post, hasta uno con las imágenes de los que votan.
Hay que registrarse para luego poder acceder a las estadísticas de tus votaciones.

Qualitativo. Podéis encontrar una muy buena información sobre este sistema en Vagabundia.

Blogarate. Solo puedo decir de este sistema que el registro en su web es muy sencillo.

Star it. Por lo que he podido observar, es uno de los más utilizados.

Y por último, a destacar una gran idea de Zona cerebral donde nos explican como crear nuestro propio sistema de votación, mediante el uso de CSS.

Si conocéis alguno más, o queréis comentar algo sobre los que he puesto para añadir datos al post, podéis dejar un comentario.

Plantilla Scribe (añadir nueva sidebar)

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Vamos a modificar la plantilla Scribe para añadirle una sidebar, las medidas que usaremos serán estas: ancho del blog: 950px, de las entradas: 480px y de las dos sidebar: 170px y 180px;

1- Vamos a plantilla - html y buscamos #outer-wrapper { , hemos de cambiar el valor de width: a 950

Seguimos hacia abajo de la plantilla y veremos #main-top { , hemos de cambiar el valor de width: a 950

A continuación veremos #main-bot {, aquí también cambiamos el valor de width: a 950

Un poco después está #wrap2 {, de nuevo cambiamos el valor de width: a 950

Más hacia abajo buscamos #main { y cambiamos el valor de width: a 480
Añadimos estas dos líneas, sustituyendo la de margin:
margin-left: 10px;
margin-right: 10px;

Debajo justo está #sidebar { cambiamos el valor de width: a 180
Copiamos todo lo que está en #sidebar{ y lo pegamos justo debajo, pero cambiando el nombre por newsidebar, el float de left a right y el width a 170. Quedaría así:
#newsidebar {
width:170px;
float:right;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

2- Ahora en el html de nuestra plantilla buscamos esto:<div id='sidebar-wrapper'> y justo encima ponemos el código para nuestra nueva sidebar:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>


3- Una vez modificado esto, tendremos el blog más ancho, pero se verá fatal porque las imágenes del fondo no se adaptan a nuestros cambios.
Vamos a cambiarlas por las nuevas imágenes:

En #main-top { cambiamos la url de la imagen por esta otra:
http://img127.imageshack.us/img127/5144/bgpapertoprc5.jpg

En #main-bot { cambiamos la url de la imagen por esta otra:
http://img112.imageshack.us/img112/5870/bgpaperbotjr9.jpg

En #wrap2 { cambiamos la url de la imagen por esta otra:
http://img127.imageshack.us/img127/3826/bgpapermidbh2.jpg

En #footer { y en #header { cambiamos la url de la imagenes por esta otra:
http://img519.imageshack.us/img519/820/dividerhb7.gif

Nota
Habréis visto que he añadido una línea a ambos lados de las entradas, para añadirlas a vuestro blog, consultáis las instrucciones en este post.
Para que el texto de las entradas no se pegue a las líneas de separación, le cambiaremos en #main{ el valor del padding, con 5px o 10px quedará bien:
#main {
padding: 8px 10px;



DESCARGAR PLANTILLA

Redirigir una imagen en Blogger

En el Cbox me pregunta Oti como hay que hacer para que al pinchar en una imagen te lleve a un sitio determinado. Lo más sencillo será hacerlo con una imagen subida al blog.
Par ello hemos de subir la imagen desde nuestro PC como hacemos habitualmente.
Si nos fijamos, una vez subida, antes de publicar la entrada, vemos que en edición html del editor, la imagen tiene un código como este:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/Rm0LU1twRHI/AAAAAAAABrw/XqiIOkh13Zo/
s1600-h/menu.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/Rm0LU1twRHI/AAAAAAAABrw/XqiIOkh13Zo/
s400/menu.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5074724807760692338" /></a>

En el código,la url que está después de "href" es lo que hace que al pinchar sobre la imagen esta se vea en una página nueva, si sustituimos esa url (dirección) por la que nos interese la imagen nos llevará a la página que nosotros queramos. Quedaría así:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL_DE_LA_PAGINA_QUE_QUERAMOS"><img style="display:block; margin:0px
auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/Rm0LU1twRHI/AAAAAAAABrw/XqiIOkh13Zo/
s400/menu.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5074724807760692338" /></a>

Vamos a verlo con dos imágenes iguales, la primera tal como está subida al blog, y la segunda nos llevará al blog de Oti:

Background fijo

Cuando hacemos scroll en el blog, es decir, cuando subimos o bajamos por la pantalla, nuestro fondo y el contenido, suben o bajan a la vez.
Podemos hacer que nuestro fondo permanezca fijo y sean las entradas y sidebar, las que suban y bajen. Si tienes de fondo una imagen, el efecto queda muy vistoso.
Puede hacerse con las plantillas originales de Blogger, en la dots, por ejemplo, queda muy bien.
Solo hay que añadir esta línea: background-attachment: fixed; en el body del CSS:

body {
background:url_de_nuestra_imagen;
background-attachment: fixed;

Smiles añadiendo una sola línea

Como lo acabáis de leer... una preciosa colección de smiles para nuestro blog añadiendo una sola línea en la plantilla justo después de ]]></b:skin>

<script src='http://escaparatederosa.googlepages.com/addSmiley.js' type='text/javascript'/>

Para asegurar que no vaya a fallar mi alojamiento o no vaya a cambiar de pronto la url del archivo, podéis descargar el script y alojarlo vosotros mismos.

VISTO EN:Blogging Secret

Link o menú en expandible

Me pregunta alida como podría hacer una cajita para poner los links como las que yo tengo tenia en mi sidebar, en "recomendados" y "blogs de ayuda":

TITULO TITULO DE LA PAGINA TITULO DE LA PAGINA TITULO DE LA PAGINA TITULO DE LA PAGINA TITULO DE LA PAGINA TITULO DE LA PAGINA

Pues bien, se trata de colocar un sencillo código en un elemento html-javascript en nuestra plantilla. El código es el siguiente:

<select onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" class="combobox" name="SiteMap" size="1">
<option selected/>TITULO

<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
</select>

En opción selected, es donde pondremos el título que se verá cuando los links no están expandidos.
Si queremos añadir más links, copiamos una de las líneas y la añadimos antes de </select> y así podemos añadir los que necesitemos.
El mismo sistema es uno de los que ofrece Blogger para mostrar los archivos del blog en forma de "menú despegable".
Puede usarse fácilmente como menú expandible del blog, colocando en el código la url de nuestras páginas de etiquetas.

* Puedes añadirlo con un "click" a tu blog y una vez instalado, personalizarlo facilmente:

<select onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" class="combobox" name="SiteMap" size="1"><br /> <option selected/>TITULO<br /> <br /> <option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA<br /> <option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA<br /> <option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA<br /> <option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA<br /> <option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA<br /> <option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA<br /> </select>

Plantilla Scribe, cambiar las barras (dividers)

Vamos cambiar la barra que hay debajo de la cabecera y en el pie, de la plantilla Scribe de Blogger.
Antes de nada elegimos la imagen, que será una barra tipo a la que viene por defecto en la plantilla, procuraremos que de ancho tenga 700px máximo, que es el ancho que admite esa plantilla si no ha sido modificada previamente.
Buscamos esta parte en el CSS de nuestra plantilla, reeplazamos la url de la barra por la de nuestra divider, lo que hará que nuestra divider se vea debajo del título de nuestro blog:

#header {
background:url("URL DE NUESTRA BARRA") no-repeat bottom left;
}

A continuación hemos de cambiar la url en esta otra parte (el pie del blog):

#footer {
clear:both;
background:url("URL DE NUESTRA BARRA") no-repeat top left;

Si la barra elegida es más ancha que la anterior, probablemente se verá cortada, para evitarlo añadimos: height:50px; cambiando el 50 por el ancho en pixeles de nuestra barra.
Quedaría así (lo mismo en la cabecera que en el pie del blog):

#footer {
clear:both;
background:url("URL DE NUESTRA BARRA") no-repeat top left;
height:50px;



¿Fácil no? ;-)

Glitter en el titulo del blog

Un glitter son esas letritas animadas, normalmente con brillos, que podemos crear en algunas web online.
Hace unos días Sandry me consultó sobre como poner uno de esos glitters sustituyendo el título de su blog. La verdad es que no pensé que iba a quedar tan bien...
1- Antes de nada hemos de tener la imagen, en este caso el glitter preparado, en algunas web para hacerlos puedes copiar la dirección del glitter directamente, por ejemplo en HotFreeLayouts, te darán un código más o menos como este:
<a href="http://glitter.hotfreelayouts.com/"><img src="http://glitter.hotfreelayouts.com/glitter/fc/fcd1aa8da1e5592e1392d18492b3888c.gif" border="0" alt="Glitter and MySpace Layouts"></a><br><a href="http://www.hotfreelayouts.com/layouts.php?index=myspace_layouts">Layouts</a> at <a href="http://www.hotfreelayouts.com/layouts.php?index=best_myspace_layouts">HotFreeLayouts.com</a>

Como no queremos que al pinchar en el glitter nos lleve a la página de HotFreeLayouts, hemos de quitarle los links y quedaría así:

<img src="http://glitter.hotfreelayouts.com/glitter/fc/fcd1aa8da1e5592e1392d18492b3888c.gif"/>

Hay muchas web para hacerlos, así que lo mejor es buscar alguna que nos guste y copiar la imagen a nuestro PC, para luego subirla a cualquier página de alojamiento de imágenes, y obtener nuestra propia url de la imagen.
Si copiáis la url del glitter directamente de la web donde lo habéis creado, tened cuidado porque a veces está preparado para X tiempo y luego dejará de verse, es el caso de Glitter Select, (donde Sandry hizo su glitter) así que mejor nuestra url de imagen propia...

2- El segundo paso es eliminar el título que tenemos ahora.

Vamos a plantilla-HTML-expandir elementos y buscamos esto:

<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>

3- Colocamos el glitter, su url, la que sacamos antes del código, sustituyendo el <data:title/>, fijaros que son dos <data:title/> los que hemos de sustituir por la url del glitter, ya que si no se seguirá viendo el título antiguo en las páginas de etiquetas.

Podéis ver un ejemplo del resultado en el blog de Sandry El laberinto de las aceitunas.

¡Mucha suerte!

Feed RSS en un solo botón

A veces colocamos en nuestro blog un montón de botones para facilitar a las visitas la lectura del blog a través del feed RSS. Cada botón facilita la lectura a través de un programa distinto.
Acabo de conocer una nueva herramienta que nos permite hacer más fácil a nuestras visitas el escoger su lector de feed favorito, al mismo tiempo que ahorramos espacio en nuestra sidebar.

Este servicio se llama Feedbuddy y para usarlo no hace falta ni siquiera registrarse, basta con escoger el tamaño del botón (hay dos opciones) e introducir la url de nuestro feed, y simplemente copiar y pegar el código resultante (es un pequeño script) en la parte del blog donde queramos mostrar nuestro botón.

Podéis verlo funcionando en mi sidebar, aunque en su página también tenéis un ejemplo de como funciona.

Con o sin humo

Soy una fumadora empedernida y sin remedio, lo confieso. :-$


Os dejo un par de cartelillos para adornar el blog, vosotros decidís cual os viene mejor. El mio está claro cual es. :-(

Añadir una sidebar

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Añadir una nueva sidebar al blog puede parecer en principio algo complicado, pero no lo es tanto como parece, ni mucho menos. Os recomiendo practicar antes en un blog de prueba, para evitar futuros disgustos...
No todas las plantillas son iguales, pero en general, funcionará este sistema, ya que se basa simplemente en copiar la sidebar existente y duplicarla.
He de aclarar, que esta prueba está hecha en una plantilla "Mínima" así que, en principio, servirá para todas las "Mínimas", aunque también he probado en la "Scribe" y, salvo unas pequeñas modificaciones que hube de hacer en padding y margin, el resultado fue óptimo.

[1] Vamos a Plantilla - html y buscamos esto en el CSS:

/* Outer-Wrapper --------------------------------- */
Justo debajo vemos #outer-wrapper {
Es aquí donde modificaremos el ancho, esto hará que el cuerpo del blog se ensanche a la medida deseada, en este ejemplo vamos a usar 900px, es decir, quedaría así:

#outer-wrapper {
width: 900px;

[2] Buscamos un poco más abajo la sidebar de nuestra plantilla:

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Lo copiamos y, justo debajo pegamos el código que acabamos de copiar. Acabamos de duplicar la sidebar, ahora hemos de cambiarle el nombre y le ponemos, por ejemplo, newsidebar, además necesitamos que "flote" al otro lado, para que las entradas queden en el medio de las dos sidebar, para lograrlo le cambiamos el float, quedaría así:

#newsidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

[3] Bajamos por la plantilla hasta encontrar esto:

<div id='main-wrapper'>

Justo sobre esa línea añadimos el código necesario para que nuestra sidebar se muestre en el blog:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

Guardamos cambios.
De momento nuestra nueva sidebar está vacía, así que para verla en el blog, hemos de ir a el panel de diseño, y allí veremos que ya es posible añadir nuevos elementos a la sidebar, añadimos uno, guardamos cambios y vemos la nueva sidebar pero se apreciará también, que la distancia de las sidebar a las entradas no es la correcta...
Solucionaremos esto volviendo a la plantilla - html, y añadiendo en #main-wrapper {
un nuevo valor para el margen:
margin-left: 20px;

Nota:
Las plantillas más recientes han cambiado alguno de sus parámetros, así que tendremos en cuenta que float:left; podrá aparecer como float: $startSide; y float:right; se verá como float: $endSide;.

Internet Blog Serial Number

El IBSN (Internet Blog Serial Number; en castellano, Número de Serie de Blogs de Internet) nace el 2 de febrero de 2006, como respuesta a la negativa de la administración española para otorgar un número de ISSN a las bitácoras de Internet.

El ISSN (International Standard Serial Number / Número Internacional Normalizado de Publicaciones Seriadas) y el ISBN (International Standard Book Number / Número Internacional Normalizado de Libros) son códigos numéricos de identificación. El ISSN, un número de ocho cifras, es el código internacional de identificación de las publicaciones seriadas (revistas, periódicos, boletines, anuarios, series de monografías...) y el ISBN, un número de diez cifras, identifica los libros.

El IBSN (Internet Blog Serial Number / Número de Serie de Blogs de Internet) consta también de diez cifras, e identifica los blogs (weblogs o cuadernos de bitácora) de Internet.

Wikipedia

Podemos registrar gratuitamente nuestro blog en esta página: IBSN y después de registrado obtener en la misma página nuestro código de barras. Todo en unos minutos, sin registros ni complicaciones.
El código de barras te lo ofrecen en tres formatos de imagen distintos o si lo prefieres en un código para pegar y copiar en el blog, con un enlace a su página.
Y aquí está el mio:

Citas aleatorias para el blog con la imagen de su autor

En esta web podemos conseguir el código html necesario para mostrar citas o frases celebres acompañadas con la imagen de su autor.
Cada vez que se acceda al blog, o se refresque la página, la frase mostrada será distinta. Hay todo un surtido para elegir como mostrarlas, se puede escoger el tamaño (anchura y altura), el estilo, fuente del texto, distancia del texto al borde, tamaño de la imagen del autor, situación de la imagen (izquierda, derecha, arriba...), color del título, etc...
Colocamos el código en un nuevo elemento html-javascript y lo arrastramos donde queramos mostrarlo.

Mostrar la hora de publicación debajo de la fecha del post

Pues eso mismo...si es que me planteáis cada consulta... :-), claro que sobre gustos no hay nada escrito, o eso dicen...
Me dice Ana en un email que le gustaría que debajo de la fecha de sus entradas apareciera la hora en que ha publicado el post. Es relativamente sencillo de hacer:

1- En el html de nuestra plantilla, expandimos los elementos y buscamos estas líneas de código, una vez localizadas las copiamos:

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>

2- Buscamos esta otra línea en el código de la plantilla:

<h2 class='date-header'><data:post.dateHeader/></h2>

Justo debajo, pegamos el código que habíamos copiado antes, usamos la vista previa para comprobar el cambio, el resultado será este:


Notas

Una vez hecho el cambio, tendremos la hora de publicación debajo de la fecha del post y al mismo tiempo seguirá viéndose debajo de la entrada, si solo la queremos arriba, cuando copiemos el primer código tenemos que borrar el original de nuestra plantilla.

En la imagen de prueba que he puesto arriba, aparece la palabra "hora" delante de la hora (valga la redundancia), hay que tener en cuenta que aparecerá lo que tengáis puesto vosotros en el editor de entradas.

Igual que hemos "subido" la fecha, podríamos subir lo que quisiéramos del pie del post: los comentarios, el autor, las etiquetas...incluso ponerlo debajo del título del post, solo habríamos de localizar el código correspondiente a cada cosa y cambiarlo de sitio.

¡Suerte!

Ayudando a Google

¿Aún no aparece tu blog en Google?
Como suele decirse, si la montaña no viene a Mahoma... :-)
Quizas ayudaría sugerirle la dirección de tu blog al "gran buscador" por probar no se pierde nada.
Podemos hacerlo desde aquí.

Que es y como funciona Alexa

Alexa, es un servicio gratuito de navegación que se acopla a nuestro navegador y nos brinda información sobre el sitio que estamos visitando.

Se supone que es una herramienta que ayuda a mejorar nuestra navegación.


Todos los usuarios de Alexa tienen la denominada Alexa Toolbar (Del estilo a las barras de Google o de Yahoo). El ranking de tráfico está basado en el historial de tráfico de tres meses de todos estos usuarios con la barra.

He recopilado información en la red y hay opiniones para todos los gustos, la mía es que la información que Alexa puede darnos sobre el tráfico de nuestro blog es relativa, por lo tanto, poco fiable, ya que sus mediciones se basan en la navegación de las personas que tienen esa herramienta (la barra de Alexa)instalada.
Una persona que no tiene Alexa instalada no es detectada por ellos y por lo tanto no es contabilizada cuando visita nuestro blog.

El ranking de tráfico está basado en el historial de tráfico de tres meses de todos estos usuarios con la barra, así que no debemos "asustarnos" si de repente subimos o bajamos en su ranking.
Como dato curioso, hay que saber que la puntuación de su ranking va al revés, o sea, que cuanto más baja sea la puntuación que nos otorga (más se acerque al 1) más alto estamos en su ranking.

Si nos da por comprobar nuestro ranking en Alexa y, al introducir nuestra url, descubrimos que no aparece en su ranking, tampoco hay que preocuparse, esto es debido a que nadie con la "Alexa Toolbar" instalada ha pasado por nuestro blog.

Dentro de las informaciones que he recogido en mis "pesquisas" sobre Alexa, me he encontrado con el blog de Telendro, que recomienda, o al menos, ellos lo prueban, el uso del botón de Alexa ya que, según parece con el botón colocado en el blog, Alexa registra todas las visitas y no solamente la de aquellos que tienen su barra instalada.
Es por esto que me decidí a incluir el botón en mi sidebar, como mero experimento, aunque es seguro que lo retiraré en breve, porque a decir verdad, los rankings me preocupan lo mínimo...

Para incluir el botón con el ranking de Alexa en vuestro blog, tenéis que entrar en su página web y en la sidebar de la derecha, donde dice "Developer's Corner", escogéis la opción "Widget" hay unos cuantos modelos para elegir.

Tabla para anuncios o anotaciones

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Como podéis apreciar hace tiempo que puse un tablón de notas o anuncios debajo de la cabecera del blog, es esa barra con fondo gris donde aviso que los trucos son para Blogger nuevo, lo he colocado gracias a Beautiful Beta una vez instalado se puede modificar el color de fondo, tipo de fuente,color del texto y anchura y color del borde, en fuentes y colores de la plantilla.
Aparece en el listado de elementos a modificar, en "fuentes y colores" automáticamente una vez instalado, es decir, se integra en la plantilla como si fuera una opción de Blogger.
Esto es posible porque añadiremos unas variables nuevas en la plantilla. :-)

1- Busca en tu plantilla-HTML:

<div id='content-wrapper'>

y añade a continuación:

<div id='message-board'>
<b:section class='msgbrd' id='msgbrd' maxwidgets='1' showaddelement='yes'/>
</div>

2- Añade en tu plantilla-HTML las siguientes variables a continuación de las que ya tienes en tu plantilla:

<Variable name="MsgBrdFont" description="Message Board Font" type="font" default="italic normal 100% Verdana, Arial, Sans-serif;" value="italic normal 100% Verdana, Arial, Sans-serif;">
<Variable name="bgMsgBrd" description="Messageboard Background Color" type="color" default="#ffffff" value="#ffffcc">
<Variable name="borderMsgBrd" description="Messageboard Border Color"
type="color" default="#336699" value="#336699">
<Variable name="colMsgBrd" description="Messageboard Text Color"
type="color" default="#000000" value="#000000">

3- En la parte del CSS (es esa parte donde hay tantas } ), añades esto:

/* Messageboard */

.msgbrd h2 {
display: none;
}

.msgbrd .widget-content {
padding: 2px 2% 2px;
background-color: $bgMsgBrd;
border: 4px solid $borderMsgBrd;
color: $colMsgBrd;
font: $MsgBrdFont;
}

4- Guardas cambios y ¡ya está!, ahora si vas a tu plantilla verás que se ha añadido un nuevo elemento bajo la cabecera donde podrás insertar tu nuevo texto sin que pase desapercibido a tus visitas. ;-)

Tooltip con imagen

Ya os expliqué en uno de mis primeros post como añadir un tooltip a los links.
En esta ocasión explicaré como podemos conseguir un tooltip un poco más llamativo y original.
Supongo que ya sabéis que un tooltip es una ventanita emergente, habitualmente con un cuadro explicativo en su interior, en este no solo podremos añadir texto, además vamos a incluirle una imagen.

Pon el puntero sobre el link para ver como funciona:

El Escaparate
Ayuda para tu blog
Nuevo Blogger


Como en otras ocasiones vamos a ayudarnos del CSS:

1- En primer lugar vamos a nuestra plantilla y añadimos este código dentro del CSS, para los que tengais alguna duda, podemos colocarlo justo antes de ]]></b:skin> que es donde termina la parte del CSS de la plantilla.


a.tooltip {
position:relative;
color:#000;
text-decoration:none;
}
a.tooltip span {
display: none;
}
a.tooltip:hover span {
display:block;
position:absolute;
top:2em;
left:2em;
width:110px;
border:2px solid #000000;
background-color:#CC3333;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
color:#ffffff;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 5px;
}

2- Cada vez que añadamos un link en el que queramos usar el tooltip, hemos de incluirlo en este código de HTML.

<a href="URL DEL ENLACE" class="tooltip">TEXTO DEL ENLACE <span><img src="URL DE LA IMAGEN">TEXTO QUE VA DENTRO DEL TOOLTIP</span></a>

Si vamos a usarlo en los enlaces que añadamos en alguna de nuestras entradas, podemos pegarlo en opciones de la plantilla - formato - plantilla de entrada y así tenerlo "a mano"

Modificaciones

Podemos cambiar:
El ancho de la ventana del tooltip: width:110px;
El color, grosor y vista del borde: border:1px solid #000000;
El color de fondo de la ventana del tooltip: background-color:#CC3333;
El color del texto: color:#ffffff;
La alineación del texto: text-align: left;
El tamaño de la fuente del texto: font-size: 12px;
La distancia del texto al borde de la ventana del tooltip: padding: 5px;
Estas dos líneas hacen que el borde de la ventana del tooltip se vea redondeado en
Firefox, en IE se verán normal, es decir, cuadrados: -moz-border-radius: 15px;
-webkit-border-radius: 15px;