Ultimos comentarios en Blogger

Hay dos formas de agregar los últimos comentarios en tu blog, una de ellas es a través de un feed, esta es la más común pero sólo permite un máximo de 5 comentarios. La otra es desde un script que nos dará la posibilidad de mostrar hasta 10 comentarios. Veamos entonces cómo agregar ambas:

Últimos comentarios con un feed

1. Entra a Diseño > Elementos de la página > Añadir un gadget y selecciona Feed.
2. En URL del feed agrega esto cambiando el nombre del blog por el tuyo:

http://tublog.blogspot.com/feeds/comments/default

3. Después elige las opciones que quieras y guarda los cambios.

Últimos comentarios con un script

1. En Diseño > Edición de HTML pega antes de </head> lo siguiente:

<script src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/lastcomments.js" type="text/javascript"/>

2. Guarda los cambios y agrega un elemento HTML/Javascript. Pega ahí esto:

<br/><script language="javascript">
var numcomments = 10;
var numchars = 50;
</script>
<script src="http://tublog.blogspot.com/feeds/comments/default?start-index=2&
alt=json-in-script&callback=commentDisplay"></script>

3. Ya sólo cambia el nombre del blog por el tuyo, y en donde dice 10 cámbialo por el número de comentarios que quieras que aparezcan, así como el número de caracteres que desees modificando donde dice 50.

El segundo como puedes ver tiene las ventajas de poder darle más configuración además de que carga más rápido.
Sin embargo si eliges el primero puedes ponerle un ícono a los últimos comentarios como está en el mío.

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

#Feed1 li{
padding-left: 35px;
background: url(http://lh5.ggpht.com/_qgZA1ny_dAs/SiLqSHGiFpI/AAAAAAAABhI/sADB0L7kzTo/comment-icon.jpg) no-repeat top left;
}

La URL del ícono puedes cambiarla por otra si es que ese no te gusta.

agradecer SÍ CUESTA!

¿Alguna vez escuchaste o leíste la frase "Agradecer no cuesta nada"?
En esta ciudad virtual llamada Ciudad Blogger agradecer Sí cuesta. ¿cuánto cuesta?

¡UN DOMINIO GRATIS!

Esta semana se cumplen seis meses de haber sido creado este blog y justo esta semana se alcanzó el Page Rank 2. Es por eso que quiero agradecerles a todos ustedes por estos seis meses, pues sin sus enlaces y sus comentarios este blog no sería nada.

Ayer por fin se lanzó el nuevo sitio Fondos 240 y en ese post se creó el comentario #100 de los Ciudadanos que más comentan.



Es por ello que a modo de agradecimiento a los tres ciudadanos que más comentaron en estos seis meses les haré un pequeño obsequio.
El primero será un dominio gratis por un año para Cyberbloggero por esos 100 comentarios.
Y el segundo será un banner por un año en Fondos 240 para WeS y Angel.

No puedo asegurar que más adelante se premiará a todos los comentaristas, pues eso podría perjudicar los comentarios con contenido, pero sepan que siempre estaré agradecido con todos ustedes y que de cualquier modo trataré de estar haciendo concursos periódicamente para que todos puedan hacerse de un dinero extra o un dominio.

Nuevamente a todos y cada uno de ustedes...
¡ G R A C I A S !

P.D. Ya pronto es la final del Primer Concurso para Ciudadanos 2009, si aún no te has inscrito hazlo ya, son los últimos días.

Fondos de pantalla GRATIS para tu celular

La Navidad pasada Santa Claus me trajo un móvil bastante moderno para lo que estoy acostumbrado, pero entre la nostalgia de la época y otras cosas no le hice mucho caso; luego vino el planeamiento y preparación de este (tu) blog y las semanas se me fueron muy rápidas tanto que me di cuenta que mi teléfono estaba un poco descuidado, así que ya más relajado quise darle un poco más de vida, busqué mis canciones favoritas y las agregué, luego pensé en buscar un fondo de pantalla que tuviera mi estilo así que me puse a navegar por la red hasta que encontré uno que me gusto pero...

¿1.5 $US por descarga? ¿y qué tal si quiero dos, o tres, o cinco?
Entonces pensé -¿para qué pagar por algo que yo mismo puedo hacer?, y mejor aun ¿por qué no compartirlo?
De este modo me he dado a la tarea de compilar y crear fondos de pantalla para ofrecerlos de manera gratuita a todos ustedes. He empezado con 20 categorías y estaré publicando fondos nuevos frecuentemente.
Los fondos de pantalla son para móviles con pantalla de 240 x 320 pixeles por lo cual son compatibles para la gran mayoría de equipos celulares que hay en el mercado.
Así que si ya te cansaste de ver tu móvil siempre igual date una vuelta por Fondos 240 y empieza a descargar fondos de pantalla para tu teléfono gratis.

Crear ventanas PopUp

Las ventanas PopUp son esas ventanas que se abren aparte del sitio web que estamos viendo, y si bien tienen muy mala fama porque generalmente están llenas de publicidad que no queremos ver y que no solicitamos, ahora puedes reivindicarlas dándoles funciones útiles como abrir un formulario, una foto, un texto, etc.

Primero hay que ir a Diseño > Edición de HTML y pegar antes de </head> lo siguiente:

<!-- script pop up -->
<script LANGUAGE='JavaScript'>
function popUp(URL) {
day = new Date();
id = day.getTime();
eval(&quot;page&quot; + id + &quot; = window.open(URL, &#39;&quot; + id + &quot;&#39;, &#39;toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=600,height=400,left = 212,top = 184&#39;);&quot;);
}
</script>
<!-- fin script -->

Puedes cambiar estos valores si quieres mostrar lo siguiente:
Toolbar (barra de herramientas)
Scrollbars (barras de desplazamiento)
Location (barra de direcciones)
Statusbar (barra de estado)
Menubar (barra de menú)
Resizable (modificar tamaño de la ventana)

Sólo cambia el 0 por un 1 si es que quieres mostrar algo de lo anterior. El tamaño de la ventana lo puedes cambiar donde dice width (ancho) y height (alto).

Ahora en una entrada o elemento HTML/Javascript hay que poner lo siguiente:

<a href="javascript:popUp('URL del documento')">Abrir ventana PopUp</a>

Sólo cambia la URL del documento por la dirección donde tengas alojada la imagen, el formulario o la página que se vaya a abrir en la ventana PopUp.

Abrir ventana PopUp

También puedes hacer que se abra mediante un botón cambiando lo anterior por eso:

<form>
<input type=button value="Abrir ventana PopUp" onClick="javascript:popUp('URL del documento')">
</form>

O incluso con una imagen:

<a href="javascript:popUp('URL del documento')"><img src="URL de la imagen" /></a>

NOTA: Los ajustes para mostrar la barra de direcciones, barra de estado, etc. en muchos exploradores no funciona así que es posible que se abra sin mostrar ninguna opción de las anteriores.

Cambiar tamaño de letra del blog

De acuerdo al contenido del blog es al público al que está dirigido y es posible que este público sean adultos mayores o bien tengan dificultades visuales. Así que una buena herramienta es darles la opción de que sean ellos quienes elijan el tamaño del texto del blog y puedan cambiarlo a su gusto. Para ello vamos a usar dos métodos:

El primero es que el lector escoja el tamaño exacto de la letra. Para lograr esto sólo pegamos este código en un elemento HTML/Javascript:

Tamaño de letra: <a href="javascript:void(0);" onclick="javascript:body.style.fontSize=&apos;10px&apos;"><span>10</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize=&apos;12px&apos;"><span>12</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize=&apos;14px&apos;"><span>14</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize=&apos;16px&apos;"><span>16</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize=&apos;18px&apos;"><span>18</span></a>

Las opciones de tamaño de la fuente van desde 10 hasta 18 puntos, puedes agregar las que quieras repitiendo la línea correspondiente.

La segunda opción la vi en Vagabundia y se trata de cambiar el tamaño de la letra con dos botónes, uno para aumentar y otro para disminuir.
Primero hay que ir a Diseño > Edición de HTML y pegar antes de </head> lo siguiente:

<!-- cambiar tamaño de fuente -->
<script type='text/javascript'>
var tgs=new Array(&#39;div&#39;,&#39;td&#39;);
var szs=new Array(&#39;xx-small&#39;,&#39;x-small&#39;,&#39;small&#39;,&#39;medium&#39;,&#39;large&#39;,&#39;x-large&#39;,&#39;xx-large&#39;);
var startSz=2;
function ts(trgt,inc) {
if (!document.getElementById) return

var d=document,
cEl=null,sz=startSz,i,j,cTags;
sz += inc;
if (sz &lt; 0) sz=0;
if (sz &gt; 6) sz=6;
startSz=sz;
if ( !(cEl=d.getElementById(trgt))) cEl=d.getElementsByTagName(trgt)[0];
cEl.style.fontSize=szs[sz];
for (i=0 ; i &lt; tgs.length; i++) {
cTags=cEl.getElementsByTagName(tgs[i]);
for (j=0; j &lt; cTags.length ; j++) cTags[j].style.fontSize=szs[sz];
}
}
</script>

Ahora en un elemento HTML/Javascript pega esto:

<a href="javascript:ts('body',1)"><img src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/%2Bfont.PNG"/></a>
<a href="javascript:ts('body',-1)"><img src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/-font.png"/></a>

El resultado serán dos íconos con los que se podrá manipular el tamaño de la fuente de texto, puedes ver el ejemplo funcionando de ambos métodos en este blog de pruebas.
Los íconos puedes cambiarlos por los tuyos si así lo deseas, sólo cambia la URL de la imagen, o bien, puedes usar sólo texto, si este es el caso entonces usa esto:

<a href="javascript:ts('body',1)">Aumentar fuente</a>
<a href="javascript:ts('body',-1)">Disminuir fuente</a>

Este truco hará que cambie el tamaño de la letra de todo el blog, si deseas que sólo cambie la letra de las entradas cambia donde dice body por main.

50 cabeceras para tu blog GRATIS

¿Estás aburrido de la misma cabecera de tu blog? Gracias Smashing Magazine puedes cambiar de diseño con estas 50 cabeceras (headers) que he recopilado en su sitio y que puedes usar libremente.
Algunos diseños vienen acompañados de su respectivo archivo PSD por si sabes usar Photoshop puedas modificarlo a tu antojo.

Una vez descargado este pack sólo escoge la que más te guste y editala o úsala tal cómo está.

Personaliza la suscripcion de FeedBurner

Si tienes en tu blog una caja de suscripción por mail de FeedBurner o aún si no la tienes puedes obtenerla y personalizarla para hacerla mucho más atractiva y no sólo lograr más tentación para suscribirse al feed, sino hacerla que se adapte al diseño de tu blog.
Por defecto estas cajas de suscripción son así:

Lo que haremos será darle un toque personalizado añadiendo color de fondo, una imagen u otro color de texto.

1. Primero consigue tu código de esta herramienta en FeedBurner, ingresa a tu cuenta y luego en la pestaña Publicize elige Suscripciones por Email del menú de la izquierda.
2. Ahora escoge tu idioma y copia el código.

Ese es el código básico, ahora vamos a hacerle unas modificaciones usando como ejemplo el código de mi feed.
Si quieres cambiarle el color de fondo tanto de toda la caja como al área de texto entonces agrega estas líneas:

<form action="http://feedburner.google.com/fb/a/mailverify" style="border:6px solid #ccc;padding:3px;text-align:center; background-color:pink" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CiudadBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Ingresa tu correo</p><p><input style="width:140px; background-color: #ffffff;" name="email" type="text"/></p><input value="CiudadBlogger" name="uri" type="hidden"/><input value="es_ES" name="loc" type="hidden"/><input style="background-color:grey;" value="¡Suscríbete ya!" type="submit"/><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

La primera parte en color rojo es la que dará un color de fondo, en este caso rosa, pero puedes cambiarlo por otro color; la segunda parte en rojo es lo que le da el color al botón, en este caso es un gris oscuro.
Se verá así:

En este ejemplo igual he cambiado el borde, por defecto dice: border:1px yo lo he cambiado por border:6px
También he quitado el letrero que dice: Delivered by FeedBurner, si también quieres quitarlo entonces elimina la parte en color verde.

Igual puedes usar una imágen de fondo y cambiar el color de la letra para que se vea algo así:

<form action="http://feedburner.google.com/fb/a/mailverify" style="border:6px solid #ccc;padding:3px;text-align:center; background: url('http://dl.getdropbox.com/u/647003/bg-colors.JPG');" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CiudadBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><span style="color: rgb(255, 255, 255); font-weight: bold;">Ingresa tu correo</span></p><p><input style="width:140px; background-color: rgb(238, 194, 178)" name="email" type="text/"/></p><input value="CiudadBlogger" name="uri" type="hidden"/><input value="es_ES" name="loc" type="hidden"/><input style="background-color:yellow;" value="¡Suscríbete ya!" type="submit"/></form>

En este caso la primera parte en color rojo es la que agrega la imagen, tú puedes usar la imagen que quieras, sólo cambia la URL por otra.
La segunda parte en rojo le dará un color rosa a la caja de texto; y la última parte es el color del botón, en este caso amarillo.
Y por último la parte en azul es la que cambia el color del texto, yo he puesto en estilo negrita y color blanco para que resalte de la imagen. En cualquiera de los casos puedes modificar los colores por los que gustes.
Incluso puedes cambiar el "Ingresa tu correo" y el "Suscríbete" por lo que tú quieras.

Recuerda que este código es un extracto del mío, así que no lo copies tal como está, consigue el tuyo como expliqué en los primeros dos pasos y luego agrega las líneas de cambios que creas necesarios, de lo contrario tus lectores se suscribirían a mi feed...lo cual no me molestaría.

Optimizar los titulos

Los títulos de los blogs muestran por defecto en el navegador primero el título del blog y luego el título del post, algo como esto:

¿Parece importar poco no? Pues sí importa, pues de esta misma forma aparecen los resultados en los buscadores:

Concurso Ciudad Blogger : Términos y Condiciones

Sucede que si alguien está buscando la frase "Términos y Condiciones" (por ejemplo) lo primero que verán es el título de tu blog, pero el usuario no está interesado en ver el nombre del blog, sino en la frase que está buscando, y eso puede hacer que simplemente no visiten tu página.

Así que vamos a optimizar el título para que aparezca en primer lugar el título del post y seguido de este el título del blog.
Sólo hay que ir a Diseño > Edición de HTML y buscar al inicio de la plantilla esta estiqueta:

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

Y la remplazamos por esto:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/> </title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

De este modo en el navegador se verá algo así:

Y en los resultados de Google se verá algo así:

Términos y Condiciones | Concurso Ciudad Blogger

De este modo le estamos facilitando a los usuarios a encontrar lo que buscan, y por supuesto que entren a nuestro blog y no pasen de largo.

Opcion de imprimir solo la entrada

Anteriormente expliqué cómo tener la opción de imprimir la página del blog. Pero el inconveniente de ese truco es que imprime toda la página, incluyendo la cabecera y los comentarios. Así que ahora lo que haremos será poner la opción de imprimir sólo el post y excluir todo lo demás.

Primero ve a Diseño > Edición de HTML y marca la casilla Expandir artilugios y pega antes de </head> el siguiente código:

<style media='print' type='text/css'>#header-wrapper,
#header, .header, #sidebar-wrapper, .sidebar, .post-footer, #footer-wrapper,
#footer, .date-header, #comments, .post-meta-data, .comment-link,
.comment-footer, #backlinks-container, #blog-pager,#navbar-section, .navbar,
.subscribe_notice, .noprint {display: none;}#main-wrapper {width:
95%; overflow: visible !important;}</style>

Si tu plantilla tuviera dos sidebars agrega esto al código:

#newsidebar-wrapper

Si huebiera algún gadget arriba o abajo del post busca su id y agrégalo, por ejemplo:

#HTML2

Todos los elementos que agregues debes separarlos con una coma.
Ahora busca esta etiqueta <p><data:post.body/></p> y pega debajo de ella lo siguiente:

<b:if cond='data:blog.pageType ==
&quot;item&quot;'>
<span style='background:
url(http://www.iconosgratis.us/coleccion-iconos-16x16/archivos/printer.png) left no-repeat; padding-left:
30px;'><a href='javascript:window.print()'>Imprimir artículo</a></span>
</b:if>

Ahora abajo de tus entradas aparecerá la opción de imprimir y sólo se imprimirá el post. El texto de "Imprimir artículo" sólo aparecerá cuando el lector esté en la página del post.

Pueden ver el ejemplo funcionando haciendo click aquí.

Paginas estaticas y Ocultar entradas

Pregunta Tavo cómo crear un menú en Blogger pero que los contenidos de dicho menú no sean visibles hasta que demos click en ellos; algo así como una página web común.

Crear páginas estáticas

Primero hay que crear el contenido de dicho menú, por ejemplo una entrada que se llame "Acerca de nosotros", "Quiénes somos", "Sucursales", etc. A todas estas entradas que serán las páginas estáticas deberás guardarlas con una etiqueta única, por ejemplo "menu".
Ahora ve a Diseño > Elementos de la página > Añadir un gadget y selecciona Lista de enlaces. A este gadget puedes titularlo "Menú Principal", luego le agregas los links de las entradas que creaste, por ejemplo:
http://tublog.blogspot.com/2009/05/Acerca-de-nosotros.html
y así sucecivamente con todas las entradas que deseas sean parte del menú.

Ocultar entradas

De este modo habrás creado páginas estáticas en tu blog, pero ahora hay un "problema", que esas páginas estáticas aparecen al inicio del blog o sea en la portada, y si bien podemos cambiar el orden de las entradas, también se pueden esconder las entradas que no quieres que aparezcan hasta que el lector les dé click, en este caso las páginas estáticas del menú.
Recuerda que todas las entradas que se van a ocultar debiste haberlas guardado con la misma etiqueta, por ejemplo "menu", pues todas las entradas que tengan esta etiqueta estarán ocultas después de hacer este truco.

Entra a Diseño > Edición de HTML y con la casilla marcada Expandir artilugios busca el siguiente código y añade las partes que están en color rojo:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != "menu"'>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:include data='post' name='post'/>
</b:if>
</b:loop>

<b:else/>

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

</b:if>
</b:loop>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
</b:includable>

De este modo habrás creado un menú con páginas estáticas y dichas páginas no aparecerán junto con todas las demás entradas.
En las partes de color rojo que se han agregado yo he puesto de ejemplo la etiqueta menu pero tú debes remplazarlo por el título de la etiqueta que le has asignado a tus páginas estáticas.

Imagen en el formulario de comentarios

Hace unos días Cyberbloggero nos daba una buena técnica para aumentar los comentarios en tus post y amablemente nos regaló unas imágenes que animen al lector a comentar. Pues bien, ahora explicaré cómo colocar esa imagen en el formulario de comentarios para evitar estarla poniendo en cada post.

1. Primero asugúrate que el formulario esté al pié de la entrada, para hacer esto ve a Configuración > Comentarios y marca la casilla Entrada incrustada a continuación
2. Ahora ve a Diseño > Edición de HTML y marca la casilla Expandir artilugios.
3. Busca esta parte del código:

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>

4. Sustituye lo que está en color rojo por esto:

<img src="URL de la imagen"/>



5. Ya sólo cambia la URL de la imagen por la dirección donde alojaste la foto que elegiste.

El resultado será algo como esto:

Puedes poner la imagen que quieras, incluso una imagen animada en formato .gif sólo te recomiendo que el tamaño de la imagen no sea muy grande.
Si quieres centrar la foto sólo pon el último código entre estas etiquetas: <center> </center>

Social Bar con Friend Connect

Si aún no tienes tu lista de seguidores o incluso si ya la tienes puedes mejorar el modo que tus seguidores se comunican con la Barra Social de Friend Connect.
Esta herramienta te permite tener una barra en la parte inferior o superior de tu blog con la cual tus seguidores pueden acceder y seguirte, ver a otros miembros, dejar comentarios y ver la actividad reciente del sitio. ¡Todo en uno!

Para agregar la Social Bar en Blogger sigue estos pasos:

1. Entra a la página de Friend Connect.
2. En el menú del lado izquierdo da click en el nombre de tu blog y selecciona Social Bar.

3. En Options elige las preferencias de tu barra; la posición de la barra, habilitar los comentarios, el título de los comentarios, el texto que aparecerá en la caja de texto, permitir a los usuarios publicar links de YouTube y permitir la participación de usuarios anónimos.

4. Presiona Generate code.

5. Copia el código y pégalo después de <body>

Con esto tendrás acceso a tus seguidores con todas las funciones incorporadas desde una barra. Puedes ver un ejemplo aquí.

Iconos Twitter

Para todos los adictos a Twitter les dejo este pack con botones e iconos del famoso pajarito azul. El paquete de 24 archivos contiene imágenes variadas con las que podrás decorar tu blog para atraer nuevos seguidores en Twitter.
Encontrarás desde el clásico ícono del pajarito hasta un Twitter sin cabeza o disfrazado de Frankenstein. Escoge el que más te guste.

Libera espacio de tu blog

Algunos lo saben, otros no, pero no es un misterio. Todas las fotos que publicas en blogspot se suben a la red de Picasa.
Así es, todos los que tenemos al menos un blog en Blogger automáticamente tenemos una cuenta en Picasa.

Si bien este servicio de alojamiento de fotos nos regala 1GB y parece más que suficiente el espacio, el problema viene cuando tenemos muchos blogs ¿por qué?
Bueno, al abrir una cuenta en Blogger se habilita la cuenta de Picasa y todas las fotos que subas al blog se van almacenando en Picasa, pero incluso si abres tres o más blogs con la misma cuenta, todas las fotos de todos esos blogs se irán a la misma cuenta de Picasa, o sea que no es 1GB por blog, sino por cuenta.

No sé si a ustedes les suceda, pero yo cuando estoy armando el post empiezo a subir imágenes que cuando las publico ya no me gusta cómo se ven, así que las edito y las subo de nuevo hasta que quede como me gusta. Pues bien, aunque haya subido tres veces la misma foto en el blog, en Picasa aparecen tres fotos con nombres distintos, o sea que sólo estoy usando una y las otras dos me están ocupando espacio de forma inútil.
Entonces para liberar espacio en la cuenta hay que eliminar esas fotos que nos roban capacidad de almacenamiento.
Primero ve a Picasaweb e ingresa con el mismo nombre de usuario y contraseña que usas para entrar en Blogger.
Verás que hay un álbum por blog además de un álbum que se llama Imágenes de Blogger, esa carpeta contiene las fotos que subes en tu perfil.
Sin entrar a ningún álbum desplázate hasta abajo de la página y verás ahí cuánto espacio has ocupado en tu cuenta.

Ahora que ya sabes cuánto espacio le queda a tu blog entra a tus álbumes y elimina las fotos que nunca hayas publicado, o bien a las que pertenezcan a un post que ya hayas eliminado.
De este modo habrás liberado espacio en tu cuenta y estarás listo(a) para poder seguir publicando sin temor a que tu cuenta se llene.

IMPORTANTE: Antes de eliminar cualquier foto asegúrate que sea la imagen que quieres borrar para que no cometas un error y elimines fotos que estén publicadas en tu blog.
Las fotos pueden tardar hasta 24 horas para eliminarse.

Insertar tablas en Blogger

Pregunta Ricardo de Alicante, España cómo crear tablas en las entradas del blog. Si bien es algo sencillo requiere de un poco de atención para poder entender, así que haré mi mayor esfuerzo para explicarme.

El código básico para insertar una tabla es el siguiente:

<table border="1" cellpadding="4"><tbody>
<tr><td>Mesa</td>
<td>Silla</td>
<td>Cama</td></tr>
<tr><td>Carro</td>
<td>Barco</td>
<td>Avión</td></tr>
<tr><td>Lunes</td>
<td>Martes</td>
<td>Miércoles</td></tr>
</tbody></table>

El resultado es este:

Mesa	Silla	Cama
Carro	Barco	Avión
Lunes	Martes	Miércoles

Nótese que las tres primeras palabras forman la primera fila, luego las otras tres forman la segunda fila y las tres últimas la tercera fila. Si deseas insertar una fila más agrega esta parte antes de </tbody></table>

<tr><td>Palabra 1</td>
<td>Palabra 2</td>
<td>Palabra 3</td></tr>

Del mismo modo si quisieras que cada fila tuviera más celdas entonces agrega las que quieras añadiendo las palabras entre las etiquetas <td> </td> antes de cada </tr>

Ya teniendo claro esto, ahora podemos personalizar las tablas añadiendo unos atributos.
El borde de la tabla es el más delgado, si lo quieres más grueso cambia border="1" por un número más alto, si lo dejas en "0" se quedará sin borde.

<table border="5" cellpadding="4"> <tbody><tr><td>Tabla con borde "5"</td></tr> </tbody></table>

Para cambiar el color del borde de la tabla añadimos después de <table el atributo
bordercolor="green" el color lo puedes cambiar, por ejemplo "red"

<table border="2" bordercolor="green" cellpadding="4"> <tbody><tr><td>Tabla con borde verde</td></tr> </tbody></table>

Si quieres usar un color de fondo en toda la tabla agrega bgcolor="yellow" después de <table. El color lo puedes cambiar.

<table border="2" bgcolor="yellow" cellpadding="4"> <tbody><tr><td>Tabla con fondo amarillo</td></tr> </tbody></table>

Este efecto también lo puedes agregar sólo a las celdas que quieras para que cada fila tenga distintos colores. Para hacer eso se usa el mismo atributo, pero en vez de ponerlo después de <table lo pones después de la etiqueta <tr por ejemplo:

Fila café	Fila café
Fila gris	Fila gris

Este fue el código para hacer eso:

<table border="1" cellpadding="6">
<tbody><tr bgcolor="brown">
<td>Fila café</td><td>Fila café</td></tr>
<tr bgcolor="grey">
<td>Fila gris</td><td>Fila gris</td></tr>
</tbody></table>

También puedes poner una imagen de fondo en la tabla, para lograr eso agrega background="URL de la imagen" después de <table. Yo he puesto una imagen animada (.gif) en el ejemplo.

Tabla con fondo de imagen

Tabla con fondo de imagen

<table background="URL de la imagen" border="1" cellpadding="4">
<tbody><tr><td>Tabla con fondo de imagen</td>
<td>Tabla con fondo de imagen</td></tr>
</tbody></table>

Como verás después de entender el código básico todo lo demás resulta fácil. De cualquier modo puedes probar los resultados y variaciones en un blog de pruebas antes de publicarlo.

Trucos de Adsense

Después de platicar con mi amigo Cyberbloggero acerca de cómo estafar mejorar Adsense me vi obligado a investigar y leer sobre el tema para entender mejor por qué algunos ganan más que otros con este sistema de anuncios publicitarios.
Si bien el tema es extenso también es aplicable de distinta forma para cada caso, sin embargo hay aspectos generales que a todo mundo le sirven. Así que si tienes un blog y te preguntas por qué nadie hace click en tus anuncios deberías probar con estos trucos de Adsense haciendo estas sencillas modificaciones:

El tamaño sí importa

Un gran error al momento de escoger el tamaño de los anuncios es elegir el rectángulo de 468 x 60, la gente ya ubica visualmente este tamaño como un anuncio y huye de él. El tamaño que ha probado que genera más clicks es el de 336 x 280 y 300 x 250 respectivamente.

Elimina los bordes

Como mencionaba arriba, la gente huye de los anuncios, ellos entran a tu blog para leer el contenido no para ver publicidad, así que si eliminas los bordes estás eliminando el diseño de anuncio y hace que parezca que es parte del contenido.

Cambia el color de las letras

Ya quedó claro que Adsense debe camuflajearse con el contenido, así que para hacerlo parte del mismo, cambia el color de la descripción del anuncio y de las URL al mismo color que usas en el texto del blog. De igual modo procura que el tipo de fuente del anuncio sea el mismo que usas en tus entradas. Hacer estos cambios puede aumentar en un 25% el número de clicks.

El azul no ha pasado de moda

¿Qué piensas si vas en la carretera y ves un letrero rojo? ¿en STOP?
¿Y qué piensas si ves un texto en color azul? !en darle click!
Esto se llama asociación y funciona perfecto en mercadotecnia. Es por ello que el color de los links de los anuncios se recomiendan en color azul (#0000FF) o bien, usar el mismo color que usas para los títulos de los post.

Cuida el color del fondo

Si los anuncios los tienes dentro de los post lo ideal es que el fondo del anuncio sea igual al color de fondo que usas en los post. Por lo contrario si tus anuncios están fuera del post trata de usar un color de fondo que armonice con el resto del blog, usa colores contrastantes pero sutiles que puedan llamar la atención del visitante.

El mejor lugar para los anuncios

Google ha publicado hace algún tiempo las "zonas calientes" de una web, a lo que supone que son las zonas que más ve el lector y por lo mismo donde mejor estarían ubicados los anuncios.

Zonas calientes para una web tradicional

Zonas calientes para blogs

Los colores más fuertes representan los lugares donde mejor quedan los anuncios. Sin embargo no todas páginas tienen estas plantillas así que puedes descubrir tú mismo hacia dónde ven más tus visitantes haciendo tus propias pruebas.

---

Como dije anteriormente, la gente no entra a los blogs buscando darle click a los anuncios, entra buscando información y entretenimiento así que si logras publicar contenido de calidad tendrás más visitas y por ende mayor posibilidad de clicks en los anuncios. Probar no cuesta nada, así que si tus ganancias de Adsense no están resultando lo que quisieras deberias ganar, entonces intenta con estos sencillos trucos que a muchos les ha funcionado y empieza a ganar dinero en internet.

Agregar Meta Tags en Blogger

Los meta-tags son etiquetas dentro de una web que contienen información útil para los robots y que sólo es visible para ellos. Estas etiquetas HTML permiten la correcta indexación de nuestro sitio en los motores de búsqueda.
En ellos hay información tales como el título del blog, las palabras clave, el autor, el idioma, la descripción, etc. Es por ello que todo blogger que desee tener buen posicionamiento debe tener todos los meta-tags que considere necesarios.
Agregar los meta-tags en Blogger es sencillo y no requiere conocimientos avanzados, sólo debemos elegir cuáles meta-tags vamos a usar. Aquí les dejo algunos que yo uso y su descripción:

<meta content='Título del blog' name='Title'/>
<meta content='palabraclave1, palabraclave2, palabraclave3' name='keywords'/>
<meta content='Tema del blog' name='Subject'/>
<meta content='Descripción del blog' name='description'/>
<meta content='El autor' name='author'/>
<meta content='es' name='language'/>
<meta content='3 days' name='Revisit-After'/>
<meta content='all' name='robots'/>
<meta content='all, index, follow' name='robots'/>
<meta content='all' name='googlebot'/>
<meta content='all, index, follow' name='googlebot'/>
<meta content='all' name='yahoo-slurp'/>
<meta content='all, index, follow' name='yahoo-slurp'/>
<meta content='index, follow' name='msnbot'/>
<meta content='all' name='googlebot-image'/>

Title es el título del blog
Keywords contiene las palabras clave con las que te quieres posicionar.
Subject es sobre qué se trata el blog, o sea el tema.
Description es la descripción del sitio.
Author es el nombre del autor, o sea tu nombre.
Language es el idioma del blog, en este caso es es español.
Revisit-After es el tiempo que se sugiere que tarden en regresar los robots a tu web.
Y los demás son órdenes para los robots de Google, MSN, Yahoo y Google Images permitiéndoles que indexen todo el contenido.

Estos Meta-Tagas se ponen justo después de la etiqueta <head> sólo cambia los datos en color verde por los tuyos y listo. Ahora los robots tendrán una mejor información de tu blog y les será más fácil rastrearte.

Solucion a naked domains

Carolina de Grand Rapids E.U. comenta lo siguiente:

"...Tengo mi blog con dominio propio y siempre ha funcionado bien, hace unos días tuve que hacer unos cambios y regresé a blogspot.com pero ahora cuando pongo mi dominio propio y marco la casilla Redireccionar me sale esto: Blogs may not be hosted at naked domains. Ya lo he intentado todo revisando mis DNS y nada, me urge solucionar esto...."

Efectivamente no se trata de problemas con la configuración de DNS. Anteriormente no había ningún problema cuando configurábamos nuestra cuenta sin el prefijo www pero ahora parece que a Blogger no le gusta mucho la idea de tener un dominio desnudo (naked domain), es por eso que marca el error Blogs may not be hosted at naked domains.
La solución es muy simple y no sabría explicarte la razón por la cual funciona así, pero lo importante es que da resultados. Lo único que tienes que hacer es configurar tu dominio alternando mayúsculas y minúsculas en el nombre como se ve en el ejemplo.

De este modo te aceptará que registres tu dominio sin las www. Si más adelante quieres marcar o desmarcar la casilla de Redireccionar haz el mismo procedimiento y no tendrás problema alguno.
Por cierto que esta solución también se aplica al error: Ya se ha alojado otro blog en esta dirección. Siempre y cuando no tengas apuntando tu dominio a Google Apps al mismo tiempo que a Blogger.

Iconos RSS divertidos

Este pack contiene 11 variados íconos RSS bastante originales. Perdón por no dar crédito a los autores de estos íconos pero los he recopilado de uno por uno en la red y desconozco a los creadores.
En este archivo encontrarás el logotipo de RSS en una taza de café, en audífonos, en una impresora, en un corazón, en una cerveza, etc.
Es un modo muy creativo de adornar los enlaces del feed de tu blog para hacerlo más llamativo.

Abrir videos en ventana emergente (Popup)

Algunas plantillas son un poco ajustadas y al poner videos estos se salen del post, y aunque podemos editar el tamaño de la pantalla del video en ocasiones el video no se aprecia igual que en su tamaño original, así que una buena solución para esto es abrir los videos en una ventana emergente, o sea en una ventana PopUp.
¿Cómo funciona? Lo que haremos será sustituir el video por una imagen que al darle click se abra una pequeña ventana para ver el video.

Sólo usa este código dentro del post:

<a title="Ver video" href="javascript:void(0);" onclick="window.open('http://www.youtube.com/v/DnzuKKG6-AA&autoplay=1', 'popup', 'left=390, top=200, width=425, height=344, toolbar=0, resizable=1')"><img src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/playvideoicon.gif" title="Ver video" /></a>

Ahora cambia la URL del video de YouTube, ten en cuenta que sólo debes cambiar la última parte de la dirección, o sea las letras que están en rojo, de lo contrario se abrirá toda la ventana de YouTube. Fíjate en este ejemplo:

Este código está programado para que el video se reproduzca automáticamente al abrirse la ventana, si deseas que se reproduzca hasta que el usuario le de click en Play entonces elimina esta parte: &autoplay=1
Puedes cambiar la URL de la imagen por otra, yo he hecho esta y puedes usarla si gustas. Para ver cómo queda haz click en la imagen.

Gana un dominio GRATIS

Deseo enormemente que tu experiencia en la blogosfera sea la mejor y quiero ayudarte a consolidar tu blog en la red. Es por eso que Ciudad Blogger lanza el Primer Concurso para Ciudadanos 2009.
El premio es el siguiente:

PREMIO

• 1 dominio gratis por un año (cambia de tublog.blogspot a tublog.com)
  
• Redireccionamiento de dominio (redirecciónalo a donde quieras)
  
• Redireccionamiento de correos (obtén un correo como info@tublog.com)
  
• Protección de privacidad de datos (protege el whois de tu dominio)
  
• 1 banner por 3 meses en Ciudad Blogger (banner de 280x60)
  
• 1 ebook para que aprendas a ganar dinero en Internet (Adsense)

BASES DEL CONCURSO

El concurso comienza el viernes 8 de mayo y termina el lunes 8 de junio de 2009.
Para participar debes ser dueño de un blog con un mínimo de 10 entradas publicadas.
Todos los participantes deberán publicar un post mencionando este concurso.
En él debe incluirse dos enlaces, uno que enlace a la página principal de Ciudad Blogger y otro que enlace a esta entrada.
Una vez que hayas publicado el artículo debes registrar tu blog haciendo click aquí.
Cuando se corrobore que tu blog está dado de alta te llegará un correo de confirmación con tu boleto virtual. Por cada dos participantes que refieras obtendrás un boleto extra, sólo deben mencionar que vieron el concurso en tu blog.
Si el número de participantes es mayor a 30 ¡se sortearán dos premios!.
El ganador se escogerá por medio de un sorteo que será grabado para efecto de transparencia.

TÉRMINOS Y CONDICIONES

Para conocer los Términos y Condiciones del concurso haz click aquí.

Aunque no es obligatorio, te recomiendo que te suscribas al FEED por si hubiera alguna modificación del concurso y puedas estar enterado de los por menores. Anímate a participar y obtén mayor probabilidad de ganar refiriendo a otros bloggers.

¡No pierdas esta oportunidad y participa!

¡Suerte a todos!

Bromas para tus lectores

Si te gustan las bromas y quieres hacerle pasar un susto a tus lectores estos códigos te van a gustar.
El primero es para bloquear el teclado del usuario, consiste en pegar este código en un elemento HTML/Javascript y cuando el usuario esté en tu blog y quiera usar el teclado aparecerá un mensaje de alerta diciendo que el teclado está bloqueado.

<script language="JavaScript">function tecla(){alert('TECLADO BLOQUEADO')}; document.onkeydown=tecla;</script>

El siguiente es menos odioso pero le sacará un susto a más de uno. Se trata de un botón que dice "No tocar", y cuando el usuario lo toque por curiosidad verá que la ¡ventana del navegador tiembla!. Este código igual lo pegas en un elemento HTML/Javascript. Puedes cambiar el ¡ NO TOCAR ! por lo que quieras.

<script language="JavaScript">
<!-- Begin
// Cache-busting LUBID bug.
var ran = Math.round(Math.random() * 899999) + 100000;
var lubid_string = "<img src="http://www.ciudadblogger.com" + ran + "" height="1" width="1">";
document.write(lubid_string);
//-->
</script>
<!-- start special adskins ad call insert -->
<!-- TEMPORARY POP UNDER -->
<script language="JavaScript">
<!--
function showNow(scale)
{
var expdate = new Date ();
var surveyCookieName = "MMPOPUNDER3";
var percentOfferedSurvey = 100;
var surveyLocation = "";
var popupNewWindow = true;

expdate.setTime (expdate.getTime() + (24 * 60 * 60 * 1000));
var stored_value = GetCookie(surveyCookieName);
if (stored_value == null)
{
SetCookie(surveyCookieName, "alreadyOffered", expdate, "", "");
nowWin = window.open(surveyLocation,'Now','height=400,width=600,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');
nowWin.blur()
window.focus()
}
}
function SetCookie (name,value,expires,path,domain,secure)
{
document.cookie = name + "=" + escape (value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
function getCookieVal (offset)
{
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name)
{
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
if( (document.cookie == null) || (document.cookie.length == null))
{
return null;
}
var i = 0;
while (i < clen)
{
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
showNow();
//-->
</script>
<script language="JavaScript1.2">
<!-- Begin
function shak(n) {
if (parent.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
parent.moveBy(5,i);
parent.moveBy(i,5);
parent.moveBy(5,-i);
parent.moveBy(-i,5);
parent.moveBy(5,i);
parent.moveBy(i,5);
parent.moveBy(5,-i);
parent.moveBy(-i,5);
parent.moveBy(5,i);
parent.moveBy(i,5);
parent.moveBy(5,-i);
parent.moveBy(-i,5);
parent.moveBy(2,i);
parent.moveBy(i,2);
parent.moveBy(2,-i);
parent.moveBy(-i,2);
parent.moveBy(2,i);
parent.moveBy(i,2);
parent.moveBy(2,-i);
parent.moveBy(-i,2);
parent.moveBy(2,i);
parent.moveBy(i,2);
parent.moveBy(2,-i);
parent.moveBy(-i,2);
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);


}
}
}
}
// End -->
</script>
<input value="¡ NO TOCAR !" onclick="shak(2)" type="button"/>

Puedes ver un ejemplo aquí, haciendo click en el botón ¡ NO TOCAR !.

Protege tu blog

Me he encontrado en muchos foros con bloggers que por una o por otra han perdido datos de su blog o hasta su blog mismo y esto les ha causado obviamente un gran problema. Para evitar perder toda tu información del blog sigue estas recomendaciones:

Haz una copia de tu plantilla

Antes de hacer cualquier cambio que implique editar el código HTML debes hacer un respaldo de la plantilla por si las cosas no salieran como quisieras entonces puedas regresar a la plantilla anterior. Puedes ver aquí cómo hacer un respaldo de la plantilla.

Guarda tus códigos de HTML/Javascript

Es importante que sepas que los respaldos de las plantillas no respetan los códigos HTML/Javascript que tengas en los elementos de la página. Es decir, tu plantilla guardará la forma en que se acomodan todos los elementos pero no el contenido de ellos, así que si en uno tenías el código de un video (por ejemplo) el código se perderá. Por eso siempre guarda en WordPad todos tus códigos, nunca está de más tenerlos respaldados.

Haz una copia de tu blog

Lamentablemente ha habido algunos casos donde usuarios han perdido sus blogs, ya sea por hack, porque Blogger los eliminó o simplemente eliminaron todas las entradas "sin darse cuenta". Para poder restablecer tu blog por si esto te pasara haz una copia del mismo cada mes para que tus entradas y comentarios nunca se pierdan. Para hacer esta copia ve a Configuración > Básico > Exportar blog. Cuando quieras recuperarlo entonces da click en Importar blog. Con esto tendrás todas tus entradas y comentarios intactos.

Sube tú mismo tus scripts

Es común que cuando agregamos una nueva función al blog copiamos el código tal como lo vimos en algún lado, y estos códigos quizá tengan alguna URL donde están alojados los scripts que hacen que la función nueva trabaje. ¿Pero qué pasa si el autor de ese script elimina el archivo del servidor? pues nada, pasará que todas las funciones que dependían de ese script dejarán de funcionar. Para evitar esto siempre descarga los scripts a tu equipo y súbelos a tu propio hosting, de este modo si el autor del script elimina el archivo, tu blog seguirá trabajando como si nada.
Lo primero es buscar en el código la URL del script, luego hay que copiarla y pegarla en la barra de direcciones del navegador. Si te aparece una ventana que dice Guardar archivo entonces sólo lo guardas y lo subes a la red; si en vez de eso te aparece una página con un código entonces copia el código completo y pégalo en WordPad, este lo guardarás añadiendo la extensión .js al final. Cuando termines sube el archivo a tu servidor.

Ten una carpeta de tus archivos

Aunque las fotos o videos que subimos al blog se quedan alojados en el servidor de Blogger siempre es bueno que tengas en el equipo una carpeta con TODOS los archivos que usas para el blog, ya sean fotos, mp3, videos, códigos, plantillas, notas, etc. Si algún día no puedes acceder a tus archivos que subiste en Blogger no habrá problema teniendo el respaldo de todos ellos a la mano.

Pónle nombre a tus códigos

Generalmente cuando vemos un truco nuevo queremos usarlo en el blog, y así vamos añadiendo y llenando el blog de códigos tras códigos. El problema está cuando queremos eliminar uno que ya no nos guste y no sabemos cuál es y borramos otro por error. Para prevenirlo siempre escribe arriba del código la función de éste. Si el código está después de ]]></b:skin> puedes hacerlo poniendo lo siguiente arriba de cada código en tu plantilla:

<!-- NOMBRE DEL CODIGO -->

Si va antes de ]]></b:skin> entonces ponlo de esta manera:

/* -- NOMBRE DEL CODIGO -- */

Con estas precauciones te aseguro que te evitarás muchos dolores de cabeza. Recuerda que más vale prevenir que lamentar.

Blogger Buddy para Windows 7

Si ya te uniste a la fiebre colectiva de Windows 7 entonces puedes combinar tu manía por Windows 7 con Blogger. Se trata de una aplicación para el SideBar de Windows con la que puedes publicar tus post y ver tus blogs de un modo muy sencillo y práctico, se llama Blogger Buddy.
Para instalarlo ve a la Galería de Windows Live y descarga la aplicación, instálala e ingresa tus datos de usuario. Inmediatamente tendrás un Gadget en tu SideBar con el menú de tus blogs. Selecciona Post si quieres publicar una nueva entrada, o View si quieres ver tu blog (al parecer necesitas un software que lea extensiones ATOM para ver tu blog).
El editor de texto contiene las herramientas básicas para editar tu post con negritas, cursiva, subrayado, links, imágenes y lista con viñetas. Puedes incluso tener una vista previa del post. La interfaz es bastante atractiva y el diseño es compacto y se adecua perfecto al entorno de Windows 7.
Sin duda este gadget lo debes tener si quieres publicar de forma rápida.

Enlace: Blogger Buddy

Cursor en forma de cruz en tu blog

Anteriormente vimos cómo tener un cursor con texto en movimiento dentro del blog. Ahora cambiaremos el cursor tradicional por un cursor en forma de cruz. Para que tengas este cursor y le des un toque personalizado a tu blog pega antes de </body> lo siguiente:

<style type='text/css'>
<!--
body { cursor: crosshair}
-->
</style>

Con esto cuando tus lectores entren a tu blog el cursor cambiará.

Conversor de unidades informaticas

Si tienes un blog de informática esta herramienta les será muy últil a tus lectores.
Se trata de un código para crear un conversor de unidades informáticas y poder convertir bytes a kilobytes, megabytes y gigabytes. Este código tienes que colocarlo en un elemento HTML/Javascript (ver cómo añadir elementos)

<form name="bandwidth">
<p><input value="" name="original" size="20" type="text"/>
<select name="units" size="1">
<option value="Bytes"/>Bytes
<option value="Kb"/>Kb
<option value="Mb"/>Mb
<option value="Gb"/>Gb
</select> <input value="Calcular" name="B1" onclick="calculate()" type="button"/></p>
</form>

<script>

var bytevalue=0
function calculate(){
var invalue=document.bandwidth.original.value
var selectunit = document.bandwidth.units.options[document.bandwidth.units.selectedIndex].value
if (selectunit=="Bytes")
bytevalue=invalue
else if (selectunit=="Kb")
bytevalue=invalue*1024
else if (selectunit=="Mb")
bytevalue=invalue*1024*1024
else if (selectunit=="Gb")
bytevalue=invalue*1024*1024*1024

alert (invalue+" "+selectunit+" es igual a:\n\n- "+bytevalue+" Bytes\n- "+Math.round(bytevalue/1024)+" Kb\n- "+Math.round(bytevalue/1024/1024)+" Mb\n- "+Math.round(bytevalue/1024/1024/1024)+" Gb\n")
}

</script>

Puedes ver un ejemplo aquí. Sólo coloca la cantidad a convertir y la unidad original. El conversor mostrará a cuánto equivale esa cantidad en las distintas unidades.

Links y banners en movimiento

Este truco les dará movimiento a tus links estilo marquesina, y hará que el link se detenga cuando el mouse pasa sobre él. Lo haremos de dos formas, una con links de texto y otra con imágenes.

Para los links de texto el código es el siguiente:

<marquee direction="up" style="text-align: center; width:200px;height:150px;border:1px solid #ccc;padding:3px" onmouseover="this.scrollAmount='0'" scrollamount="1" onmouseout="this.scrollAmount='2'">
<a href="URL del enlace 1">Nombre del enlace 1</a><br/>
<a href="URL del enlace 2">Nombre del enlace 2</a><br/>
<a href="URL del enlace 3">Nombre del enlace 3</a>
</marquee>

Para los links con imágenes el código es el siguiente:

<marquee direction="up" style="text-align: center; width:200px;height:150px;border:1px solid #ccc;padding:3px" onmouseover="this.scrollAmount='0'" scrollamount="1" onmouseout="this.scrollAmount='2'">
<a href="URL del enlace 1"><img src="URL de la imagen 1"/></a><br/>
<a href="URL del enlace 2"><img src="URL de la imagen 2"/></a><br/>
<a href="URL del enlace 3"><img src="URL de la imagen 3"/></a>
</marquee>

Personalización:
Debes cambiar los datos en color rojo por los tuyos.
<marquee direction="up" es la dirección a donde se mueve, up arriba, down abajo, right derecha, left izquierda.
width:200px;height:150px; es el tamaño del cuadro donde aparecen los links
border:1px solid #ccc; es el ancho y color del borde.
scrollamount="1" es la velocidad con la que se mueven los links, números más altos dará mayor velocidad.

El resultado es este:

Obtén un review de tu blog GRATIS

Agrega tu favicon aquí

Mide tu popularidad en las redes sociales

En la actualidad compartir nuestros post através de las redes sociales es muy común, incluso hay quienes le dan mayor importancia a los bookmarks más que a los enlaces que nos den desde otras webs (backlinks). Si tú eres uno de ellos entonces puedes medir la popularidad de tu blog en las redes sociales con Social Scan.
Social Scan es una herreamienta online que nos permite saber cuántos enlaces tiene nuestro blog desde las redes sociales más populares. Sólo debes ingresar la dirección de tu sitio y en segundos sabrás qué tan popular eres en las redes sociales.
Las redes con las que te podrás medir son: Delicious, Digg, Stumbleupon, Reddit, Myweb, Technorati, Shadows, Bloglines, Simpy, Blinklist, Diigo y Furl.

Es importante que la dirección de tu blog la escribas sin el http para tener resultados más certeros. Por ejemplo: tublog.blogspot.com en vez de http://www.tublog.blogspot.com

Enlace: http://www.socialscan.com/

Protege tus imagenes

Si tienes alguna foto que quieres publicar pero que no quieres compartir por temor al mal uso que se le pueda dar entonces te daré una forma para proteger tus fotos.
Lo que haremos será deshabilitar el botón derecho del mouse para evitar que copien tus imágenes. Pero no te preocupes que esta función sólo deshabilita el botón sobre la foto que tú desees, el resto del blog no sufrirá esta efecto.

Lo que debes hacer es usar este código cuando quieras publicar una foto que quieres proteger:

<img src="URL de la imagen" oncontextmenu="alert('Opción deshabilitada');return false" oncopy="alert('Opción desabilitada');return false"/>

Ahora cambia la URL de la imagen y si lo deseas el texto entre paréntesis que es el que aparecerá cuando intenten copiar. Para ver un ejemplo trata de copiar la imagen de abajo.

Con esto tendrás más control sobre las fotos que publiques.