Wallpapers de Blogger

Hace unos días me entró la nostalgia por los 10 años de Blogger, así que me puse a buscar wallpapers de Blogger para decorar el escritorio de mi computadora pero no tuve mucha suerte; así que como no encontré dije -¿por qué no hacer los míos?

Así que les comparto 5 wallpapers de Blogger que hice en resolución de 1280 x 800px de distribución libre. No soy un experto en el diseño pero espero que les agraden.

Menu horizontal con borde superior

Este es un menú horizontal con un toque juvenil el cual tiene un borde superior y las pestañas cambian de color al pasar el mouse.
Puedes verlo funcionando en este blog de pruebas.

ATENCIÓN: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.

Para poner este menú en tu blog, entra a Diseño > Edición de HTML y antes de ]]></b:skin> pega lo siguiente:

/* Menú horizontal
----------------------------------------------- */
#menulineup {
padding: 0;
width: 100%;
border-top: 5px solid #D10000; /*Color de la línea superior*/
background: transparent;
}

#menulineup ul{
margin:0;
margin-left: 40px; /*Margen izquierdo entre la primera pestaña y el borde*/
padding: 0;
list-style: none;
}

#menulineup li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#menulineup a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; /*Margen entre cada pestaña*/
padding: 5px 10px 5px 10px;
background-color: lightblue; /*Color de las pestañas*/
border-bottom: 8px solid white;
}

#menulineup a:hover{
background-color: #D10000; /*Color de las pestañas al pasar el cursor*/
padding-top: 10px;
padding-bottom: 0;
border-bottom-color: #D10000; /*Color del borde inferior al pasar el cursor*/
color: white;
}

Ahora entra a Diseño > Elementos de la página > Añadir un gadget, selecciona HTML/Javascript y ahí pega esto:

<div id="menulineup">
<ul>
<li><a href="URL del enlace">Título 1</a></li>
<li><a href="URL del enlace">Título 2</a></li>
<li><a href="URL del enlace">Título 3</a></li>
<li><a href="URL del enlace">Título 4</a></li>
<li><a href="URL del enlace">Título 5</a></li>
</ul></div>

Ya sólo arrastra el elemento HTML/Javascript hasta abajo de la cabecera y cambia las URL de los enlaces y los títulos de las pestañas.

Puedes modificar los colores del menú a tu gusto; en el primer código he puesto las indicaciones para que sepas dónde hacer los cambios.

Título del blog en movimiento II

Ya hemos visto cómo poner el título del blog en movimiento en forma de marquesina, ahora también pondremos el título del blog en movimiento pero con el efecto de una máquina de escribir, es decir, que aparezcan las letras una a una.

Sólo entra a Diseño > Elementos de la página > Añadir un gadget, selecciona HTML/Javascript y pega ahí esto:

<script>

var message="Bienvenidos a mi blog" //Aquí va el título del blog
var message=message+" "
i="0"
var temptitle=""
var speed="150" //Este es el tiempo en milisegundos entre cada letra

function titler(){
if (!document.all&&!document.getElementById)
return
document.title=temptitle+message.charAt(i)
temptitle=temptitle+message.charAt(i)
i++
if(i==message.length)
{
i="0"
temptitle=""
}
setTimeout("titler()",speed)
}

window.onload=titler
</script>

Sólo cambia el mensaje por el que quieras y listo. Puedes ver un ejemplo funcionando en este blog de pruebas; mira la barra del título (arriba) y verás el efecto.

Funciona en Mozilla Firefox e Internet Explorer.

Menu vertical para el blog

Sé que no a todos les interesan los menús horizontales debajo de las cabeceras, así que para a quienes se les adecua mejor un menú vertical en el blog aquí les van las indicaciones para crear un menú de manera rápida y personalizable.

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

/* Menú Vertical
----------------------------------------------- */
#menuvert ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px; /* ancho del menú */
font-size: 11pt;
}
#menuvert ul li {
background-color: #B0CBDD; /* color de fondo del menú */
padding: 0px;
}
#menuvert ul li a {
color: #000; /* color de las letras */
text-decoration: none;
display: block;
padding: 10px 10px 10px 20px;
}
#menuvert ul li a:hover {
background: #336699; /* color del botón al pasar el cursor */
border-left: 10px solid #000066; /* color del rectángulo junto al título */
color: #FFFFFF; /* color de las letras al pasar el cursor */
}

Ahora en Diseño > Elementos de la página > Añadir un gadget, selecciona HTML/Javascript y pega ahí esto:

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

Ya sólo cambia las URL de los enlaces y los títulos de las pestañas; puedes agregar o eliminar tantas pestañas como quieras.

Puedes personalizar los colores del menú a tu antojo, en el primer código he puesto las anotaciones para que sepas dónde cambiar el color de fondo, el color de las letras, etc.

El resultado es este:

• Inicio
• Básicos
• Dominios
• Descargas

Scroll de bienvenida con efectos

Gustosamente he visto que varios lectores usaron en su blog el scroll de bienvenida, sin embargo para los que les gustan los scrolls más sofisticados les traigo este scroll de bienvenida que con numerosos efectos como letras que se desplazan a la izquiera, a la derecha, letras que salen expulsadas, letras que se contraen, texto que se separa, etc. Para que sepan de lo que hablo pueden ver el scroll funcionando abajo de la cabecera en este blog de pruebas.

Para ponerlo en tu blog entra a Diseño | Añadir un gadget, selecciona HTML/Javascript y ahí pega el código siguiente:

<script>
function createArr(num) { for(var i = 0; i < num; i++) { this[i] = null } }
function fillArr(tx,me,ti,wa) { this.text = tx; this.method = me.toLowerCase(); this.ticks = ti; this.wait = wa }
function block(num,txt,mthod,tcks,wit) { blocks[num] = new fillArr(txt,mthod,tcks,wit) }
function ms(unt) { var sp = ""; for( var i = 1; i <= unt; i++ ) { sp += " " } return(sp) }
function Activate() { if (cblock == max) { cblock = 0; if (iloop == 0) { loops--; if (loops == 0) { meth = "0" } else { meth = blocks[cblock].method } } else { meth = blocks[cblock].method } } else { meth = blocks[cblock].method }
if (meth == "0") { document.Active.ASCII.value = end }
if (meth == "display") { Tape = blocks[cblock].text; Wait = blocks[cblock].wait; Display() }
if (meth == "display center") { Tape = blocks[cblock].text; Wait = blocks[cblock].wait; half = Tape.length / 2; DisplayC() }
if (meth == "scroll left") { clen = tlen; Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; tTicks = Ticks * 2; ScrollL() }
if (meth == "scroll right") { clen = 0 - blocks[cblock].text.length; Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; tTicks = Ticks * 2; ScrollR() }
if (meth == "scroll lc") { clen = 0 - blocks[cblock].text.length; Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; Wait = blocks[cblock].wait; tTicks = Ticks * 2; half = Tape.length / 2; ScrollLC() }
if (meth == "scroll rc") { clen = tlen; Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; Wait = blocks[cblock].wait; tTicks = Ticks * 2; half = Tape.length / 2; ScrollRC() }
if (meth == "scroll cl") { Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; tTicks = Ticks * 2; half = Tape.length / 2; clen = cent - half; ScrollCL() }
if (meth == "scroll cr") { Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; tTicks = Ticks * 2; half = Tape.length / 2; clen = cent - half; ScrollCR() }
if (meth == "slide left") { Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; Wait = blocks[cblock].wait; cpos = 0; clet = Tape.charAt(cpos); clen = tlen; cstr = ""; SlideL() }
if (meth == "slide lc") { Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; Wait = blocks[cblock].wait; cpos = Tape.length - 1; clet = Tape.charAt(cpos); clen = 0; cstr = ""; half = Tape.length / 2; iba = cent - half; ib = ms(iba); SlideLC() }
if (meth == "slide rc") { Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; Wait = blocks[cblock].wait; cpos = 0; clet = Tape.charAt(cpos); cstr = ""; half = Tape.length / 2; clen = cent + half; fs = ms(cent - half); SlideRC() }
if (meth == "slide cl") { Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; cpos = 0; clet = Tape.charAt(cpos); cstr = Tape.substring(1,Tape.length); half = Tape.length / 2; clen = cent - half; iba = 0; ib = ms(iba); SlideCL() }
if (meth == "slide cr") { Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; cpos = Tape.length - 1; clet = Tape.charAt(cpos); cstr = Tape.substring(0,Tape.length - 1); half = Tape.length / 2; clen = 0; fs = ms(cent - half); SlideCR() }
if (meth == "slip left") { clen = 0; Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; SlipL() }
if (meth == "slip right") { clen = 0; Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; SlipR() }
if (meth == "slip letter") { Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; cpos = Tape.length - 1; clet = Tape.charAt(cpos); cstr = Tape.substring(0,Tape.length - 1); clen = 0; SlipLet() }
if (meth == "split"){ Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; var iii = Tape.length / 2; if (iii / 2 != Math.ceil(iii / 2)) { Tape = Tape + " " } hstr1 = Tape.substring(0,Tape.length/2); hstr2 = Tape.substring(Tape.length/2,Tape.length); tTicks = Ticks * 2; clen = cent - hstr1.length; iba = 0; ib = ms(iba); Split() }
if (meth == "merge"){ Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; var iii = Tape.length / 2; if (iii / 2 != Math.ceil(iii / 2)) { Tape = Tape + " " } hstr1 = Tape.substring(0,Tape.length/2); hstr2 = Tape.substring(Tape.length/2,Tape.length); tTicks = Ticks * 2; clen = 0 - hstr1.length; iba = tlen; ib = ms(iba); Wait = blocks[cblock].wait; Merge() } }
function Display() { document.Active.ASCII.value = Tape; cblock++; timerID = setTimeout("Activate()",Wait) }
function DisplayC() { var temp = cent - half; ini = ms(temp); document.Active.ASCII.value = ini + Tape; cblock++; timerID = setTimeout("Activate()",Wait) }
function ScrollL() { if (clen >= 0) { ini = ms(clen); tickered = ini + Tape; document.Active.ASCII.value = tickered; clen--; timerID = setTimeout("ScrollL()",Ticks) } else { beg = 0 - clen; if (beg == Tape.length) { document.Active.ASCII.value = ""; cblock++; timerID = setTimeout("Activate()",Ticks) } else { tickered = Tape.substring(beg,tlen); document.Active.ASCII.value = tickered; clen--; timerID = setTimeout("ScrollL()",tTicks) } } }
function ScrollR() { if (clen >= 0) { if (clen > tlen) { document.Active.ASCII.value = ""; cblock++; timerID = setTimeout("Activate()",Ticks) } else { ini = ms(clen); tickered = ini + Tape; document.Active.ASCII.value = tickered; clen++; timerID = setTimeout("ScrollR()",Ticks) } } else { beg = 0 - clen; tickered = Tape.substring(beg,tlen); document.Active.ASCII.value = tickered; clen++; timerID = setTimeout("ScrollR()",tTicks) } }
function ScrollLC() { if (clen >= 0) { if (cent <= (clen + half)) { cblock++; timerID = setTimeout("Activate()",Wait) } else { ini = ms(clen); tickered = ini + Tape; document.Active.ASCII.value = tickered; clen++; timerID = setTimeout("ScrollLC()",Ticks) } } else { beg = 0 - clen; if (cent <= (clen + half)) { cblock++; timerID = setTimeout("Activate()",Wait) } else { tickered = Tape.substring(beg,tlen); document.Active.ASCII.value = tickered; clen++; timerID = setTimeout("ScrollLC()",tTicks) } } }
function ScrollRC() { if (clen >= 0) { if (cent >= (clen + half)) { cblock++; timerID = setTimeout("Activate()",Wait) } else { ini = ms(clen); tickered = ini + Tape; document.Active.ASCII.value = tickered; clen--; timerID = setTimeout("ScrollRC()",Ticks) } } else { beg = 0 - clen; if (cent >= (clen + half)) { cblock++; timerID = setTimeout("Activate()",Wait) } tickered = Tape.substring(beg,tlen); document.Active.ASCII.value = tickered; clen--; timerID = setTimeout("ScrollRC()",tTicks) } }
function ScrollCL() { if (clen >= 0) { ini = ms(clen); tickered = ini + Tape; document.Active.ASCII.value = tickered; clen--; timerID = setTimeout("ScrollCL()",Ticks) } else { beg = 0 - clen; if (beg >= Tape.length) { document.Active.ASCII.value = ""; cblock++; timerID = setTimeout("Activate()",Wait) } else { tickered = Tape.substring(beg,tlen); document.Active.ASCII.value = tickered; clen--; timerID = setTimeout("ScrollCL()",tTicks) } } }
function ScrollCR() { if (clen >= 0) { if (clen > tlen) { document.Active.ASCII.value = ""; cblock++; timerID = setTimeout("Activate()",Wait) } else { ini = ms(clen); tickered = ini + Tape; document.Active.ASCII.value = tickered; clen++; timerID = setTimeout("ScrollCR()",Ticks) } } else { beg = 0 - clen; tickered = Tape.substring(beg,tlen); document.Active.ASCII.value = tickered; clen++; timerID = setTimeout("ScrollCR()",tTicks) } }
function SlideL() { if (clen >= 0) { ini = ms(clen); tickered = cstr + ini + clet; document.Active.ASCII.value = tickered; clen -= 3; timerID = setTimeout("SlideL()",Ticks) } else { document.Active.ASCII.value = cstr + clet; cstr = document.Active.ASCII.value; clen = tlen - cstr.length; cpos++; clet = Tape.charAt(cpos); if (clet == " ") { cstr = cstr + " "; cpos++; clet = Tape.charAt(cpos) } if (clet == "") { cblock++; timerID = setTimeout("Activate()",Wait) } else { timerID = setTimeout("SlideL()",Ticks) } } }
function SlideLC() { if (clen <= cent - half) { ini = ms(clen); tickered = ini + clet + ib + cstr; document.Active.ASCII.value = tickered; clen += 3; iba -= 3; ib = ms(iba); timerID = setTimeout("SlideLC()",Ticks) } else { iba = cent - half; ini = ms(iba); ib = ms(iba); document.Active.ASCII.value = ini + clet + cstr; cstr = clet + cstr; clen = 0; cpos--; if (cpos >= 0) { clet = Tape.charAt(cpos); if (clet == " ") { cstr = " " + cstr; cpos--; clet = Tape.charAt(cpos) } timerID = setTimeout("SlideLC()",Ticks) } else { cblock++; timerID = setTimeout("Activate()",Wait) } } }
function SlideRC() { if (clen >= 0) { ini = ms(clen); tickered = fs + cstr + ini + clet; document.Active.ASCII.value = tickered; clen -= 3; timerID = setTimeout("SlideRC()",Ticks) } else { clen = cent + half; cstr += clet; document.Active.ASCII.value = fs + cstr; cpos++; clet = Tape.charAt(cpos); if (clet == " ") { cstr = cstr + " "; cpos++; clet = Tape.charAt(cpos) } if (clet == "") { document.Active.ASCII.value = fs + Tape; cblock++; timerID = setTimeout("Activate()",Wait) } else { timerID = setTimeout("SlideRC()",Ticks) } } }
function SlideCL() { if (clen > 0) { ini = ms(clen); tickered = ini + clet + ib + cstr; document.Active.ASCII.value = tickered; clen -= 3; iba += 3; ib = ms(iba); timerID = setTimeout("SlideCL()",Ticks) } else { iba = 0; ib = ms(iba); clen = cent - half; ini = ms(clen); document.Active.ASCII.value = ini + cstr; cstr = cstr.substring(1,Tape.length); cpos++; clet = Tape.charAt(cpos); if (clet == " ") { cstr = cstr.substring(1,Tape.length); cpos++; clet = Tape.charAt(cpos) } if (clet == "") { document.Active.ASCII.value = ""; cblock++; timerID = setTimeout("Activate()",Ticks) } else { timerID = setTimeout("SlideCL()",Ticks) } } }
function SlideCR() { if (clen <= cent + half) { ini = ms(clen); tickered = fs + cstr + ini + clet; document.Active.ASCII.value = tickered; clen += 3; timerID = setTimeout("SlideCR()",Ticks) } else { clen = 0; document.Active.ASCII.value = fs + cstr; cstr = cstr.substring(0,cstr.length - 1); cpos--; half += 1; if (cpos >= 0) { ; clet = Tape.charAt(cpos); if (clet == " ") { cstr = cstr.substring(0,cstr.length - 1); cpos--; clet = Tape.charAt(cpos) } timerID = setTimeout("SlideCR()",Ticks) } else { cblock++; timerID = setTimeout("Activate()",Ticks) } } }
function SlipR() { if (clen >= 0) { if (clen > tlen) { document.Active.ASCII.value = ""; cblock++; timerID = setTimeout("Activate()",Ticks) } else { ini = ms(clen); tickered = ini + Tape; document.Active.ASCII.value = tickered; clen++; timerID = setTimeout("SlipR()",Ticks) } } else { beg = 0 - clen; tickered = Tape.substring(beg,tlen); document.Active.ASCII.value = tickered; clen++; timerID = setTimeout("SlipR()",Ticks) } }
function SlipL() { if (clen >= 0) { ini = ms(clen); tickered = ini + Tape; document.Active.ASCII.value = tickered; clen--; timerID = setTimeout("SlipL()",Ticks) } else { beg = 0 - clen; if (beg == Tape.length) { document.Active.ASCII.value = ""; cblock++; timerID = setTimeout("Activate()",Ticks) } else { tickered = Tape.substring(beg,tlen); document.Active.ASCII.value = tickered; clen--; timerID = setTimeout("SlipL()",Ticks) } } }
function SlipLet() { if (clen < tlen) { ini = ms(clen); tickered = cstr + ini + clet; document.Active.ASCII.value = tickered; clen += 3; timerID = setTimeout("SlipLet()",Ticks) } else { clen = 0; cstr = cstr.substring(0,cstr.length - 1); cpos--; if (cpos >= 0) { ; clet = Tape.charAt(cpos); if (clet == " ") { cstr = cstr.substring(0,cstr.length - 1); cpos--; clet = Tape.charAt(cpos) } timerID = setTimeout("SlipLet()",Ticks) } else { cblock++; timerID = setTimeout("Activate()",Ticks) } } }
function Split() { if (clen >= 0) { ini = ms(clen); tickered = ini + hstr1 + ib + hstr2; document.Active.ASCII.value = tickered; clen--; iba += 2; ib = ms(iba); timerID = setTimeout("Split()",Ticks) } else { if (clen <= 0 - hstr1.length) { cblock++; timerID = setTimeout("Activate()",Ticks) } else { beg = 0 - clen; tickered = hstr1.substring(beg,tlen); document.Active.ASCII.value = tickered + ib + hstr2; clen--; iba += 2; ib = ms(iba); timerID = setTimeout("Split()",tTicks) } } }
function Merge() { if (clen >= 0) { if (clen > cent - hstr1.length) { tickered = ini + hstr1 + hstr2; document.Active.ASCII.value = tickered; cblock++; timerID = setTimeout("Activate()",Wait) } else { ini = ms(clen); tickered = ini + hstr1 + ib + hstr2; document.Active.ASCII.value = tickered; clen++; iba -= 2; ib = ms(iba); timerID = setTimeout("Merge()",Ticks) } } else { beg = 0 - clen; tickered = hstr1.substring(beg,tlen); document.Active.ASCII.value = tickered + ib + hstr2; clen++; iba -= 4; ib = ms(iba); timerID = setTimeout("Merge()",tTicks) } }

/////////////////////////////////////////////////////////////////
//# Personalización
// Número de bloques que se mostrarán.
// ***ERROR COMÚN***: Asegúrate de establecer este valor de acuerdo al
// número de bloques (Siempre cuenta el último bloque y suma uno más # + 1)!
var max = 15

// No tocar esto!
var blocks = new createArr(max)

// Ancho de la caja de texto
// ***ERROR COMÚN: Si cambias esto
// recuerda cambiar también el número que está al final subrayado.***
var len = 35

// Número de veces que se repetirá el bloque (use 0 para infinito)
var loops = 0

// Si cambias lo anterior modifica también el mensaje final
var end = 'End of "ActiveASCII" by Neal Kanodia.'

// Usa este formato por cada cadena de texto (empezando de 0 hasta 1 a menos
// que max):
// block(#block,"Text to display","Method",#ticks,#wait)
// ejemplo: block(0,"1st block.","Scroll Left",25,0)
// ***ERROR COMÚN***: Si agregas un nuevo bloque INCREMENTA MAX BY 1
// ***ERROR COMÚN***: Si eliminas un bloque REDÚCELO A MAX BY 1
// ***ERROR COMÚN***: Revisa bien los textos que agregas y los efectos!!!
block(0,"Este es un ejemplo de una marquesina","scroll left",20,0)
block(1,"Con varios efectos","scroll right",20,0)
block(2,"Puedes usarlo para dar la bienvenida","scroll lc",20,500)
block(3,"Anunciar algo","scroll rc",20,500)
block(4,"O para lo que quieras","scroll cl",20,0)
block(5,"Te gusta este efecto?","split",25,0)
block(6,"O este?","slide left",10,500)
block(7,"qué tal este?","slide lc",20,500)
block(8,"Lindo, no?","slide rc",15,500)
block(9,"Puedes tenerlo","slide cr",10,1000)
block(10," Consigue el código para usarlo tú tambien ","slip left",60,1000)
block(11,"En... CiudadBlogger.com ","slip right",70,1000)
block(12,"Trucos ...","slip letter",5,0)
block(13,"Y tutoriales","merge",25,1000)
block(14,"Para tu blog","split",25,0)
//Fin de personalización
/////////////////////////////////////////////////////////////////

// No cambiar!!!
var tlen = 2.4 * len
var cent = tlen / 2.2
var clen = null
var tickered = null
var ini = null
var iloop = 0
if (loops == 0) {iloop = 1}
var cblock = 0
var timerID = null
var beg = null
var clet = null
var cstr = null
var cpos = null
var ib = null
var iba = null
var fs = null
var hstr1 = null
var hstr2 = null
<!-- end -->
</script>

<script>
document.write('<form name="Active" onsubmit="0">')
document.write('<input name="ASCII" size="35" type="text">')
document.write('</form>')
Activate()
</script>

• Cambia los textos en color rojo por los tuyos.
• Si deseas cambiar el largo de la caja debes cambiarlo dos veces donde se marca subrayado en negrita.
• Si eliminas o agregas más líneas modifica donde dice: var max = 15
• Lo que está en color verde son los efectos, puedes usar los que quieras, a continuación te diré cuál es cada uno:

"scroll left",20,0 Marquesina a la izquierda.
"scroll right",20,0 Marquesina a la derecha.
"scroll lc",20,500 Marquesina a la izquierda que se corta.
"scroll rc",20,500 Marquesina a la derecha que se corta.
"scroll cl",20,0 Marquesina a la izquierda que empieza centrada.
"split",25,0 Texto que se divide en dos partes.
"slide left",10,500 Las letras se juntan para formar la palabra.
"slide lc",20,500 Las letras se juntan y se va moviendo el texto desde la izquierda.
"slide rc",15,500 Las letras se juntan y se va moviendo el texto desde la derecha.
"slip letter",5,0 Las letras son expulsadas.
"merge",25,1000 La frase se junta.

En el código he traducido las indicaciones para que te guíes más fácil al personalizarlo.

Imágenes al azar en el fondo del blog

Para aquellos que quieren tener siempre un fondo diferente en el blog pueden usar este truco que hará que cada vez que alguien entre al blog o se recargue la página cambie la imagen de fondo del blog.

Sólo tienes que entrar a Diseño > Edición de HTML y pegar antes de </head> lo siguiente:

<script type='text/javascript'>
var banner= new Array()
banner[0]="URL de la imagen"
banner[1]="URL de la imagen"
banner[2]="URL de la imagen"
var random=Math.floor(3*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background: #FFFFFF url("' + banner[random] + '"); background-attachment:fixed;');
document.write(" }");
document.write("</style>");
</script>

Ya sólo agrega las URL de las imágenes donde se indica. Si deseas agregar más imágenes puedes hacerlo repitiendo la línea:

banner[3]="URL de la imagen"

Tomando en cuenta el orden consecutivo del número.
Si agregas más imágenes cambia el número que se encuentra en:

3*Math.random()

Te recomiendo que uses imágenes pequeñas para que la carga de la página sea más rápida.

En el sitio Squidfingers puedes encontrar muchos patterns (patrones) de imágenes que puedes usar para tu blog.

Puedes ver un ejemplo funcionando en este blog de pruebas, sólo presiona la tecla F5 y verás que al recargarse la página cambiará la imagen de fondo del blog.

Para saber cómo cambiar el color de fondo del blog aleatoriamente visita este artículo.

Cómo evitar que te copien el texto de tu blog

Como ya sabemos hay mucha gente que se quiere pasar de lista copiando el contenido de un blog para luego pegarlo tal cual y publicarlo. En ocasiones escribir un post significa dedicarle mucho tiempo, ya sea investigando, recopilando fuentes, buscando imágenes, redactando, corrigiendo y dando forma al contenido, y de pronto nuestro esfuerzo aparece en el blog de otros asumiendo que son los autores de dicho contenido y obviamente sin la mención de créditos.

Así que veremos una forma para evitar que nos roben el contenido del blog alguno de estos odiosos personajes. Aclaro, estoy completamente de acuerdo en que la información debe ser libre y debe compartirse, pero de ningún modo estoy de acuerdo en que se robe información y se asuman el trabajo de otros, por lo que si tomas información de algún lado cita a los autores y redáctalo con tus propias palabras.

Entonces vamos a emplear un script que deshabilita la opción de seleccionar el texto de una página web, evitando de esta forma que hagan un 'copy & paste' y te roben tu contenido. Pero que hay que aclarar que no es un método infalible, ninguno lo es.

Sólo tienes que entrar a Plantilla | Edición de HTML y pegar antes de </head> lo siguiente:

<script>
function disabletext(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disabletext
document.onclick=reEnable
}
</script>

Aunque este script funciona con todos los navegadores, en Mozilla Firefox bloquea la caja de búsqueda. Para saber cómo proteger tus imágenes visita este artículo.

Poner imagen en los títulos de los gadgets

Me pregunta BEYOND cómo poner imágenes de fondo en el título de ciertos gadgets.

El truco a continuación se aplica a cualquier gadget del blog y bien puede usarse para poner una imagen decorativa de fondo en el título, o bien para sustituir el título del gadget por una imagen.

Lo primero que hay que hacer es identificar el id del gadget al que se le quiere poner la imagen, para ello entra a Plantilla | Edición de HTML y SIN marcar la casilla de expandir artilugios busca el gadget al que vas a modificar, lo puedes identificar por el título, por ejemplo Etiquetas, o Lista de blogs.

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

En este ejemplo el id del gadget es Label1 y corresponde a las etiquetas del blog.
Ya teniendo el id del widget, pega antes de ]]></b:skin> lo siguiente:

#Label1 h2 {
background: url(URL de la imagen) left top;
color: #000;
}

Y así sucesivamente para todos los gadgets a los que quieras ponerle la imagen de fondo, sólo debes cambiar la URL de la imagen y en color cambiar el color del texto del título.

Si lo prefieres también puedes cambiar todo el título por una imagen, sólo que en su lugar pegamos antes de ]]></b:skin> esto:

#Label1 h2 {
background: url(URL de la imagen) no-repeat top;
height: 30px;
}

De igual forma hay que cambiar la URL de la imagen, y en heigth poner el alto de la imagen.
Ahora ve a Diseño y da click en Editar en el gadget al que le cambiaste el fondo y borra el título del gadget, en su lugar escribe esto:

&nbsp;

De esta forma el título del gadget no se encimará con la imagen de fondo.

Con estos sencillos trucos podrás tener una plantilla cada vez más personalizada, ya sólo es cuestión de que agregues las imágenes que se adapten al diseño de tu plantilla.

Efecto de opacidad en las imagenes

Este efecto de opacidad queda muy bien tanto en los posts del blog como en alguna imagen en la sidebar, se trata de crearle opacidad a una imagen pero al pasar el cursor sobre ella recupera el color original. Esta es una forma distinta y original de mostrar nuestras imágenes, o incluso de crear un menú.

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

/* OPACIDAD EN IMAGENES
----------------------- */
a.opacidad img {
  filter:alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  -khtml-opacity: 0.5;
  }

a.opacidad:hover img {
  filter:alpha(opacity=100);
  -moz-opacity: 1.0;
  opacity: 1.0;
  -khtml-opacity: 1.0;
  }

Ahora cuando quieras usar este efecto en una imagen dentro del post o en un elemento HTML/Javascript, usa este código:

<a class="opacidad" href="URL del enlace" src="URL de la imagen"><img src="URL de la imagen"></a>

Sólo agrega la URL del enlace si es que lo tiene, sino elimina esta parte: href="URL del enlace"

Como ves, la URL de la imagen va dos veces, esto es porque una es para mostrar la imagen con la opacidad y la otra es para mostrar la imagen con el color normal.

Agregar el botón de iGoogle

Para quienes no saben qué es iGoogle, digamos que es tu página de Google personalizada, la cual tiene el potente buscador Google y además puedes agregar contenido de terceros como noticias, pronóstico del tiempo, frases del día, correo electrónico, etc. De este modo conviertes tu habitual página de inicio de Google en una página personalizada con los gadgets que te interesan para tener todo a la mano.

Si aún no la tienes entra a iGoogle y accede con tu cuenta de Blogger o Gmail; añade los gadgets que quieras y listo.

Bien, entonces lo que haremos será crear un agregador para que tus lectores al pulsarlo puedan añadir a su iGoogle los últimos artículos de tu blog para que puedan estar al tanto de qué es lo que publicas.

Sólo entra a Diseño > Elementos de la página > Añadir un gadget y selecciona HTML/Javascript, ahí pega lo siguiente:

<div>Agrega mi blog en tu iGoogle</div>
<a href="http://fusion.google.com/add?source=atgs&moduleurl=http%3A//nombre-de-mi-blog.blogspot.com/feeds/posts/default"><img border="0" alt="Add to Google" src="http://buttons.googlesyndication.com/fusion/add.gif"/></a>

Sólo cambia el nombre de tu blog y listo, tus lectores podrán tener acceso al contenido de tu blog desde iGoogle.

Agrega a Ciudad Blogger en tu iGoogle

Ocultar el nombre de los gadgets

Cuando personalizamos la plantilla seguro agregamos varios gadgets como imágenes, códigos javascript, Adsense, etc. A muchos de estos gadgets no les ponemos nombre, pues en algunos casos no es necesario o simplemente no se ve bien.

El problema viene cuando estamos editando la plantilla y no sabemos qué gadget es cada uno, pues sólo aparece como HTML/Javascrip, Imagen, etc.:

Lo que haremos será darle nombre a los gadgets para que cuando estemos en Elementos de la página reconozcamos cada uno, pero que en el blog no se vean estos nombres.

Entra a Diseño > Elementos de la página y haz click en Editar en el gadget al que le vas a poner nombre y titúlalo como quieras, por ejemplo Adsense.
Luego entra a Diseño > Edición de HTML, marca la casilla Expandir artilugios y busca el gadget al que le has puesto nombre; el código será algo como esto:

<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Ahora sólo elimina lo que está en color rojo y listo, cuando estés en Elementos de la página podrás ver perfectamente los nombres de los gadgets pero estos no se mostrarán en el blog.

Haz el mismo procedimiento para todos los gadgets a los que desees ocultar el título.

Cambiar el color a los botones INPUT

Aunque esto la mayoría lo sabe hacer, aun me siguen preguntando seguido cómo hacer para cambiar el color de los botones de algunos gadgets, por ejemplo el botón de Buscar, el de Suscribir, etc.

El código común de un botón es como este:

<input value="Buscar" name="button" type="submit"/>

Lo único que hay que hacer es agregarle un estilo para que tenga un color de fondo:

<input style="background-color: #FF9900" value="Buscar" name="button" type="submit"/>

También puedes modificar el color de la letra, para ello agregamos el estilo "color":

<input style="color: #FF0000" value="Buscar" name="button" type="submit"/>

O bien, puedes cambiar ambos:

<input style="color: #003366; background-color: #99CCFF" value="Buscar" name="button" type="submit"/>

O si lo prefieres, puedes usar una imagen de fondo:

<input style="color: #ffffff; background: url('URL de la imagen')" value="Buscar" name="button" type="submit">

Puedes también ponerle un borde al botón del grueso y el color que quieras:

<input style="border: #000 1px solid; background-color: #FF99FF" value="Buscar" name="button" type="submit">

Como ves, puedes hacer muchas variaciones para decorar tus botones, sólo es cuestión de que eches a andar tu creatividad y dejarás de tener los típicos botones grises.

Recuerda que donde dice value="Buscar" es el texto que aparece en el botón, también puedes jugar un poco con él y cambiar ese texto por otro.

Ampliar imagen al hacer click

Anteriormente vimos cómo hacer para agrandar una imagen al pasar el mouse sobre ella; en esa ocasión usamos un poco de CSS para lograr ese efecto.

Esta vez haremos algo mucho más simple, con un simple código podremos ampliar una imagen al hacer click sobre ella, y reducirla de nuevo con un doble click, como en este ejemplo:

Click para ampliar, doble click para reducir

Lo único que tienes que hacer es poner el siguiente código dentro del post donde vas a mostrar la imagen:

<img onclick="javascript:this.width=450;this.height=338" ondblclick="javascript:this.width=100;this.height=80" src="URL de la imagen" width="100"/>

• Sólo debes cambiar la URL de la imagen (en su tamaño normal)
• El primer width y height son las medidas a la que se va agrandar la imagen al hacer clik, width es el ancho y height es el alto.
• El segundo width y height son las medidas a la que se va a reducir la imagen al hacer doble click.
• El último width es el ancho de la imagen que se mostrará al cargar la página, es decir el thumbnail, se recomienda que sea el mismo ancho que tendrá la imagen al reducirse cuando se haga doble click.

Como ven, sin necesidad de tocar la plantilla pueden usar este truco para mostrar una galería de fotos, o simplemente para reducir el espacio en el blog.

Iconos para celebrar los 10 años de Blogger

Como ya muchos saben, este mes (agosto) se cumplen 10 años de Blogger. Si bien en un inicio pensé hacer algo alusivo a esta fecha, desistí después de pelearme por horas con el Photoshop; sin embargo Sonieta en un comentario retomó la idea de hacer algún icono para que nos unamos en la celebración de los 10 años, así que limé asperezas con el Photoshop y me dispuse a hacer un par de iconos de libre distribución para que todo aquél que desee ponerlo en su blog durante este mes, o el resto del año, lo haga y se una al festejo del que todos somos parte.

Los iconos están en medida de 64x64 y 128x128 en formato PNG y como les dije, son de uso libre.

Si te animas a hacer tu propio diseño y lo quieres compartir, mándalo a admin@ciudadblogger.com para que se publique aquí con su respectivo reconocimiento por supuesto.

Espero que les agraden y que los usen.

¡Felices 10 años!

Gracias a Meri que también se sumó a esta iniciativa y ha decidido compartir el ícono que hizo; es un ícono animado en formato GIF en medidas de 100x90 y ya se encuentra disponible dentro del archivo descargable.

HP muggle también ha querido unirse al festejo de Blogger y nos comparte el ícono que hizo; es un diseño animado en formato GIF en medidas de 125x125, disponible en el pack para descarga.

Descargar pack de iconos

Blogger: 10 años contando historias

Hace una década un nuevo proyecto de comunicación comenzaba, el sistema de mensajería instantánea Messenger recién salía a la luz y la tecnología de blogs no era muy conocida. Fue entonces que en agosto de 1999 la empresa Pyra Labs, lanzó uno de los sistemas de weblog más populares, Blogger.

A pesar de que Blogger contaba con una interfaz única en su tipo y que facilitaba la publicación de entradas para usuarios sin conocimientos de programación y hosting, éste, como muchos servicios gratuitos, limitaba a los usuarios con ciertas características, ofreciendo mayor ventaja a los usuarios premium quienes debían pagar 35 dólares al año por estos beneficios.

Google ya tenía fuerza en el ámbito de Internet y se interesó en este proyecto, por lo que en el 2003 con 1,1 millones de usuarios, adquirió a Pyra Labs y a Blogger junto con ella. En ese momento las características premium fueron abiertas y habilitadas para todo el público.

Un año más tarde Google compró Picasa, por lo que limitarse sólo al texto en los blogs se volvió cosa del pasado.

Han sido 10 años de cambios para Blogger, cambios que han revolucionado la comunicación entre los usuarios de Internet.

10 años en los que has podido contar tus historias, aprender, enseñar, relatar fragmentos de tu vida, relatar tu vida entera, reírte, desahogarte, llorar, enojarte, gritar al mundo lo que piensas, lo que amas, lo que odias, lo que tanto deseas.

Una decada para hacer nuevos amigos, adoptar familias, encontrar pareja, crear alianzas. Para hacer del mundo tu confidente y compartir tus miedos, tus secretos, tus angustias.

10 años en los que has salido de clase para leer los comentarios, te has desvelado ayudando a más gente, creando, innovando, reinventando.

10 años de Blogger que son tuyos... pues tú formas parte de Blogger y Blogger se hecho parte de nuestras vidas.

¡Felicidades por estos 10 años!

Reproductor flash de mp3 para el blog

Navegando por la red me encontré con un reproductor de música mp3 en formato flash que me pareció muy bueno el diseño. El diseño es de neolao y es muy parecido al reproductor Dewplayer que habíamos visto antes, sólo que la interfaz es distinta.

Este reproductor al igual que el Dewplayer es muy útil para agregar audio a nuestros posts o para agregar música de fondo al blog.

Hay tres versiones de este reproductor, la normal, maxi y multi.

Para usarlo debes tener tu música en formato mp3 subida en Internet, ya que la tengas lista, entra a Diseño | Añadir un gadget, selecciona HTML/Javascript y ahí pega el código del reproductor que te guste:

Versión Normal:

<object data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="200" height="20" type="application/x-shockwave-flash"> <param value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" name="movie"/> <param value="#ffffff" name="bgcolor"/> <param value="mp3=http%3A//URL de la canción.mp3" name="FlashVars"/> </object>

Versión Maxi:

<object data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="200" height="20" type="application/x-shockwave-flash"> <param value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" name="movie"/> <param value="#ffffff" name="bgcolor"/> <param value="mp3=http%3A//URL de la canción.mp3&amp;showstop=1&amp;showinfo=1&amp;showvolume=1" name="FlashVars"/> </object>

Versión Multi:

<object data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="200" height="100" type="application/x-shockwave-flash"> <param value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" name="movie"/> <param value="#ffffff" name="bgcolor"/> <param value="mp3=http%3A//URL de la canción UNO.mp3|http%3A//URL de la canción DOS.mp3&amp;showvolume=1&amp;showinfo=1" name="FlashVars"/> </object>

Sólo hay que cambiar lo que está en color rojo por la URL de la canción en formato mp3 teniendo en cuenta que el http:// no se pone, pues el código ya lo tiene como http%3A//

Si quisieras que el audio se reproduzca automáticamente entonces al final de la URL agrega esto:

&amp;autoplay=1

Quedaría así: http%3A//mimusica.com/cancion.mp3&amp;autoplay=1 En la versión multi para agregar más canciones hay que agregar al final de cada URL lo siguiente más la URL de la canción:

|http%3A//

Por ejemplo: http%3A//URL de la canción UNO.mp3|http%3A//URL de la canción DOS.mp3|http%3A//URL de la canción TRES.mp3 Para mostrar los títulos de las canciones añade al final de la última canción lo siguiente:

&amp;title=Título 1|Título 2

Se vería así: http%3A//mimusica.com/cancion.mp3&amp;title=Título 1|Título 2

El reproductor es muy sencillo, útil y funciona con todos los navegadores de Internet. Si quisieras cambiar los colores del reproductor, botones o incluso agregarle una imagen de fondo puedes hacerlo directo en la página del reprodcutor, sólo haz los cambios que quieras y copia el código que pegarás en tu blog.

Página del reproductor: MP3 Player

Menu desplegable

Los menús desplegables tienen la ventaja de ocupar muy poco espacio y esto puede beneficiarle a muchos bloggers. Crear un menú desplegable es muy sencillo, sólo hay que abrir un elemento HTML/Javascript y ahí pegar esto:

<select onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" class="desplegable" name="menu" size="1">
<option selected/>Seleccionar...
<option value=""/>- - - - - - - - - -
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
</select>

Sólo hay que agregar las URL de las páginas del menú y el título de la opción.
El resultado será este:
Seleccionar... - - - - - - - - - - Herramientas Descargas Dominios Imágenes Posicionamiento

Si quisieras añadirle color entonces entra a Diseño > Edición de HTML y antes de ]]></b:skin> pega lo siguiente:

.desplegable {
background-color: #ccc;
color: #000;
}

En background-color puedes elegir el color de fondo del menú, y en color puedes escoger el color de las letras.
El resultado será este:
Seleccionar... - - - - - - - - - - Herramientas Descargas Dominios Imágenes Posicionamiento

Quitar el icono de Blogger en los comentarios

Siguiendo con la personalización de los comentarios, vamos a quitar el ícono de Blogger que aparece antes del nombre del usuario que comenta.

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

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>

Si no lo encuentras quizá aparezca así:

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

Sólo tienes que eliminarlo y en su lugar poner esto:

<dt class='comment-author' expr:id='data:comment.anchorName'>

Con esto habrás eliminado el icono de Blogger de los comentarios.

Cambiar el "dijo..." de los comentarios

Todos los comentarios, ya sean del autor, anónimos o de usuarios registrados llevan la palabra "dijo..." después del nombre de usuario.

Esto no es ningún problema para nadie, sin embargo puedes cambiar ese texto y usar la frase que quieras con el fin de personalizar más los comentarios.

Sólo entra a Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:

<data:commentPostedByMsg/>

Sustituye esa línea por la palabra que quieras, opinó, comentó, etc.

Ganador del concurso de Respondones

Después de tres largas semanas ha finalizado el Concurso de Respondones y ya hay un ganador.

Se inscribieron un total de 9 participantes y todos ellos cumplieron con las bases del concurso.

El sorteo se realizó a través de Random.org a las 10:08 (GMT -08:00 / Hora del Pacífico EE.UU) donde se ingresaron las direcciones web de los nueve participantes y la primera dirección arrojada al azar fue el ganador del concurso, el cual se ha llevado:

• 1 dominio gratis por un año
• Redireccionamiento de dominio
• Redireccionamiento de correos
• Protección de privacidad de datos
• 1 banner por 1 mes en Respondones (125x125)
• 1 banner por 1 mes en Fondos 240 (115x80)

Pueden ver el sorteo y al ganador en el siguiente video:

¡¡¡Felicidades al ganador!!!

Gracias a Cyberbloggero y Respondones por este concurso y sobre todo a todos los participantes que se inscribieron.

Los que no ganaron por ahora no se preocupen que pronto habrá más regalos.

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