27.1.10

Eliminar y reemplazar cabecera de blogger




La cabecera de nuestro blog de Blogger es un Widget que, tal como está, no podemos eliminar. ¿Por qué no lo podemos eliminar? Vamos al código correspondiente:

Diseño Plantilla Editar HTML Click dentro del editor Ctrl+f


Para plantillas antiguas:

    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título de nuestro blog (cabecera)' type='Header'/>
</b:section>
    </div>


Para plantillas nuevas:

    <header>
    <div class='header-outer'>
    <div class='header-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título (cabecera)' type='Header'/>
</b:section>
    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
    </header>


Análisis del código:
  1. Con «maxwidgets='1'» esta sección está limitada a un solo artilugio.

  2. «showaddelement='no'» impide que aparezca la opción Añadir un gadget

  3. El atributo «locked» con «true» bloquea el artilugio para que no pueda ser movido ni eliminado.

 

Conclusión

Hecho el anterior análisis podemos concluír que:

1.- si en «locked='true'» cambiamos true (verdadero) por False (falso) y guardamos plantilla, habilitaremos la opción Eliminar, que aparecerá como aparece en cualquier gadget. Así eliminaremos la cabecera en Página principalDiseñoDiseño.

 

Gadget cabecera

2.- Ahora sí podremos añadir un gadget Html/JavaScript, con el procedimiento normal, que reemplazará la cabecera eliminada y tendremos otra como queramos diseñarla:

Añadir gadget que reemplazará a la cabecera

Índice Edición HTML
Poner imagen de fondo a un blog Cambiar enlaces pie de página
Eliminar enlaces pie de página Eliminar 'Publicado por'
Eliminar fechas Eliminar la hora
Efecto subrayar links Eliminar barra superior
Evitar copias de blogs Ocultar o eliminar sidebar
Eliminar y reemplazar cabecera Ícono para barra de direcciones
Centrar títulos posts Ensanchar blog
Cambiar color fondo posts Color fondo sidebar
Agregar una sidebar Color fondo de comentarios
Personalizar firma pie de posts Personalizar fechas de los posts
Diseñador de plantillas de Blogger Crear página de inicio o Portada
Eliminar enlaces a autores de plantillas Cambiar de sitio la sidebar
Centrar imagen de la cebecera

32 comentarios :

▼▲ Ocultar / Mostrar comentarios
Comentario escrito por Anónimo #

Lo hice en mi blog y me quedó de maravilla.

Muchas gracias!

Comentario escrito por Urkumanta : #

Hola Castorlux, Primero, gracias por su ayuda, ya que además de solucionar mis problemas, voy aprendiendo!. Le hago otra consulta, la imagen que he colocado en la cabecera la veo que no está centrada, sino que está orientada a la izquierda. Podría ayudarme a quitar el dolor de cabeza al cual he llegado? Gracias

Comentario escrito por Castorlux : #

Urkumanta:
Si siguió el procedimiento indicado y subió la imagen con el gadget "imagen", haga lo siguiente:
en la primera línea del código agregue: align="center"
Es conveniente que active la opción "Reducir hasta ajustar" (en el gadget).
Saludos.

Comentario escrito por Migote : #

Excelente su web, me esta siendo de gran ayuda, felicitaciones!

Comentario escrito por Castorlux : #

Migote: Gracias por su comentario
Saludos!

Comentario escrito por lupe : #

aun no lo intento, pero tengo una pregunta: como puedo mover el header a la izq o derecha, q no este centrado.

un saludo

Comentario escrito por Castorlux : #

Lupe: Buscas, sin expandir plantilla de artilugios, este código:

#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

y cambias center por right o left, según la posición que prefieras.

Saludos.

Comentario escrito por lupe : #

MUCHAS GRACIAS!

Comentario escrito por Sound System - Cultura en radio : #

Muchas gracias, tengo un problema, espero que puedas solucionarlo, quiero colocar un menu en el sitio de la cabecera (ya eliminada)y cada vez que quiero poner algo sale un rectangulo atras que ocupa toda la pantalla, obviamente es del tamaño de la cabecera, como soluciono eso??? espero que me puedas entender, gracias y espero tu respuesta.

Comentario escrito por Castorlux : #

Una vez eliminada la cebecera agregas, en la sección de la misma, un gadget del tipo HTML/JavaScript en el cual debes poner el menú.

No tiene por qué aparecer ningún rectángulo, a no ser que el menú esté puesto en una tabla que tenga borde (border="1" o "2" o "3"...etc). Si es así debes cambiar el borde por "0" (border="0")

Comentario escrito por Esteban : #

Hola, excelente página!! muchas gracias por todo.

Me gustaría que me pudieses ayudar a poner margen a mi imagen de cabecera...uso la plantilla Awesome, y me da la opcion de poner margenes a las imagenes, pero solo quiero poner margen a la imagen de cabecera, no a las de las entradas.

Muchas gracias!!

Comentario escrito por Castorlux : #

Esteban:

a qué te refieres con "margen", a los espacios a cada lado de la imagen? o a ponerle un marco a la imagen.

Saludos.

Comentario escrito por esteban : #

Hola Castorlux, me refiero a ponerle un marco a la imagen.
Muchas gracias! a ver si me peudes ayudar.

Comentario escrito por Castorlux : #

Esteban:

Sigue el procedimiento indicado en el tutorial Para plantillas nuevas. En el gadget HTML/JavaScrpipt que añadas, pones este código:

<table border="1" width="XXXpx" align="center">
<tr>
<td>
Código de la imagen
</td>
</tr>
</table>

...en el cual

1.-border="1" es el grosor del marco. Si quieres un marco más grueso aumentas el valor.

2.- width="XXXpx" es el ancho en pixeles del marco. Debes reemplazar XXX por el ancho en pixeles de la imagen.

3.-align="center" es la ubicación de la imagen, en este caso te quedará en el centro de la cabecera. Si la quieres en un lado cambias center por left o right.

4.- El código de la imagen lo pones en el lugar indicado.

Obviamente el ancho de la imagen no debe sobrepasar el ancho del cuerpo de blog.

Saludos.

Comentario escrito por Esteban : #

Gracias por tu informacion Castorlux.
Sin emabrgo espero me puedas especificar un poco mas la informacion...es que no soy muy experto en esto..

¿donde encuentro el codigo de la imagen?

¿el codigo lo incluyo como cualquier HTML/JavaScript en la seccion gadgets de elementos de la pagina?

gracias

Comentario escrito por Castorlux : #

Esteban: El código para la imagen es este:

<img src="URL o dirección de la imagen">

Ahora: La URL o dirección de la imagen la obtienes así:

1.- Haces click sobre la imagen con el botón derecho del mouse. Aparecerá un cuadro con varios enlaces. Buscas uno que, dependiendo del navegador que utilices, puede ser: Propiedades (si el navegador es Internet Explorer), Ver información de la imagen, (si el navegador es Mozila Firefox), o algo similar en cualquier otro navegador.

2.- Hces click sobre dicho enlace y, en el cuadro que aparece, encontrarás la URL o dirección de la imagen. La copias y la pegas en el lugar indicado.

En cuanto al gadget HTML/JavaScript con el código completo, lo añades normalmente como cualqier otro gadget en Elementos de página, debajo de la cebecera del blog, que debiste eliminar, como se indica en el tutorial.

Saludos.

Comentario escrito por Castorlux : #

No se te olvide que el código de la imagen lo debes poner dentro del código que te indiqué antes, el que le da el marco a la imagen.

Hasta pronto.

Comentario escrito por Esteban #

Ufff...gracias nuevamente Castorlux.
pero tuve un problema...al realizar el proceso de eliminacion de la cabecera no logro activar la funcion "eliminar cabecera", ya que cambio "false" por "True", pero aun asi no se activa la función.
realizo los cambios, guardo la plantilla, y nada.
Al volver a la plantilla vuelve a aparecer "false" y no "true" como lo cambié.
que será?

Comentario escrito por Castorlux : #

Esteban: Creo que tienes una confusión. El cambio que debes hacer es quitar true y poner false. Lee cuidadosamente el tutorial y aplica el procedimiento tal como se explica.

Comentario escrito por Esteban : #

wow!! mal mal...logré hacer que desapareciera la cabecera reemplazando true por false.
pero no pude ubicar la imagen tal como me dijiste (al parecer el codigo de la imagen esta mal ya que aparece el margen pero no la imagen dentro)
Asique quize volver atras tal como dice el procedimiento pero no puedo, ya que no encuentro el codigo en donde volver a poner true en vez de false. Al parecer desapareció!
que hago????
gracias por la ayuda!

Comentario escrito por Esteban : #

Logré volver el Blog a la normalidad...
Y finalmente opté por modificar la imagen en Paint y agregarle un margen..fue mas facil.
Muchas gracias por tu ayuda!

Comentario escrito por Castorlux : #

Con mucho gusto, Esteban.
Saludos.

Comentario escrito por Loan Grenouille : #

La verdad es que usted me ha salvado del estres sin remedio, pues por todoa la WEB nadie explicaba como hacer esto conla snuevas platillas.... solo usted! muchismas gracias :D

si quiere revise mi blog y vea que fue lo qu ehice con mi header :D

GRACIAS
LG

http://morethan365daysofmylife.blogspot.com/

Comentario escrito por Castorlux : #

Loan Grenouille: He pasado por su blog y pude observar que su header quedó perfecto. Felicitaciones.
Saludos.

Comentario escrito por Mike : #

Excelente Castorlux ahora mismo lo estoy explicando, agregado su blog Favoritos.
Saludo

Comentario escrito por Ximena Veroni'k : #

muchas gracias, eh encontrado en tu blog la ayuda que necesitamos para eliminar algunas cosas de la pantilla del mio, exelente tu blog

Comentario escrito por Pedro Pablo : #

Ximena: Gracias por tu comentario. Estoy dispuesto a colaborarte en lo que esté a mi alcance.
Saludos.

Comentario escrito por Amina : #

Hola, gracias por toda la info, es de mucha utilidad. Pero quería comentarle otra cosa, en mi blog tengo en la cabecera el título y una imagen detrás de él... y el link a la home sólo funciona cuando estoy dentro de alguna entrada, pero cuando estoy en el home no me funciona. Se le ocurre alguna solución??
Gracias y saludos

Comentario escrito por Pedro Pablo : #

Amina: El link del home es un enlace que lleva al mismo. Es por eso que cuando se hace click en la cabecera, estando en una entrada, el enlace lleva al home, y cuando se hace click en la cabecera, estando en el home, no ocurre nada porque ya se está en el destino del link, que es el mismo home.
Saludos.

Comentario escrito por santimental : #

Hola, tengo el siguiente problema, al insertar una imagen para el blog en la cabecera (desde Diseño) y no salir como quería la eliminé pero ahora me sale el espacio sin datos, es decir, sin el título ni descripción del blog, pero en sólo desaparece en la versión de pc en la versión móvil si sale ¿?.

Te agradecería si me puedes ayudar, mi blog es http://dondecomesanti.blogspot.com.es/

Gracias.

Comentario escrito por Pedro Pablo Pachón : #

Santimental, me disculpas pero no sé qué pudo haber pasado. Se me ocurre que revises las modificaciones que hiciste en la plantilla, en la sección de la cabecera (header), puede ser que elguna modificación que hiciste esté originando el problema.

Saludos.

Comentario escrito por Juan V : #

Hola, está muy bien éste manual de como retorcar tu blog.
Visita mi blog:http://ayudartusmartphone.blogspot.com.es/

Publicar un comentario en la entrada