JMiur [E]

Tantas veces me lo preguntan y tantas veces respondo lo mismo que voy a ver si puedo explicar como están hechos los índices de este blog.

Primero las decepciones:
no, no son páginas estáticas, son entradas comunes y corrientes
no, no se utilizan scripts, todo está hecho a mano

Probablemente, ambas cosas hacen que algunos abandonen antes de empezar pero, igual continúo.

Cada entrada tiene agregado el CSS que es igual en todos ellos y bien podría estar en el head de la página. En esas definiciones de estilo se cambian las características generales del blog, ocultando ciertos DIVs como la sidebar, la fecha, el footer de las entradas y los comentarios que además, no se permiten; para esto último, basta desplegar las opciones y marcar No permitir, ocultar existentes. Por último, la fecha que les he colocado es muy antigua (año 2006) y de esa manera no se muestran normalmente ni se actualiza el feed cuando se modifican.

Como se oculta la sidebar, el blog queda más ancho así que para compensar esto, también se amplia el ancho de las entradas; algo así:
#main-wrapper {width:VALORpx;}
#sidebar-wrapper, .post-footer, #blog-pager, #comments {display:none;}
Luego se agregan las definiciones de este tipo de entrada que son personales; puede ponerse lo que uno quiera, dependerá del diseño deseado.

Lo que sigue es crear una lista que repito, agrego de manera manual, ordenándola como crea conveniente y la pregunta repetida es ¿cómo generar columnas?

Podrían usarse tablas pero, en este caso, como sólo se trata de enlaces, es mucho más simple utilizar una o varias listas UL a las que les pondremos una clase CSS para controlarlas:
<ul class="milista">
<li><a href="URL_pagina1">enlace 1</a></li>
<li><a href="URL_pagina2">enlace 2</a></li>
<li><a href="URL_pagina3">enlace 3</a></li>
.......
<li><a href="URL_paginaN">enlace N</a></li>
</ul>
Hay muchas formas de simular esas columnas, la base de todas esas formas es utilizar la propiedad float y dimensionar alguna de las etiquetas, ya sea la etiqueta LI o la etiqueta A del enlace; por ejemplo:

/* el rectángulo con la lista en si misma */
ul.milista {
clear: both;
float: left;
list-style-type: none;
margin: 20px 0;
padding: 0;
}
/* los items de esa lista */
ul.milista li {
display: inline;
}
/* transformamos los enlaces en bloques de cierto ancho y cierto alto */
ul.milista li a {
float: left; /* flotan */
line-height: 2em; /* el alto */
padding: 0 5px; /* la separación entre ellos */
width:150px; /* el ancho */
}
ul.milista li a:hover { /* ... cualquier efecto ... */ }
Cuando algo flota, se acomoda dentro de su contenedor así que acá, como todos tienen el mismo ancho y la misma separación (width y padding) lo que veremos es una serie de enlaces encolumnados:


Con line-height controlamos la "altura" de cada enlace y con width su ancho. Si aumentamos el primer valor y ponemos line-height: 3em cada enlace sera más alto y por lo tanto, las filas se separarán más verticalmente; si disminuimos el ancho con width:135px habrá más lugar disponible así que en lugar de tres columnas tendremos cuatro:


Si seguimos disminuyendo el ancho y este ya no es suficiente para contener el texto, cada línea bajará para hacerle lugar pero las columnas se mantendrán:

26 comentarios:

JMiur  

Está actualizado a mano.

Pués, he aquí el gran secreto: despliego la lista de archivos de cierto mes. Selecciono las entradas. Botón derecho de Firefox: Ver fuente de la selección. Se abre ventana del código fuente. Copiar. Listo. Eso es todo, ya tengo la lista con los LI y los enlaces. Luego, basta seleccionarlas u ordenarlas a gusto y piachere :D

Responder
Unknown  

Lo sospeché desde un principio Jmiur ;)

He aprendido: no se logra de la noche a la mañana, experimentar y experimentar hasta que quede como uno más o menos desea :P

Responder
Gem@  

Hay algo que me he perdido, si se copia de la lista de archivos del mes x mostrará el código pero no quiere decir que lo muestre clasificado por etiquetas o temas como puede pensarse, el trabajo continúa a partir de ahí en clasificar las entradas esa es la tarea más entretenida :S
El resultado es muy bueno yo mismo te lo comenté hace tiempo pero uffff necesito más paciencia :S

Responder
JMiur  

Malina:
Es que no me gusta trabajar demasiado así que todo método que alivie el asunto, es bienvenido.

Graciela:
Todo es cuestión de buen pulso. Siempre es más fácil seleccionar desde abajo hacia arriba que desde arriba hacia abajo :D

Gem@:
Oh sí, recuerdo esa conversación. Claro, así sólo se tiene la lista y el resto es manual. No me gustan las cosas automáticas :D

Responder
Adrián J. Messina  

Te lo preguntaron tantas veces porque no pueden creer lo bien que queda hecho manualmente y de ahi la sorpresas de todos, inclusive la mía también.
Los cuadros pintados a mano son mejores que una buena imagen retocada por el photoshop.
Un abrazo.

Responder
Unknown  

ahhh Jmiur tengo que pensar, valga la redundancia, el pensamiento.
Tengo las pilas descargadas a ésta hora :(

Responder
JMiur  

Adrián:
No sé si será tan así pero, estas "manualidades" tambien son parte del juego :D

Malina:
Sólo lo hag para conservar energias ... n osé ara qué quiero energías extras pero, als guardo por las dudas :D

Graciela:
Usted tiene suerte porque al menos, puede recargarlas, hablando de energías, a veces, siento que mis pilas están sufatadas hace rato. Necesito uno de esos retiros espirituales de los que me hablaba el otro día ¿Conoce algún buen monasterio con wifi? :D

ahhh Jmiur tengo que pensar, valga la redundancia, el pensamiento.
Tengo las pilas descargadas a ésta hora

Responder
Bloguero  

El resultado final es fantástico, pero tengo algunas dudas:

"Cada entrada tiene agregado el CSS que es igual en todos ellos y bien podría estar en el head de la página." Pero, ¿dónde agregas ese CSS? al redactar la entrada e ir a "edición html" no creo que permita ese tipo de código porque lo pongo entre las etiquetas "head" y me sale un error diciendo que el tag "head" no se permite.

Si lo pongo en "diseño", "edición de html" me modificaría los estilos en todas las entradas del blog.

Como ves estoy un poco perdido, jeje.
Gracias.

Responder
Unknown  

jajaja un Monasterio con wifi, me vás hacer morir de la risa! jajaja
no puedo parar de reírme, cuando me tiento perdiste! jajaja

Por lo que veo en los blogs, sacerdotes y monjas escriben, lo que no sé si hay palmeras! jajaja

Responder
JMiur  

Daniel:
La etiqueta STYLE es como cualquier otra etiqueta; salvo excepciones, pueden ser colocada en cualquier parte de una página web así que, en una entrada de Blogegr, puede agregarse de manera normal:

<style> ......... </style>

con la única precaución de colocar todo en una sola línea. No es necesario (en realidad sería un error) colocar una etiqueta HEAD ya que esa es una de esas excepciones porque es una etiqueta única, sólo hay una en toda la página.

Las reglas de estilo que son las que se colocan en la etiqueta STYLE no siempre van en el HEAD, pueden ser ubicadas en cualquier parte de la página o de la plantilla.

Graciela:
No se ría que era una pregunta muy seria :D

Responder
Sirkan!  

Hola! genial efecto, pero siempre me he preguntado como se hace esto mismo pero con las etiquetas¡, cosa que queden de 2 columnas en ves de 1 sola. Sabes como se hace?

Saludos!

Responder
JMiur  

Del mismo modo. Si es el gadget de etiquetas que se coloca en la sidebar, es una lista así que las propiedades a colocar son mas o menos las mismas.

Responder
Sirkan!  

Pero... que le tengo que poner al código que pusiste?
porque pense que tendria que cambiarle el "milista" por "labes1", pero no pasa nada :/

Responder
JMiur  

No sé en que blog lo estás probando así que mucho detalle no puedo darte. EN este ejemplo, "milista" es una clase y Label1 es un ID así que, debería ser así:

#Label1 li { ........................... }
#Label1 li a { ........................... }
#Label1 li a:hover { ........................... }

Responder
Deybi  

Es un poco engorroso el asunto, pero el resultado es más que satisfactorio.

Responder
pvillegasy  

Hola Jmiur

como puedo ocultar yl footer y los no permitir comentarios para ciertas entradas?

muchas gracias

Responder
JMiur  

Una forma es la explciada en esta entrada.

Responder
Anónimo  

Hola Jmiur, fantastico post!. Tengo 2 dudas: La primera es como se podría poner un título a cada columna, y entiendeme que digamos podiera separarte mediante una linea y que el tipo de letra y color fueran diferentes. Es decir por ejemplo, imaginate que quisiera acer 4 listas de os posts mas leidos, los mas valorados, los mas comentados y los mas recientes. y beuno al principio de cad alsita pos el titulo de la columna "Lo más leidos", "los más valorados"...

Y la otra pregunta alomejor te parece un pcoo tonta :( esque al señalar los enlaces de las lsitas aparece una especio de cajoncillo, ese efecto como s ehace¿? me parece excelente.

Un salu2

Responder
Anónimo  

vale vale ya me estoy empezando a enterar gracias a este post http://vagabundia.bolsanegra.net/index.php/tutorialhtml/html-leccion-4/

Responder
LucasFM  

Hola. que tal? una pregunta puedo poner ese cuadro dentro de las entradas?? donde tendria que poner el codigo? gracias

JMiur  

Simplemente se escribe en la entrada misma.

LucasFM  

me refiero al otro codigo...

"/* el rectángulo con la lista en si misma */
ul.milista {
clear: both;...."

ese, nose donde ponerlo. Gracias

JMiur  

El estilo también puede ponerse en una entrada; basta colocarlo entre etiquetas <style> y </style>

Responder
Alicia Vivancos  

Hola JMiur hacía ya tiempo que no comentaba por aquí.

Temgo una duda y quería saber si podrias echarme una mano?. En mi blog El Templo de Artemisa puedes ver en la sidebar un gadget donde pone Re-lecturas. El problema es que en firefox se ve perfecto pero no consigo que se vea horizontal en el Chrome. Tiene que ser algo de mi blog porque en otros si que se ve bien el gadget, el problema es que no doy con la solución.

JMiur  

Eso está generado por un script; prueba agregar estas reglas de estilo:

.bp_item_thumb {display: inline;}
.bp_recent_separator {display: none;}
.bp_item_title {display: none;}

Alicia Vivancos  

Perfecto!!! Ya pensé que tendría que quitarlo. Muchisimas gracias :)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR