[Tutorial] Crear una barra de botones

por Cody! el 12/3/2010, 5:32 pm

Crear una barra de botones

Hola!

En este Tutorial aprenderemos a crear una barra de botones para poner en nuestro, blog muy util para poner links de los artículos mas importantes

Comenzamos!

1.- Editar el Código

les recomiendo hacerlo en un Bloc de Notas o en Microsoft Word para facilitarlo.

Clic en el Spoiler

Spoiler:: <div><div class="warning" style="background-#6096B3; border-color:#c90; color:#000;"> <p><style type="text/css"> .button-announce{ background: #ECCF8E; border-color: #C9A584 #5D4C2F #5D4C2F #C9A584; border-style: double; border-width: 3px; padding: 2px 0; color: #542C0F; font-size: 12px; font-weight: bold; cursor: hand; text-align: center;} .button-announce:hover { color:#FFFFFF; text-decoration:none;} .button-announce:active { border-color:#5D4C2F #C9A584 #C9A584 #5D4C2F; border-style:double; border-width:3px; padding:3px 1px 1px 3px;} </style> <table style="border: 1px double rgb(0, 0, 0" width="100%"><tr> <td style="width: 20%;"> <input class="button-announce" onmouseover="this.style.cursor='hand';" onclick="location.href='http://www.foroactivo.com';" onMouseOut='vuelve()' target="_blank" value="Foro Activo"><br/> <input class="button-announce" onmouseover="this.style.cursor='hand';" onclick="location.href='http://asistencia.foroactivo.com';" target="_blank" value="Foro de Asistencia"><br/> <input class="button-announce" onmouseover="this.style.cursor='hand';" onclick="location.href='http://asistencia.foroactivo.com/tutoriales-trucos-y-astucias-f11/listado-de-tutoriales-y-trucos-t39276.htm';" target="_blank" value="Tutoriales"><br/></td> <td style="width: 60%; valign: top"><center><b><font size=4 color="black"><u>Bienvenido al Foro de los Foros</u></color> <div> </font></b></center><br/><br/><br/><br/> </td> <td style="width: 20%;"> <input class="button-announce" onclick="location.href='http://asistencia.foroactivo.com/normas-y-staff-del-foro-f2/staff-del-foro-de-los-foros-t36303.htm';" onMouseOut='vuelve()' target="_blank" value="Staff del Foro"><br/> <input class="button-announce" onmouseover="this.style.cursor='hand';" onclick="location.href='http://asistencia.foroactivo.com/normas-y-staff-del-foro-f2/normas-generales-y-de-moderacion-del-foro-de-soporte-t37286.htm';" target="_blank" value="Normas"><br/> <input class="button-announce" onmouseover="this.style.cursor='hand';" onclick="location.href='http://asistencia.foroactivo.com/preguntas-sobre-tu-foro-c2/';" target="_blank" value="Servicios para Usuarios"><br/></td></tr></table></p>

Lo que esta en color rojo son los colores tanto de fondo como de letra.
Lo que esta en color azul son las direcciones de enlace que lleva cada botón
Lo que esta en color verde es el texto que lleva cada botón

2.- Aplicar el Código

Para esto tenemos que ir:

Administración > Multi-Blog > General.

Estando en general buscamos la seccion Contenido personalizable y alli introducimos nuestros código previamente editado:

Spoiler:

Le damos clic a registrar.

3.- Muestra

Cuando terminen de todo, deberá quedarles algo así.

Spoiler:: http://img715.imageshack.us/img715/2618/efecto.jpg

Espero que sea de su agrado y sobre todo les haya ayudado. Tranquilidad