Archivo

Entradas Etiquetadas ‘html’

[Solucion] Ocultar barra de Navegacion – Blogger

Jueves, 19 de enero de 2012 1 comentario

En blogger siempre hay una barra en el header de la web y que aveces es incomoda a algunos, por eso en esta entrada vamos a Ocultarla  y tambien Ocultarla y mostrarla al pasar el raton por encima.

blogger-ocultar-barra-de-navegacion_paso0

Sigue estos pasos:


1.-  Entramos en nuestro panel de blogger:

http://www.blogger.com/home

2.- Seleccionamos el blog y luego vamos a Plantilla –> Edicion de HTML .

3.- Nos aparecera el siguiente mensaje y damos click a Continuar.
Blogger - Ocultar Barra de Navegacion - Paso3


4.- Ahora nos aparecera codigo HTML, solo tenemos que dar a Buscar (Ctrl + F) y escribir
Blogger - Ocultar Barra de Navegacion - Paso4



5.- Ahora debemos elegir el codigo que queremos usar y ponerlo Antes del < /head> (como en la imagen) :

Blogger - Ocultar Barra de Navegacion - Paso5

 

Codigo para Ocultarla Completamente:

<style type='text/css'>
#navbar-iframe {
display: none !important;
}
</style>

Codigo para mostrarla solo al pasar el raton por encima:

<style type='text/css'>
#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)
}
</style>




Input con Value que desaparece al dar click y reaparece al salir (Form)[HTML]

Sábado, 22 de enero de 2011 5 comentarios

Tengo un Form con 2 inputs, 1 de nombre de usuario y el otro de contraseña, quiero que al el de nombre de usuario tenga escrito por defecto USUARIO y que al darle click este texto desaparesca para que puedan escribir pero que tambien si no escriben nada (osea que lo dejan en blanco) vuelva a poner USUARIO .



Para hacer solo hay que agregar lo siguiente al INPUT que queremos:

onclick="if(this.value=='TEXTO POR DEFECTO') this.value=''" onblur="if(this.value=='') this.value='TEXTO POR DEFECTO'"



Quedandonos asi todo el INPUT de usuario:

Hipervinculo/enclace en capa div que tiene Background CSS

Martes, 11 de enero de 2011 7 comentarios

Estaba haciendo un header en html con <div> y CSS ,  al poner la imagen del logo en background ya no podia asignarle un hipervinculo al index (u otro sitio), porque no es un texto o una imagen para poder ponerselo.


Para poder hacerlo tan solo hay que poner lo siguiente:



Asignandole al hipervinculo el style=”display: block; height: 100%;” haremos que el bloque se haga enlace tambien y a 100% de altura, llenando asi todo el div ( creo que si se pone el  style=”width:100%; height: 100%;” deberia hacer lo mismo ;) )


Este es el CSS por si quieren mirarlo mejor:

.banned-header {
        width:390px;
        height:64px;
        background-image:url(images/mi_fondo.png);
 }


Descarga Source de Ejemplo: Ejemplo de Hipervinculo en un Div que tiene Background (104)

Categories: HTML / CSS Tags: , , ,