Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Quitar la navbar y poner un menú que veremos solo nosotros.

En los blogs de blogger encontramos una navbar. Se trata de una barra situada en la parte superior del blog y que tiene diferentes funciones. Cuando iniciamos sesión, podemos crear nuevas entradas, ir al escritorio, acceder al Diseño del blog... desde dicha barra.

Tal vez te hayas decidido por deshacerte de la navbar (como explico en
esta entrada) y por tanto, tienes dificultades para acceder al Escritorio de blogger.

Con este truco vamos a crear un menú, similar a la navbar, que ofrece las posibilidades de crear nuevas entradas, acceder al escritorio, editar entradas, ir al diseño del blog...

El menú sólo lo veremos nosotros, es decir, los administradores del blog (y siempre que hayamos iniciado sesión en blogger).

Sigue los siguientes pasos para configurarlo:


Diseño>edición HTML>sin expandir artilugios




Busca la siguiente línea:

<b:section class='header' id='header' maxwidgets='1'>


Ahora cambia el número 1 por un 2 y guarda los cambios.

En la parte de diseño se habrá añadido lo de añadir un gadget encima de la cabecera.


Diseño>añadir elemento de página>html-javascript



Pegamos este código:

<span class='Administrador'>
/
<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=IDBLOG">Nueva
Entrada</a>
/
<a href="http://www.blogger.com/posts.g?blogID=IDBLOG">Editar
entradas</a>
/
<a href="http://draft.blogger.com/blog-options-basic.g?blogID=IDBLOG">Configuración</a>
/
<a href="http://www.blogger.com/rearrange?blogID=IDBLOG">Diseño</a>
/
<a href="http://www.blogger.com/html?blogID=IDBLOG">Edición
HTML</a>
/
<a href="http://www.blogger.com/logout.g">Salir</a>
/
</span>

Sustituye en cada caso
IDBLOG por la dirección (ID) de tu blog. Puedes obtener la ID en la barra de direcciones. Aparecerá de esta forma:

http://www.blogger.com/html?blogID=NUMEROS DEL ID


Una vez hayas insertado el ID en cada línea, guarda el gadget.

Para editar un poco el menú y darle personalizarlo haz lo siguiente...


Diseño>edicion HTML>expandimos artilugios




Mira la ID de tu nuevo elemento, si es un html, seria algo así:

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

Pués ahora en el CSS encima de /* Header pegas este código:

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

Función de cada línea:

width: El ancho que va a tener el widget para que no sobresalga de la cabecera,o de donde lo tengamos.

text-align: Centrará el menú.

border: Le creará un marco.

background: Le pone un fondo.

Para terminar pon el gadget encima de las entradas o encima de la cabecera y verás un fántastico menú, para editar, crear, diseñar... en tu blog, un menú que solo verás tu.

Gara dice...

Hola, me gustaria si es posible, q le dieras un vistazo a mi blog, pq no soy capaz de quitarle la barra y no se q hacer,la he quitado en otras plantillas, pero en esta me resulta imposible

Gracias de antemano.

http://gara-enblancoynegro.blogspot.com/

Jaime Trujillo Escobedo dice...

Hola Gara.

Prueba a incluir este bloque de CSS antes de la etiqueta ]]></b:skin>

#navbar-iframe{
visibility: hidden;
display: none;
height: 0px;
}

Así debería funcionar ;).

Gara dice...

Hola de nuevo Jaime, si le pongo esto ]] directamente se me cierra la pagina, lo he puesto sin ellos y sigue saliendome la barra.

No se q hago mal, he probado a ponerlo en diferentes sitios, pero nada de nada.

Gara dice...

Y estoy de nuevo,mira hice esto, encima de este código:

body {

Puse éste:

#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)
}

Y funciono, gracias por tu ayuda y estar tan pendiente.

Besos

Jaime Trujillo Escobedo dice...

Gara, te decía que lo pusieses encima de la etiqueta ]]></b:skin> para que te fuese más sencillo pero un bloque de CSS lo puedes insertar encima o debajo de cualquier bloque que esté sobre la etiqueta ]]></b:skin> ;).

Insertando esos bloques has dado opacidad a la navbar (en
esta entrada explico como hacerlo) y un efecto hover que, al pasar el cursor, hace que la navbar siga sin visualizarse (gracias a la propiedad FinishedOpacity y a los valores "100" y "1.0") :D.

Si necesitas cualquier otra cosa dímelo.

¡Un abrazo!

Jose dice...

ya lo he puesto en mi blog. Gracias

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo