Ene
21
2010

Fixed / Floating Banner (así de rapido)

Floating banner (algunos le dicen fixed tambien) es cuando tenes una imagen o texto en un sector de tu pagina y por mas que vayas para arriba o para abajo este siempre queda ahí (puede estar arriba de todo, abajo, a la izquierda a la derecha…)

Hoy en dia es muy comun encontrar estos floating banners para linkear la pagina en cuestion con Factbook, Twitter o los RSS. (en blogs se ve mucho)

Bueno, en dos simples pasos les explico como hacerlo.

1-Si tu pagina tiene asociada una hoja de estilos (.css) abrila y pone lo siguiente.

#banner { border: 0;position: fixed; top: 440px; right:0;}

2- Guarda el .css y en la pagina donde queres poner el banner, metete en el codigo y después de <body> pone esto.

<div id=’banner’><a href=’http://(aca va la pagina adonde queres ir al hacer clic en el banner)’ target=’_blank’><img src=’(aca va la ruta de la imagen)’ border=”0″/></a></div>

Configuracion:

En el .css si queres que la barra este a la izquierda, cambia right por left

Donde dice top: 440px significa a cuantos pixeles va a estar el banner desde el inicio de la pagina, si disminus los pixeles por ejemplo 200px va a estar mas arriba…

————————————————————————————————————–

Un ejemplo que hice en la pagina de los www.jubirlados.com

En el .css puse:

#facebook-follow { border: 0;position: fixed; top: 440px; right:0;}

Y despues, en el index.php despues de <body> puse:

<div id=’facebook-follow’><a href=’http://www.facebook.com/group.php?gid=231416822119′ target=’_blank’><img src=’img/facebook_ad.png’ alt=’Add in Facebook’ border=”0″/></a></div>

Y listo.

| Escrito por Ratagore en: Tutoriales: Html / Php |

Sin Comentarios »

RSS feed for comments on this post. TrackBack URL

Dejar un comentario

Get Adobe Flash playerPlugin by wpburn.com wordpress themes

Theme: TheBuckmaker.com Blog Themes | Ipage Hosting Rating, Radio