Hablando de la propiedad Float

Cuando a un elemento le agregamos la propiedad float, lo convertimos en un bloque pero con una característica especial: su ancho no ocupa el 100% del contenedor sino sólo el de su contenido pero, además, lo quitamos del orden natural de la página; de este modo, todo lo que lo rodea se moverá y se acomodará como pueda para hacerle lugar.

leer artículo actualizado

Este es un menú desplegable creado por Sven Wappler que requiere del uso de las librerías Prototype + Scriptaculous.

Una vez que tenemos descargado el script , lo alojamos en un servidor o lo insertamos en la plantilla antes de </head>:

<script src="URL_menu.js" type="text/javascript"></script>

El CSS elemental también podemos descargarlo y, como siempre, lo mejor es copiar su contenido y agregarlo a la plantilla, ya sea dentro de <b:skin> </b:skin> o entre etiquetas <style> </style> para poder editarlo y adaptarlo a nuestro sitio:

#menu { /* es el bloque contenedor del menú */
background: #678;
border-bottom: 1px solid #ABC;
border-top: 1px solid #ABC;
padding-left: 10px;
height: 32px;
width: 100%;
}
#menu  ul { /* las listas */
display: block;
line-height: 1em;
list-style: none;
margin: 0 !important;
padding: 0 !important;
z-index: 90
}
#menu  ul li { /* los items de las listas */
float: left;
font-size: 12px;
line-height: 1, 5em;
list-style-type: none;
margin: 0;
padding: 0;
}
#menu ul li a { /* los enlaces de las listas */
background: transparent;
color: GreenYellow;
display: block;
font-weight: bold;
line-height: 32px;
text-decoration: none;
margin: 0;
padding: 0 1em;
width: auto;
}
#menu  ul li a:hover { /* efecto hover sobre los enlaces */
color: #FFF;
text-decoration: none;
}
#menu  ul.level2, #menu ul.level3 { /* las listas desplegables */
background: #678;
border-top: 1px solid #ABC;
left: 0px;
position: absolute;
top: 0px;
visibility: hidden;
}
#menu  ul.level2 li, #menu ul.level3 li { /* cada item de las listas desplegables */
border-bottom: 1px solid #ABC;
float: none;
margin: 0;
padding: 0;
width: 150px;
}
#menu  ul.level2 li a, #menu ul.level3 li a { /* cada enlace de las listas desplegables */
padding: 0 1em;
}
#menu  ul.level2 li a:hover,#menu  ul.level3 li a:hover { /* efecto hover sobre esos enlaces */
background-color: #456;
}

Hecho esto, ya podemos crear nuestro menú que no será otra cosa que una lista de enlaces:

<div id="menu">
<ul class="level1" id="root">
<li>
<a href="#">Menu 1 (+)</a>
<ul class="level2">
<li><a href="#">Submenu 1.1.</a></li>
<li><a href="#">Submenu 1.2. (+)</a>
<ul class="level3">
<li><a href="#">Submenu 1.2.1.</a></li>
<li><a href="#">Submenu 1.2.2.</a></li>
<li><a href="#">Submenu 1.2.3.</a></li>
</ul>
</li>
<li><a href="#">Submenu 1.3.</a></li>
<li>
<a href="#">Submenu 1.4. (+)</a>
<ul class="level3">
<li><a href="#">Submenu 1.4.1.</a></li>
<li><a href="#">Submenu 1.4.2.</a></li>
<li><a href="#">Submenu 1.4.3.</a></li>
<li><a href="#">Submenu 1.4.4.</a></li>
</ul>
</li>
</ul>
</li>
<li class="sep">|</li>
<li><a href="#">Menu 2</a></li>
<li class="sep">|</li>
<li><a href="#">Menu 3</a></li>
<li class="sep">|</li>
<li>
<a href="#">Menu 4 (+)</a>
<ul class="level2">
<li><a href="#">Submenu 4.1.</a></li>
<li>
<a href="#">Submenu 4.2. (+)</a>
<ul class="level3">
<li><a href="#">Submenu 4.2.1.</a></li>
<li><a href="#">Submenu 4.2.2.</a></li>
<li><a href="#">Submenu 4.2.3.</a></li>
</ul>
</li>
<li><a href="#">Submenu 4.3.</a></li>
</ul>
</li>
<li class="sep">|</li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>

Es muy sencillo y para no equivocarse, lo mejor en usar tabulaciones para darnos cuenta visualmente de cuál es la etiqueta que debemos cerrar y, por supuesto, reemplazar el atributo HREF de los enlaces por la dirección URL a donde queremos dirigirnos.

La propiedad background-size nos permite establecer las dimensiones de la imagen de fondo para definir la relación ancho/alto que debe mantenerse, sin que importe el tamaño del contenedor.

leer artículo actualizado

Enlaces.

Palabra sagrada.

Un blogger como Dios manda es capaz de matar por un enlace ... bueno, casi.

Al respecto, es interesante leer el artículo de labnol.org que tiene un título sugestivo: ¿Por qué los intercambios de enlaces o los enlaces pagos son una pérdida de tiempo?

Se sabe que la importancia (léase importancia entre comillas) de un sitio, depende de la cantidad y calidad de los enlaces que recibe. Eso se traduce en PageRank y se puede sintetizar así:

si alguien "importante" te cree tan "importante" como para enlazarte, es que eres "importante"

Un razonamiento estrecho pero es lo que hay, y está en sintonía con el resto de los razonamientos que dominan este mundo.

El resultado de este tipo de concepto es el constante fluir de emails solicitando intercambio de enlaces desde cualquier tipo de sitio, nuevo o viejo, generalmente desconocido y muchos otros donde simplemente se ofrece venderlos por un módico precio.

Todo esto no tiene sentido y ningún beneficio (porque hablamos de beneficios y no de ética) porque la importancia de los enlaces también depende de su ubicación y esto es lo novedoso (por lo menos para mi).

El PageRank le daba igual peso a cualquier enlace sin importar su ubicación, daba lo mismo que estuvieran en el header, la sidebar o formaba parte del contenido pero, según Matt Cutts, uno de los popes de Google, esto ha cambiado y la ubicación de los enlaces se ha transformado en algo a tener en cuenta. Por ejemplo, si un enlace está en el footer y además, se repite varias veces a lo largo de la página (es lo que ocurre con los llamados text ads), no tendrá el mismo peso que si se encuentra una sola vez dentro del contenido de una entrada. Este último, será más relevante que el otro.

Otro ejemplo: los enlaces a páginas internas tienen menos peso si estan en el footer que si están en el header o en una barra de navegación en la parte superior del sitio.

Quiere decir que ahora, los buscadores no sólo leen los enlaces sino que además, los evaluan y les asignan más o menos valor dependiendo de distintos factores.

En términos generales, el artículo da a entender que los buscadores han comenzado a disminuir el peso de los enlaces externos agregados a las sidebars o a los footers, dándoles mayor peso a los que se encuentran en el contenido de los artículos para, de esta forma, evitar el abuso y cualquier otro método de posicionamiento indeseado.

Click para ampliar las imágenes.

“The best thing to happen to fresh ingredients” : Una publicidad de Axel Eckstein para la agencia Euro RSCG de Suiza

REFERENCIAS:ibelieveinadv.com

Las preguntas sobre la nueva opción de MORE o Leer Más de Blogger se suman día a día. La mayoría de las veces dicen:

"Agrego el more en un post y todos los gadgets de la sidebar desaparecen y se me mueven debajo del post."

Mi respuesta ante esto ha sido siempre la misma "muéstrenme el ejemplo con el error" algo difíciil de hacer ya que significa tener un blog semi-destruido pero no hay otra posibilidad de respuesta excepto la que da la misma entrada:

"... si lo hacemos en el modo Redactar, podemos "romper" alguna etiqueta HTML y dejarla sin cerrar lo que hará que el blog se muestre mal ..."

Estoy seguro que en la enorme mayoría de los casos, el problema es ese así que veamos si podemos explicarlo mejor.

No se trata de un error del MORE o de Blogger (bendita sea) sino que es algo que ocurrirá siempre con cualquier sistema automático: los sistemas no piensan, no deben hacerlo. No pueden deducir qué queremos hacer y corregir nuestros propios errores. El mismo problema ocurrirá si usamos el viejo sistema de Posts Expandibles o el MORE en WordPress. Todo se reduce a ¿DÓNDE COLOCAR EL MORE?

Este "corte" del post es "invisible" si usamos el Modo Redactar del editor. Un ejemplo:

Ahí, usando el nuevo editor, escribí un texto, lo formateé, coloqué negritas y colores, lo alineé, etc. Satisfecho con el resultado, voy a colocar el MORE separando los dos párrafos:

Publico y ohhhhhhhhhhhhhhhhhhhhhhhhh la sidebar se fue al demonio.¿Qué hice mal?

Miro el post utilizando el modo Edición de HTML:

La respuesta está allí: LA ULTIMA ETIQUETA HTML ABIERTA DEBE SER LA PRIMERA EN SER CERRADA. Y aquí, ese MORE está en medio de un DIV o un párrafo P o tal vez en cualquier otra etiqueta ya que al editor no le importa ese detalle, no puede saber lo que queremos hacer, sólo agrega: <!-- more --> allí donde le decimos que lo haga y le estamos diciendo que corte la etiqueta por la mitad con lo que quedará abierta y el resto de la página se trastocará con resultados imprevisibles.

Esto es un error:

<div style=" ....... ">
....... cualquier contenido .......
<!-- more -->
....... cualquier contenido .......
</div>

Y esta sería la forma correcta de agregar el MORE:

<div style=" ....... ">
....... cualquier contenido .......
</div>
<!-- more -->
<div style=" ....... ">
....... cualquier contenido .......
</div>

Moraleja: Si se usa este sistema, siempre debería mirarse el código HTML para verificar que no lo coloquemos donde no debemos.

A mi entender, de existir un botón para esto, no debería estar en el Modo Redactar porque sólo genera problemas.

Grunge Social Media Stickers
	Contiene 20 íconos de 128×128, en formato PNG y un archivo PSD. Creados por Dawghouse Design Studio.descargar
Watercolor Icon Pack
	Contiene 36 íconos de 256×256px en format PNG.descargar
Cute Critters
	Contien 26 íconos de 512x512 en en formato PNG.descargar