Blogging Tips: April 2011

Thursday, April 28, 2011

?Qu� es un feed?

La mayor?a ya debe saber qu� es un feed y c?mo funciona, pero para los que apenas est?n comenzando con un blog o reci�n se adentran al mundo de la informaci?n electr?nica, y no saben qu� es el feed y para qu� sirve, vamos a explicarlo con esta entrada.

?Qu� es un feed?

Un feed es un medio por el cual los usuarios pueden leer las entradas de un sitio Web o parte de ellas; el feed en s? es un archivo que contiene la informaci?n del contenido del blog y que se actualiza de forma autom?tica.

Esto significa que cuando est�s interesado en un blog puedes suscribirte a su feed y de esta forma sabr?s cuando haya un contenido nuevo el cual podr?s leerlo desde tu lector de feeds.

Seguro te preguntar?s si existe una ventaja al suscribirse a un feed, y la respuesta es s?; supongamos que te gustan 50 blogs que lees regularmente, ?te imaginas tener que estar entrando a esos 50 blogs a cada rato para saber si han escrito algo nuevo? Podr?as perder mucho pero mucho valioso tiempo. En cambio si te suscribes al feed de esos blogs sabr?s cuando haya una nueva entrada en alguno de ellos sin haber tenido que ir hasta cada uno de esos sitios para averiguarlo.

En palabras m?s cortas, suscribirte a un feed hace que en lugar de que t? vayas a la informaci?n sea la informaci?n la que vaya hacia a ti.

?C?mo me suscribo al feed de un blog?

Cuando te interese estar al tanto de las actualizaciones de un blog puedes suscribirte al feed de �ste. En la mayor?a de los casos ver?s este icono

y haciendo click en �l o en el enlace que est� junto a �l podr?s conseguir la suscripci?n a ese blog.
O bien, si ya usas un lector de feeds s?lo necesitas agregar en �l la URL del blog y el lector de feeds se encargar? de buscar el feed por ti.

?C?mo puedo leer los feeds a los que me suscribo?

Cuando te suscribes a un feed necesitas elegir un lector de feeds que es el lugar donde se almacenar?n todos los feeds a los que te suscribas y ser? �ste lector quien visite de forma peri?dica esos blogs que te gustan para informarte cuando haya contenido nuevo; �ste lector puede ser una aplicaci?n para tu computadora, un sitio online como Google Reader, o desde tu correo electr?nico.

En cualquiera de los dos primeros casos necesitas entrar cuando lo desees para revisar si hay alg?n art?culo nuevo en cualquiera de todos los sitios donde est?s suscrito; en el caso de la suscripci?n por correo no necesitar?s hacerlo pues cuando haya un nuevo art?culo en alguno de los blogs a los que est?s suscrito te llegar? un correo con la informaci?n respectiva.

?C?mo activo el feed de mi blog para que la gente se suscriba?

Si tienes un blog de Blogger entonces ya tienes un feed de forma autom?tica y por defecto est? activado para que tus lectores puedan suscribirse a �l.

Para verificar que tu feed est? activado entra en Configuraci?n | Feed del sitio | Permitir feeds del blog, ah? puedes seleccionar Completo si es que quieres que aparezca todo el contenido de la entrada en los feeds, o Corto si quieres que s?lo se vea el t?tulo del post.

La URL del feed de tu blog es en todos los casos as?:

http://nombre-de-mi-blog.blogspot.com/feeds/posts/default

?Qu� es un gestor de feeds?

Un gestor de feeds se encarga de administrar los feeds de los blogs que posees. Estos gestores se ocupan de distribuir a los suscriptores las actualizaciones del contenido de tu blog, y en la mayor?a de los casos te muestran estad?sticas de tus feeds tales como el n?mero de suscriptores. El m?s popular, reconocido por las distintas herramientas que tiene, es Feedburner, que adem?s es un producto de Google. En la pr?xima entrada veremos c?mo crear un feed ah?.

Y ya que estamos con este tema recuerda que puedes suscribirte a nuestro feed para leernos deste tu lector o tambi�n puedes suscribirte por correo electr?nico.

Wednesday, April 27, 2011

Gadget de etiquetas en forma de men? desplegable

Ya que seguimos con el tema de ahorrar espacio en el blog veamos c?mo podemos mostrar las etiquetas en forma de men? desplegable, esto ser? para ahorrar espacio y para tener las etiquetas con otro estilo diferente al tradicional.

Cuando usamos el gadget de etiquetas �stas se muestran en forma de lista ordenada:

Lo que haremos ser? que se muestren de esta forma:

S?lo necesitas entrar en Dise?o | Edici?n de HTML, marcar la casilla Expandir plantillas de artilugios y buscar este c?digo:

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>

Elim?nalo y en su lugar pega esto:

<br/>
<select class='menu-etiquetas' onchange='location=this.options[this.selectedIndex].value;'>
<option>Selecciona una categor?a</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Con eso ser? suficiente. Puedes cambiar el texto Selecciona una categor?a donde se indica. Si quieres que no se muestren el n?mero de entradas que tiene cada etiqueta elimina lo que est? en color azul.

Tambi�n puedes darle un poco de color para que se vea m?s o menos de esta forma:

Si lo quieres as? sigue el mismo procedimiento pero adicionalmente deber?s pegar antes de
]]></b:skin> este c?digo:

.menu-etiquetas {
background-color: #CEE3F6; /* Color de fondo */
color: #000000; /* Color del texto */
}

Ah? puedes cambiar los colores donde se indica.
No est? de m?s decir que primero necesitas tener el gadget de Etiquetas... digo, por si alguien busca el c?digo y no lo encuentra.

Monday, April 25, 2011

Expandir y contraer gadgets con efecto deslizante

Muchas veces algunos gadgets se vuelven muy largos con el paso de tiempo, como el de Etiquetas, Archivo del blog, Lista de enlaces, etc. y estos comienzan a ocupar demasiado espacio en la sidebar, as? que una buena forma de ahorrarnos ese espacio es contraer los gadgets para que se expandan s?lo cuando el lector quiera verlos, y adem?s de eso con un efecto deslizante.

Puedes ver un ejemplo en este blog de pruebas.

Para hacer esto en los gadgets vamos a usar Scriptaculous que es el que le dar? el efecto deslizante.

S?lo vamos a Dise?o | Edici?n de HTML y marcamos la casilla Expandir plantillas de artilugios.

Agrega antes de </head> lo siguiente:

<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>

Ahora localizamos el gadget al que queremos aplicarle el truco, por ejemplo, un gadget HTML/Javascript ser?a m?s o menos as?:

<b:widget id='HTML1' locked='false' title='T?tulo del gadget' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle("ExpandGadget1","slide"); return false'>


<b:if cond='data:title != ""'>
<h2 class='title'>▼▲ <data:title/></h2>
</b:if>
</a><div align='center' id='ExpandGadget1' style='display: none; text-align:left;'>
<div class='widget-content'>
<data:content/>
</div>

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

Agrega lo que est? en color rojo y listo. Aqu? lo que se debe tomar en cuenta es que cada vez que se ponga en un gadget se debe cambiar lo que est? en color azul por otro nombre, por ejemplo ExpandGadget2, ExpandGadget3, etc. o cualquier otro nombre pero nunca debe ser igual a otro que ya tengamos.

Es seguro que la estructura de algunos gadgets no se vean como el del ejemplo pues �stos var?an seg?n el tipo de gadget que sean, pero para saber d?nde debemos poner el c?digo s?lo hay que guiarnos por los c?digos que est?n en color gris, as? que s?lo localiza la primera l?nea gris y debajo pega el primer c?digo en rojo, luego localiza la segunda parte gris y ah? deber?s pegar alrededor lo otro en color rojo, y por ?ltimo busca la ?ltima l?nea gris y arriba de ella pega el ?ltimo c?digo rojo.

No est? de m?s recordarles que se usa Scriptaculous y que no es compatible con jQuery, as? que si usas jQuery entonces deber?s realizar el hack para que puedan funcionar las dos librer?as juntas.

Tuesday, April 19, 2011

Spoiler para ocultar y mostrar contenido en una entrada

Algunas veces tenemos mucho contenido que agregar en una entrada pero no queremos mostrarlo todo de un solo golpe, ya sea porque no queremos que la entrada se haga demasiado larga o porque queremos que el contenido se vaya descubriendo poco a poco.
Y s?, ya antes hab?amos visto c?mo expandir y contraer partes de una entrada usando Scriptaculous y que le da un efecto deslizante, pero como a muchos no les gusta usar Scriptaculous vamos a ver otra forma de hacerlo usando un simple javascript que aunque no tendr? efecto alguno cumple su funci?n muy bien, que ser? la de mostrar y ocultar contenido.

Puedes ver un ejemplo haciendo click en el siguiente bot?n.

Podemos incluir dentro cualquier cosa que se nos ocurra, ya sea una tabla, una imagen, un reproductor de audio, un video, etc.

Para usarlo en tu blog s?lo basta con poner este c?digo en una entrada cada vez que lo quieras usar:

<div class="divspoiler">
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
Aqu? el contenido que queremos ocultar
</div></div>

Ah? s?lo tienes que agregar donde se indica el contenido que quieres ocultar. Si el bot?n no te gusta mucho puedes leer esta entrada para saber c?mo personalizar los botones.
O bien, puedes usar un enlace de texto en lugar de un bot?n

Mostrar / Ocultar ▼▲

En ese caso el c?digo a usar es este:

<div class="divspoiler">
<a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Mostrar / Ocultar ▼▲</a>
</div><div><div class="spoiler" style="display: none;">
Aqu? el contenido que queremos ocultar
</div></div>

O si lo prefieres tambi�n puedes usar una imagen.

Ah? el c?digo ser?a este:

<div class="divspoiler">
<img src="URL de la imagen" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="spoiler" style="display: none;">
Aqu? el contenido que queremos ocultar
</div></div>

Bastante pr?ctico y f?cil de usar ?no? Puedes agregar varios en la misma entrada sin necesidad de cambiar alguna ID ni nada de eso. S?lo procura no cambiar a la pesta?a Redactar una vez que lo pongas y no modifiques los espacios del c?digo para que funcione correctamente.

Wednesday, April 13, 2011

Ganadores del concurso para seguidores de Facebook

Despu�s de que algunos se aguantaron las ganas de comer e incluso de ir al ba?o con tal de estar atentos a las preguntas del concurso, ya tenemos ganadores.

Definitivamente los concursos cada vez se ponen m?s buenos, pero no porque se hagan aqu? sino porque la participaci?n de todos es incre?ble, hab?a nervios, risas, enojo y hasta varios aprovecharon la oportunidad de hacer amigos y ayudarse en los temas del blog, ese es el carisma que tienen los bloggers hispanos ?s? se?or!

Y bueno, al final y para sorpresa de muchos no fueron tres premios los que se entregaron sino cuatro :)

As? es, al final se regalo 1 dominio m?s!

Los ganadores del Concurso para los seguidores de Facebook son los siguientes:

Concursante	Premio
Spikcity Friend	1 eBook "El Nuevo Libro de Cocina Dietetica del Dr. Atkins"
David Luviano	1 eBook "C?mo ser altamente atractivo con las mujeres"
Mois�s Reyes	1 dominio por un a?o
Nicolas Fidalgo	1 dominio por un a?o

Estas fueron las preguntas:

Nuevamente gracias a todos por la participaci?n siempre tan positiva con los concursos, y por supuesto gracias a los patrocinadores pues sin ellos no habr?a presupuesto para entregar estos premios.

Si a?n no has ganado no te desanimes que nos veremos pronto para seguir repartiendo m?s premios :)

Monday, April 11, 2011

Concurso para los seguidores de Facebook

Como reci�n acabamos de llegar a los 7000 seguidores en Facebook se me ha ocurrido hacer un concurso express para entregar unos regalitos a manera de agradecimiento por acompa?arnos tambi�n en las redes sociales pues la respuesta que hemos tenido por parte de ustedes ha sido b?rbara.

En esta ocasi?n ser? un concurso r?pido para que los seguidores de Facebook puedan ganarse uno de los tres excelentes premios que se entregar?n.

PREMIOS

El concurso tendr? tres ganadores y cada uno de ellos podr? llevarse uno de los siguientes premios:

1 dominio por un a?o

El ganador podr? elegir un dominio con extensi?n .com o .net con duraci?n de un a?o.
El dominio incluye autoria legal del dominio durante el tiempo de contrataci?n, una cuenta de Google Apps y manejo total de DNS.

1 ejemplar del eBook "C?mo ser altamente atractivo con las mujeres"

Este interesante libro electr?nico del autor Luis Kasanova nos explica los secretos para ser altamente seductivos con el sexo femenino.

En el libro encontrar?s una serie de consejos y estrategias que te guiar?n para saber c?mo convertirte en un exitoso seductor y conseguir tus objetivos en las artes del amor, adem?s incluye 5 art?culos exclusivos que te dir?n c?mo atraer a una mujer.

Autor: Luis Kazanova | Formato: PDF | P?ginas: 90 | A?o: 2010 | Software requerido: Adobe Reader
M?s informaci?n...

1 ejemplar del eBook "El Nuevo Libro de Cocina Dietetica del Dr. Atkins"

El famoso doctor Robert Atkins autor de la mundialmente conocida dieta Atkins expone en esta edici?n electr?nica, suculentas comidas nutritivas bajas en carbohidratos que puedes servir en la mesa en diez minutos, los cuales incluyen desayunos, sopas, aperitivos, platos principales, panes, postres, meriendas y delicias culinarias que dar?n un buen gusto y adem?s te har?n bajar de peso.

Autor: Dr. Robert Atkins y Veronica Atkins | Formato: EPUB | P?ginas: 224 | A?o: 2010 | Software requerido: Adobe Digital Editions
M?s informaci?n...

MEC?NICA DEL CONCURSO

Durante el transcurso del d?a mi�rcoles 13 de abril se har?n 3 preguntas en nuestra p?gina de Facebook, en cada pregunta se dir? cu?l es el premio a ganar, y la primera persona en responder correctamente a la pregunta se har? acreedor al premio por el que el concursante haya participado. S?lo puede haber un ganador por pregunta, as? que ese d?a deber?n estar muy atentos a nuestra p?gina de Facebook.

BASES DEL CONCURSO

Podr? participar cualquier persona que tenga una cuenta en Facebook y que sea seguidor de Ciudad Blogger en Facebook, si a?n no lo has hecho puedes entrar a nuestra p?gina y dar click en Me gusta.

S?lo podr? haber un premio por ganador, por lo que un ganador no podr? participar en las otras preguntas ni podr? concursar con diferentes cuentas pertenecientes al mismo usuario.

Para conocer todos los t�rminos y condiciones del concurso visita este enlace.

As? que prep?rate este mi�rcoles para responder y ganarte uno de los tres premios y si a?n no eres seguidor de Ciudad Blogger en Facebook??qu� esperas?!

AVISO: Los libros en formato electr?nico que se entregar?n son copias originales y cuentan con licencia, �stos ser?n entregados a trav�s de los sitios autorizados para su distribuci?n.

Friday, April 8, 2011

Men? horizontal con subpesta?as hecho con CSS

El siguiente men? es un men? horizontal con subpesta?as llamado Professional dropdown y es creado por Stu nicholls. Est? hecho a base de CSS y tiene un aire de elegancia y profesionalismo con la posibilidad de agregar subpesta?as dentro de las subpesta?as por lo que lo hace un men? de multiniveles bastante pr?ctico.
Puedes verlo funcionando en el ejemplo de abajo.

Aunque agregarlo al blog pueda parecer complicado la verdad es que es bastante sencillo, as? que empecemos y veamos c?mo se hace.

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.

Primero entramos en Dise?o | Edici?n de HTML y antes de ]]></b:skin> pega los estilos:

#nav {
padding:0;
margin:0;
list-style:none;
height:28px;
position:relative;
z-index:500;
font-family:arial, verdana, sans-serif;
}
#nav li.top {display:block; float:left;}
#nav li a.top_link {
display:block;
float:left;
height:28px;
line-height:27px;
color:#ccc;
text-decoration:none;
font-size:11px;
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp3lHWIVZoUfMifFildx28JhXif1B5fUUEx-JGcu6TU9Ph1M6zgvpiD7vGzls6EEIdu5wLKZiRpjJ593j0YQJbtn5nI_9F-m2VYBsWzQtJgXo7E9EypOZZDYq60Wv5qtzaX19hitxoqpJo/);
}
#nav li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:28px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp3lHWIVZoUfMifFildx28JhXif1B5fUUEx-JGcu6TU9Ph1M6zgvpiD7vGzls6EEIdu5wLKZiRpjJ593j0YQJbtn5nI_9F-m2VYBsWzQtJgXo7E9EypOZZDYq60Wv5qtzaX19hitxoqpJo/) right top;
}
#nav li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:28px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78Y9xGD4xg3IIlafOigM86RwDzkmdTIqwgUY-d5P67fAj1RE4rbw_ljRpNVYNilkJwN7sE_98yGeTWtqn-WeCSGxPwujVWfArWJ_ue6vjDTr7UyMOXuvsw4s1J53jiO-kGtBgxO99BdR-/) no-repeat right top;
}
#nav li a.top_link:hover {color:#fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HWhGL4HvdZ3ACsv_L_a8K0Ru2FTO-3cUyuHr-hgNHFWiseFJr5m-f5k2oaiJaap_B-T8dT57vTcVfZ1b4bFGSb73if93mIXighnhIwjyD9LhQEWCh6BYEzUm6fa7GnBrY0CCLaS0DUbH/) no-repeat;}
#nav li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HWhGL4HvdZ3ACsv_L_a8K0Ru2FTO-3cUyuHr-hgNHFWiseFJr5m-f5k2oaiJaap_B-T8dT57vTcVfZ1b4bFGSb73if93mIXighnhIwjyD9LhQEWCh6BYEzUm6fa7GnBrY0CCLaS0DUbH/) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQWQ723pFbm8kK4YDvdKDdGSCZKIWIS5UFExFnJctZ_3ST_0CKvh7w-gRV05B3SVXgFdHC_zmH1WNY0DOS_qdTI4irl0wn12vWz48XxzlT9bcUYBX8DnPhPzAHPrHLDuzo-y0rUMrQ5Usk/) no-repeat right top;}

#nav li:hover > a.top_link {color:#fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HWhGL4HvdZ3ACsv_L_a8K0Ru2FTO-3cUyuHr-hgNHFWiseFJr5m-f5k2oaiJaap_B-T8dT57vTcVfZ1b4bFGSb73if93mIXighnhIwjyD9LhQEWCh6BYEzUm6fa7GnBrY0CCLaS0DUbH/) no-repeat;}
#nav li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HWhGL4HvdZ3ACsv_L_a8K0Ru2FTO-3cUyuHr-hgNHFWiseFJr5m-f5k2oaiJaap_B-T8dT57vTcVfZ1b4bFGSb73if93mIXighnhIwjyD9LhQEWCh6BYEzUm6fa7GnBrY0CCLaS0DUbH/) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQWQ723pFbm8kK4YDvdKDdGSCZKIWIS5UFExFnJctZ_3ST_0CKvh7w-gRV05B3SVXgFdHC_zmH1WNY0DOS_qdTI4irl0wn12vWz48XxzlT9bcUYBX8DnPhPzAHPrHLDuzo-y0rUMrQ5Usk/) no-repeat right top;}

#nav li:hover {position:relative; z-index:200;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover ul.sub{
left:0;
top:28px;
background: #fff;
padding:3px;
border:1px solid #3a93d2;
white-space:nowrap;
width:90px;
height:auto;
z-index:300;
}
#nav li:hover ul.sub li{
display:block;
height:20px;
position:relative;
float:left;
width:90px;
font-weight:normal;
}
#nav li:hover ul.sub li a{
display:block;
font-size:11px;
height:20px;
width:90px;
line-height:20px;
text-indent:5px;
color:#000;
text-decoration:none;
}
#nav li ul.sub li a.fly
{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuF77fGGhxThBZbFWhOiVv9HlZmcoPxnEGVu1aJ4aT-D5LYnoisED5hvMZg0QcvK6U6GDF62a0lrdmeyIP1AfAMRmOuXKUvSSzKyQgHS0BzS4qw0WOeNAgmx2nCsVp6jKK9hQ3PBVVmOZN/) 80px 7px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3a93d2; color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3a93d2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMm7zw3hlo7y1sEwwLMtLoEL2he_0GreEeUCP7VneK8uDymrHleg_dE8_CHvuZC7YwYiLP4no2dKXiTKNiiObED27xe0pY1rGUGHzgNjwDSyRqWnpTYUuGlh5BluHw8wHsie6D0yPwifN/) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMm7zw3hlo7y1sEwwLMtLoEL2he_0GreEeUCP7VneK8uDymrHleg_dE8_CHvuZC7YwYiLP4no2dKXiTKNiiObED27xe0pY1rGUGHzgNjwDSyRqWnpTYUuGlh5BluHw8wHsie6D0yPwifN/) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}

Ahora entra en Dise?o | Elementos de la p?gina | A?adir un gadget | HTML/Javascript y ah? pega lo siguiente:

<ul id="nav">
<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña 1</span></a></li>

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña 2</span></a><ul class="sub"><li><a href="#" class="fly">Pestaña 2.1</a><ul>
<li><a href="URL del enlace">Pestaña 2.1.1</a></li>
<li><a href="URL del enlace">Pestaña 2.1.2</a></li>
<li><a href="URL del enlace">Pestaña 2.1.3</a></li>
</ul>
</li>
<li class="mid"><a href="#" class="fly">Pestaña 2.2</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.2.3</a></li>
<li><a href="#" class="fly">Pestaña 2.2.4</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.2.4.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2.4.2</a></li>
<li><a href="URL del enlace">Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 2.2.5</a></li>
<li><a href="#" class="fly">Pestaña 2.2.6</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.2.6.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 2.3</a></li>
<li><a href="URL del enlace">Pestaña 2.4</a></li>
<li><a href="URL del enlace">Pestaña 2.5</a></li>
</ul>
</li>

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña 3</span></a>
<ul class="sub">
<li><a href="URL del enlace">Pestaña 3.1</a></li>
<li><a href="URL del enlace">Pestaña 3.2</a></li>
<li><a href="URL del enlace">Pestaña 3.3</a></li>
<li><a href="URL del enlace">Pestaña 3.4</a></li>
</ul>
</li>

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña 4</span></a>
<ul class="sub">
<li><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="#" class="fly">Pestaña 4.2</a>
<ul>
<li><a href="URL del enlace">Pestaña 4.2.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2.2</a></li>
<li><a href="URL del enlace">Pestaña 4.2.3</a></li>
<li><a href="URL del enlace">Pestaña 4.2.4</a></li>
<li><a href="URL del enlace">Pestaña 4.2.5</a></li>
<li><a href="URL del enlace">Pestaña 4.2.6</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 4.3</a></li>
<li><a href="URL del enlace">Pestaña 4.4</a></li>
<li><a href="URL del enlace">Pestaña 4.5</a></li>
<li><a href="URL del enlace">Pestaña 4.6</a></li>
</ul>
</li>

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña 5</span></a>
<ul class="sub">
<li><a href="URL del enlace">Pestaña 5.1</a></li>
<li><a href="URL del enlace">Pestaña 5.2</a></li>
<li><a href="URL del enlace">Pestaña 5.3</a></li>
</ul>
</li>

<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña 6</span></a></li>

</ul>

Ya s?lo agrega la URL de los enlaces y el nombre de las pesta?as donde se indica.
Si quisieras agregar otra pesta?a simple s?lo a?ade antes del ?ltimo </ul> una l?nea como esta:

<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña</span></a></li>

Si quisieras agregar una pesta?a con subpesta?as entonces agrega este c?digo:

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña</span></a>
<ul class="sub">
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
</ul>
</li>

Y si quisieras que una de las subpesta?as tuviera otras subpesta?as entonces elimina una l?nea como la que est? en color verde y c?mbiala por un c?digo como este:

<li><a href="#" class="fly">Sub pestaña</a>
<ul>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
</ul>
</li>

Y eso es todo. Como dije antes, la instalaci?n es sencilla pero puede parecer complicado cuando se quieren agregar las subpesta?as pero una vez entendiendo la estructura del men? ser? pan comido.
?Y el color de fondo? El color del men? as? como de las subpesta?as est? hecho a base de im?genes as? que quien quiera cambiarle de color tendr? que editar todas las URLs de las im?genes que se encuentran en el primer c?digo.

Wednesday, April 6, 2011

Gadget de traductor de Microsoft

Hace ya alg?n tiempo vimos c?mo poner un traductor de Google en el blog, y ?ltimamente me han preguntado sobre el traductor de Microsoft Translator. Aunque no es muy popular lo cierto es que al menos del espa?ol al ingl�s las traducciones suelen ser muy buenas, y en otros idiomas... no lo s�, pero quien lo haya usado para otras lenguas podr? darnos una mejor opini?n.

El gadget es peque?o, atractivo visualmente y funcional. Al igual que el traductor de Google, guarda las cookies con la preferencia del idioma que se haya traducido, para cuando el lector regrese a la p?gina vuelva a ver el idioma de su selecci?n sin tener que elegirlo nuevamente.
Tambi�n agrega una barra de herramientas en la parte superior del blog, de esta forma el usuario sabe que est? en una p?gina traducida y con s?lo cerrarla se eliminan las cookies y se regresa al idioma original del blog.

Traducir esta p?ginaMicrosoft� Translator

Para agregar este gadget de traductor primero vamos a la p?gina de Microsoft Translator

En Site adress escribe la direcci?n del blog donde lo vas a poner.

En Site language, el idioma original de tu blog.

Marca la casilla Display widget control, si quieres que el gadget siempre est� visible y el usuario sea quien decida traducir la p?gina. Si no quieres que sea as? desmarca esa casilla y en Translation settings podr?s elegir entre entre Notify y Auto. El primero de estos dos mostrar? una barra de herramientas para preguntar si se desea traducir la p?gina, y la segunda opci?n de estas no preguntar? sino que traducir? autom?ticamente al idioma del lector. Si usan alguna de estas dos opciones seguro ustedes no notar?n ninguna traducci?n ni ver?n el gadget pues s?lo funcionar? cuando el gadget detecte que el idioma del lector es distinto al idioma del blog, en este caso distinto al espa?ol.

Seguimos, en Color, selecciona el color que tendr? el gadget.

En Widget width, puedes arrastrar la barra para seleccionar el ancho del traductor.

Por ?ltimo ve abajo de la p?gina y marca la casilla de aceptaci?n de los t�rminos y condiciones; da click en Generate code y copia el c?digo.

Ahora entra en Dise?o | Elementos de la p?gina | A?adir un gadget | HTML/Javascript y ah? pega el c?digo que has copiado anteriormente.

Y eso es todo. Si lo quieres m?s f?cil s?lo copia este c?digo y p�galo en un elemento HTML/Javascript:

<div id="MicrosoftTranslatorWidget" style="width: 200px; min-height: 0px; border-color: #3A5770; background-color: #78ADD0;"><noscript><a href="http://www.microsofttranslator.com/bv.aspx?a=http%3a%2f%2ftublog.blogspot.com%2f">Traducir esta p?gina</a><br />Con tecnolog?a de <a href="http://www.microsofttranslator.com">Microsoft� Translator</a></noscript></div> <script type="text/javascript"> /* <![CDATA[ */ setTimeout(function() { var s = document.createElement("script"); s.type = "text/javascript"; s.charset = "UTF-8"; s.src = ((location && location.href && location.href.indexOf('https') == 0) ? "https://ssl.microsofttranslator.com" : "http://www.microsofttranslator.com" ) + "/ajax/v2/widget.aspx?mode=manual&from=es&layout=ts"; var p = document.getElementsByTagName('head')[0] || document.documentElement; p.insertBefore(s, p.firstChild); }, 0); /* ]]> */ </script>

Cambia el nombre de tu blog donde se indica. En width podr?as modificar el ancho del gadget, en border-color puedes cambiar el color del borde del gadget que es la parte gruesa superior, y en background-color puedes cambiar el color que prefieras.

Monday, April 4, 2011

Spacegallery: Una galer?a de im?genes muy diferente

Hay muchos tipos de galer?as para im?genes que nos encontramos en la red, pero pocas veces vemos una que muestre las im?genes de una forma tan diferente como esta.

Los que usan Mac OS X seguramente encontrar?n mucha similitud con TimeMachine y los que no de cualquier forma estoy seguro que disfrutar?n este tipo de efectos para ver las im?genes.

Se trata de Spacegallery, una galer?a de im?genes hecha con jQuery en la cual las im?genes aparecen una detr?s de la otra al hacer click. Puedes verlo en el ejemplo de abajo.

Para usar esta galer?a primero descarga este archivo, descompr?melo y sube los tres scripts a un hosting. Luego pega antes de </head> lo siguiente:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='URL del archivo eye.js' type='text/javascript'/>
<script src='URL del archivo utils.js' type='text/javascript'/>
<script src='URL del archivo spacegallery.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
(function($){
var initLayout = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('ul.navigationTabs a')
.bind('click', showTab)
.filter('a[rel=' + hash + ']');
if (currentTab.size() == 0) {
currentTab = $('ul.navigationTabs a:first');
}
showTab.apply(currentTab.get(0));
$('#myGallery').spacegallery({loadingClass: 'loading'});
};

var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();
$('div.tab')
.hide()
.eq(tabIndex)
.show();
};

EYE.register(initLayout, 'init');
})(jQuery)
//]]>
</script>

Agrega donde se indica la URL de los archivos que subiste previamente, pero es muy importante que los agregues en el orden que se indica, de lo contrario podr?a no funcionar.

Ahora antes de ]]></b:skin> pega esto:

#myGallery {
width: 100%;
height: 400px; /* Alto de todo el contenedor */
}
#myGallery img {
border: 2px solid #52697E; /* Borde de las im?genes */
}
a.loading {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVkPUu-a8Cj51VlAL11YMdqGj_9-BY-UVB4TWcEmGd28Cogpto8AUO7PrhGzkYl3437Zjcqo3nPJZcjMJbab_E0p7d1NlSzVCXl8Dq3eG4AjTk6NALePmwS2dovhsv0mF6AE4SM7NGfXo/) no-repeat center;
}
.spacegallery {
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
left: 50%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Por ?ltimo entra en Dise?o | Elementos de la p?gina | A?adir gadget | HTML/Javascript y agrega esto a continuaci?n:

<div class="spacegallery" id="myGallery">
<img src="URL de la imagen"/>

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

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

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

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

</div>

Ah? pon las URLs de las im?genes de tu galer?a, tomando en cuenta que la ?ltima imagen ser? la primera que se mostrar?.

Y as? se sencillo puedes disfrutar de esta galer?a de im?genes en tu blog, y aunque no tiene opciones de visualizaci?n o de configuraci?n es sin duda una galer?a que llamar? la atenci?n de tus lectores.

Saturday, April 2, 2011

Fondo del blog en movimiento tipo 'Disco'

Hace poco ve?amos c?mo poner el fondo del blog en movimiento al estilo groovy, ahora veremos c?mo ponerle movimiento con unas luces de colores al estilo Disco de los 70s que est?n siempre en movimiento.

Puedes ver un ejemplo en este blog de pruebas.

El procedimiento es muy sencillo s?lo basta insertar un script en el blog, para ello vamos a Dise?o | Edici?n de HTML y antes de </body> pegamos lo siguiente:

<script type='text/javascript'>
// <![CDATA[
var colsel=new Array('#E80F02', '#DB52EE', '#45E350', '#E7E61A', '#0B82DE', '#D7DF01');
var speed=100;

/*
Blob space Graphic Effect
(c)2010 mf2fm web-design
http://www.mf2fm.com/rv
DON'T EDIT BELOW THIS BOX
*/

window.onload=whizzy;
var div;
var ring=new Array();
var swide=screen.width;
var shigh=screen.height;
var count=0;
var roun=0;
var nour=0;
function whizzy() {
var i, dvs;
div=document.createElement('div');
dvs=div.style;
dvs.position='fixed';
dvs.left='50%';
dvs.top='50%';
dvs.width='1px';
dvs.height='1px';
dvs.overflow='visible';
dvs.zIndex='-1';
i=document.body.style.backgroundColor;
if (document.body.parentNode) {
if (i) document.body.parentNode.style.backgroundColor=i;
document.body.style.backgroundColor="transparent";
}
document.body.insertBefore(div, document.body.firstChild);
for (i=0; i<30; i++) ring['col'+i]=new Array();
add_blobs();
zoomer();
}

function add_blobs() {
var f, h, i, j, k, w;
for (i=50; i<swide*1.5;) {
f=Math.floor(10+140*(i/swide)); // De 10 a 150
ring['row'+count]=new Array();
for (j=0; j<30; j++) {
h=-f/8+i/2*Math.cos(Math.PI*j/15);
w=f/5+i/2*Math.sin(Math.PI*j/15);
if (h-f/2>shigh/2 || h+f/2<-shigh/2 || w-f/2>swide/2 || w+f/2<-swide/2) continue;
k=document.createElement('div');
dvs=k.style;
dvs.position='absolute';
dvs.left=w-f/2+'px';
dvs.top=h-f/2+'px';
dvs.color=colsel[colsel.length-1];
k.appendChild(document.createTextNode(String.fromCharCode(9679)));
k.style.fontSize=f+'px';
ring['row'+count][j]=k;
ring['col'+j][count]=k;
div.appendChild(k);
}
count++;
i+=f*2;
}
nour=count;
}

function zoomer() {
for (var i=0; i<30; i++) {
var tc=Math.abs(-nour+roun)%(count-2);
if (tc<colsel.length && ring['col'+i][roun]) ring['col'+i][roun].style.color=colsel[tc];
}
if (++roun==count) {
roun=0;
nour++;
setTimeout('zoomer()', speed);
}
else zoomer();
}
// ]]>
</script>

Al inicio del c?digo, en var colsel est?n los c?digos de los colores de las luces, puedes agregar tantos colores como quieras, s?lo ten en cuenta que el ?ltimo color siempre ser? el color de las luces que se ve en forma pausada.

En var speed podemos controlar la velocidad del efecto, con un n?mero menor se ver? m?s r?pido.

Lo he probado en Safari, Opera, Firefox, Chrome e Internet Explorer y en todos funciona, sin embargo en Firefox los c?rculos se ven m?s pegados.
Y ahora s?, ?a sacar los pantalones acampanados!