Crear footer fijo para agregar cualquier contenido
Ya había leído sobre los hacks para hacer funcionar elementos fijos en IE6 (IE6 no reconoce ningún elemento en posición fija a excepción del background en el body), pero no me había dado el tiempo para probarlo. Decidí probar este, que recomienda CSS portal para posicionar en posición fija (fixed) el footer (pie dela página), pensando en que pudiera ser útil para agregar cualquier contenido como íconos sociales, un buscador personalizado, o el de google, enlaces, o cualquier otro contenido relevante y que valga la pena tenerlo en esa posición.
Quede satisfecha, pues la verdad es que si funciona muy bien, aunque no tengo Internet explorer 6, lo probé con un emulador de IE6 (que imita el comportamiento de IE6), solo hay que hacer unos pequeños cambios estructurales en la plantilla, para que se vea realmente como una barra completa al 100% del ancho del monitor, pensando por supuesto, que busquemos ese resultado.
Basicamente lo que vamos a crear, es una especie de Barra del tipo Navbar de blogger o como algunas que circulan por ahí que funcionan como un widget, donde colocaremos íconos sociales y un buscador personalizado.
D E M O S T R A C I O N
Ventajas:
- Una vez creada la barra (footer fijo), podrás colocar el contenido que tu quieras, agregando los elementos desde el diseño de tu plantilla, tal y como lo haces con las etiquetas, archivo, etc.
- Puedes colocar cualquier tipo de fondo para tu barra, agregando una imagen como por ejemplo: madera, papel, metal, o cualquier otra que combine con el diseño de tu plantilla
- Puedes personalizar los íconos sociales, hay muuchos disponibles por la red, y que pueden ser usados grátis
- Puedes editar el contenido la barra (footer fijo) sin necesidad de ingresar al código de tu plantilla, lo que en definitiva es más práctico, fácil y rápido
Ah! lo olvidaba, antes de empezar, necesitas guardar una copia de seguridad de la plantilla que usas, haciendo click en descargar plantilla, estando en el código HTML de tu plantilla.
Paso 1. Vé a Diseño► Edición de HTML, pulsa las teclas CTRL F y busca #footer-wrapper, asegúrate de que no tenga ninguna imagen que forme parte de la estructura del diseño, también revisa la parte del #footer , buscando si hay imágenes.
Si no hay imágenes, pasa al paso 2.
Si hay imágenes en tu plantilla, cambia #footer-Wrapper por #lower-wrapper.
Luego busca (pulsando CTRL F) <div id='footer-wrapper'> y cambialo por <div id='lower-wrapper'> depués de ese código, asegurate de que no haya esto:
<b:section class='footer' id='footer'>, si lo hay, pero no lo necesitas, por que no agregas en esa parte ningún widget, borralo, eliminando también el cierre que es </b:section>, si lo usas, cámbialo por este: <b:section class='lower-wrapper' id='lower-wrapper'>
Pon vista previa revisando que todo luzca normal, si es así, Guarda los cambios.
Paso 2. Si no tienes imágenes en la plantilla, sustituye el código (completo) de las sección del footer, por el siguiente código:
/* Footer
----------------------------------------------- */
#footer-wrapper{
width:100%;
height:45px;
}
#footer {
clear:both;
margin:0 auto;
padding:0;
letter-spacing:.1em;
text-align: left;
position:fixed;
left:0;
bottom:0;
height:45px;
width:100%;
background:#000;
border-top:1px solid #191616;
-moz-box-shadow: 1px 2px 11px #000;
-webkit-box-shadow: 1px 2px 11px #000;
}
#footer a{
color:#221e1e;
text-shadow: 1px 0px 1px #141400;
}
#footer a:hover{
color:#636363;
text-shadow: 1px 0px 1px #280404;
}
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
.redes{
width:200px;
float:left;
margin-top:6px;
padding-left:280px;
height:40px;
}
a.rss, a.twitter, a.facebook {
opacity:0.4;
filter:alpha(opacity=40);
width:35px;
height:34px;
display:inline-block;
margin-left: 2px;
}
a.rss:hover, a.facebook:hover, a.twitter:hover { opacity:1;
filter:alpha(opacity=100);
}
#contenedor-buscador{
float:right;
width:220px;
padding:4px 240px 0px 0px;
height:40px;
}
.searchbox{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJPqsE1NOLc8THlqo5M8JbFMzaNIXvKeNaYNW5nyMcwulL6HXIJUYYoIJBdeg5rl4wSfRSvFzzCN3JhSUWBPLcsxBwFW8V3cEYiI55F6P51DNHAcu2PEix62kCllIbP2jdUcjrfsZagoE/s1600/buscador.png) no-repeat;
border:none;
color:#333;
font-family:"arial", serif;
font-size:17px;
font-style:italic;
padding:7px;
width:190px;
height:20px;
}
En la mayoría de las plantillas aparece un comentario, que te dice que código sigue a continuación, y para el footer, aparece algo como esto:
/* Footer
----------------------------------------------- */
Con el código que vas a sustituir, se declaran los estilos de el footer-wrapper, el footer, los íconos sociales, y el buscador.
Hasta ahí, si checas en vista previa y si usas un navegador que no sea IE6, ya verás una barra negra al fondo que abarcara todo el espacio de la pantalla de tu monitor .
Si tenías imágenes y ya realizaste los cambios de foter-wrapper a lower-wrapper, también agrega todo ese código, teniendo cuidado de no repetir estilos para el #footer, si los tienes escritos en tu plantilla, cambialos por #lower-wrapper, antes de pegar el código anterior.
Paso 3. Ahora necesitamos mover la sección del footer-wrapper hacia abajo, con el fin de sacarla de la envoltura del outer-wrapper, con el fin de que se vea correctamente en IE6, si no, dependiendo de la estructura del diseño, la barra se verá hacia un lado (no ocupara el 100% del espacio del monitor).
Para lograrlo, si no tenias imágenes, estando en el código de tu plantilla, localiza:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
</b:section>
</div>
Nota:En la plantilla Mínima siempre existe la sección para colocar widgets, resaltada de rojo, si no la tienes, agrégala, tiene que quedar igual que el código anterior.
Luego, coloca ese código antes de la etiqueta </body>.
Paso 4. Checa en vista previa, la barra se verá igual, solo el cambió ocurrirá en IE6, después guarda los cambios.
Perfecto!, ahora, ya tienes, una sección disponible en el diseño de tu plantilla, para agregar contenido y luce así:
Paso 5. Ahora agregarás el contenido (íconos sociales, buscador), en la sección de el footer fijo que hemos creado, eligiendo la opción de HTML o javascript, para ello, pegarás este código:
<div id="contenedor-buscador"><form action='URL_DE_TU_BLOG/search' method='get'>
<input type="text" class="searchbox" name="q" value="Buscar" onfocus="if (this.value == "Buscar") this.value = "";" value="Buscar" name="as_q" onblur="if (this.value == "") this.value = "Buscar";" />
</form></div>
<div class="redes">
<a class="rss" href="http://feeds.feedburner.com/tu-feedburner-ID" target="_blank"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMuuZMVPSP6RpY9VpHeXLwAn1iMKpYkmCdsztYcRavUpFlBGaF9_OWajTLrAFfJfH48fkD1nLeftUNfbPPjO2Z28rablpKc7yiZz5f4MLMsh3iT-jxqJ3qWVdFEZe0K2NFPcN0Y6YJvGA/s1600/rss-negro.png" /></a>
<a class="twitter" href="http://www.twitter.com/tu ID de Usuario/" target="_blank"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy2Y-TjQXxMBWOh7aS5Ca0XX145kvVYJTxyxZkFeOUmvC-VqXdMVAgsVXtrM1rIz4Ne41cvSP2YmNry6P8FXuDunFqdD2ffeXHOp4aaCOebeNCWo95qJCQwZvlj0mR8JBtGQ6ln0ZwdrY/s1600/twitter-negro.png" /></a>
<a class="facebook" href="http://www.facebook.com/share.php?" target="_blank"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOR0DBuFQAbND1K_ptgqxb66qZNz8UgeAscVr4LahDiLOsSwOJ86tfuIwDNgUY7ZtSV32BbGh0bBt1Ksuiv9gAwYQvkazFxliLEEL8rVdDMZN-oA6cMK1uXVTxqXvRUcaX4hzTmiXcEXU/s1600/facebook-negro.png" /></a>
</div>
Deberás sustituir todo lo de naranja (los enlaces) por tus enlaces propios respectivamente. Ahí el código, dice que debes poner.
Muy bien, ya tienes una barra fija con íconos sociales y un buscador y que además funciona en IE6.
Para mostrar que se puede hacer sin ningún problema en plantillas de prediseñadas, lo hice usando la plantilla de Cuentos de Noche tres columnas, ahí puedes verlo funcionar, además agregué un enlace, e hice algunos cambios en los estilos.
Si quieres agregar enlaces deberás usar el siguiente código, y colocarlo siempre al final de el código anterior:
<span style="float:left; padding:10px 0px 0px 0px;">
<a href="#">texto del enlace</a></span>
Deberás cambiar el gatito # por la dirección del enlace, y texto de el enlace por el texto que quieres que se muestre.
Nota: importante, si vas a agreagar cualquier otro contenido, deberás tomar en cuenta la altura de el footer, ya que si el contenido es mayor que altura de este, el contenido no se verá completo en todos los navegadores, por lo tanto, deberás cambiar el valor de la altura según sea necesario. La altura que hemos usado es de 45 pixeles. (height:45px;).
Etiquetas:trucos,Tutoriales