El gadget de Following o Seguidores

Un gadget muy esperado, quizás porque pensábamos que Blogger estaba siendo injusto por esa larga espera y porque no, nos dio oportunidad de probarlo como hizo con otros gadgets.
Según Blogger para disfrutar de este gadget lo haríamos de forma paulatina y al parecer a los blogs en español les ha tocado los últimos. Pero ahí está que es lo que importa

Nos enteraremos que tenemos seguidores cuando accedemos a nuestro escritorio y a la derecha nos muestra una imagen parecida a esta:


¿Cómo añadimos el gadget?
Nos situamos en plantilla de diseño y añadimos un gadget, escogemos la opción de "Seguidores"


Eso nos añade el gadget en la sidebar que arrastraremos hasta el lugar deseado, visualizando el gadget comprobaremos el número de seguidores que tenemos y el avatar de cada uno de ellos.
Podemos administrar el sitio accediendo al enlace de Administrar, desde ahí escogemos si deseamos tener seguidores públicos o bloquearlos.


!Ejem¡ ejem..(carraspeo) una no se hace responsable del avatar que escogen nuestros seguidores.

¿Cómo seguimos otro blog?
Al igual que nos pueden seguir a nosotros también puede ser a la inversa, para seguir algún blog accedemos a nuestro escritorio (al final de la página) un enlace de "Añadir" nos invita a introducir la url del blog que deseamos seguir.


Otra forma muy sencilla para hacernos seguidores de un blog es desde el mismo gadget que el autor tenga instalado, esta vez lo haremos desde el texto "Seguir este blog"


Nos pedirá marcar si deseamos seguir ese blog de forma pública o privada, marcamos la casilla que corresponda y guardamos los cambios.

De forma automática los blogs que leemos en Blogger se añaden como suscripciones en Google Reader. Podemos gestionar las suscripciones o anularlas sin que afecte a la lista de blogs.

Y eso es todo, a seguirse todo el mundo.

Imagenes a tamaño "real" en Blogger

Si subimos las imágenes de nuestras entradas mediante el editor de Blogger, ya sabemos que el tamaño máximo permitido es de 400 pixeles tanto en el ancho de las imágenes horizontales como en el alto de las imágenes verticales.

Esta limitación es debida a que el editor de Blogger trabaja suponiendo que se está usando una de sus plantillas, donde el ancho del main (cuerpo de entradas) no supera los 470 pixeles de anchura.

Muchos de nosotros usamos plantillas modificadas en las que, el ancho de entradas sobrepasa fácilmente los 470 px  por lo que, las imágenes subidas desde el editor se nos quedan pequeñas.

Es sencillo el conseguir que esta limitación no nos impida mostrar en el blog las imágenes a su tamaño real teniendo en cuenta, por supuesto, no incluir imágenes mayores que el ancho de nuestras entradas o estas se verán cortadas.

[1] Accedemos a nuestro panel de Blogger desde Blogger in Draft.

[2] Nos situamos en nuestro editor de entradas y subimos la imagen escogida.

[3] Una vez subida la imagen, en la pestaña "Edición de HTML" del editor podemos ver el código que se ha generado para ella:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SP42cEckHSI/AAAAAAAAEfs/pJ6bDEJM7wg/s1600-h/Casa-de-madera-imagenes.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SP42cEckHSI/AAAAAAAAEfs/luwJRwJ9uUs/s320-R/Casa-de-madera-imagenes.jpg" /></a></div>


[4] Dentro de ese código cambiamos s320-R por s00-R y ya tendremos la imagen a su tamaño real.

Sucede entonces que, una vez publicada la entrada, al pinchar sobre la imagen esta se abrirá como sucede habitualmente en una nueva página a su tamaño real.
Ya que el tamaño de las dos imágenes será entonces igual, podríamos prescindir de usar el enlace que muestra la segunda imagen al pinchar sobre la publicada en el post, para ello eliminamos del código lo que está en color rojo:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SP42cEckHSI/AAAAAAAAEfs/pJ6bDEJM7wg/s1600-h/Casa-de-madera-imagenes.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SP42cEckHSI/AAAAAAAAEfs/luwJRwJ9uUs/s320-R/Casa-de-madera-imagenes.jpg" /></a></div>

No soy tan rara...

Una tiene manías, ya sabes... esos gestos o costumbres de hacer ciertas cosas en un momento determinado, pero después de leer esta serie de preguntas que llegaron a mi mail pienso que !No soy tan rara¡
Y a pesar de ese descubrimiento sigo sin respuesta a esas preguntas.


1-¿Por qué el pan de molde es cuadrado, si el chope, salami, mortadela...son redondos? ¿Quién tiene la culpa de esto, los tranchetes?

2-¿Por qué en las películas de miedo siempre aparece una puerta cerrada
de la que sale mucha luz por las rendijas? ¿Qué hacen los espíritus ahí detrás, fotocopias?

3-Por qué cuando yo compré el piso, a mí no me dieron la canica que tienen los demás vecinos (pero todos) y que se les cae o la echan a rodar a partir de las doce de la noche?

4-Por qué cuando llegamos a lo alto de una montaña nos ponemos las manos en la cadera?

5-Por qué abrimos la boca cada vez que miramos al techo?

6-Por qué nos da por ir a la nevera cada cuarto de hora si siempre hay lo mismo?

7-¿Por qué si nunca usamos las páginas amarillas,cuando las ves en el portal te pones contentísimo y, de hecho, piensas en cogerlas todas?

8-¿Por qué cuando nos sonamos los mocos abrimos el pañuelo y miramos lo que hemos echado?
¿Qué esperamos encontrar? ¿Berberechos?

9-¿Por qué cuando nos cuelgan el teléfono nos quedamos mirándolo como si el teléfono tuviera la culpa?

10-¿Por qué cuando nos llaman al móvil sentimos la necesidad irrefrenable de ponernos a andar de un lado a otro?

11-¿Por qué cuando estamos en un lugar alto nos obsesionamos con ver nuestra casa?
'Mira, mira ahí, al lado del edificio rojo...'.

12-¿Por qué cuando echamos una carta al buzón no podemos evitar mirar por la ranura
e investigar qué hay dentro? ¿Qué esperamos encontrar?¿Un cartero enano?

13-¿Y por qué abrimos los ojos cuando estamos a oscuras?¿Qué creemos?
¿Que tenemos superpoderes?.

14-¿Por qué hay tanta gente que cuando como un helado de cucurucho, a la mitad,
muerden el piquito de abajo? Si saben que por ahí les va a chorrear!!!

15-¿Por qué nos hace tanta gracia que se nos quede la marca del reloj cuando nos ponemos morenos y se lo decimos al de al lado? Mira, se me ha quedado la marca, parece que llevo reloj, pero no'

16-¿Porqué cuando un aparato eléctrico no funciona no se nos ocurre otra cosa que apretar con más fuerza el botón de encendido?

17-¿Por qué cuando alguien se va a poner gotitas en los ojos abre la boca de esa manera tan extraña? ¡Es colirio, no tequila!!!!!!

18-¿Por qué cuando cogemos una caja de medicamentos, por muchas vueltas que le demos, siempre la abrimos por el lado que no es y aparece el prospecto, ahí, doblado?

19-Por qué cuando vas de viaje te sientes culpable si no visitas los museos?

20-Por qué cuando nos enfadamos nos cruzamos de brazos?¿Qué ganamos con ello?

21-¿Y por qué elegimos siempre las bodas para dar a conocer a nuestros padres que fumamos?

22-¿Y por qué cuando tenemos miedo nos metemos debajo de las sábanas? ¿Creemos que así un cuchillo no atraviesa la sábana?

23-¿Por qué has mirado al techo al leer la quinta pregunta? ESTÁ BIEN EHHHHH???

Titulo optimizado en Blogger

Sois bastantes los que me habéis preguntado la forma de conseguir que en la barra del navegador aparezca el título del artículo antes que el del blog, tal como sucede en El Escaparate.

Esto se consigue mediante una pequeña modificación en el título de nuestro blog desde "edición html".
Este cambio nos permite mostrar el nombre en la barra del navegador, de una entrada concreta sin que aparezca el nombre del blog en primera posición, sino el nombre de cada entrada, con lo que se obtiene un mejor posicionamiento en los buscadores.

[1] Nos situamos en nuestro panel "edición html" y localizamos (casi al comienzo de la plantilla) el código que corresponde al título de nuestro blog:

<title><data:blog.pageTitle/></title>

[2] Sustituimos ese código por este otro:

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> : <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

[3] Guardamos los cambios.

Flagcounter - Contador de visitas con banderitas

Flagcounter es un sistema de estadísticas que nos muestra las banderas de los países visitantes, también nos ofrece la posibilidad de acceder a la página mediante un clic en nuestro contador y comprobar el porcentaje de visitas realizadas a nuestro blog. En esa misma página también es posible obtener información detallada sobre un país haciendo clic sobre el nombre.

Permite personalizar color de fondo, texto y borde mostrando un vista previa en la parte inferior de la página.

De los dos códigos que proporciona debemos escoger el primero que añadiremos nuestro blog incluyéndolo en un gadget escogiendo para ello HTML/Javascript.

Hay que tener en cuenta que al navegar por una página se contabiliza una visita por cada acceso a la página principal.

Caja de contenido con scroll

La cantidad de enlaces que a veces añadimos a nuestro blog nos obliga a buscar la forma de incluirlos sin ocupar demasiado espacio.
Ayer Games me sugería un scroll "con flechitas" este que traigo a continuación lo vi en el blog de César, le hice algunas modificaciones y este es el resultado.
El siguiente código lo añadimos en Diseño/Añadir un gadget/HTML/Javascript

<script language="JavaScript1.2">
var speed=2

iens6=document.all||document.getElementById
ns4=document.layers
if (iens6)
{document.write
('<div id="container" style="position:relative;width:180px;height:240px;overflow:hidden;border:4px ridge #B0171F; ">')
<!--Modificar ancho,largo y borde del contenido-->
document.write('<div id="content" style="position:absolute;width:183px;left:2px;top:0px">')
}
</script>
<div style="background-color:#fff;width:185px;border:1px solid #B0171F;">
  <!-- Color de fondo del contenido--> 
<!--Enlaces- imágenes- contenido-->
<!--Enlaces- imágenes- contenido-->
</div>

<script language="JavaScript1.2">
if (iens6){
document.write('</div></div>')
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
 <!--En movedown escogemos velocidad-->
}

function moveup(){
if (window.movedownvar) clearTimeout(movedownvar)
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
   <!--En moveup escogemos velocidad-->
}

function stopscroll(){
if (window.moveupvar) clearTimeout(moveupvar)
if (window.movedownvar) clearTimeout(movedownvar)
}

function movetop(){
stopscroll()
if (iens6)
crossobj.style.top=0+"px"
else if (ns4)
crossobj.top=0
}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>

<!--Para añadir las imágenes de subir y bajar desde aquí;-->
<div style="background-color:#fff;width:185px;border:1px solid #B0171F;">
<!--En background añadimos color de fondo a la caja de imágenes -->
<center>
<a href="javascript:movedown()"><img src="url-imagen SUBIR"/></a> <a href="javascript:moveup()"><img src="url-imagen-BAJAR"/></a> <a href="javascript:stopscroll()"><img src="url-imagen-PAUSA"/></a> <a href="javascript:movetop()"><img src="url-imagen INICIO"/></a>
</center>
</div>
     <!--Hasta aquí->

Para personalizarlo añadí unas líneas en negrita que sirven como orientación.

Esto es una imagen

La barra de navegación es posible situarla en la parte superior o inferior del contenido,la solución está en "mover" al principio o final el código que se encuentra en el interior de estas dos líneas:

<!--Para añadir las imágenes de subir y bajar desde aquí;-->
código...
código...
código...
<!--Hasta aquí->

Botones para el enlace "sigueme en Twitter"

Los he visto en Siah Desing siguiendo el enlace de una entrada al respecto de Código Geek.

Cada versión del botón se suministra en dos formatos, una en formato gif con fondo transparente y la otra en png con fondo blanco.

Son un total de cuarenta y dos botones e incluso los hay animados, eso si, el texto se ve en inglés "Follow me on Twitter".

Los ofrecen de forma gratuita, tan solo hay que descargarlos con el botón derecho y "guardar imagen".

Una vez descargados, solo nos resta subirlos a un alojamiento de imágenes (o al mismo Blogger) y usar la url del botón en sustitución del texto del enlace de nuestro widget de Twitter.

El enlace será algo como esto:


<a id="twitter-link" href="http://twitter.com/RosaTorre"> Sígueme en Twitter</a>

Y cambiaremos "Sígueme en Twitter" por la url de nuestro nuevo botón:

<a id="twitter-link" href="http://twitter.com/RosaTorre"> <img src=Url_del_botón/></a>