Crear menú/tabs en pagina facebook

Puedes colocar un pequeño menu en tu pagina facebook para mostrar diferente informacion sin necesidad de salir de la pestaña fbml.
lo primero que debes hacer es colocar la aplicacion FBML a tu pagina facebook, para luego poder colocar el codigo.

ESTE ES EL CÓDIGO BÁSICO PARA CREAR TABS:

<ul>

<li><a href="index.html" clicktoshow="1" clicktohide="2, 3, 4">PRIMERO</a></li>
<li><a href="about.html" clicktoshow="2" clicktohide="1, 3, 4">SEGUNDO</a></li>
<li><a href="services.html" clicktoshow="3" clicktohide="1, 2, 4">TERCERO</a></li>
<li><a href="contact.html" clicktoshow="4" clicktohide="1, 2, 3">CUARTO</a></li>

</ul>


<p style: padinn-top
<div id="1" >

CONTENIDO DE PRIMERO

</div>

<div id="2" style="display:none;">

CONTENIDO DE SEGUNDO

</div>

<div id="3" style="display:none">

CONTENIDO DE TERCERO

</div>

<div id="4" style="display:none">

CONTENIDO DE CUARTO

</div>


Y QUEDARA ASÍ:
Como observaras le falta que le den estilo.

Ahora les paso a mostrar uno mas elaborado:

<div style="width:520px; height:400px; background:#000000 ;font-family:Arial, Helvetica, sans-serif;

font-size:18px;text-align:center; padding-top: 20px;color:#FFFFFF;">

<ul>

<li style="list-style:none; display:inline; margin:0 7px;"><a href="index.html" clicktoshow="1" clicktohide="2, 3, 4"><img src="http://img54.xooimage.com/files/1/1/9/1-2318654.png" /></a></li>



<img src="http://img50.xooimage.com/files/a/d/f/menuseparator-22853ce.png" alt="" width="5" height="20" />



<li style="list-style:none; display:inline; margin:0 7px;"><a href="about.html" clicktoshow="2" clicktohide="1, 3, 4"><img src="http://img51.xooimage.com/files/9/c/3/2-2318661.png" /></a></li>



<img src="http://img50.xooimage.com/files/a/d/f/menuseparator-22853ce.png" alt="" width="5" height="20" />



<li style="list-style:none; display:inline; margin:0 7px;"><a href="services.html" clicktoshow="3" clicktohide="1, 2, 4">

<img src="http://img54.xooimage.com/files/c/8/e/3-2318672.png" /></a></li>



<img src="http://img50.xooimage.com/files/a/d/f/menuseparator-22853ce.png" alt="" width="5" height="20" />



<li style="list-style:none; display:inline; margin:0 7px;"><a href="contact.html" clicktoshow="4" clicktohide="1, 2, 3"><img src="http://img50.xooimage.com/files/e/e/e/4-2318686.png" /></a></li>

</ul>

<br><br>

<center>

<div style="background: url(http://img52.xooimage.com/files/c/f/0/simplewood-2318301.jpg); no-repeat left top; width:400px; height:180px; padding-top:100px;padding-right:20px;">

<div id="1" >

CONTENIDO DE PRIMERO

</div>

<div id="2" style="display:none;">

CONTENIDO DE SEGUNDO

</div>

<div id="3" style="display:none">

CONTENIDO DE TERCERO

</div>

<div id="4" style="display:none">

CONTENIDO DE CUARTO

</div>

</div></center>

</div>


Y QUEDARA ASI:





LO VERDE ES LO PRINCIPAL PARA EDITAR.. PERO LES RECOMIENDO QUE LO EDITEN A SU GUSTO, DE LA FORMA QUE DESEEN. TÓMENLOS COMO EJEMPLO PARA CREAR LOS SUYOS.
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 comentarios:

Publicar un comentario