Ciudad Blogger: febrero 2010

En la entrada anterior vimos cómo cambiar el color de fondo del blog a elección del lector, esto es que haciendo click sobre un color, el color de fondo cambia.
Haciendo unas pequeñas modificaciones al código podemos utilizarlo también para que el fondo del blog sea cambiado por una imagen u otra.
Este es un ejemplo:

Como ves ayuda a la interacción del lector con el blog, pero sobre todo es útil para blogs de diseño los cuales tienen descargas de patterns, de esta forma el lector puede probar el pattern antes de descargarlo.
Puede ponerse directo en una entrada (en el caso de los blogs de diseño) o bien en un elemento HTML/Javascript, sólo hay que pegar lo siguiente:

<div style="text-align:center;">¿No te gusta el fondo del blog?
¡Cámbialo por otro!</div><br />

<center><a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://3.bp.blogspot.com/_dsEG33PDaHw/S4A1JuFysnI/AAAAAAAAAKM/AJ1kNfl4Q44/s400/orange.png)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="http://4.bp.blogspot.com/_dsEG33PDaHw/S4A2tyL2oXI/AAAAAAAAAK0/9NsvM2bvs-Y/s200/body-orange.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://1.bp.blogspot.com/_dsEG33PDaHw/S4A1JXwtxKI/AAAAAAAAAKE/q7F2plFK8x0/s400/luxury-lining.gif)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="http://2.bp.blogspot.com/_dsEG33PDaHw/S4A2ttOlZCI/AAAAAAAAAKs/UVjrJY9cDC0/s200/body-luxury.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://3.bp.blogspot.com/_dsEG33PDaHw/S4A1I3gppfI/AAAAAAAAAJ8/KYfkRAls_uY/s400/intertwined.gif)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="http://2.bp.blogspot.com/_dsEG33PDaHw/S4A2tQlatBI/AAAAAAAAAKk/-hYbABUFnEY/s200/body-intertwined.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://1.bp.blogspot.com/_dsEG33PDaHw/S4A1H6Sf-7I/AAAAAAAAAJs/XjvJh0mpU5o/s1600/dead-revolutionaries.gif)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="http://1.bp.blogspot.com/_dsEG33PDaHw/S4A2s33LNFI/AAAAAAAAAKU/zy1HfovQTDQ/s200/body-deadrevo.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://3.bp.blogspot.com/_dsEG33PDaHw/S4A1ImdyDNI/AAAAAAAAAJ0/6JX_-bspT98/s400/horton.gif)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="http://1.bp.blogspot.com/_dsEG33PDaHw/S4A2tLdeyTI/AAAAAAAAAKc/A73MVxDHcUo/s200/body-horton.jpg" /></a>
</center>

Puedes agregar más imágenes de fondo o cambiar los de este ejemplo, sólo remplaza la URL de la imagen (está dos veces) por la tuya.
En caso de querer agregar más imágenes agrega al código esta parte:

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(URL de la imagen)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="URL de la imagen" /></a>

La URL de la imagen se pone dos veces donde se indica, la primera es la que se aplicará como fondo y la segunda es la de ejemplo para que el lector haga click.

[+/-]

Cambiar color de fondo del blog a opción del lector

Al igual que hemos visto cómo cambiar el tamaño de la letra del blog a elección del lector también podemos darle la opción de cambiar el color de fondo por el que él quiera.

Esto no es por otra cosa más que por hacer más interactivo el blog y que el lector no sólo pueda leer el contenido sino que pueda jugar con la apariencia del blog.

La forma de hacerlo es a través de una función Javascript que hará que con un click el color de fondo del blog (body) cambie, y funciona aun si tienes de fondo una imagen.

Puedes verlo funcionando haciendo click en cualquiera de los colores.

Para poner esta opción en tu blog entra en Diseño > Elementos de la página > Añadir gadget > HTML/Javascript, y ahí pega esto:

<div style="text-align:center;">¿No te gusta el color de fondo?
¡Cámbialo por otro!</div><br /><center>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TTX4H60I/AAAAAAAAAJU/qYc4BYZclgg/s200/body-rojo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TK7730eI/AAAAAAAAAIs/3v5O2GDrs1s/s200/body-amarillo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TTyfDggI/AAAAAAAAAJk/9x17-Ec7Dnw/s200/body-verde.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TLXeztWI/AAAAAAAAAI0/7hWfrfWsdKU/s200/body-azul.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMB5SOXI/AAAAAAAAAJE/PRMfKVBj6fM/s200/body-morado.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="http://1.bp.blogspot.com/_dsEG33PDaHw/S32TTl7vW9I/AAAAAAAAAJc/GHdXgYyF4Ro/s200/body-rosa.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMY3FA9I/AAAAAAAAAJM/6Hx0CAagVOQ/s200/body-negro.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TLuZ0f1I/AAAAAAAAAI8/r1AHB4GpoPQ/s200/body-blanco.png" /></a>
</center>

<div style="text-align:center;">¿No te gusta el color de fondo?
¡Cámbialo por otro!</div><br /><center>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';">Rojo</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';">Amarillo</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';">Verde</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';">Azul</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';">Morado</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';">Rosa</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';">Negro</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';">Blanco</a>
</center>

Puedes cambiar los colores por los que gustes, o agregar más colores, sólo debes agregar otra línea como esta por cada color que quieres agregar:

<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';">Color</a>

Sólo cambia lo que está en color rojo por el código del color que quieres y pon el nombre del color donde se indica.

Lo mismo puedes hacer para cambiar los colores de los anteriores, sólo localiza el código del color, cámbialo y listo.

[+/-]

Yahoo! Media Player: Reproductor de MP3

[+/-]

Ocultar la Sidebar en las Páginas estáticas

Ya hemos visto cómo personalizar el gadget de las Páginas y cómo mostrar las Páginas de forma diferente, pero me preguntan si se puede ocultar la sidebar cuando se está en las Páginas.

Sí se puede, y se realiza usando la misma condicional que usamos para mostrar las Páginas de forma distinta.

Puedes ver un ejemplo en este blog de pruebas, verás que al hacer click sobre una Página la sidebar desaparece y el contenido de la Página ocupa todo el ancho del blog.

ACLARACIÓN: Los elementos mencionados a continuación son los que usan la mayoría de las plantillas originales de Blogger, en otras plantillas posiblemente encontrarás los elementos con el mismo nombre, de lo contrario deberás localizar en tu plantilla cuál es el nombre que corresponde.

Lo único que necesitamos es saber cuánto mide el outer-wrapper de tu blog; en la plantilla Mínima dice esto:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

En este caso el outer-wrapper mide 660px.
Entonces lo que haremos será entrar en Diseño > Edición de HTML y pegar antes de </head> lo siguiente:

<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
display:none;
visibility:hidden;
}
#main-wrapper {
width: 660px;
}
</style>
</b:if>

Como ven sólo hemos usado una condicional la cual indica que cuando se trate de una Página entonces el contenedor de la sidebar medirá 0px de ancho, o sea nada, y además el contenedor del área de las entradas medirá el total del ancho del blog, en este caso 660px.

Como mencioné antes, los nombres de los contenedores pueden variar según la plantilla, sólo deberán localizar cuál es el nombre del contendor de la sidebar (sidebar-wrapper), el área de las entradas (main-wrapper) y el ancho total del blog (outer-wrapper).

Por supuesto este hack también se puede combinar con el de

mostrar las Páginas de forma diferente, sólo habría que agregar los estilos correspondientes dentro de este código, con lo cual quedaría así de forma completa:

<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
display:none;
visibility:hidden;
}
#main-wrapper {
width: 660px;
}
.post {
color: #8A4B08; /* Color del texto */
border: 1px solid #FF8000; /* Color del borde */
margin:.5em 0 1.5em;
padding: 5px;
background: #F2F5A9; /* Color de fondo o imagen de fondo */
}
.post h3 a {
color: #cc6600; /* Color del titulo */
font-family: Impact; /* Tipo de letra del titulo */
font-size: 20px; /* Tamaño de letra del titulo */
text-transform: uppercase;
text-align: center; /* Alineación del título */
letter-spacing: 5px;
}
.post h3 a:hover {
color: #FF8000; /* Color del título al pasar el cursor */
}
.post img {
padding:4px;
border:2px solid #FF8000; /* Color del borde las imágenes */
}
</style>
</b:if>

Como ven, la primera parte contiene la indicación sobre ocultar la sidebar dentro de las Páginas y la segunda parte contiene los estilos para las Páginas.

De esta forma sencilla hemos podido ocultar la sidebar en las Páginas estáticas con la posibilidad de mostrar las Páginas de forma diferente.

[+/-]

Imágenes en tamaño real

A veces cuando subimos una imagen desde Blogger batallamos porque queremos la imagen más grande, en tamaño real, pero resulta que la medida más grande que nos aparece es de 400px de ancho.

Lo mismo sucede cuando queremos usar imágenes para la plantilla, si pegamos la URL de la imagen que nos da Blogger simplemente no se ve.

Primero veamos que cuando subimos una imagen Blogger nos da tres opciones de tamaño: Pequeñas, Medio y Grandes.

Las pequeñas tienen un ancho máximo de 200px; las medianas 320px; y las grandes 400px de ancho.

Tamaño chico (200px)

Tamaño mediano (320px)

Tamaño grande (400px)

Cualquiera que sea el caso Blogger nos arrojará un código dividido en dos partes, el primero es el que contiene la URL de la imagen en su tamaño original (cualquiera que sea la medida), y la segunda es el código de cómo se muestra la imagen dentro de la entrada.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s1600-h/Desierto.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 193px;" src="http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s320/Desierto.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5437914528676382722" /></a>

Si nos fijamos veremos que en el segundo código vienen las especificaciones del tamaño, estas se encuentran en width y height.
Ambos códigos contienen dos URLs, una tiene la URL de la imagen en tamaño original y la otra es una URL del tamaño pequeño.
Pero lo que nos interesa es tener la imagen en tamaño real, o sea la URL que se encuentra en el primer código:

http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s1600-h/Desierto.png

El problema es que si usamos esta URL tal como está no funciona, ya que está habilitada para que sólo funcione para abrirse en una ventana nueva. Pero aquí viene el truco; sólo basta eliminar el guión y la letra H que se encuentra después de s1600, con lo cual quedaría así:

http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s1600/Desierto.png

De esta forma la imagen se mostrará en su tamaño original.

Tamaño real

Por lo tanto el código de una imagen en tamaño real sería así:

<img src="http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s1600/Desierto.png" />

Así que tomamos la primera URL y eliminamos el -h que se encuentra después de /s1600 y tendremos la imagen en tamaño real dentro de las entradas o en la plantilla.

Ten en cuenta que la imagen que vaya dentro de tus entradas deben medir menos del ancho asignado para tus entradas (main-wrapper) de lo contrario la imagen se cortará y no se mostrará por completo.

[+/-]

Mostrar las Páginas estáticas de forma diferente

Revisando el código de las páginas estáticas de Blogger vi que éstas usan una nueva condicional:

<b:if cond='data:blog.pageType == "static_page"'>

Esto es que, permite condicionar acciones determinadas cuando se trata de páginas estáticas (ya debería empezarle a llamar sólo Páginas y no "páginas estáticas") que apliquen sólo a ellas y no al resto de las entradas.

Si bien hemos visto como mostrar el primer post de forma distinta, también podemos hacer algo similar para las páginas estáticas (¿lo ven? no puedo). Es decir, que todas las entradas se vean como normalmente se ven, pero cuando se trate de una Página (¡ahora sí pude!) se muestre de forma diferente, puede ser un color de fondo diferente, otro tipo de letra, bordes, etc.

Puedes ver un ejemplo en este blog de pruebas, verás que la entrada se muestra "normal", haz click sobre el enlace hacia una Página y verás que se muestra diferente.

Implementarlo es muy simple, sólo es cuestión de usar la condicional de las Páginas y agregar los estilos que se aplicarán sólo a ellas.

Para hacerlo entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:

<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
.post {
color: #8A4B08; /* Color del texto */
border: 1px solid #FF8000; /* Color del borde */
margin:.5em 0 1.5em;
padding: 5px;
background: #F2F5A9; /* Color de fondo o imagen de fondo */
}
.post h3 a {
color: #cc6600; /* Color del titulo */
font-family: Impact; /* Tipo de letra del titulo */
font-size: 20px; /* Tamaño de letra del titulo */
text-transform: uppercase;
text-align: center; /* Alineación del título */
letter-spacing: 5px;
}
.post h3 a:hover {
color: #FF8000; /* Color del título al pasar el cursor */
}
.post img {
padding:4px;
border:2px solid #FF8000; /* Color del borde las imágenes */
}
</style>
</b:if>

Para personalizarlo sólo cambia los estilos donde se indica, puedes agregar o quitar los estilos que quieras.
De esta forma tus Páginas tendrán un aspecto diferente que harán que resalten y se diferencien de las entradas comunes.

[+/-]

Abrir todos los enlaces en otra ventana

[+/-]

Personalizar el gadget de Páginas estáticas

[+/-]

Poner separadores entre las entradas

[+/-]

Cursores para el Día de San Valentín

[+/-]

Corazones cayendo en la página

[+/-]

Mostrar Adsense en los feeds

[+/-]

Cartel de bienvenida tipo neón

Ya tenía rato que no les mostraba estos mensajes de bienvenida que sé que a muchos les gusta, así que les muestro este cartel de bienvenida tipo anuncio de neón que me encontré y que pertenece a G.P.F.

Se trata de un mensaje de bienvenida en el cual una luz de color recorre cada letra dando la apariencia de que se trata de una anuncio luminoso de neón.

Puedes ver un ejemplo en este blog de pruebas.

Para poner este cartel en tu blog sólo entra en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pega lo siguiente:

<div style="background:#000; font-size:30px; text-transform: uppercase; font-weight: bolder;"><script language="JavaScript1.2">

//Neon Lights Text II by G.P.F. (gpf@beta-cc.de)
//visit http://www.beta-cc.de

var message="Bienvenidos a Ciudad Blogger"
var neonbasecolor="gray" //color de la letra
var neontextcolor="yellow" //color de la luz neon
var neontextcolor2="#FFFFA8" //color del reflejo
var flashspeed=100 // velocidad en milisegundos
var flashingletters=3 // numero de letras alumbradas en neon
var flashingletters2=1 // numero de letras alumbradas con el reflejo (0 to disable)
var flashpause=0 // pausa entre cada repeticion en milisegundos

///No editar nada mas///

var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor

if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script></div>

Cambia lo que está en color rojo por tu mensaje de bienvenida. En las antaciones de color verde puedes ver unas variables que se pueden configurar como color del neón, velocidad, etc.
Al inicio del código en color azul podrás cambiar el color de fondo y tamaño de la letra; también puedes agregarle otros estilos si así lo deseas.

Si no sabes cómo poner un gadget debajo de la cabecera haz click en el enlace anterior.

[+/-]

Abrir enlace del gadget de Imagen en ventana nueva

Hay dos formas de poner una imagen en la sidebar, una es con el gadget HTML/Javascript en el cual debemos poner el código de la imagen, y adicionalmente podemos agregarle estilos. Y otra es usando el gadget de Imagen, en el cual cargamos la imagen desde nuestro equipo o entregando una URL; y además podemos ponerle un pié de imagen y un enlace que dirija a otro sitio Web.

Hasta ahí todo está bien, el problema viene cuando usamos el gadget de Imagen y queremos que el enlace abra en una ventana nueva, ya que por defecto el enlace agregado a esta imagen se abre en la misma ventana y como dice mi querida amiga María Rosa, obliga al usuario a abandonar nuestro blog y eso no nos conviene.

Pero esto tiene solución, y es usando el mismo método que usamos para abrir la Lista de links en una ventana aparte, es decir, editaremos el gadget directo en la plantilla y agregaremos el atributo target='_blank'

Cuando quieras que una imagen que hayas subido con este gadget abra el enlace en una ventana nueva entra en Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca el código del gadget de la imagen (puedes guiarte por el nombre del gadget que le has asignado).
El código completo del gadget es así:

<b:widget id='Image1' locked='false' title='Imagen' type='Image'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:link != ""'>
<a expr:href='data:link' target='_blank'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<b:if cond='data:caption != ""'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Sólo agrega lo que está en color rojo y listo, el vínculo que le hayas puesto a esa imagen abrirá en una ventana aparte, con lo que evitaremos que el lector abandone nuestra página.

NOTA: Recuerda dejar un espacio en blanco antes de poner el atributo target='_blank'

[+/-]

Texto que sigue al cursor en forma giratoria

Ya hemos visto dos formas de poner un texto que sigue al cursor pero este en especial me gusta mucho por el efecto que tiene.

Se trata de un script de Tim Tilton que hace que el texto persiga al cursor pero en forma giratoria; cuando el cursor se mueve el texto lo sigue en forma ondulante y al detenerse gira alrededor del cursor. Puedes ver un ejemplo en este blog de pruebas.

Para ponerlo en tu blog sólo basta entrar en Diseño > Edición de HTML y antes de </head> pegar lo siguiente:

<style type='text/css'>
/* Texto giratorio que sigue al cursor */
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: verdana, arial; /* Tipo de letra */
color: #000; /* Color del texto */

/* No editar esta area */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type='text/javascript'>
//<![CDATA[
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Mensaje
var msg = "Bienvenido a Ciudad Blogger";

// Tamaño de la letra
var size = 22;

// Determina si es ovalado o circular, 1 es circular, 2 es ovalado
var circleY = 0.75; var circleX = 2;

// Espacio entre cada letra
var letter_spacing = 5;

// Diametro del circulo
var diameter = 10;

// Velocidad de rotacion
var rotation = 0.4;

// Velocidad de reaccion
var speed = 0.3;

////////////////////// No editar nada mas //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();
//]]>
</script>

Cambia lo que está en color rojo por el mensaje que quieres mostrar. Puedes modificar el tamaño del texto, tipo de letra, color, velocidad, etc. He traducido al español las anotaciones (color verde) para que puedas personalizarlo a tu gusto, sólo localiza el área correspondiente para hacer el cambio.

Recuerda que para que este tipo de "monerías" funcionen no debes tener muchos scripts en tu página, sino es posible que alguno deje de funcionar.

Cómo alojar scripts en la plantilla

Carrusel de imágenes con JQuery y ThickBox

Descripción del blog con frases al azar

Cambiar imagen de fondo del blog a elección del lector

Cambiar color de fondo del blog a opción del lector

Yahoo! Media Player: Reproductor de MP3

Ocultar la Sidebar en las Páginas estáticas

Imágenes en tamaño real

Mostrar las Páginas estáticas de forma diferente

Abrir todos los enlaces en otra ventana

Personalizar el gadget de Páginas estáticas

Poner separadores entre las entradas

Cursores para el Día de San Valentín

Corazones cayendo en la página

Mostrar Adsense en los feeds

Cartel de bienvenida tipo neón

Abrir enlace del gadget de Imagen en ventana nueva

Texto que sigue al cursor en forma giratoria

Elige cómo estar cerca de la Ciudad

Últimos artículos

Tómate una foto

La Ciudad tiene:

Archivos

Blogs de ayuda

Acerca del autor

Artículos más visitados

Ciudadanos