AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

Quitar la navbar, pero seguir accediendo a todo

domingo, 28 de septiembre de 2008

Ayer vi este truco en el blog de Rosa.

Como podrás apreciar ya no tengo la navbar en este blog.
Hasta ahora no la había quitado por lo cómoda que resultaba para acceder a las diferentes partes del blog, pese a que, a mi entender, le faltan botones, ya que si estás en la página principal del blog y quieres acceder al panel, a menos que ya lo tengas abierto en otra ventana has de pasar por algún otro sitio.

Pero con este truco es muy sencillo ir a donde quieras de tu blog, ya que se trata de poner una barra de navegación que solo ve el administrador del blog y a la que puedes añadirle los enlaces que desees.

Rosa ha añadido las herramientas, aunque yo las he quitado, sin embargo he añadido un botón a Editar entradas.

-Para hacerlo, has de añadir un elemento en cualquier parte del blog, aunque lo más cómodo es que lo pongas encima de la cabecera.
Tan solo lo verás tu, así que colócalo donde te resulte más cómodo.
Pero voy a explicarte como ponerlo donde lo tengo yo y como tunearlo un poco.

Así que primero entramos en Diseño, Edición de HTML, y buscamos SIN expandir artilugios, el código HTML de la cabecera.
En este código verás algo más o menos así:
<b:section class='header' id='header' maxwidgets='1'>
Cambiamos este 1 por un 2 y guardamos plantilla.

En Elementos de la página se habrá añadido un Añadir un gadget encima de la cabecera.
Pinchamos y escogemos un elemento o gadget, HTML
Y en el has de poner este código:
<span class='item-control blog-admin'>
/
<img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SNmUcZtuboI/AAAAAAAAESU/9KpauxXah_o/s320-R/adminin.jpg"/>
/
<a href="http://blogger.com/home">Acceder</a>
/
<a href="http://www.blogger.com/post-create.g?blogID=Idnumber">Nueva
Entrada</a>
/
<a href="http://www.blogger.com/posts.g?blogID=IDnumber>Editar
entradas</a>
/
<a href="http://draft.blogger.com/blog-options-basic.g?blogID=Idnumber">Configuración</a>
/
<a href="http://www.blogger.com/rearrange?blogID=Idnumber">Diseño</a>
/
<a href="http://www.blogger.com/html?blogID=Idnumber">Edición
HTML</a>
/
<a href="http://www.blogger.com/logout.g">Salir</a>
/
</span>


Cambiando eso de IDnumber, por el número de identidad de tu blog.

Este número lo ves pinchando en cualquiera de los sitios de la navbar, ya sea en Configuración, en Nueva entrada o en Diseño, en la barra del navegador, como ves en esta imagen.



Cópialo y pégalo en todos los sitios donde veas IDnumber de este código.

Guarda cambios una vez hayas colocado el código en un elemento o gadget HTML, y ya verás los enlaces encima de la cabecera, o donde lo hayas colocado.

Si no quieres que se vea alguno de estos enlaces, es suficiente con que elimines la línea que le corresponde.

Si lo has colocado encima de la cabecera, o en cualquier otro sitio que no sea la sidebar, quizá el fondo no te deje ver bien los enlaces. (Me ha sucedido aquí).
Podemos modificarlo con un poco de CSS.
Entras en Edición de HTML y miras la id del nuevo elemento, (en mi caso era el HTML7), que verás en una línea así:

<b:widget id='HTML7' locked='false' title='' type='HTML'/>

Entonces, en el sector del CSS, por ejemplo encima de /* Header añades este código:

#HTML7 {
width: 800px;
text-align: center;
border: 1px solid $borderColor;
background: $bgColor;
}

Recuerda que el número no será el mismo.
Con esto le estamos configurando lo siguiente:
width el ancho que va a tener el widget para que no sobresalga de la cabecera;
text-align lo centrará;
border le creará un borde que lo enmarcará;
background le pondrá un fondo.

Opciones:
El ancho dependerá del ancho de tu blog o de tu cabecera;
el borde y el fondo has de ponerlo de manera que resalte lo que se ve, ya que el color de las letras será el de los enlaces de tu blog; también has de tener en cuenta como se definen estos colores en las variables de tu plantilla, pues no siempre se escriben así.

Y este es el aspecto, que tu no puedes ver, de esta nueva barra de navegación personalizada en este blog.



Una cosa más.
En esta imagen, que puedes pinchar para ver en grande, las líneas que separan los enlaces son líneas verticales, pero en el código no salian y me descontrolaba toda la entrada, así que he optado por poner líneas inclinadas para separar los botones. Cámbialas si lo prefieres, cuando montes tu propio código.-

Para quitar o esconder, mejor dicho, la de blogger, sigue las instrucciones de esta entrada.

Imprime esta entrada

7 comentarios. ¿Quieres añadir el tuyo?

  1. paqui ha dicho
  2. Lo puse y funciona de maravilla, gracias Eulalia

  3. JoRgE! ha dicho
  4. Hola que tal? Tu blog me ENCANTA! pero el problrma es que no encuentro lo de /* Header :( espero que respondas bye.

  5. Eulalia ha dicho
  6. jorge:
    Fíjate que digo: "por ejemplo encima de Header"
    Eso significa que no es necesario que esté ahi, es solo una idea de donde lo podeis colocar.
    En la zona del CSS del código, el orden no es demasiado importante, aunque a efectos prácticos, sobre todo para localizar los códigos, es preferible colocarlos siguiendo el orden en que se ven en el blog.
    Saludos.

  7. Mimi ha dicho
  8. ¡Estoy Felizª lo logré, teniendo en cuenta lo lenta que soy para entender, estoy muy agradecida a las explicaciones tan claritas. Voy aprendiendo el léxico, ahora trato de captar cuando hablan de CSS, pero ya voy a caer.
    Mil gracias por este lugar.

  9. Vanesuky ha dicho
  10. Una pregunta, puse una plantilla nueva para mi blog, en la que no aparece la navbar, siguiendo tus passos he creado una, pero la ve todo el mundo, no entiendo el porqué!!Que hago mal??

    Gracias.

  11. Eulalia ha dicho
  12. Vanesuky:
    Pues no se si habras hecho algo mal pero yo no la veo, (a menos que hayas quitado el codigo).

    Veo un par de enlaces, uno a Incio y otro a Entradas, y esta frase

    TEMPLATE ERROR: Invalid data reference post.addCommentUrl: com.google.layouts.framework.widgetview.GoogleMarkupException: No dictionary named: 'post' in: ['blog']

    que no me queda claro porqué se ve.

    El enlace entradas me abriria todas tus entradas y el de inicio lleva a la página principal de tu blog.

    Si no lo has quitado y tu lo ves, está bien.

    Para saber realmente si puede verlo alguien más has de entrar en tu blog sin estar logueada.
    Para ello guarda tu blog, cuando estés en la página principal, en favoritos. Luego cierra sesión en blogger, ves a favoritos y pincha en tu blog.
    Deberías verlo como visitante, no como administradora. Así sabrás si realmente se ve.
    Ya me contarás.
    Saludos.

  13. ** Extraña Lola ** ha dicho
  14. Hola!!... recién hoy conozco tu blog. Me encantó en serio.

    Este truco es genial!!!, ya lo implemente en mi blog. Gracias por publicarlo!!!

    Saludos!!

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.