Aprovechar el crosscol 2ª parte

Hace unos días explicaba que había usado esta zona muerta del blog para que en el Blog-roll, (el blog que cierra la colección Utilidades), la menubar y la cabecera no se dieran de hostias por usar el mismo espacio.

Y aunque añadí la cabecera a la zona del crosscol, al no configurarle el CSS, menubar y cabecera acabaron juntas, en la parte del código HTML, bajo el header-wrapper.

Me quedó rondando por el coco que si añadía el código CSS del crosscol, podría poner la menubar bajo la cabecera, aprovechando realmente esta zona y estuve pensando en la manera en que podía hacerlo.

Hoy he añadido esto al CSS de la plantilla de ése blog.

/*Crosscol
----------------------------------------------*/
#crosscol-wrapper {
height:30px;
margin-top:0;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-$endSide:0;
padding-bottom:0;
}

(Las medidas las he copiado del Header-wrapper aunque luego lo he redimensionado según las necesidades).

En el HTLM he pegado el código de la menubar en el crosscol, con lo que este código ha quedado así:

<div id='crosscol-wrapper' showaddelement='no'
style='text-align:center'>
<b:section
class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList1' locked='true' title='Menubar'
type='LinkList'/>
</b:section>
</div>

He dejado el widget de la cabecera en el sitio que le corresponde y he borrado el de la menubar de donde estaba.
Y he hecho vista previa.

¡¡¡¡¡¡SISISISISIISIIIIIII!!!!!!!

Tan solo he tenido que redimensionar la cabecera y la zona del crosscol para que ambas cosas queden bien colocadas, se vean bien con los dos navegadores y no le disputen el espacio a nada de lo que hay en el blog.

¡Que parecían crios empujándose!

P.S. Agradezco nuevamente a J.Miur de Vagabundia que lo explicara.

Editado: 17 de mayo

Hoy estaba preparando una plantilla con dos columnas más una widebar y las herramientas de edición de la menubar, la echaban hacia abajo.

Se me ha ocurrido ponerle al código del crosscol el ancho y que éste fuera un poco superior al del outer-wrapper.

¡De fábula!

Así que si te sucede lo mismo, miras en cuanto está el ancho de tu blog y añades esta línea bajo la de height

width: 0000px; teniendo en cuenta donde están los ceros has de poner la medida de tu blog, más unos 40 píxels para las herramientas.

Poner un perfil personalizado

Hoy llevo un dia de descubrimientos.
Acabo de descubrir de nuevo la sopa de ajo, o casi, y quiero compartirlo con vosotros.
Como podeis leer un par de entradas más abajo, estoy liada con las cuentas de los blogs.

El problema de añadirme como usuaria/autora/administradora de una cuenta es que en el perfil en lugar de la imagen sale solo esto:
y no me gusta.

He probado un invento en El final del arco iris, (blog que tenía en otra cuenta y que también añadi a ésta y donde salía algo parecido).

He eliminado el elemento del Perfil.

He añadido un elemento Imagen y he subido una imagen.

Le he puesto un título y he guardado cambios.

Me he ido al Panel de esta cuenta, (al fin y al cabo ahora todos los blogs que tengo y que quiero que se vean, están aquí), he pinchado con el botón derecho en la foto del Perfil y he pinchado, con el izquierdo, en Copiar acceso directo.

He vuelto a Diseño del blog y he editado el elemento de la imagen.

Y en el pie de imagen he escrito esto:

<a
href="la-dirección-que-he-copiado">Perfil</a>

Le ha dado a Guardar cambios.

Podeis ir y comprobar vosotros mismos el resultado.

Alinear imágenes en una entrada.

Inés me ha dejado esta consulta en cbox: Quiere que cuando postea imágenes salgan todas de la misma media, independientemente de la que tengan.

Eso se puede hacer, redimensionándolas, con una salvedad: Si la medida que va a usar es superior a la de la imagen, quizás se vea borrosa.

Y como el movimiento se demuestra andando, voy a añadir aquí tres imágenes de distintas medidas. Luego las redimensionaré a la medida de la mediana para que veais e que me refiero.
Al final dejaré el código.

1ª imagen- medidas: ancho (width) 131px, alto (height) 108px.



2ª imagen- medidas: 440 x 440



3ª imagen- medidas: 560 x 420

Voy a colocar las tres de nuevo, todas con el mismo ancho, 440px.

Como puedes apreciar, la más grande se ve nítida, sin embargo la que era más pequeña se ve mal. Se ha pixelado. Al hacerla más grande, lo único que ha hecho ha sido hacer más grandes los cuadritos, (píxels), que la forman. Pero se han alineado.

¿Como hacerlo?
En principio deberías añadir la imagen, en Edición de HTML, desde un servidor, aunque sea el propio blogger, pero no de la forma en que blogger añade las direcciones de las imágenes.

A ver si me explico:
Cuando añades una imagen al blog, por el sistema de pinchar en la foto que vemos encima de donde escribimos, el código de esa imagen es algo así: (codigo de una imagen a la que le hemos dicho que la centre)

<a href="dirección"><img id="BLOGGER_PHOTO_ID números" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="dirección" border="0" /></a>

Y ese el código de una imagen añadida "manualmente" en Edición de HTML (también centrada).

<center><img src="dirección"></center>

El código de blogger es difícil de redimensionar, ya que a menudo blogger ya las redimensiona.

Pero podemos aprovechar la dirección, subiéndola a una entrada "almacén" y copiando la segunda que se ve, (la que he remarcado en rojo).

El código manual es más sencillo. Basta con añadir una de las dos medidas al código, (la otra es automática) para que se vea como queremos.

En el caso que nos ocupa, como lo que queremos que sea igual es el ancho, el código a añadir sería este, (pongo el de las imágenes que veis, tal como lo he escrito):

<img width="440px" src="dirección">

Yo no las he centrado, por eso no lo pongo aquí.

Si quieres escribir al lado, a ese código le añades el FLOAT, con lo que quedaría así: (te pongo el código de la que ves, alineada a la izquierda para poder escribir a su lado y redimensionada).

<img style="FLOAT:left" width="232"
src="dirección">

Como puedes comprobar, funciona.

La diferencia entre escribir en un blog y administrarlo

Acabo de añadirme a mi misma como co-autora de los blogs de utilidades.

Dicho así puede parecer una tontería, pero se me ha ocurrido hacer una prueba a raiz de una consulta que he visto en el blog de Rosa.

Le preguntaba alguien como acceder a modificar un blog de una cuenta distinta sin cambiar de cuenta.

El caso es que a mi me pasa lo mismo. Tengo blogs en 3 cuentas distintas y es un coñazo tener que ir cambiando de cuenta cuando quiero hacer algo en ellos, así que me he autoinvitado en todos.

He recibido mis invitaciones, he clicado en los enlaces y he aceptado mi propia invitación.

Resultado:

Ahora veo todos los blogs en el panel, pero solo puedo modificar los de esta cuenta.

Porqué la invitación lo único que permite es añadir entradas. Nada más.

En el panel se ve una Configuración pero es tan solo para añadir la posibilidad de enviar las entradas por correo.

Ni siquiera puedo modificar el Layout, o sea que no puedo añadir elementos a los blogs que no pertenecen a esta cuenta, ya que no soy administradora de ellos, (al menos a través de esta cuenta), sinó tan solo co-autora.

Puedo, eso si, decidir qué blogs quiero mostrar en el Panel, pero nada más. Si quiero añadirles algún elemento, o cambiarles algo, he de entrar en ellos con la cuenta de administración.

¡En fin!, al menos si se me ocurre añadir una entrada a alguno, no necesitaré cambiar de usuario.

Lo más gracioso del caso es que como uso el mismo nombre en las tres cuentas, ahora se ve repetido en los blogs del Panel.

David/MªJosé:

GRACIAS. Lo he hecho. Es fácil. Lo explico por si alguien quiere hacerlo:

Una vez aceptada la invitación, al lado del nombre del co-autor aparece la frase: Conceder privilegios de administrador. Pinchando ahí sale una ventana para confirmar y una vez aceptado ya está.

Lo bueno del caso es que es el sistema que explican en la ayuda para traspasar un blog de cuenta.

Como digo a menudo: "Cada día aprendo algo nuevo."

El sano deporte de abrir las cosas en otra ventana

Lo sucedido hace un momento en la entrada anterior, con el tema de los enlaces, me lleva a hacer esta entrada.

La casi totalidad de sitios pinchables en el blog, incluidos los enlaces que podemos poner en un comentario, se abren en la misma ventana. Tan solo los Abrir blog (en una ventana nueva) que aparecen al publicar una entrada, y los "Se han guardado los cambios, ver blog" que salen en amarillo cuando hacemos algo en Elementos de la página, se abren así.

Y eso es un coñazo.

A veces puede interesarte seguir viendo el blog mientras editas los elementos, o mientras haces cualquier otra cosa. También puede ser que no te interese salir del blog para ir a ver otro, pero quieres ir a ver el otro, etc. etc.

Si añades un enlace por tu cuenta es fácil evitarlo, basta con añadir eso de target="_blank" antes del símbolo > de cierre de la dirección y ya está.

Pero en los comentarios no se permite añadirlo, (¡ajo y agua!).

Es por eso que yo practico el sano deporte de pinchar los enlaces SIEMPRE con el botón derecho del ratón, (tan siempre lo hago que, a veces, pincho incluso los que se que se van a abrir así pinchando normal) y luego en Abrir en una nueva ventana, o pestaña, en el menú.

Eso me permite seguir en el blog (o blogs, que con tantos como tengo en marcha no es de extrañar tener media docena abiertos en sucesivas pestañas para no tener que ir retrocediendo y adelantando con las flechas del navegador), hacer lo que haya entrado a hacer e ir bastante más rápida que si tuviera que avanzar y retroceder del otro modo.

Es un truco simple que, si te acostumbras a usarlo, te facilitará la navegación, sobre todo si eres de los/las que suelen moverse mucho entre blogs.

Poner un enlace en un comentario

Si quereis dejar una dirección en un comentario y que se pueda pinchar desde allí, hay que escribirla con el código de enlaces.

Os pondré uno ejemplos:
Ejemplo 1 (sin enlace)
"Mira qué página he encontrado http://simpsonizeme.com/#, puedes hacer que tu cara parezca de los simpson"

Ejemplo 2 (con enlace)
"Mira qué página he encontrado, puedes hacer que tu cara parezca de los simpson"

En el ejemplo 2, basta con pinchar en el enlace para poder acceder a la página en cuestión.

En los comentarios no se admiten demasiados códigos, pero este es uno de los que si se pueden poner.
¿Como escribir este comentario para que se vea así?
De esta manera:

Mira <a href="http://simpsonizeme.com/#"> qué página he encontrado</a>, puedes hacer que tu cara parezca de los simpson.

He usado las palabras qué página he encontrado como enlace. Es como si las hubiese seleccionado, en esta entrada, y añadido el vínculo a través del botón verde.

Simplemente hay que recordar qué has de escribir para que la dirección se enlace a una o más palabras del comentario; las que quedan entre las dos partes del código.

Editado: 28/4

Txolarte acaba de dejarme un comentario aquí mismo en el que me dice que a él se le abre en una ventanita pequeñita.

Eso sucede cuando los comentarios se escriben y leen en una ventana aparte. El enlace se abre en la misma ventana en la que se ha escrito, y así es la ventana, así ves el enlace.

He probado a poner lo de target="_blank", pero me ha dicho que mi tag no era allowed.

Tras consultar el diccionario, (ya digo que yo el inglés solo lo domino si es bajito y se deja), he comprendido que mi código no estaba permitido.

Así que si quieres pinchar en el enlace de una ventanita de esas, lo mejor que puedes hacer, so pena de dejarte los ojos pegados a ella, es pinchar el enlace con el botón derecho del ratón y abrir el enlace en una nueva ventana y entonces si, ¡la verás en todo su esplendor!.

Aprovechar el crosscol

-¿Mande?-

Si el título de la entrada te ha provocado esta reacción, una de dos: O en el código de tu blog esto no aparece, (harto díficil, pues aparece incluso en la de Que paren el mundo que me apeo y eso que es el más antiguo que tengo, de los que usan left y right), o, si lo hace, no te has fijado.

Hace algún tiempo que lo venía observando en las plantillas de los blogs.
Me preguntaba que diantres sería eso, pero como no parecía que hubiera cambiado nada en los blogs no me preocupaba.

El otro día J. Miur de Vagabundia, hablaba del tema.
Resulta que eso del crosscol, es un código que han añadido a todas las plantillas, para poder poner anuncios bajo la cabecera.
Pero si no tienes publicidad en el blog, o no quieres ponerla ahí, esta zona queda libre.

J. Miur nos dice que podemos configurarla, por si queremos poner alguna cosa ahí, pero yo le he encontrado un uso práctico.

Hace unos días preparé una plantilla rounders 4, a la que añadí una segunda sidebar.
La rounders se caracteriza por tener la sidebar partida en dos módulos, en cada uno de los cuales puedes añadir elementos, que tienen características propias que los diferencia entre si.
Así, a cada uno le puedes poner un color de fondo diferente, y unos colores de letras y enlaces disitintos.

Ya, cuando tuneé la rounders 3, logré copiar esos módulos de manera que se repitieran y tener 4 o más módulos, cada uno con su Añadir elemento; de manera que a esa rounders 4 de dos columnas le puse también 4 módulos en cada columna.

Como la ensanché para poner las dos sidebar, le puse una cabecera integrada en el código.
Le añadí una menubar, pero no lograba que se colocara bajo la cabecera sin que se cayera una de las sidebar, de manera que la puse encima de la cabecera.
Con internet Explorer se veia de coña, pero con Firefox se integraba en la zona de la cabecera, aunque no daba problemas. Tuve que bajar un poco el título del blog para que cupiera, pero nada más grave que éso.

He usado esta plantilla en un blog que he colocado en Utilidades, para hacer un blog-roll con el que cerrar el conjunto. Todo iba bien, hasta que ayer quise ponerle a esta plantilla una cabecera distinta ya que le había cambiado el fondo.

La nueva cabecera, que en Explorer seguía sin darme problemas, en Firefox se veia fuera de sitio, como si la menubar la empujara.
Y por más que modifiqué los paddings y los margins de la cabecera y de la propia menubar, no lograba que se colocara bien.

Hasta que me acordé del crosscol y pensé: ¿Porqué no probar a usarlo?

De manera que coloqué el código del contenido de la cabecera, desde b:section hasta /b:section, debajo de div id='crosscol-wrapper...etc. borrando entero el b:section class='crosscol' ... etc. que está incluido.

Luego borré lo que había copiado y en su lugar coloqué el código HTML de la menubar, borrándolo de donde estaba, encima de la cabecera.

Y ha funcionado.
La menubar ocupa el espacio que ocupaba la cabecera, y la cabecera ocupa el espacio previsto para la publicidad.
¡Y todos contentos!
Yo, porqué se ve bien en los dos navegadores, la plantilla, porqué por fin pueden acomodarse las cosas sin molestarse y los navegadores porqué pueden dejar de fastidiarme.

¡Ah! por cierto, como podeis suponer, al principio intenté hacerlo al revés, colocando la menubar en el espacio del crosscol, pero en el maldito firefox las tres columnas del blog se veian descolocadas.

Una rosa para vosotros

Hoy es San Jordi y en mi tierra, además de celebrarse el dia del libro, es costumbre ofrecer una rosa a las personas que nos importan.

No puedo regalaros una de verdad, pero aquí os dejo ésta.

¡Feliz San Jordi!

Poner una imagen GRANDE de fondo

¡¡¡SI!!!
Por fin lo logré.
El mérito no es mío, sinó de Ana Belén, de quien no puedo dejaros el enlace pues todavía no me ha mandado la dirección de su blog y con quien solo me he comunicado por e-mail.

No era la primera vez que alguien me preguntaba como hacerlo, pero no lograba que imágenes grandes se colocaran de fondo de blog.
Tan solo me quedaban bien imágenes pequeñas repetidas a lo largo y ancho.
Pero Ana me dijo cómo lo había hecho, así que hoy he hecho un par de pruebas y ya puedo dejaros las instrucciones.

Para poner una imagen grande de fondo teneis que poner esta línea de código en body (que es lo primero que se ve debajo de las variables):

background: url(la dirección de la imagen) top left fixed;

Una salvedad en este código:
left indica que se verá la imagen a partir de la izquierda.
Si prefieres que se vea centrada has de poner center y si prefieres que se vea la zona de la derecha has de poner right.

¿Diferencias? Depende de la imagen.
He colocado una imagen en ¡Sobrevivir! para hacer la prueba.
Era una foto que hice en el centro comercial Gran Via 2, durante una exposición que hubo de vacas de cartón-piedra decoradas.
Aproveché para fotografiar el centro, que tiene una decoración muy original y he subido a Google Pages esta foto.

y la he colocado con el código que he dejado.

La imagen original mide 2048 x 1536 px. Mi pantalla es de 1600 y solo veia hasta Saturno y eso abriendo el blog a toda pantalla.

Si encogía la ventana a la medida que suelo usar habitualmente para poder ver varias ventanas a la vez, la imagen se cortaba a la mitad.

He probado a centrarla.

Mejor. Se cortaba, pero en los laterales.

Al final he dejado de fondo una imagen del espacio que también es bastante grande y la he dejado vista desde la derecha (right) por ser la zona que queda mejor de fondo del blog.

Así que ya sabes, si quieres poner una imagen grande en tu blog, dependiendo de la medida, antes de guardar, prueba desde las tres posiciones, (a menos que a la primera te convenza).

Editado: 22-4-08

Al final quité la del espacio y volvi a poner esta que veis, pero centrada. Ha quedado muy bien, aunque como tengo les entradas enmarcadas separadas, los comentarios salian encima de la imagen y no se leian.

Por suerte ayer si que me funcionó el truco de ponerles fondo y se pueden leer.

No se que diantres pasa con este truco de poner fondo a los comentarios.

Según de donde sopla el viento funciona, según de donde sopla ni por esas.

Colocado en dos blogs con la misma plantilla y en el mismo sitio, en uno funciona y en el otro no.

Enviar las entradas por e-mail

La petición de recibir mis entradas por e-mail, hecha por Romina me ha llevado a investigar acerca del tema.

He empezado por mirar en la configuración del blog si había esta posibilidad, ya que hay un par de cosas acerca del correo a las que hasta ahora no había prestado demasiada atención.

No he encontrado en Configuración nada que parezca permitir esto, salvo un apartado en el que el autor del blog puede elegir hasta un máximo de 10 direcciones a las que enviarle las actualizaciones.

Pero esto no era lo que buscaba y al final he acabado por pensar que tal cosa no era posible.

Incluso le he contestado en este sentido.

Pero soy cabezota por naturaleza y me sonaba haber visto esta posibilidad en el blog de Rosa.

Así que he ido a echar un vistazo.

No he sabido ver/encontrar si ha publicado como hacerlo, pero al poner el ratón encima del enlace he visto que redirigía a Feed Burner. ¡Allá que vamos!.

He buscado y ¡SI! Feed Burner envía por correo electrónico las entradas a quien lo solicite.

Ya hice una entrada explicando como funciona Feed Burner y voy a añadir el tutorial, apoyado por imágenes, en Utilidades.

Pero, si ya eres cliente de Feed Burner, te cuento como poner en tu blog el enlace al envio por e-mail.

Entras en Feed Burner y pinchas en Mis feeds.

Pincha en el título del blog y en la página de seguimiento pincha en la pestaña Publicize.

Allí, en la sidebar verás Envio por e-mail. Pinchas y te saldrá un recuadro en el que hay un botón para activar el asunto.

Al pincharlo se abre una página con dos códigos y un selector de idioma.

Escoje el idioma en que los usuarios van a ver el formulario de suscripción y luego copia uno de los dos códigos que hay encuadrados.

El largo, según me ha parecido entender, (yo el inglés solo lo domino si es bajito y se deja), sirve para que al pinchar aparezca un formulario largo.

El cortito, según creo, remite a la página de feed burner para que lo rellenen allí. (De todas formas, voy a hacer la prueba con los dos y si no es eso actualizaré la entrada). [Mira al final]

Pegas el código en un elemento HTML/Javascript.

Si ya tienes el agregador de feed Burner, puedes añadirlo al mismo elemento, y si quieres poner una imagen, como la que puedes ver aquí, has de añadir el código para que se vea, pues en el de feed burner no hay imagen.

Posibilidades:

Acción 1- Pegas el código tal cual y se verá esto: Subscribe to título del blog by Email

Resultado 1- Se verá la frase en inglés que servirá de enlace.

Acción 2- Pegas el código tal cual, pero cambias esta frase por la que quieras.

Resultado 2- La frase que pongas servirá de enlace.

Acción 3- Añades una imagen antes del código, así <img src="la dirección de la imagen">

Resultado 3- Se verá la imagen y la frase al lado, que será el enlace.

Acción 4- Pegas el código pero lo arreglas así:

Delante del código escribes <p>Frase que explica que se pueden suscribir</p> pegas el código y cambias la frase en inglés por la dirección de la imagen.

Resultado 4- Se verá la frase explicativa y la imagen será el enlace.

Y eso es todo.

Ahora voy a hacer pruebas. En unos momentos, si es necesario, actualizo.

Actualizado:

El código largo coloca en el elemento una casilla para que el posible suscriptor escriba su dirección. Debajo hay un botón para suscribirse.

Al pincharlo se abre una ventana flotante en la que salen unas letras de esas que hay que copiar y un botón que pone Subscripción completada.

El código corto, el que solo añade la frase al elemento, al pincharlo lleva directamente a la página de las letras y el botón.

Enmarcar o resaltar parte del texto de una entrada

Acabo de ver que alguien buscaba como hacerlo.
Es muy fácil.
Para ello basta con que selecciones el texto a resaltar o a enmarcar y pinches en las comillas que hay en las herramientas del escritorio de entradas.
A eso se le llama blocquote.

El problema es que, en la mayoria de plantillas, al pinchar ahí simplemente el texto se separa del resto, pero ni se enmarca ni nada.

Puedes ver que los códigos que publico aparecen escritos sobre un fondo de color distinto.
Para que eso salga así en el código de la plantila, busca esto: .post blockquote { (en algunas plantillas solo pone blocquote) que suele estar en la zona de post.

Y le añades esta línea:

background-color: (y aquí el numero del color);

Claro que también puedes añadir una variable para poder poner esta línea así:

background-color:$blocquoteBgColor;

Con lo que podrás cambiar el color de fondo desde Fuentes y colores.

Si le quieres poner borde añades esta línea:

border: 2px solid $bordercolor;

si tu plantilla tiene esta variable, o cambias lo de $bordercolor por el código de un color. (Recuerda que se escriben así #ffffff. Este es el blanco).

A tener en cuenta:
Vigila la forma en que están escritas las variables en tu plantilla.
Si le pones borde pero no sale entero, mira en el mismo grupo de órdenes si hay alguno que contradiga la que le has dado.
Por ejemplo en esta plantilla, había esta línea: border-width: 2px 0; este cero anulaba la línea en los laterales.
En esta entrada puedes ver como añadir variables, si quieres crearle una.

Un premio para todos.

Como podeis ver en la galería de premios, pronto tendré que comprarme una vitrina nueva para poder exponerlos.

No sigo las cadenas porqué nunca se a quien otorgarlos ya que, para mi, os lo mereceis todos.

Así que se me ha ocurrido instaurar mi propio premio.

Y os lo concedo a todos.

Así como suena.

Sin mencionar a nadie.

A quienes que me han ayudado a sacar este blog adelante con sus trucos y consejos.

A quienes que me animan a investigar y a aprender con sus preguntas.

A quienes dia a dia con su esfuerzo, hacen que la blogosfera sea un poco más agradable y entretenida.

A quienes se vuelcan en enseñarnos a cocinar, o a hacer miniaturas.

A quienes nos acercan a sus hijos y a sus problemas.

A quienes nos muestran sus ciudades o pueblos.

A quienes comparten con nosotros sus aficiones.

A todos.

Así que si entras en este blog, llévate este premio que dejo.

Te lo mereces por ser tan especial.

Para ponerlo en una entrada.
Para la sidebar.

P.S. Puedes pasarlo o no. Lo dejo a tu elección.

Muestra otro blog bajo el tuyo

Acabo de ver este truco en Key trucos. Es una pasada. Sirve para mostrar otro blog, sobre todo si tienes más de uno y da la impresión de que este otro blog está colocado justo debajo del que estás viendo.

Al poner el ratón en la esquina del blog, ésta se dobla mostrando el que está "debajo" y, al mismo tiempo, sirve de enlace a él.

Puedes ver el efecto aquí, aunque la imagen ya te muestra como se ve.

Para colocarlo en tu blog has de hacer lo siguiente:

Ante todo prepara la imagen del blog que vas a mostrar debajo.

Para ello, haz una captura de pantalla, del blog en cuestión, pulsando a la vez las teclas Alt e Impr Pant. En cuanto las hayas pulsado abre Paint, por ejemplo, y en Edición pincha en Pegar. Verás la imagen que has capturado. Luego en Archivo elige guardar como y lo guardas como JPEG (paint suele guardalas en formato bmp).

Deberías recortarla o hacerle algún arreglo pues capturarás la ventana completa, con barras del navegador y todo, lo que no queda muy bonito.

También has de tener en cuenta la medida. La ideal es de 500x500. Más de eso, dependiendo de donde esté colocado, no se verá el título del blog. Menos de eso se ve parte del blog principal.

Una vez que tengas la imagen preparada, sigue estos pasos:

1º.- Descargar este archivo.

2º.- Abrirlo, pues está en zip.

3º.- Una vez descomprimido abre la carpeta de tus documentos y arrastra a ella los siguientes archivos: Small.swf - Small.jpg - large.swf y peel.js

4º.- La imagen que has preparado, muévela o cópiala en tus documentos.

5º.- Sube los 3 primeros archivos, más el de la imagen que hayas preparado, a un servidor. (Si no sabes donde subirlo, ya que es un archivo con la extensión .js te recomiendo Dropbox).

6º- Edita el archivo peel.js Para ello has de abrirlo (Ver NOTA al final) y modificar estos datos:

jaaspeel.ad_url = escape('URL DE LA PAGINA A DIRIGIRNOS');
jaaspeel.small_path = 'URL DEL ARCHIVO small.swf';
jaaspeel.small_image = escape('URL DEL ARCHIVO small.jpg');
jaaspeel.big_path = 'URL DEL ARCHIVO large.swf';
jaaspeel.big_image = escape('URL DE LA IMAGEN DE FONDO GUARDADA COMO JPEG');

cambiando lo que está en rojo por la url del otro blog, en el primer caso y por las que les dará el servidor, en los otros, vigilando de no borrar ningún apóstrofe de los que abren y cierran las direcciones.

7º.- Una vez modificado, guarda el archivo y súbelo también al servidor.

8º.- Entra en Edición de HTML de tu blog y añade esto

<script src='URL DEL ARCHIVO peel.js'
type='text/javascript'/>

debajo de </head> cambiando lo que está en rojo por la dirección del archivo modificado que has subido el último.

Haz vista previa, y si todo ha ido bien, verás el efecto al momento.

Si quieres colocarlo en más de un blog.

En este caso, captura la nueva imagen y súbela al servidor cuando esté a punto.

Vuelve a abrir el archivo peel y cambia las direcciones a) del blog que quieras mostrar; b) de la imagen que se verá. (Las otras, que ya estarán modificadas, son las mismas).

Guarda el archivo modificado como peel1 y súbelo al servidor.

Coloca el código en el blog, recordando que, en este caso, la dirección del archivo es la de peel1.

Puedes ver el efecto de hacerlo así en Tu blog y tu.

Si tienes más blogs, repite la operación, cambiando el número cada vez que guardes el archivo definitivo.

NOTA FINAL

Este tipo de archivos solo se abren con algún editor tipo Dreamweaver o con el Bloc de Notas de Windows. (Imagino que otros sistemas operativos tendrán su propio bloc de notas, pero ignoro como se llaman).

Para editar el archivo, después de hacer todos los pasos que explico, pinchas en el archivo Peel o pones el ratón encima, (dependiendo de si abres las cosas con dos o un click) y en Archivo pinchas en Abrir con.

Quizá no veas la opción, pero abajo pone Elegir programa. Busca el Bloc de notas, (que yo recomiendo siempre tener a mano, sobre todo si eres de los que trastean mucho con los códigos), y lo abres con ese programa.

En la ventana en la que se habrá abierto lo modificas y luego lo guardas dándole un nombre distinto si vas a usarlo más veces.

Y ya está a punto para subirlo a tu servidor.

Variables (Fuentes y colores) 2ª parte

Como he dicho esta madrugada en esta entrada y aprovechando que estoy de baja, he hecho los primeros listados de variables que podemos encontrar en una plantilla, así como: a qué se refiere cada una, donde está aplicada en el código y qué sectores modificas al cambiarle el color o la fuente.

Todas las listas estarán basadas en la plantilla original, sin modificaciones.

---***---

Las he colocado en una tabla a fin de clarificar el tema.

La primera columna de la tabla, titulada "Variable", corresponde a su nombre. Puedes ver, en negro, las dos formas en que está escrita en el código que las define y debajo, en azul, como está colocada la orden.
La siguiente columna, "Significa", es la traducción del nombre de la variable tal como la vemos en Fuentes y colores.
En "Aplicado a" están todos los encabezados de las zonas del código donde se ha aplicado cada una, tal como los verás en el de tu plantilla.
Y en "Modifica" puedes ver de qué parte del blog se trata.

---***---

Dado que las listas son muy extensas, para ponerlo más claro he hecho la tabla en un documento de word.

Pero colocarlas aquí sería lioso, pues el ancho del espacio que ocupa la entrada es inferior al de los documentos, así que se me ha ocurrido subirlos a google pages para que, si te interesa ver el de tu plantilla, al natural, puedas pinchar en el enlace para que se abra.

---***---

Al hacerlo te aparecerá una ventanita para que le digas que quieres hacer con el archivo, si abrirlo o guardarlo.
Puedes hacer lo que mejor te plazca. Si deseas guardarlo, a fin de consultarlo para efectuar los cambios, está a tu disposición.

(Si no dispones del programa Office 2003 y te dijera que no puede abrirlo, guárdalo y ábrelo con Internet Explorer. Para ello, una vez guardado, pones el ratón encima del archivo, o lo pinchas una vez, según tengas configurado el pc, y pincha en Archivo de la barra de herramientas. Pincha en Abrir con... y en el menú selecciona Internet explorer, como puedes ver en la imagen).

---***---

---***---

Poco a poco iré haciendo los de todas las plantillas y al final de la entrada iré añadiendo los enlaces correspondientes para que puedas ver el de la tuya, (ya sabes que al principio del código, en lo que llamo los créditos, puedes ver cual estás usando), siempre que sea de blogger, modificada o no.

(Ignoro como han repartido estas variables en plantillas modificadas de word-press).
Podrás ver donde se aplica cada código para que, si quieres crearle nuevas variables, sepas donde has de efectuar los cambios.

Si has modificado la plantilla, o estás usando alguna de las mías, habrá más de las que se ven en las listas.

Estas listas también te servirán para modificar la aplicación de estas variables a algunos sitios. Así, por ejemplo, si tu plantilla es una Denim, puedes aplicar alguna definición de las que hay a una zona concreta y distinguirlas. Como el título de la entrada tiene el mismo color que el texto, si le cambias la variable que usa por la del título del blog, se diferenciaría del texto la entrada.

(Es solo una idea).

---***---

También puedes crearle nuevas variables, en lugar de aprovechar alguna ya existente.

En diversas entradas he mencionado la manera de crearlas y si alguna era para alguna zona que normalmente no tiene, junto a las instrucciones he explicado donde añadir el código.

---***---

Esta imagen es una muestra de lo que verás. Como puedes apreciar ni siquiera ha cabido entera en la captura, pero te servirá para hacerte una idea del tema. (Si pinchas en la imagen la verás en grande).

---***---

Las mínimas tienen todas las mismas variables, al igual que las denim.

Las rounders sufren algunas modificaciones que he especificado.

---***---

Códigos de la mínima.

---***---

Códigos de la denim.

---***---

Códigos de las rounders.

---***---

Códigos de la Harbor.

---***---

Códigos de la scribe.

---***---

Monta presentaciones (slide) con tus fotos.

Estos días he recibido un par de consultas acerca de como hacer una presentación de imágenes para el blog. Lo que se llama slide.
Hace tiempo tuve un par en otro de mis blogs y aunque las quité, como había guardado los códigos de las presentaciones he podido recuperar la dirección.
En esta web puedes montar tu slide, con las imágenes que quieras y con la decoración que elijas.
Una vez montado te darán un código que es el que has de poner en un elemento HTML/Javascript.
Lo único a tener en cuenta es la medida, tanto de la presentación como de tu sidebar.
La que tenía en Que paren... era tan grande que tuve que ponerla debajo de las entradas.
Los pego aquí para que te hagas una idea. Son imágenes de Barcelona, mi ciudad, y cuadros que me gustan.

En el de barcelona si pinchas puedes pararlo para ver bien una imagen. En el otro, si pinchas en uno de los cuadros, este se "separa" del grupo y se ve en grande.

Cool Slideshows

Cool Slideshows

Los comentarios bajo la entrada

En el capítulo del CSS, de las entradas que hice el otro día explicando qué se encuentra en el código de la plantilla, comenté que hay unos bloques dedicados a los comentarios.

Ayer, pinché en el título de una entrada y me dí cuenta de que los comentarios se veían directamente sobre el fondo del blog.

Nunca había prestado atención al hecho, quizás por que antes de cambiarle el aspecto al blog, las entradas no estaban separadas y desde que lo cambié apenas si había hecho esto de pinchar en una entrada concreta.

Pero al verlo se me ocurrió probar si se podía arreglar desde esos bloques que digo y si, efectivamente.

Así que, si te sucede lo mismo y necesitas ponerle un fondo a esta zona para que cuando se expandan se puedan leer cómodamente, localiza esta zona del código en el CSS:

/* Comments bajo el que verás esto #comments {

Ahí, debajo de esta línea, añades esto:

background-color: $bgColor;
border:ridge 4px $borderColor;

Por supuesto estos son los parámetros para este blog.

Antes de añadir el $bgColor, o el $borderColor, asegúrate de que en tu plantilla están definidas las variables y de que se escriben así.

En cuanto al borde, si tienes las entradas enmarcadas usa los mismos detalles que en el marco de tus entradas.

Haz vista previa, solo para asegurarte de que no hay errores y carga bien y guarda.

Verás el resultado al pinchar en una entrada cualquiera que tenga comentarios.

Centrar las imágenes de la sidebar añadidas en un elemento Imagen

Vesta acaba de preguntarme como centrar una imagen que hayas colocado en la sidebar en un elemento Imagen, pues, por defecto, se alinean a la izquierda.
Para lograrlo has de añadir un código a la plantilla del blog, dándole la orden.
Como estos elementos pertenecen al grupo Image el código que añadiremos en el CSS, antes de ]]></b:skin> es este

.Image {
text-align:center;
}

Vigila que al copiar no desaparezcan los espacios. Ha de quedar tal como lo ves aquí.

Haz vista previa y verás que se han centrado todos los que tengas.
Guarda plantilla y ¡listo!
A partir de ese momente todas la imágenes que añadas por este sistema aparecerán centradas.

Vuestra opinión acerca del aspecto de este blog

Ha terminado el tiempo que puse de margen para que pudierais darme vuestra opinión sobre el aspecto de este blog después de que lo maquease un poco.

Según parece hay división de opiniones.

En total habeis contestado 99 personas, de las cuales 31 pensais que mola mogollón y 32 que os gustaba más antes. Parecería que ha ganado el aspecto negativo, pero hay dos posibles respuestas más, una a favor y otra de pse pse, en las cuales 25 pensais que ha quedado bien y solo 11 que pse pse.

Así que si sumo las respuestas positivas dan un total de 56, mientras que las negativas se quedan en 43, lo que en términos porcentuales dan la mayoría a las primeras, de manera que se queda como está, al menos de momento, hasta que me vuelva a dar la pájara y vuelva a modificarlo.

Os agradezco vuestra colaboración. Nunca, en ningún blog, ni en encuestas de este tipo que han durado más tiempo que ésta, he visto un resultado tan abultado.

Como diría el chiste habeis respondido "cachi chen".

Un beso a todos, (los que habeis contestado y los que no, que la abstención es una opción tan válida como la que más).

P.S. Voy a poner otra, para saber qué pensais de la facilidad o no de encontrar algo aquí.

Esta si es importante, pues de vuestras respuestas dependerá que modifique listas y otras cosas.

Gracias de antemano.

Quitar la fecha de las entradas y poner una imagen en su lugar

A veces recibo consultas de personas que quieren hacer alguna cosa especial en su blog.
Por ejemplo, anteayer recibí una en que me preguntaban como poner una imagen encima de las entradas.
En principio pensé que eso era imposible, pero mi comunicante me ha enviado la dirección de un blog que tiene algo semejante.
No he podido ver las imágenes del blog en cuestión, en su lugar salen cuadritos con un aspa roja, pero por su posición y por la ausencia de fecha encabezando las entradas he supuesto que quien lo hizo logró modificar este dato en el código.
He abierto mi blog de pruebas y he buscado como hacerlo.
Y por si estás interesad@ en hacerlo aquí está la solución.
Buscas este pedacito de código:

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='dateheader'> <data:post.dateHeader/></h2>

Eliminas lo que está en azul y en su lugar añades esto:

<img src='la-dirección-de-la-imagen'/>

Haces vista previa y si todo va bien ya verás que la fecha que encabeza las entradas es sustituida por la imagen que hayas elegido. Solo has de tener en cuenta que la imagen va a ser siempre la misma.