Cambia el cursor de tu blog

Ya hemos visto cómo poner un cursor en forma de cruz  en el blog y hacer que un texto siga al cursor. Ahora veremos cómo poner cualquier tipo de cursor (no animado) al blog, de modo que cuando alguien entre a tu blog el cursor cambie.

1. Sólo entra a Totally Free Cursors y escoge de entre los cientos de cursores que tienen el que más te guste.
2. Copia el primer código que está debajo de MySpace Profile 1.0 Codes, o si quieres que el cursor sólo aparezca cuando el mouse pase por encima de un link copia el segundo código.
3. Ahora entra a Diseño > Edición de HTML y pega el código antes de la etiqueta </body>
4. Guarda los cambios y listo.

El cursor lo puedes cambiar las veces que quieras, sólo toma en cuenta que los cursores animados aparecen estáticos en el blog.

El código del cursor insertará un pequeño banner al final de tu blog, pero puedes eliminarlo haciendo lo siguiente:
El código que pegas en tu plantilla es uno como este:

<div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Cow Boy MySpace Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/cowboy.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/cowboy.gif"), auto;}</style>

Sólo elimina lo que está en rojo y habrás eliminado la publicidad.

NOTA: Los cursores funcionan en todos los navegadores, sin embargo si usas sólo el segundo código, para que sólo aparezca el cursor al pasar sobre un link, no funcionará en Internet Explorer.

Enlace: Totally Free Cursors

Poner íconos en etiquetas y otros gadgets

Anteriormente vimos cómo poner un ícono en las etiquetas alterando el código del gadget de etiquetas. Ahora vamos a ver cómo hacer lo mismo pero usando un poco de CSS para no alterar el código original. Este procedimiento también se puede aplicar a otros gadgets como Lista de enlaces, HTML y Feeds.

Primero localiza la ID del gadget, para esto entra a Diseño > Edición de HTML y busca el gadget al que vas a ponerle el ícono, por ejemplo el de las etiquetas es uno como este:

<b:widget id='Label2' locked='false' title='Etiquetas' type='Label'/>

Ya localizada esta línea puedes ver la ID del gadget, ahora antes de ]]></b:skin> pega lo siguiente:

#Label2 li {
list-style:none;
padding-left: 35px;
background: transparent url(http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/icono_estrella.gif) no-repeat center left;
}

Como puedes ver, se ha puesto la ID del gadget después del signo de gato (#), lo mismo harás con los gadgets a los que quieras ponerle el ícono.
En padding-left, puedes controlar el espacio entre el ícono y el texto, esto lo puedes ajustar a la medida que quieras; lo mismo con el ícono, puedes cambiarlo por el que más te guste sustituyendo la URL que está en color verde.

Faviconeras con espacios disponibles

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 favicons en sus sitios no han sido publicadas.

Reloj de cuenta regresiva

Colocar un reloj de cuenta regresiva puede servirte para crear espectativa ante un evento, ya sea una fecha importante, el final de un concurso, el lanzamiento de un proyecto, etc.
Sólo necesitas abrir un elemento HTML/Javascript y pegar ahí lo siguiente:

<script language="JavaScript">
TargetDate = "12/31/2012 11:59 PM";
BackColor = "white";
ForeColor = "black";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Días, %%H%% Horas, %%M%% Minutos, %%S%% Segundos.";
FinishMessage = "Feliz año nuevo!!!";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>

Ahora sólo cambia los siguientes datos:
TargetDate Fecha y hora en la que finaliza el contador
BackColor Color de fondo
ForeColor Color de la letra
FinishMessage Mensaje que se muestra al finalizar el conteo

Guarda los cambios y arrastra el contador donde quieras.

Poner marcadores sociales en Blogger

Esto de los marcadores sociales (o bookmarks) mas que una moda son una herramienta muy buena de difusión, pues permite que otros promocionen y compartan lo que tú publicas.
Vamos entonces a ver cómo poner marcadores sociales en el blog con un efecto pushbutton, es decir, que al pasar el mouse dé el efecto de un botón que se hunde.

Entra a Diseño > Edición de HTML y con los artilugios expandidos pega antes de </head> lo siguiente:

<!-- EFECTO PUSHBUTTON EN BOOKMARKS -->
<style type='text/css'>
.pushbutton a:hover{
position: relative;
top: 1px; left: 1px;
outline:none;
}
.bookmark table{
background-color:#000911;
border:1px hidden gray;
padding:10px;

}
.bookmark td{
font-size: 1em;
text-align: center;
vertical-align: middle;
color: #CCCCCC;
}
.bookmark img{
vertical-align: middle;
}
</style>

Ahora busca esta línea:

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

O esta:

<div class='post-footer-line post-footer-line-3'/>

Y justo debajo de ella pega el texto de este archivo.
Dale Vista Previa, si ves que todo está bien guarda los cambios.

Los marcadores sociales que están incluidos con: del.icio.us, RSS, Digg, Google, Bitacoras, Yahoo, Technorati, Meneame, Frequi, Blogmemes, Neodiario, Enchilame, Twitter, Live, My Space y Facebook.
Si quisieras eliminar alguno localízalo y borra desde <span class='pushbutton'> hasta el próximo </span>
También puedes cambiar los íconos por otros, visita la sección de Descargas para ver los íconos disponibles y recuerda que se publican íconos constantemente.

108 iconos bookmark estilo dibujo

Janko ha creado un set de íconos para marcadores sociales con un estilo de dibujo a mano libre.
El pack Handycons contiene íconos para las principales redes sociales y servicios web: Digg, del.icio.us, Mixx, DesignBump, StumbleUpon, Reddit, Developer Zone, DesignFloat, Technorati, Twitter, Facebook, Blinklist, Feedburner, Flickr, FriendFeed, Furl, Gmail, Google, Last FM, Linked IN, Magnolia, Newsvine, PayPal, Skype, Sphinn, Twitter2, Vimeo, Yahoo, You Tube, RSS e íconos de email y un corazón.

Están disponibles en medidas de 16x16, 24x24, 32x32, 48x48 y 64x64 pixeles y su uso es libre.

Crear un rotador de banners al azar

Anteriormente vimos cómo poner un rotador de banners en el blog. Ahora vamos a hacer uno pero que el banner muestre las imágenes al azar cada vez que un usuario entra a la página. Sólo necesitamos un script y las imágenes de los banners, todas deben tener el mismo tamaño.

Abre un elemento HTML/Javascript y pega ahí esto:

<script language="JavaScript">
var imagenumber = 4;
var randomnumber = Math.random();
var rand1 = Math.round( (imagenumber-1) * randomnumber);

images = new Array;
images[0] = "URL del banner 1";
images[1] = "URL del banner 2";
images[2] = "URL del banner 3";
images[3] = "URL del banner 4";


links = new Array;
links[0] = "#";
links[1] = "#";
links[2] = "#";
links[3] = "#";

var image = images[rand1];
var link = links[rand1];
</script>

<script>document.write('<a href="'+link+'"><img style="border: 0px;" src="'+ image +'"></a>')</script>

Agrega las URL de las imágenes donde se indica y si quieres que las imágenes tengan un enlace entonces agrégalo sustituyendo el signo de gato (#) por el link que le corresponde.
Incluso puedes agregar o eliminar más imágenes, sólo añade la línea que le corresponde.
Puedes ver un ejemplo en este blog de pruebas. Al cargar la página se verá un banner, si presionas F5 cargará otra imagen.

NOTA: Las imágenes cargan al azar y es posible que más de una vez cargue la misma imagen.

Contador de visitas para entradas

Este contador ya no funciona, el archivo PHP original ya no está alojado en el servidor del autor por lo que no funcionará más. Sin embargo abajo de este post está el archivo PHP para descargar, en caso de que tengas tu propio servidor podrás alojarlo en él y funcionará sin problemas.

---

Me preguntaba Ángel cómo poner un contador web que mida las veces que un post es visto.
Para los usuarios de Wordpress esto no es nada complicado, sólo es cuestión de poner un plugin y ya, pero para los que usamos Blogger no tenemos casi ninguna alternativa, pues los contadores web gratuitos sólo cuentan el número de visitas globales.

Investigando un poco di con el blog de Anuj, quien ha creado un contador basado en PHP. Como saben Blogger no acepta archivos PHP pero no hay problema si estos archivos están alojados en un servidor externo, así que el autor del contador ha subido el archivo a su servidor y ha querído compartirlo.

Para agregarlo a tu blog sólo entra a Diseño > Edición de HTML y con los artilugios expandidos busca esta línea:

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

Abajo de ella pega esto:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span id='hit-counter'>
<font color='#000'>Visto <script src='http://wizom.net/counter.php' type='text/javascript'/> veces</font>
</span></b:if>

Guarda los cambios y listo, tendrás un contador de visitas individual para cada post.

El número de visitas tiene un vínculo hacia la página del autor y ha autorizado editar el archivo como quieran, incluso quitando el link, así que si tienes conocimiento de PHP y quieres editarlo aquí está la descarga del archivo, sólo que deberás subirlo a tu propio servidor.

Archivo: PHP

Cómo crear vinculos dentro de la misma entrada

Tener enlaces a otra parte del texto puede servir mucho cuando se trata de un artículo extendido y deseas vincular elementos entre sí.

Esto se usa cuando por ejemplo en un post pones un índice con los temas a tratar y usas un enlace que te lleve al tema pero dentro de la misma entrada.

Enlazar estos elementos es muy sencillo, por ejemplo, supongamos que el índice es este:

Tema Uno
Tema Dos
Tema Tres

 Lo que haremos primero es crear el link, quedando así:

<a href="#tema1">Tema Uno</a>
<a href="#tema2">Tema Dos</a>
<a href="#tema3">Tema Tres</a>

Y ya sólo agregas el atributo a name a donde va a apuntar el enlace, por ejemplo:

<a name="tema1">Tema Uno</a>

Lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem...

De este modo le estás indicando al enlace que se dirija a otra parte dentro del mismo documento, esto se logra con el símbolo de gato (#) y con el nombre del link (a name) le especificas a qué parte del documento debe ir.

Puedes ver el ejemplo funcionando en este post de prueba, haz click en uno de los temas del índice y verás que te lleva a otra parte dentro de la misma entrada.

Efecto de arcoiris en links al pasar el mouse

Con un script vamos a dar un efecto de arcoiris al pasar el mouse sobre los links.
Este efecto se aplica para todos los links que tengas en el blog.

Sólo entra a Diseño > Edición de HTML y pega antes de </head> esto:

<script src='http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/rainbowlinks.js'/>

Así de fácil tendrás un efecto animado en tus links del blog. Puedes ver el resultado pasando el cursor por cualquier enlace o título en este blog de pruebas.

Eliminar título y descripción del blog

Algunas plantillas no tienen la opción de subir la foto de la cabecera y remplazar el título y la descripción con la imagen, por lo que al cambiar la cabecera se encima la foto, el título y la descripción y se ve bastante desalineado.
Lo que haremos será eliminar directamente desde el HTML las líneas que hacen que el título y la descripción aparezcan.

Eliminar el título

Entra a Diseño > Edición de HTML y marca la casilla Expandir artilugios.
Busca esta parte del código y elimina lo que está en color rojo:

<b:includable id='main'>
<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>
</div>

Eliminar la descripción

Más abajo busca este código y elimina lo que está en color rojo:

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>

Guarda los cambios y listo. Con eso habrás eliminado el título y la descripción.

Contador de descargas de archivos

Si tienes en tu blog archivos para descargar sería bueno saber cuántas veces se han descargado, de este modo sabrías qué tan popular es el archivo y te enterarías si es del agrado de los usuarios o no. En otras palabras, podrías medir la popularidad de las descargas.

DStats nos soluciona ese problema, es un contador de descargas simple, gratuito y fácil de usar. Funciona igual que un contador web, sólo debes reemplazar la URL que usarías normalmente para una descarga por el código que ellos te dan.

1. Para conseguir tu código entra a Dstats.net
2. Selecciona Download Counter
3. Ingresa la dirección donde se encuentra el archivo para descargar.
4. Escribe el anchor del link, por ejemplo: Descarga este archivo.
5. Elige si deseas el código en HTML o HTML con script.
6. Selecciona el tipo de contador y haz click en Generate.

Es todo, ese código es el que usarás para que los usuarios descarguen tu archivo. O si lo quieres más fácil sólo cambia lo que está en color rojo por la dirección de la descarga:

<a href="http://dstats.net/download.php?file=URL donde está el archivo a descargar">Descarga este archivo</a>
<script type="text/javascript" src="http://dstats.net/dstatsjs.php?file=URL donde está el archivo a descargar"></script>
<script type="text/javascript">document.write(dsCounter);</script>

Puedes descargar este editor de entradas de Blogger para ver cómo aumenta el número del contador.

Descarga el programa de Blogger para Word GRATIS



Enlace: Dstats.net

Respuestas a preguntas curiosas

¿Alguna vez te preguntaste por qué el cielo es azul? ¿o por qué el metal se siente más frío que la madera?

Todos hemos sido víctimas de la curiosidad ante hechos o preguntas extrañas, y desde ahora podrás saber el por qué de las cosas.

Respondones es un nuevo espacio donde podrás encontrar la respuesta a esos datos curiosos que no son muy conocidos o que siempre te habías preguntado.
Podrás saber el origen de las notas musicales, cómo vuelan los aviones, por qué los osos polares son blancos, y muchas, muchísimas cosas más.

Cyberbloggero y un servidor seremos los Respondones de esas preguntas que alguna vez te quitaron el sueño.
Ahí podrás aprender, comentar, participar y ser parte de esta iniciativa que pretende fomentar el conocimiento de niños y adultos.
No te quedes sin saber, aprende junto con nosotros y deja de ser sólo un preguntón y conviértete ¡en un Respondón!

Enlace: Respondones

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.

1. 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.
2. Ahora entra a Google Analytics y haz click en Editar situando en el extremo derecho del nombre de tu sitio.
3. Casi hasta abajo hay una tabla llamada Filtros aplicados al perfil, ahí haz click en Añadir filtro.
4. Asigna un nombre al filtro y selecciona Excluir todo el tráfico procedente de una dirección IP específica.
5. Escribe tu IP usando puntos y diagolanes invertidas, por ejemplo:
   

   190\.212\.31\.39

6. 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.

Ultimas entradas con gadget en flash

Si quieres tener las últimas entradas de tu blog de una forma más atractiva puedes hacerlo con un gadget que proporciona Neomyz. Es un gadget animado en flash que muestra las últimas 20 entradas publicadas en tu blog.

1. Sólo debes ingresar a Neomyz y registrarte.
2. Ya que lo hayas hecho selecciona Set up a free news reader for your website del menú que aparecerá abajo.
3. Ingresa la dirección de tu blog y de tu feed.
4. Selecciona el diseño. Sólo hay uno gratuito pero es bastante bueno, los demás son de pago.
5. Guarda los cambios y haz click en Get HTML Code.
6. Copia el código y pégalo en un elemento HTML/Javascript.

Así se sencillo puedes tener otra opción para mostrar tus entradas de una forma más dinámica.





Enlace: Neomyz

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.

1. Primero debes ingresar a EmailMeForm y registrarte (te toma dos minutos).
2. Ya que has ingresado a tu cuenta, selecciona en el menú de la derecha Create new form.

3. A continuación escribe el nombre del formulario, el email al que llegará el aviso de que alguien ha usado el formulario, el email donde se mandará el posible SPAM, la URL de la página a la que se redireccionará al usuario después de usar este servicio y el número de campos que tendrá el formulario.

4. Ahora rellena los campos que vas a usar, por ejemplo Nombre, Email, Comentario, etc. Selecciona el tipo de campo: Short Text mostrará un área de texto de una línea; Large Text, un área de texto de varias líneas; Checkbox, una casilla para marcar; Radio buttons, una casilla redonda, Drop down list, una lista de opciones para seleccionar; File Attachment, es la opción para adjuntar un archivo.


5. Especifica en Required? si los campos son obligatorios.


6. Selecciona el número de columnas de cada campo.

7. El siguiente paso es personalizar el diseño del formulario. Escoge el tipo, color y tamaño de la letra; en Form Description agrega una breve descripción sobre el formulario (si lo deseas); en el Header puedes usar código HTML para poner el logo de tu blog; y así continua con el Footer y Style CSS. Estos campos no son obligatorios, puedes dejarlos tal y como están.


8. En Send Button Name escribe el nombre que tendrá el botón de "Enviar" y escoge su alineación. Selecciona las opciones anti SPAM y continua.


9. Ya sólo selecciona las opciones de notificaciones a tu correo, como el nombre del destinatario, el asunto y si deseas que el usuario reciba una copia del mismo.

10. Ve la vista previa del formulario y haz click en Finish.
11. Listo, ahora puedes copiar la URL para enlazar el formulario o haz click en Get the HTML Code para copiar el código y pegarlo en un post o elemento HTML/Javascript.

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

Nombre
Email
Sitio web
Descripcion del problema
Adjuntar

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

1. 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.
2. 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.
   
   
   
3. Ahora entra a Diseño > Elementos de la página > Añadir un gadget y elige Presentación.
4. En la Fuente selecciona Otros y en la URL del feed pega el link que copiaste de Picasa.
5. Ya sólo escoge las opciones de velocidad y presentación aleatoria.

Con un álbum de fotos público

1. Entra a Picasaweb y crea un álbum nuevo.
2. En Editar selecciona Propiedades del álbum y marca la casilla Público.
3. Ahí agrega todas las fotos que quieras para tu slideshow.
4. Ahora entra a Diseño > Elementos de la página > Añadir un gadget y elige Presentación.
5. En la Fuente selecciona Álbumes de Picasa y marca la casilla Álbum.
6. 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.
7. 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

Anteriormente vimos cómo redireccionar el blog a un dominio con extensión hispana, y también cómo tener un dominio gratis con extensión .co.cc. Ahora vamos a ver otra opción para quienes aún no tienen un dominio propio y se quieren olvidar de la dirección larga que tienen.

Se trata de Dot TK, un servicio de redireccionamientos de dominios gratis. Puedes redireccionar tu blog, tu cuenta de Twitter, tu Facebook, tu perfil, en fin, todo lo que quieras.

1. Sólo tienes que entrar a Dot TK e ingresar la URL que deseas redireccionar, por ejemplo: http://tublog.blogspot.com/


2. Enseguida aparecerá el nombre con el que se redireccionará, por ejemplo: tublog.tk pero si no te gusta el nombre puedes cambiarlo por otro, siempre y cuando esté disponible, y claro todos tendrán la extensión .tk


3. Ahora elige qué plan deseas, puedes escoger el plan anónimo si no quieres registrarte, pero sólo estará activo el servicio por 30 días, luego tendrás que hacer el mismo proceso. O bien, puedes registrarte (gratis) y tener servicios como redireccionamiento de correo, gestión de tráfico y promoción de tu web.

Con esta última modalidad el dominio caduca si en 90 días tuviste menos de 25 visitas, lo cual no es tanto problema.

Así que esta es otra opción para quienes aún no se han hecho de un dominio o simplemente quieran redireccionar su Twitter.

Enlace: Dot 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

Los banners de 125 x 125 se han vuelto muy populares dentro del mundo de Internet, pues el tamaño es el adecuado para poder acomodarlos casi donde sea además de que tiene el espacio suficiente para agregar la información que se publicita.

Si quieres hacerte de uno pero no tienes programas avanzados de diseño puedes acudir a un servicio en línea que te permita crear el tuyo de forma gratuita.
Free125Cards te ofrece cientas de plantillas con variedad de colores para armar tu banner.

• Sólo escoge el diseño que más te guste.
• Haz click en Personalize.
• Agrega el texto escogiendo el tipo de letra, el tamaño y la posición.
• Cuando termines haz click en Save image. Aquí te pedirá que te registres, pero si no deseas hacerlo sólo haz click con el botón derecho sobre la imagen y guárdala en tu equipo.

Si quieres poner tu banner con el código para que te enlacen lee este artículo.



Enlace: Free125Cards

Mensaje con efecto arcoiris

Con un sencillo script puedes crear un mensaje de bienvenida en tu blog como el que yo he puesto en este blog de pruebas con un efecto de arcoiris, o sea que los colores del texto van cambiado.
Sólo pega esto en un elemento HTML/Javascript:

<marquee><span style="font-weight: bold;font-size:180%;"><script>
var text="BIENVENIDOS"
var speed=80
if (document.all||document.getElementById){
document.write('<span id="highlight">' + text + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script></span></marquee>

Sólo cambia el mensaje de texto que está en color rojo. También puedes cambiar el tamaño de la letra donde dice font-size:180% y la velocidad en la que cambia el color donde dice var speed=80
Si quieres cambiarlo de lugar sólo arrastra el gadget hacia donde quieras.

Publica tu blog en Facebook

Ayer me llegó un correo de Facebook que decía:

Adriana ha hecho un comentario sobre tu nota "Ganador del Primer Concurso para Ciudadanos 2009":

Quién ganó???

Lo cual me sorprendió bastante pues no encontraba la relación entre Blogger y Facebook, pero al entrar a mi cuenta recordé que hace algún tiempo había vinculado mi blog con Facebook.
Esto significa que tus post pueden verse también en tu cuenta de Facebook, así todos tus contactos pueden leer lo que escribes en tu blog si lo vinculas.

1. Primero accede a tu cuenta de Facebook como lo haces normalmente.
2. En la barra inferior haz click en Aplicaciones y selecciona Notas.

3. A continuación aparecerá al lado derecho un recuadro gris titulado Configuración de notas. Ahí haz click en Importar un blog.

4. Ingresa así la dirección de tu feed cambiando el nombre de tu blog.

http://tublog.blogspot.com/feeds/posts/default?alt=rss

5. Haz click en Empezar a importar. Si la ingresaste bien se verán todos tus post, a menos que no hayas publicado nada recientemente. Ya sólo ve hasta abajo de la página y da click en Continuar.

Ahora sigue publicando tus post como normalmente lo haces y tus contactos del Facebook podrán leerlos y comentarlos.

Cabecera del blog en flash

Me han preguntado mucho cómo poner la cabecera del blog en flash como en el blog de wallpapers gratis.

Primero debes tener ya creada la cabecera en flash en formato .swf y alojada en un hosting, esta debe tener el ancho que tiene tu actual cabecera.

Luego entra a Diseño > Edición de HTML. Busca este código y cambia el tamaño del height a 0px:

#header {
width : 960px;
margin : 0 auto;
height : 300px;
padding : 0;
}

Abajo de este código pega esto y cambia lo que se indica:

#header-flash {
margin: 0;
padding: 0;
position: relative;
height: 260px; /* cambia este valor por la altura de tu cabecera en flash */
}

Más abajo busca esta etiqueta:

<div id='header-wrapper'>

Y abajo de ella pega esto:

/** Cabecera en flash */
<div id='header-flash'>
<center><object id="movie" data="URL del archivo en flash" width="960" height="260" type="application/x-shockwave-flash"><param value="URL del archivo en flash" name="movie"/><param value="transparent" name="wmode"/><param value="never" name="allowscriptaccess"/></object></center>
</div>
/** Fin de la cabecera en flash */

Ya sólo cambia la URL del archivo en flash por el enlace donde lo tengas alojado y modifica el ancho (width) y alto (height) del archivo.
Dale vista previa y si todo está bien guarda los cambios.

Ganador del Primer Concurso para Ciudadanos 2009

El Primer Concurso para Ciudadanos 2009 finalizó el día de hoy y ya tenemos un ganador.
Se inscribieron un total de 14 participantes y se entregaron 2 boletos extra a 2 de ellos por concepto de referidos.
El sorteo se hizo a través de Random.org donde se ingresaron los 16 boletos participantes y el boleto que ocupó la primera posición fue el ganador del siguiente premio:

• 1 dominio gratis por un año
• Redireccionamiento de dominio
• Redireccionamiento de correos
• Protección de privacidad de datos
• 1 banner por 3 meses en Ciudad Blogger
• 1 ebook con los secretos de Adsense
  

Pueden ver el video del sorteo y el nombre del blog ganador en el siguiente video:

Para conocer la lista completa de todos los participantes haz click aquí.

¡Gracias a todos por participar y felicidades al ganador!

Agrandar imagen al pasar el mouse

Este efecto hará que una imagen pequeña tenga un efecto de zoom al pasar el cursor sobre ella en sólo dos pasos. Este es el ejemplo:

Los Querubines de Rafael

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


<style type='text/css'>
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: black;
padding: 5px;
left: -100px;
border: 5px double gray;
visibility: hidden;
color: #ffffff;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 10px; /*position where enlarged image should offset horizontally */
}
</style>



2. Ahora cuando quieras crear el efecto usa este código en tus post:

<a class="thumbnail" href="#thumb"><img src="URL de la imagen" width="100px" height="80px" border="0" /><span><img src="URL de la imagen" /><br />Pie de foto</span></a>

Ya sólo cambia la URL de la imagen, el texto del pie de foto y en ancho y alto de la imagen; toma en cuenta que esas medidas son las que se verán en la imagen pequeña (thumbnail).
También puedes personalizar el primer código, puedes cambiar el fondo que tendrá la imagen, el borde y el color del texto del pie de foto.

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: black; <-- Color de fondo
padding: 5px; left: -100px;
border: 5px double gray; <-- Borde de la foto
visibility: hidden;
color: #ffffff; <-- Color del texto del pie de foto

Visto en: Gemablog

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:

<!-- variables de la nube de etiquetas -->
<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&gt;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 = &quot;<data:label.name/>&quot;;
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] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; 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

En el caso de los colores están en formato RGB, puedes ver el código de cada color en este enlace.

Eliminar enlace de la imagen

Cuando subimos una imagen para publicar desde Blogger esta carga con dos links, uno para mostrar la imagen en miniatura y otra para ver la imagen en tamaño real.
Normalmente el código de una imagen es algo así:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_qgZA1ny_dAs/SigH7fDv1YI/AAAAAAAABio/K_UBPQ-yqQg/s1600-h/landscapetree.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 200px; height: 160px;" src="http://3.bp.blogspot.com/_qgZA1ny_dAs/SigH7fDv1YI/AAAAAAAABio/K_UBPQ-yqQg/s200/landscapetree.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5343529676405986690" /></a>

Para quitar el enlace al tamaño real debes eliminar lo que está en color rojo; para evitar que al pasar el mouse sobre la imagen se vea el cursor como selección de vínculo quita lo que está en color verde. El resultado será este:

Imagen CON vínculo

Imagen SIN vínculo

Si deseas que se abra el vínculo para ver el tamaño real pero que se abra en otra ventana entonces agrega lo que está en color azul:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_qgZA1ny_dAs/SigH7fDv1YI/AAAAAAAABio/K_UBPQ-yqQg/s1600-h/landscapetree.jpg" target="blank"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 200px; height: 160px;" src="http://3.bp.blogspot.com/_qgZA1ny_dAs/SigH7fDv1YI/AAAAAAAABio/K_UBPQ-yqQg/s200/landscapetree.jpg" alt="" id="BLOGGER_PHOTO_ID_5343529676405986690" border="0" /></a>

El resultado será este:
Imagen con vínculo en ventana aparte
IMPORTANTE: Recuerda dejar un espacio en blanco antes de target.