Tuesday, November 21, 2006

Empezando por el tejado

Como primera lección, un tema que les preocupa a muchos de nuestros blogovidentes: la imagen dela cabecera. Sustituir esos incómodos textos enmarcados por tan rígidas líneas es tan sencillo como esto:

- Cree su cabecera con su aplicación favorita o pídasela a un amigo diseñador. Si se niega, insista.
- La medida que viene por defecto en la plantilla original es de 660px de ancho. Procuraremos mantener el tamaño, ya que se pretende embellecer la estructura, no destrozarla. En este ejercicio trabajaremos con una cabecera de 660px de ancho por 264px de alto.
- Entre en ImageShack. Seleccione la imagen de su disco duro y súbala. Una vez hecho esto, seleccione el enlace directo a la imagen (Direct link to image) y cópielo.
- Acceda a su panel de control.
- Acceda a la pestaña Plantilla.
- Busque en el código, justo cuando acaba el </head> y empieza el <body>, este párrafo:

<div id="header">
<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
<p id="description"><$BlogDescription$></p>
</div>


- Una vez localizado, elimine la línea marcada en negrita en el punto anterior y sustituya <$BlogTitle$> por este otro código, corrigiendo el link donde se indica:

<img border="0" src="aquí ha de pegar el enlace directo que ha copiado en ImageShack" width="660" height="264">

- Ahora, busque al principio del código, en la hoja de estilo, este texto:
@media all
#header
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}
}



- Transforme el margen y el borde, con este resultado:
@media all {
#header {
width:660px;
margin:0 auto 0;
border:0px;
}
}


- Busque a continuación, un poco más abajo:
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}


- Transfórmelo en esto otro:
#blog-title {
margin:0;
padding:0;
border:0px;
}


- Compruebe con el botónVista previa que los cambios han funcionado. Si está satisfecho, pulse Guardar cambios de plantilla.

Et voilà! Su blog acaba de subir de categoría estética. Disfrute de su nuevo look con amigos y familiares, sorprenda a sus vecinos con un toque de elegancia y no se pierda la próxima lección de Puño, su amigo y esteta.

Añado: en caso de tener, de manera irreversible, la nueva versión de Blogger, aquí dispone usted de una manera de modificar su cabecera. Recordamos a nuestros lectores que es preferible mantener la vieja y leal plantilla HTMLera.

40 Comments:

Blogger Marnofler said...

Pero cuantos blogs piensas mantener abiertos? se actualizarán todos?

2:28 PM  
Blogger Puño said...

todos!

este está todavía en pruebas.

6:05 AM  
Blogger alberto vazquez said...

Ey!!!!
de puta madre!!!!!!!
eres un crack!!!
tengo que reseñar esta pagina!!!!!!!
tremendo

7:37 AM  
Blogger LOLA LORENTE said...

Muchísimas gracias, la verdad es que ahora mismo me pongo a tunear.
alberto ya se a puesto manos a la obra.
qué guay!!
y si, siempre somos los mismos, los mejores!!!
ya verás como todos te lo agradecen, eres el puto amo!!

8:10 AM  
Blogger alberto vazquez said...

voila!!!
ya lo he hecho!!!!
gracias tío!!!
cada tutorial que pongas lo haré!!
un abrazo...estás linkado!!
cuidate

8:52 AM  
Blogger LaMariola :: delao* said...

JEJE
TE LO AGRADECEREMOS TODA LA VIDA

:)

9:04 AM  
Blogger Miguel Porto said...

Gran idea Mr Puño!

5:24 PM  
Blogger SIEN said...

Muchisimas gracias puño por enseñarnos tus artes del truñing.
Yo personalmente me acabo de pasar la tarde cambiando mi cabezera, y con un fallo que otro lo he conseguido.

La siguente lección para cuando que me quiero cambiar este cuerpo estufa que tengo en el blog

9:47 AM  
Blogger Puño said...

pues en cuanto tenga un rato pongo la de cambiar las tipografías, añadir un fondo y quitar el margencito de las imágenes!!

11:54 AM  
Blogger SIEN said...

Si mi shen shey!!!

1:18 PM  
Blogger Puño said...

por supuesto, se aceptan peticiones. sólo tenéis que ir dejándolas en los comentarios!

1:38 PM  
Blogger Enriqueta said...

Muchísimas gracias, Puño!
Sin tu ayuda no lo habría conseguido!
Un beso desde la ciudad condal!

4:52 AM  
Blogger Puño said...

me lo agradecerás toda tu vida!

jajajaja

un beso!

5:39 AM  
Blogger AtajoGrafico said...

señor don puñezzz
soy agus (2clip) hablamos en la kedadda malasañera sobre el tema de...kitar la barrade bloger de arriba .se podria conseguir?

5:28 PM  
Blogger Puño said...

apuntado!

será de lo próximo, igual lo subo antes que cambiar el fondo :)

6:34 PM  
Anonymous Anonymous said...

Hey puño, este blog es la bomba. Me viene estupendo ya que justo estaba buscando alguien que me pudiera dar esos truquillos para mejorar la imagen de mi blog. Muxas muxas grasas.

1:54 AM  
Blogger Puño said...

las que tú tienes!

no te preocupes que en breve subiré un par de cosillas más, es que con el cambio a Beta no sé si seguirán funcionando mis consejos.

6:51 AM  
Anonymous Anonymous said...

Que grande eres, maestro.
Me siento como Neo, pudiendo ver en el codigo html algo de logica por fin! xDDD

6:29 AM  
Blogger Puño said...

me alegro! ya están los próximos posts preparados!

7:25 AM  
Anonymous Anonymous said...

Don Puño,

funcionan todos estos trucos con la plantilla en html del nuevo blogger.

9:42 AM  
Blogger Puño said...

hostia, wordpress son palabras mayores :D

2:08 AM  
Anonymous Anonymous said...

Y mi gran duda existencial al no tener un amigo que me diseñe la cabecera es: ¿Existe algun programilla fácil para hacerlo?

10:28 AM  
Blogger Puño said...

Photochóped es la respuesta :P

aunque en estos casos y visto lo visto, lo suyo es que te busques un amiguito.

con ese nick te saldrán a pares :D

11:25 AM  
Anonymous Anonymous said...

Muchas gracias por la recomendación. NECESITO UN ALMA CANDIDA QUE SE PRESTE VOLUNTARIOSA A HACER MIS SUEÑOS, EN CUANTO A CABECERAS, REALIDAD!!!

1:35 PM  
Blogger Puño said...

ves? ése es el espíritu. tengo un amigo que envía fotos de sus tordos mañaneros a la gente que va en el metro con él a través del bluetooth. todos aceptan el envío. su nick: morenita de arganda :D

5:51 PM  
Blogger Magicomora said...

Que grande!
Como agradecerle ¿'? maestro...

Es increíble..he conseguido cambiar la cabecera!!
Con el fondo he tenido menos suerte aunque he seguido las instruciones pero ..he conseguido cambiar la cabecera!!

maestro...

10:55 AM  
Blogger Puño said...

sigues teniendo la versión original de blogger o te has pasado a la beta?

si me enseñas tu código yo te enseño el mío! digo... si me enseñas tu código te puedo buscar el fallo para que lo soluciones.

tengo ganas de retomar esto de una vez, a ver si los del blogger se quedan en una versión definitivamente!

10:58 AM  
Blogger info@jo-oh.com said...

Me gustaria cambiar la cabecera....de mi blog pero tengo la version nueva del blogger (la de a partir de diciembre)

alguien sabe como hacer-lo

10:34 AM  
Blogger Puño said...

si te lees el final del post, encontrarás el enlace que te lo indica.

3:30 PM  
Blogger info@jo-oh.com said...

vale gracias puño...he conseguido añadir el elemento de página para ponerlo en la cabecera...pero en el momento de añadir una imagen se me queda bloquedo, tambien me pasa cuando quiero añadir una imagen en mi perfil, será porque estoy utilizando el safari de Mac?

4:31 AM  
Blogger Puño said...

ni papa, puede ser. has probado a hacerlo desde otro sistema operativo u otro navegador?

5:31 PM  
Blogger Badges66 said...

Bueno tio, gracias mil acabo de conseguir lo que pense que no podría hacer nunca y solo es el principio si te pasas por aqui veras los resultados de tus sabios tutoriales

9:59 AM  
Blogger Puño said...

y qué versión tienes, la nueva o la antigua?

11:12 AM  
Blogger info@jo-oh.com said...

tu pregunta: ni papa, puede ser. has probado a hacerlo desde otro sistema operativo u otro navegador?

no aun no lo he provado

gracias

1:33 AM  
Blogger Mar Ferrero said...

Gracias puño, no hay duda de que tus
dias tienen 35 horas y tu vitalidad no tiene limites, encima eres ubicuo...
que comes? que bebes?
yo de mayor quiero ser como tu...

7:12 AM  
Blogger Brecht said...

This comment has been removed by the author.

8:41 AM  
Blogger Brecht said...

..te lo agradeceré toda mi vida.

8:44 AM  
Blogger Toño said...

Que pasa animal! soy Toño, el más largo que has conocido, acabo de encontrarme esto, que me viene muy bien, me estoy metiendo en el mundillo como una tortuguita alargada, un abrazo majo.

8:49 AM  
Blogger Puño said...

suerte y ya me contarás, malandrín!

7:11 AM  
Anonymous Anonymous said...

This comment has been removed by the author.

3:54 PM  

Post a Comment

<< Home