Tab Menu

C omo en ocasiones recientes, el genial Jose Luis de Caratulworld me hace llegar sus inventos para difundirlos.
En esta ocasión se trata de un genial menú, que da al blog una vista super profesional.
Actualización 29/04/08
Lo prometido es deuda, lo pueden ver también acá
Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^


Primero que nada debes descargarte este archivo
Una vez que está descomprimido verás que en el están los archivos de imagen del ejemplo que pueden ser reemplazados por los de tu elección, o mejor dicho los que queden mejor en tu blog, también encontrarás los archivos .js, que deben ser subidos a un hostin ejemplo Google Pages Yahoo! GeoCities.
Una vez que tenemos la URL de los scripts, debemos pegar lo siguiente justo a continuación de </head>

<script src='http:AQUI URL DE TU/prototype.js' type='text/javascript'/>
<script src='http:AQUI URL DE TU/effects.js' type='text/javascript'/>
<script src='http:AQUI URL DE TU/tabslide.js' type='text/javascript'/>

A continuación debemos agregar el siguiente código Css si es que tu blog no cuenta con un menú, de lo contrario debemos sustitirlo por el mismo.

#MENU {
border: 1px solid #1F669B;
width: 600px;
height: 310px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 11px;
position:relative !important;
display:block;
overflow:hidden;
background-image:url(http://img363.imageshack.us/img363/5102/astonoz8.jpg);
background-repeat:no-repeat;
background-position:top left;
}
h3 {
font-size: 12px;
padding: 6px 6px 4px 35px;
margin: 0;
color:#fff;
border-bottom:1px solid #333333;
cursor:pointer;
display:block;
background-image:url(http://img292.imageshack.us/img292/3439/tableftpj1.gif);
background-position:top left;
background-repeat:no-repeat;
}
#visible {
background-image:url(http://img296.imageshack.us/img296/9015/tableftactivevc5.gif);
border-bottom:1px solid #DA1074;
}
.panel_body {
height:150px;
background-color:#333333;
display:block;
position:relative;
color:#FFFFFF;
}
.panel_body div {
padding:3px 5px;
}
.panel{
bottom:0px;
margin:0px;
padding:0px;
background-image:url(http://img178.imageshack.us/img178/750/tabrightyy7.gif);
background-position:top right;
background-repeat:repeat-x;
background-color:#333333;
}
.wrapper{
bottom:0px;
position:absolute;
}

En este ejemplo ya están incluidas las urls de las imágenes del ejemplo (en negrita), pero en el caso que tengas tus propias imágenes deben ser sustituidas por las urls de tus imágenes.

Ahora vamos la estructura del menu haciendo la llamada al Div:(que iria donde tienes actualmente el tuyo o en elementos de pagina)

<CENTER><div id='MENU'>
<div class='panel' id='panel1'>
<h3><a href='http:AQUI URL A ENLAZAR/'>TITULO 1</a></h3>
<div class='panel_body' id='panel1-body'>
<div>
Galería flash para Blogger
</div>
</div>
</div>
<div class='panel' id='panel2'>
<h3><a href='http:AQUI URL A ENLAZAR/'>TITULO 2</a></h3>
<div class='panel_body' id='panel2-body'>
<div>
Contenido del panel 2
</div>
</div>
</div>
<div class='panel' id='panel3'>
<h3><a href='AQUI URL A ENLAZAR/'>TITULO 3</a></h3>
<div class='panel_body' id='panel2-body'>
<div>
Contenido del panel 3
</div>
</div>
</div>
<div class='panel' id='panel4'>
<h3><a href='http:AQUI URL A ENLAZAR/'>TITULO 4</a></h3>
<div class='panel_body' id='panel2-body'>
<div>
Contenido del panel 4
</div>
</div>
</div>
</div></CENTER>

Una vez realizado todo esto, primero nos fijamos en la vista previa, antes de guardar los cambios, para asegurarnos de que todo se ve bien.

Pronto ya está para ver un ejemplo realizado por Jose Luis pueden visitarlo AQUI

NOTA:
Esta es la parte básica, los códigos pueden ser cambiados de manera tal que quede mejor en el estilo de tu blog.

Por un tema de tiempo no lo he podido instalar todavía en ninguno de mis blogs, estoy bastante atrazada en todos :$ asi que prometo que en el correr de la semana lo instalaré y avisaré para que vean mi creación ;)

Gracias
Seguir Leyendo...[+/-]