Ciudad Blogger: junio 2009

A principios de año la fiebre de La Faviconera nos llegó y fueron muchos quienes se unieron a este movimiento.
Ya han pasado varios meses y he visto muchas faviconeras vacías. Incluso Oloblogger se cuestionaba el por qué esa iniciativa no tuvo tanto éxito como se esperaba.
Ya todos conocen los beneficios de la faviconera, promoción, tráfico, visitas, bla, bla, bla. ¿Pero entonces por qué la mayoría no ha llenado su faviconera?

Empecé a buscar en Google la palabra 'faviconera' para recolectar sitios que tuvieran implementada esta campaña y ¡voilà! Nico aparecía en casi todas las páginas de resultados, incluso yo que no tengo faviconera aparezco en varios resultados ¿hay algún truco de magia?
No, lo que hábilmente sucedió fue que Nico no sólo abrió su faviconera, sino que se dedicó a buscar sitios que igual la tuvieran para solicitar su espacio, es decir se dedicó a promoverse. Y lo que yo hice fue más simple, sólo quité el No Follow y algunos comentarios con la palabra 'faviconera' o 'favicon' hicieron que me posicionara en algunos resultados de la búsqueda (esto también lo hizo él).

El error de muchos fue abrir su faviconera y sentarse a esperar a que se llene sola...bueno, ahora ya sabemos que esto no funciona así.
Así que si tienes una faviconera no desperdicies ese buen espacio, promociónala, comenta en otros blogs, invita, y sobre todo facilítales la forma de pertenecer a ella, no les pongas muchas trabas haciéndolos escribir tantos posts y enlaces, mucho menos si tu blog tiene un Page Rank bajo. Se trata pues de ayudarnos entre todos a promover nuestros blogs de una forma simple y estéticamente agradable.

En esta entrada estaré publicando los blogs que tengan espacios disponibles en su faviconera, los que se vayan llenando los quitaré (para darle lugar a los disponibles) a menos claro que vayan abriendo más lugares en su faviconera. Así que si tú tienes una faviconera deja un mensaje para agregarla a este directorio, o sí conoces a alguien que aun tenga espacios háznoslo saber.

NOTA: Las webs que cobran por incluir faviconos en sus sitios no han sido publicadas.

[+/-]

Reloj de cuenta regresiva

[+/-]

Poner marcadores sociales en Blogger

[+/-]

108 iconos bookmark estilo dibujo

[+/-]

Crear un rotador de banners al azar

[+/-]

Contador de visitas para entradas

[+/-]

Cómo crear vinculos dentro de la misma entrada

[+/-]

Efecto de arcoiris en links al pasar el mouse

[+/-]

Eliminar título y descripción del blog

[+/-]

Contador de descargas de archivos

[+/-]

Respuestas a preguntas curiosas

[+/-]

Filtrar IP en Google Analytics

Los resultados de visitas diarias de los contadores web siempre tienen un margen de error. En la mayoría ese margen es muy alto, tanto, que las estadísticas que muestran no se acercan ni un poco a las visitas reales que tenemos. Google Analytics tiene un margen de error muy corto, lo cual lo hace más fiable, de tal modo que tenemos una idea más clara sobre el número de personas que nos visitan.

Sin embargo, si tú visitas tu propia página, ya sea para ver si todo funciona bien, para revisar comentarios, para contestarlos, para ver si hay alguien en línea, o simplemente porque quieres entrar, entonces tu visita también la está resgistrando el contador. Lo que implica que el margen de error se vuelva más grande, pues esas visitas tuyas no son visitas reales, es decir, no nos importa saber cuántas visitas nuestras hacemos, sino cuánta gente de otras partes entra a nuestro sitio.
Mucha gente presume de tener cientos de visitas diarias y son capaces de mostrarnos las estadísticas de Google Analytics con tal de que les creamos, pero ¿cuántas de esas visitas son de ellos mismos? Yo estoy seguro que por lo menos el 20% de esas visitas las hicieron ellos, lo cual baja drásticamente los números.

Por ello lo que podemos hacer es filtrar nuestra IP para que nuestra visita no se cuente en las estadícticas y de este modo tengamos resultados más "limpios" sobre el número de visitas totales.

Lo primero es saber cuál es tu IP, si no la conoces puedes usar algún servicio en línea que te muestre tu IP. Hay muchos de estos sitios, uno de ellos es CuálEsMiIP.net, sólo entra al sitio y automáticamente verás tu IP.
Ahora entra a Google Analytics y haz click en Editar situando en el extremo derecho del nombre de tu sitio.
Casi hasta abajo hay una tabla llamada Filtros aplicados al perfil, ahí haz click en Añadir filtro.
Asigna un nombre al filtro y selecciona Excluir todo el tráfico procedente de una dirección IP específica.
Escribe tu IP usando puntos y diagolanes invertidas, por ejemplo:

190\.212\.31\.39
Guarda los cambios y listo.

Puedes agregar tantas IP como quieras, dependiendo del número de computadoras distintas usas para entrar a tu sitio.
De este modo los resultados (aunque bajarán) serán más cercanos y tendrás una idea más clara de cuánta gente te visita.

[+/-]

Últimas entradas con gadget en flash

[+/-]

Crear un formulario para el blog

Tener un formulario en el blog puede ser de mucha ayuda, ya sea para que el usuario se ponga en contacto con el administrador, para envío de sugerencias, encuestas, registros, etc.
Vamos a ver cómo crear un formulario a través de un sitio externo, en este caso de EmailMeForm. Es un servicio gratuito para crear formularios de contacto bastante completos y totalmente personalizables. No necesitas saber de programación y lo puedes implementar dentro de tu blog sin complicaciones.

Primero debes ingresar a EmailMeForm y registrarte (te toma dos minutos).
Ya que has ingresado a tu cuenta selecciona

Aparecerá un mensaje, para que sea más sencillo haz click en la primera opción que dice Go to the Template section. I'd like to choose from a list of pre-made forms.
Ahí aparecerá un formulario base que puedes modificar, sólo haz click en el botón que dice Customize
Del lado izquierdo aparecerá un área color gris, es ahí donde haremos las modificaciones: en Form title escribe el título del formulario, en Description un texto que irá arriba del formulario, puede ser las instrucciones o algo explicativo; en Confirmation Options elige si quieres que al enviar el formulario aparezca un texto o reenvíe a una página Web, en Label Placement puedes elegir de qué manera se mostrarán los campos a rellenar, en Styling Options puedes poner el código de una imagen si lo deseas así como otras opciones para usuarios que conocen más sobre CSS.
Ya que lo has personalizado de modo general ve a la parte superior del área gris y selecciona Field Settings, haz click sobre un campo y te aparecerán las opciones que puedes modificar, ahí cambia el nombre de la celda así como el resto de opciones que quieras agregar.
Haz lo mismo para todos los campos.
Si quisieras agregar más campos haz click en donde dice Add field y elige el tipo de campo que quieres agregar y configuralo a tu gusto.
Cuando hayas finalizado con el formulario haz click en el botón que se encuentra en la parte de abajo.

Aparecerá un mensaje, elige la opción 3 que dice Take me back to the Form Manager, ahí aparecerá otro mensaje para seleccionar opciones de correo, como si se le enviará una copia del formulario a la persona entre otras cosas. Guarda los cambios.
Para finalizar veremos que aparece el nombre del formulario y debajo unas opciones, haz click en Code y copia uno de los códigos que aparecen, ese código lo puedes pegar dentro de una entrada o una página estática y listo.

Como ven los pasos son muy simples, y aunque está en inglés no es complicado entenderle. El resultado es este:

Enlace: EmailMeForm

[+/-]

Gadget de slideshow con fotos propias

Como muchos saben, Blogger dentro de los gadgets que ofrece tiene uno de presentación de fotos; estas fotos son recopiladas de Picasa, Flickr y Photobucket. El problema es que casi nadie lo usa debido a que sólo muestra fotos de una palabra clave. Por ejemplo, si seleccionas Picasa como fuente deberás escribir una palabra clave para que la presentación de fotos incluya todas las imágenes que encuentre con esa palabra clave.
¿Pero qué pasa si quiero usar fotos mías y no fotos que Picasa recopila de la web?
Entonces vamos a ver cómo crear una presentación de fotos usando sólo las fotos que quieras.
Hay dos formas de hacerlo, una es creando un álbum público y otra es creando un álbum (aunque no sea público) y mostrando las fotos a través de un feed.

A través de un feed

Primero entra a Picasaweb y crea un nuevo álbum de fotos, ahí debes subir todas las fotos que quieras que se muestren en el slideshow.
En el lado derecho verás los datos del álbum incluyendo un enlace que dice RSS, con el botón derecho del mouse selecciona Copiar la ruta del enlace.
Ahora entra a Diseño > Elementos de la página > Añadir un gadget y elige Presentación.
En la Fuente selecciona Otros y en la URL del feed pega el link que copiaste de Picasa.
Ya sólo escoge las opciones de velocidad y presentación aleatoria.

Con un álbum de fotos público

Entra a Picasaweb y crea un álbum nuevo.
En Editar selecciona Propiedades del álbum y marca la casilla Público.
Ahí agrega todas las fotos que quieras para tu slideshow.
Ahora entra a Diseño > Elementos de la página > Añadir un gadget y elige Presentación.
En la Fuente selecciona Álbumes de Picasa y marca la casilla Álbum.
En Nombre de usuario pon tu dirección de correo electronico con la que te registras en Picasa o Blogger, y selecciona el álbum público que creaste.
Escoge las opciones que quieras y guarda los cambios.

De este modo tendrás una presentación de fotos (slideshow) con las imágenes que tú has elegido mostrar.
Cuando quieras agregar o eliminar más fotos sólo entra a Picasaweb y realiza los cambios. Blogger actualizará las fotos automáticamente.

[+/-]

Dominios .tk

[+/-]

Crear 2 columnas de texto con letra capital

ener dos columnas de texto dentro de una entrada da cierta formalidad al contenido del blog.
Quizá es porque estamos acostumbrados a leer los periódicos y los libros a dos columnas y regularmente estos tienden a ser informativos y veraces. Pero no sólo eso, la letra capital le da más estilo al contenido y más aun cuando la letra capital tiene ornamentas como los libros antiguos.

Vamos entonces a ver cómo crear dos columnas dentro de una entrada sin necesidad de tocar la plantilla; lo que significa que podrás adaptar las columnas cuando quieras y esto no afectará a tus demás post.
Lo mismo con la letra capital, aunque ya se explicó antes cómo poner la letra capital en Blogger, ahora veremos cómo hacerlo sin editar nada, sólo usando unas imágenes dentro del post. La idea es hacerlo sencillo para no tener que alterar la plantilla.

Para usar la doble columna sólo debes poner el siguiente código dentro del post y escribir tu texto donde se indica:

<div style="padding: 10px; float: left; width: 45%; text-align: justify;">Texto de la columna (lado izquierdo)</div><div style="padding: 10px; float: right; width: 45%; text-align: justify;">Texto de la columna (lado derecho)</div>

Ahora sólo falta la letra capital; esta la puedes poner como se explica en este artículo. O bien puedes usar una imagen como yo lo he hecho. Sólo debes poner después del primer <div style="padding: 10px; float: left; width: 45%; text-align: justify;"> esta línea:

<img style="margin: 0px; float: left;" src="URL de la imagen" alt="letra capital" border="0" />

Sólo cambia la URL de la imagen por la dirección donde esté alojada la imagen de la letra. El código completo sería este:

<div style="padding: 10px; float: left; width: 45%; text-align: justify;"><img style="margin: 0px; float: left;" src="URL de la imagen" alt="letra capital" border="0" />Texto de la columna (lado izquierdo)</div><div style="padding: 10px; float: right; width: 45%; text-align: justify;">Texto de la columna (lado derecho)</div>

Yo he tomado unas fuentes y las he convertido a imagen para que puedas usarlas. Sólo descarga la carpeta con los archivos y súbelos a un servidor. Puedes dercargárlas aquí.
Y así de simple puedes darle más estilo a tus entradas del blog.

[+/-]

Crea tu banner de 125 x 125

[+/-]

Mensaje con efecto arcoiris

[+/-]

Publica tu blog en Facebook

[+/-]

Cabecera del blog en flash

[+/-]

Ganador del Primer Concurso para Ciudadanos 2009

[+/-]

Agrandar imagen al pasar el mouse

[+/-]

Nube de etiquetas estatica

Anteriormente vimos cómo crear una nube de etiquetas en movimiento, ahora vamos a hacerlo pero que quede de forma estática.

Primero verifica que ya tengas un gadget de etiquetas, si aún no lo tienes agrega uno desde Elementos de la página.

Luego entra a Diseño | Edición de HTML y SIN expandir artilugios pega lo siguiente antes de ]]></b:skin>

/* Estilos de la nube de etiquetas
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{} #labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Ahora antes de </head> pega esto:

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Después busca esta línea:

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

Nota: Es posible que en la id= diga Label2 o label3, y que el title= diga Etiquetas u otro nombre, pero la forma más fácil de reconocer esta línea es guiándote por esto último: type='Label'/>

Ya que lo has localizado sustitúyelo por esto:

<b:widget id='Label1' locked='false' title='Nube de etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<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'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Guarda los cambios y listo.
También puedes personalizar los colores y tamaño de las letras, para ello en el segundo código modifica lo que desees:

var maxFontSize = 20; tamaño máximo de la letra más grande
var maxColor = [0,0,255]; color del texto de la letra más grande
var minFontSize = 10; tamaño mínimo de la letra más pequeña
var minColor = [0,0,0]; color del texto de la letra más pequeña

[+/-]

Eliminar enlace de la imagen

[+/-]

Abrir lista de links en ventana aparte

Si tienes una lista de enlaces en tu blog te darás cuenta que cuando pinchas sobre un link el enlace se carga en la misma ventana haciendo que el usuario abandone tu sitio.
Si quieres que esto no suceda y que el enlace se abra en otra pestaña entonces haz lo siguiente:

Entra a Diseño > Edición de HTML y marcando la casilla Expandir artilugios busca este código

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>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Sólo debes agregar lo que está en rojo y listo. Con esta modificación todos los enlaces que estén en tu Lista de Enlaces se abrirán en una pestaña aparte.

En el caso de la Lista de Blogs (blogroll) los nuevos gadgets ya tienen esa función, sin embargo si tú agregaste el gadget hace tiempo seguro que también carga los enlaces en la misma página.
Para modificarlo haz lo mismo, busca este código y agrega lo que está en color rojo:

type='BlogList'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<div id='blog-list-title'>
<h2 class='title'><data:title/></h2>
</div>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"'>
<ul expr:id='data:widget.instanceId + "_blogs"'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == "true"'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
</div>

Si te parece muy complicado esto último otra opción es que elimines el Blogroll viejo y lo agregues nuevamente para que se instale con esta característica.

IMPORTANTE: Recuerda dejar un espacio en blanco antes de target.

[+/-]

Menu horizontal de pestañas

Una pregunta muy recurrente es cómo crear un menú horizontal en Blogger. Si bien hay varios tipos de menú que podemos emplear este me parece muy sencillo de instalar y muy vistoso pues da un efecto de resaltado al pasar el mouse sobre el menú.

Primero entra a Diseño > Edición de HTML y pega antes de ]]></b:skin> lo siguiente:

/* Menú horizontal
----------------------------------------------- */
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://lh5.ggpht.com/_qgZA1ny_dAs/SlimLLGQf4I/AAAAAAAAB-g/YKI9AdhUdng/lefttabbed.png) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img148.imageshack.us/img148/8764/tabbedlarge.png) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
.clear {clear:left}
/* Fin del menú */

Ahora busca esta etiqueta:

<div id='content-wrapper'>

Y pega debajo de ella esto:

<div id='menu'>
<ul>
<li><a href='URL del enlace'><span>Título 1</span></a></li>
<li><a href='URL del enlace'><span>Título 2</span></a></li>
<li><a href='URL del enlace'><span>Título 3</span></a></li>
<li><a href='URL del enlace'><span>Título 4</span></a></li>
</ul>
</div>

Sólo debes cambiar los datos que están en rojo por los tuyos. Puedes agregar las pestañas que quieras, sólo añádelas antes de </ul>.
Las pestañas que he hecho son de color gris, si no te gustan puedes quitar las dos URL que están dentro de #menu a y #menu a span y usar el color de fondo que quieras.
El color y tamaño de la letra lo puedes cambiar dentro de #menu a span {font:
Este menú quedará debajo de la cabecera, si quieres moverlo a otro lugar entonces sólo pega el último código en un elemento HTML/Javascript y arrástralo donde mejor te apetezca.
Para ver el ejemplo funcionando haz click aquí.
Para obtener botones de otros colores visita este post.

[+/-]