Cómo ocultar la barra de navegación de Blogger (navbar)

Por defecto, en nuestro blog, aparece una barra de navegación que permite al usuario avanzar o retroceder a otro blog, acceder directamente al panel de control y buscar en blogs. Realmente, esto no aporta nada al nuestro, ocupa un espació y en este post veremos cómo ocultarlo.

Este elemento no puede configurarse desde las opciones de interface de Blogger por lo que tenemos que editar la plantilla HTML.

Barra de navegación de Blogger

Pasos para quitar la barra de navegación de Blogger

Como siempre que tocamos la plantilla HTML te recomiendo copia de seguridad antes. Sigue estos sencillos pasos:

Accede a la pestaña Plantilla y haz clic en el botón Crear copia de seguridad/Reestablecer
Una vez hayas creado tu copia de seguiridad, presiona el botón Edición de HTML
Busca Ctrl F o Ctrl B (en Mac en Mac ⌘F o ⌘B) y busca Body {
Justo encima pega el siguiente código:

#navbar {display: none !important;}
Guarda la plantilla y visualiza tu blog

Si bien ocultar esta barra no atenta contra las condiciones de uso de blogger, ni afecta al posicionamiento del mismo, se pide en algunos foros tener la deferencia de colocar el logo deBlogger (es un gadget y puede añadirlo a través de la Pstaña Diseño->Agregar Gadget->Logotipo de Blogger)

Como siempre, te invito a utilizar los comentarios para dejar tu opinión en este artículo. Si te ha gustado esta publicación y no quieres perderte ninguna otra, sígueme a través deFacebook, Twitter, suscripción por email, Google Friend , RSS ahora también en Google +. Usa los botones sociales al pié de la publicación para recomendarla a tus amigos. ¡Gracias! ;-) .

BIBLIOGRAFIA

http://www.iniciablog.com/2011/01/como-ocultar-la-barra-de-navegacion-de.html

1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio.

2 Abre el archivo inicio.htm, que creaste en el tema anterior y que se encuentra en la carpeta ejercicios_html/animales.

3 Inserta una línea en blanco debajo de la etiqueta <body>, y escribe el siguiente código en ella:

<basefont color="red" size="1 ">

Con este código estarás estableciendo el color rojo (#FF0000) y tamaño 1 para el texto del documento.

Si guardas ahora los cambios y visualizas la página, no verás ningún cambio ya que la página no tiene texto.

4 Detrás de la etiqueta <basefont> inserta una línea en blanco, y escribe el siguiente texto: Inicio

5 Guarda el archivo y visualízalo en tu navegador, el texto debe aparecer en rojo y pequeño.

Dejaremos la página un poco más discreta y cambiaremos el color del texto a verde oscuro (#003333) y subiremos el tamaño de las letras.

6 Rectifica la etiqueta <basefont para que quede así:

<basefont color="#003333" size="4">

Con este código estarás estableciendo el color verde oscuro (#003333) y tamaño 4 para el texto del documento.

7 Guarda el archivo y visualízalo en tu navegador, observa los cambios.

8 Encierra el texto Inicio entre etiquetas <H1> de la siguiente forma:

<h1>Inicio</h1>

Con este código estarás conviertiendo el texto en un encabezado de primer nivel.

9 Guarda el archivo y visualízalo en tu navegador, observa los cambios, el texto aparece destacado y más grande.

10 Inserta una línea en blanco debajo del código anterior, y escribe la etiqueta <hr>.

Con esta etiqueta estarás insertando una regla horizontal.

11 Guarda el archivo y visualízalo en tu navegador, observa la regla

12 Inserta una línea en blanco debajo de la etiqueta anterior, y escribe el siguiente código en ella:

<blockquote>

<blockquote>

<p align="left">

<em>

Somos una asociación de veterinarios, estudiantes de veterinaria, o simplemente amantes de los animales.

<br>

Desde esta página web intentaremos resolver tus dudas acerca de cómo cuidar a tus mascotas.

</em>

</p>

</blockquote>

</blockquote>

Con este código estarás insertando un párrafo (<p>) dividido en dos líneas (<br>).

Este párrafo estará alineado a la izquierda (align="left"), aparecerá en cursiva (<em>) y tendrá doble sangrado (<blockquote>).

13 Guarda el archivo y visualízalo en tu navegador, comprueba que obtienes una página como la que aparece si pulsas aquí. Para apreciar mejor el efecto del párrafo ves cambiando el tamaño de la ventana de tu navegador y verás como el texto se va escribiendo en más líneas pero siempre alineado a la izquierda y saltando de línea después de la primera frase.

Ejercicio 2.

1 Abre el documento gatos.htm, de la carpeta originales/animales del curso.

2 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales

Vamos a modificar la página para que tenga el siguiente aspecto:

1 Empezamos por darle a la palabra Gatos un estilo de encabezado 1: <h1>Gatos</h1>

Si quieres puedes ir observando los cambios según los vayas introduciendo, guardando sin cerrar el bloc de notas y visualizando la página cada vez (la primera vez abres el explorador con la página gatos.htm y después de ver el efecto, en vez de cerrar la ventana del explorador la dejas abierta, así cuando hayas hecho el siguiente cambio en la página podrás volver a la sesión del explorador con la página gatos.htm y después de hacer clic en el botón Actualizar de tu navegador verás mejor el efecto producido por el cambio que has incorporado a la página).

2 Detrás añadimos una regla con la etiqueta <hr>.

3 Añadimos una línea en blanco con <br>

4 La pregunta queda sangrada con respecto al resto del texto, la colocamos dentro de una etiqueta <blockquote> y además le asignamos un estilo de encabezado 3:

<blockquote>
<h3>¿COMO PREVENIR LOS PROBLEMAS DENTALES?</h3>
</blockquote>

5 Sólo nos queda definir la lista intercalando las siguientes etiquetas:

<ul>
<li>Alimentar al gato con comida seca de buena calidad o darle algo duro para que lo mastique</li>
<ul>
<li>Preferiblemente que coma pienso</li>
</ul>
<li>Cepillarle los dientes una vez a la semana</li>
<li>Que el veterinario examine la boca del gato por lo menos cada seis meses</li>
</ul>

6 Guarda el archivo y visualízalo en tu navegador.

MI PRIMER BLOG

Seguidores

jueves, 23 de mayo de 2013

BLOQUEAR LA BARRA DE CONTROL DE UN BLOG

Cómo ocultar la barra de navegación de Blogger (navbar)

PASOS PARA INSERTAR UN TEXTO CENTRADO EN UN BLOG

domingo, 19 de mayo de 2013

VIDEO

VIDEO

Lo ultimo en tecnologia