El Menudero

Menu Vertical Nº 13

noreply@blogger.com (jkor) — Tue, 21 Jul 2009 18:02:00 +0000

Menu Vertical De Color Amarillo

Hola Estimados visitantes hoy les traigo un menu de color amarillo suave, muy sencillo pero un poco interesante en mi opinion.

El menu como algunos anteriores se compone de códigos HTML y CSS con imagen como fondo.

Esta es una muestra de como quedaria nuestro menu:

Despues de ver una muestra del menu seguiremos con los códigos que debes insertar en tu plantilla cada uno en su respectivo lugar, que a continuacion explico.

El siguiente código es el css y debes insertarlo de la siguiente manera: Vas a Diseño, eliges la pestaña Edición de HTML y justo antes de ]]></b:skin> colocas el siguiente codigo.

Código CSS


/*- Menu 13--------------------------- */
 
#menu {
 width: 200px;
 margin: 10px;
 border-style: solid;
 border-color: #656556;
 border-size: 1px;
 border-width: 1px;
 }
 
#menu li a {
 height: 32px;
   voice-family: "\"}\""; 
   voice-family: inherit;
   height: 24px;
 text-decoration: none;
 } 
 
#menu li a:link, #menu li a:visited {
 color: #656556;
 display: block;
 background:  url(img/menu88.jpg);
 padding: 8px 0 0 20px;
 }
 
#menu li a:hover {
 color: #FBFBDE;
 background:  url(img/menu88.jpg) 0 -32px;
 padding: 8px 0 0 20px;
 }


ul {
 list-style: none;
 margin: 0;
 padding: 0;
 }

img {
    border: none;
}

Estas es la imagen que utilizaremos para el menu, la cual tendremos que guardar y subir a un servidor o a picasa que es el predeterminado para Bloger.

Despues subir la imagen a Bloger tendremos que obtener su url para insertarla en los siguientes trozos de código: (img/menu88.jpg).

El siguiente código es el html el cuel debes insertar en la sidebar para esto ve a la pestaña Diseño, Añadir un Gadget eliges HTML/javascript y colocas el siguiente código:

Código HTML


<div id="menu">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
<li><a href="#6" title="Link 6">Link 6</a></li>
<li><a href="#7" title="Link 7">Link 7</a></li> 
  </ul>
    </div>

Si todo ha salido bien ya puedes disfrutar de este sencilllo menu o de muchos otro que hay a tu disposicion en este Blog.

Subir

Menu Vertical Nº 12

noreply@blogger.com (jkor) — Fri, 17 Jul 2009 12:51:00 +0000

Menu Vertical Color Gris Claro

Este es otro de los menus hecho con códigos HTML y CSS con imagen de fondo, por lo tanto es muy sencillo de implantar.

Esta es una imagen de como quedara este menu:

A continuación los codigos a implantar en tu plantilla. vas a Diseño, eliges la pestaña Edición de HTML y justo antes de ]]></b:skin> colocas el siguiente codigo.

Código CSS


#menu {
 width: 200px;
 margin: 10px;
 border-style: solid;
 border-color: #656556;
 border-size: 1px;
 border-width: 1px;
 }
 
#menu li a {
 height: 32px;
   voice-family: "\"}\""; 
   voice-family: inherit;
   height: 24px;
 text-decoration: none;
 } 
 
#menu li a:link, #menu li a:visited {
 color: #000;
 display: block;
 background:  url(img/11.jpg);
 padding: 8px 0 0 20px;
 }
 
#menu li a:hover {
 color: #fff;
 background:  url(img/11.jpg) 0 -32px;
 padding: 8px 0 0 25px;
 }


ul {
 list-style: none;
 margin: 0;
 padding: 0;
 }

img {
    border: none;
}

Como habia mencionado anteriormente el menu incluye imagen, que a continuacion pondrea tu dispocision para que las guarde y subas a tu servidor o a picasa que es el utilizado por Bloger.

11

Despues de subir las imagenes a Bloger obtenemos la url y la insertamos en los siguiente tramo del codigo css: (img/11.jpg)

Código HTML

Este es el codigo que va en la sidebar, solo tiene que ir a la pestaña Diseño y en Añadir un Gadget eliges HTML/javascript y colocas el siguiente código:


<div id="menu">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
<li><a href="#6" title="Link 6">Link 6</a></li>
<li><a href="#7" title="Link 7">Link 7</a></li> 
  </ul>
  </div>

Subir

Menu Horizontal Nº 11

noreply@blogger.com (jkor) — Thu, 16 Jul 2009 16:21:00 +0000

Menu Horizontal Con Buscador

En esta ocasión les traigo un peculiar menu horizontal que tiene incorpoado un buscador.

El menu se compone de códigos HTML y CSS con imagenes como fondo.

Aqui esta una imagen de como quedara nuestro menu:

Haz clic en la imagen para verla en tamaño real

Ya visto como sera nuestro menu prosigamos con los códigos y las imagenes que necesitamos.

El siguiente codigo lo debes de inplantar en tu plantilla justo antes de: ]]></b:skin>

Código CSS


/* Menu */

#topmenu {
 width: 880px;
 height: 76px;
 margin: 0 auto;
 background: #608F30 url(img/img02.jpg) no-repeat left top;
}


#menu {
 float: left;
 width: 540px;
 height: 51px;
}

#menu ul {
 margin: 0;
 padding: 25px 0 0 10px;
 list-style: none;
 line-height: normal;
}

#menu li {
 display: block;
 float: left;
}

#menu a {
 display: block;
 float: left;
 margin-right: 17px;
 padding: 5px 12px;
 text-decoration: none;
 font: 14px Georgia, "Times New Roman", Times, serif;
 color: #FFFFFF;
}

#menu a:hover { text-decoration: underline; }

#menu .current_page_item a {
 color: #FFFFFF;
}

/* Search */

#search {
 float: right;
 width: 305px;
 height: 76px;
}

#search form {
 float: right;
 margin: 0;
 padding: 30px 20px 0 0;
}

#search fieldset {
 margin: 0;
 padding: 0;
 border: none;
}

#search input {
 float: left;
 font: 12px Georgia, "Times New Roman", Times, serif;
 border: none;
}

#search-text {
 width: 150px;
 height: 18px;
 padding: 3px 0 0 15px;
 background: url(img/searchf.gif) no-repeat;
}

#search-submit {
 height: 20px;
 margin-left: 0px;
 color: #39561D;
}


ul{
 list-style: none;
 margin: 0;
 padding: 0;
 }

img {
    border: none;
}

Recuerda que tendras que subir las imagenes a picasa o a tu servidor favorito, y despues obtener la url y pegarla en este sector del css: (img/img02.jpg) cada una en su respectivo lugar.

Estas son las imagenes que nesetitaremos:

img02
Haz clic en la imagen para verla y guardarla en tamaño real

searchf

El código siguiente remplaza el navar en el header de tu plantilla justo debajo del body lo ubicaras, mira los div y fijate bien cual contiene el Home o Inicio de tu Blog.

Código HTML


<div id="topmenu">
  <div id="menu">
   <ul>
    <li class="current_page_item"><a href="#">Home</a></li>
 <li><a href="#">Blog</a></li>
  <li><a href="#">Photos</a></li>
   <li><a href="#">About</a></li>
 <li><a href="#">Links</a></li>
    <li><a href="#">Contact</a></li>
 </ul>
  </div>

  <!-- end #menu -->

    <div id="search">
      <form method="get" action="">
          <fieldset>
    <input type="text" name="s" id="search-text" size="15" />
    <input type="submit" id="search-submit" value="Buscar" />
        </fieldset>
      </form>
       </div>
 <!-- end #search -->
 </div>
     <!-- end #header -->

Subir

Menu Horizontal Nº 10

noreply@blogger.com (jkor) — Thu, 16 Jul 2009 11:56:00 +0000

Menu Horizontal De Color Plata

Este es un menu mas un poco curioso, tal vez por lo pequeño o por lo sencillo de su aspecto, pero eso no le quita lo interesante.

El menu se compone de codigos HTML y CSS con imagenes como fondo.

Esta es una imagen de como quedaria:

El menu lo puedes ampliar y ponerles los link que quieras, solo tendras que ampliar las etiquetas a incluidas en el codigo HTML.

Este es el codigo css que tendras que incluir en la plantilla de tu Blog justo antes de: ]]></b:skin>

Código CSS


#hmenu {
 padding: 13px 0 5px 0;
 
}

#hmenu a {
 padding: 12px 13px 2px 11px;
 text-decoration: none;
 color: #414141;
 background: #ccc url(img/hmenuarrow.gif) no-repeat top center;
 margin: 0 0 3px 1px;
 border-bottom: 4px solid #BCBCBC;
}

#hmenu a:hover {
 background: #3C6491 url(img/hmenuarrowhover.gif) no-repeat top center;
 color: #FFFFFF;
 border-bottom: 4px solid #2F4A6C;
}

Dentro de este trozo de código tendras que pegar la url de las imagens utilizadas para el menu: (img/hmenuarrow.gif).

Estas son las imagenes, guardalas en tu Disco Duro y subelas a un servidor ó a picasa que es el utilizado por Bloger.

hmenuarrow

hmenuarrowhover

Nota las imagenes son de color blanco.

Código HTML

El siguiente codigo es el que va el nav o header de tu plantilla, ubica donde lo tienes y cambialo por este, suele. ser un poco abajo del body.

 
<div id="hmenu">

 <a href="#">Inicio</a>
 <a href="#">Tema</a>
 <a href="#">Registrarse</a>
 <a href="#">Contacto</a>
 <a href="#">RSS</a>
 
</div>

Subir

Menu Vertical Nº 9

noreply@blogger.com (jkor) — Thu, 16 Jul 2009 10:16:00 +0000

Menu Vertical De Color Verde

Hoy les traigo un Menu Vertical de color verde, es un menu con una imagen de fondo sencilla pero el hover muestra un borde que lo hace atractivo.

El menu se compone de codigos HTML, CSS e imagenes por lo que no sera dificil su implementación.

Imagen de como quedara:

Ya visto como quedara el menu sigamos adelante con los codigos, el siguiente codigo lo tendras implantar en tu plantilla justo antes de: ]]></b:skin>

Esta es la parte donde finalizan los códigos css que le dan estilo a tu Blog.

Código CSS


#side_menu {
      margin: 0 0 20px 0; 
      width:200px;
      }

#side_menu li { 
     list-style: none; 
     }

#side_menu li a { 
     color: #ccc; 
     border: 0; 
     margin: 0 0 1px 0; 
     display: block; 
     background: #fff url(img/three_0a.jpg) no-repeat; 
     padding: 8px 10px; 
     }

#side_menu li a:hover { 
     color: #fff; 
     background: #fff url(img/three_1a.jpg) no-repeat; 
     } 
 
ul   {
     list-style: none;
     margin: 0;
     padding: 0;
     }

img  {
     border: none;
     }

Para los que esten empezando en el mundo de los Blog, Esta es la parte donde tendran que insertar la url de las imagenes despues de haberlas subido a picasa o a su servidor preferido: (img/three_1a.jpg).

Estas son las imagenes que utilizaremos para nuestro menu:

three_0a

three_1a

Código HTML

Este codigo lo debes poner en la sidebar, en la pestaña Diseño, Añadir un Gadget eliges en HTML/javascript y colocas el siguiente código:


<div id="side_menu">
  <ul>
  <li><a href="#1" title="Link 1">Link 1</a></li>
     <li><a href="#2" title="Link 2">Link 2</a></li>
     <li><a href="#3" title="Link 3">Link 3</a></li>
       <li><a href="#4" title="Link 4">Link 4</a></li>
        <li><a href="#5" title="Link 5">Link 5</a></li>
       <li><a href="#6" title="Link 6">Link 6</a></li>
    <li><a href="#7" title="Link 7">Link 7</a></li>
 </ul>
   </div>

Subir

Menu horizontal Nº 8

noreply@blogger.com (jkor) — Wed, 15 Jul 2009 18:05:00 +0000

Menu Horizontal De Fondo Plateado

Este menu que les traigo en el dia de hoy me parece muy atractivo, "opinion personal".

Aparte de vistoso es facil de implementar ya que su código se compone de HTML, CSS y imagenes como fondo.

Aqui una imagen de como queda:

Haz clic en la imagen para verla en tamaño real

Como ya sabeis el código css debe isertarlo en la plantilla de tu Blog justo antes de: ]]></b:skin>

Codigo CSS


#menu {
     width:706px;
     margin:0 auto;
     text-align:left;
     background-image:url(menu.jpg);
     background-position:top;
     background-repeat:repeat-x;
}

#menu #nav {
 margin:0;
 padding:0;
 float:left;
}

#nav li {
 margin:0;
 pading:0;
 list-style:none;
 float:left;
}


#nav li a {
 display:block;
 width:100px;
 text-align:center;
 margin:0 1px 0 0;
 background-image:url(menu_link.jpg);
 background-position:left;
 background-repeat:no-repeat;
 color:#ccc;
 font-family:Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
 font-size:14px;
 text-transform:uppercase;
 font-weight:bold;
 text-decoration:none;
 padding:55px 0 23px 0;
border:none;
}

#nav li a em {
 font-style:normal;
 text-decoration:underline;
}


#nav li a.last {
 margin:0;
}


#nav li a:hover {
 background-image:url(menu_link.jpg);
 background-position:right;
 color:#fff;
}


#nav li a.active {
 background-image:url(menu_link.jpg);
 background-position:right;
 color:#fff;
}


.clear {
 clear:both;
}

ul {
 list-style: none;
 margin: 0;
 padding: 0;
 }

img {
    border: none;
}

Como ya sabeis las imagenes tendras que subirlas a un servidor ó a Picasa que es el detrminado para Bloger, y obtener su url para insertarla cada una en su respectivo código: (menu_link.jpg).

Estas son las imagenes a utilizar:
menu.jpg

menu_link.jpg

Codigo HTML

Este codigo lo debes poner en el nav o en el div del header buscalo debajo del body, mira bien la plantilla y donde este la palabra inicio o home sustituye la lista que haiga por la siguiente:


<div id="menu">
<ul id="nav">
  <li><a href="#inicio"  title="Inicio!" accesskey="i"><em>I</em>nicio</a></li>
       <li><a href="#" class="active" title="Sobre" accesskey="s"><em>S</em>obre</a></li>
         <li><a href="#Autor" title="Sobre mi" accesskey="a"><em>A</em>utor</a></li>
         <li><a href="#contact" title="Contacto" accesskey="o">C<em>o</em>ntacto</a></li>
         <li><a href="#" title="link" accesskey="l"><em>L</em>ink</a></li>
      <li><a href="#" title="link" accesskey="l"><em>L</em>ink</a></li>
   <li><a href="#" title="link" class="last" accesskey="l"><em>L</em>ink</a></li>

</ul>
<br class="clear" />
</div>

Subir

Menu Vertical Nº 7

noreply@blogger.com (jkor) — Wed, 15 Jul 2009 16:55:00 +0000

Menu Vertical Color Verde Claro

Este es otro menu con las mismas caracteristicas de los hechos con HTML y CSS.

El aunque es parecido tiene algunas pequeñas modificaciones como las imagenes de fondo.

Esta es una imagen de como queda el Menu:

A continuacion los respectivos codigos que debes implantar de la siguiente manera: Vas a Diseño, eliges la pestaña Edición de HTML y justo antes de ]]></b:skin> colocas el siguiente codigo.

Códigos CSS


#side_menu { 
                   margin: 0 0 20px 0; 
                   width: 220px;
        }

 #side_menu li { 
                   list-style: none; 
        }

 #side_menu li a { 
                   color: #3F6C24; 
                   border: 0; 
                   margin: 0 0 1px 0; 
                   display: block; 
                   background: #fff url(imagen 1) repeat-x; padding: 8px 10px;
                   text-decoration:none;
        }

 #side_menu li a:hover { 
                   color: #fff; background: #fff url(imagen 2) repeat-x; 
        } 
 

        ul {
 list-style: none;
 margin: 0;
 padding: 0;
 }

       img {
       border: none;
       }

Estas son las imagenes utilizadas como fondo, guardalas y subelas a un servidor ó a picasa que es el determinado para blogger.

Imagen 1

Imagen 2

En estos trozos de codigo es donde debes intrducir la url de las imagenes: (url imagen).

Código HTML

Este codigo lo debes poner en la sidebar, en la pestaña Diseño, Añadir un Gadget eliges en HTML/javascript y colocas el siguiente código:


<div id="side_menu">
  <ul>
   <li><a href="#1" title="Link 1">Pon lo que quieras</a></li>
   <li><a href="#2" title="Link 2">Pon lo que quieras</a></li>
   <li><a href="#3" title="Link 3">Pon lo que quieras</a></li>
   <li><a href="#4" title="Link 4">Pon lo que quieras</a></li>
   <li><a href="#5" title="Link 5">Pon lo que quieras</a></li>
   <li><a href="#6" title="Link 6">Pon lo que quieras</a></li>
   <li><a href="#7" title="Link 7">Pon lo que quieras</a></li> 
  </ul>

</div>

Subir

Menu Vertical Nº 6

noreply@blogger.com (jkor) — Wed, 15 Jul 2009 14:01:00 +0000

Menu Vertical Color Azul

Este sencillo menu no pasee mayor caracteristicas, es sencillo y facil de implantar en tu plantilla.

Este se compone de códigos HTML y CSS, y como fondo una imagen.

aqui una muestra de como quedaria:

Seguimos con los códigos, el siguiente debes implantarlo de la siguiente manera: Vas a Diseño, eliges la pestaña Edición de HTML y justo antes de ]]></b:skin> colocas el siguiente codigo

Código CSS


#menu {
 width: 200px;
 margin: 10px;
 }
 
#menu li a {
 height: 32px;
   voice-family: "\"}\""; 
   voice-family: inherit;
   height: 24px;
 text-decoration: none;
 } 
 
#menu li a:link, #menu li a:visited {
 color: #FFF;
 display: block;
 background:  url(img/menu6.jpg);
 padding: 8px 0 0 19px;
 }
 
#menu li a:hover {
 color: #FFF;
 background:  url(img/menu6.jpg) 0 -32px;
 padding: 8px 0 0 19px;
 }


ul {
 list-style: none;
 margin: 0;
 padding: 0;
 }

img {
    border: none;
}

A continuacion la imagen que deberas guardar y luego subirla a un servidor ó a picasa que es el determinado para blogger.

La url de la imagen la pegaras en la siguiente ubicacion del codigo.


#menu li a:link, #menu li a:visited {
 color: #FFF;
 display: block;
 background:  url(img/menu6.jpg);
 padding: 8px 0 0 19px;
 }
 
#menu li a:hover {
 color: #FFF;
 background:  url(img/menu6.jpg) 0 -32px;
 padding: 8px 0 0 19px;
 }

Código HTML

Este codigo lo debes poner en la sidebar, en la pestaña Diseño, eliges añadir un gadget en HTML/javascript colocas el siguiente código:


<div id="menu">
  <ul>
   <li><a href="#1" title="Link 1">Link 1</a></li>
   <li><a href="#2" title="Link 2">Link 2</a></li>
   <li><a href="#3" title="Link 3">Link 3</a></li>
   <li><a href="#4" title="Link 4">Link 4</a></li>
   <li><a href="#5" title="Link 5">Link 5</a></li>
                        <li><a href="#6" title="Link 6">Link 6</a></li>
                        <li><a href="#7" title="Link 7">Link 7</a></li> 
  </ul>
         </div>

Subir

Menu Vertical Nº 5

noreply@blogger.com (jkor) — Wed, 15 Jul 2009 12:03:00 +0000

Menu vertical color Naranja

Este es un sencillo pero vistoso menu, su configuracion es muy sencilla y facil de implantar en nuestro Blog.

Este menu esta compuesto de códigos css y html usando imagenes como fondo.

Esta es una imagenen de como queda el menu:

Estos son los codigos a implantar en tu plantilla. vas a Diseño, eliges la pestaña Edición de HTML y justo antes de ]]></b:skin> colocas el siguiente codigo

Codigo CSS



        #side_menu { 
                   margin: 0 0 20px 0; 
                   width: 220px;
        }

 #side_menu li { 
                   list-style: none; 
        }

 #side_menu li a { 
                   color: #111; 
                   border: 0; 
                   margin: 0 0 1px 0; 
                   display: block; 
                   background:  url(1a.gif) repeat-x; padding: 8px 10px;
                   text-decoration:none;
        }

 #side_menu li a:hover { 
                   color: #fff; background:  url(2a.gif) repeat-x; 
        } 
 
        #side_menu li a em {
 font-style:normal;
 color:#111; text-decoration:underline;
}

        #side_menu li a:hover em {
 font-style:normal;
 color:#fff; text-decoration:overline;
}

        ul {
 list-style: none;
 margin: 0;
 padding: 0;
 }

       img {
       border: none;
       }

En esta parte del codigo es donde debes de poner la url de las imagenes, en su respectiva ubicacion. (1a.gif)

Estas son las imagenes que debes guardar y luegos subirlas a unservidor o al propio picasa de Blogger.

Imagen 1a

Imagen 2a

Codigo HTML

Este codigo lo debes poner en la sidebar, en Diseño eliges Añadir un Gadget eliges HTML/javascript y colocas el siguiente código:


<div id="side_menu">
  <ul>
   <li><a href="#1" title="Link 1" accesskey="p"><em>P</em>on lo que quieras</a></li>
   <li><a href="#2" title="Link 2" accesskey="p"><em>P</em>on lo que quieras</a></li>
   <li><a href="#3" title="Link 3" accesskey="p"><em>P</em>on lo que quieras</a></li>
   <li><a href="#4" title="Link 4" accesskey="p"><em>P</em>on lo que quieras</a></li>
   <li><a href="#5" title="Link 5" accesskey="p"><em>P</em>on lo que quieras</a></li>
     <li><a href="#6" title="Link 6" accesskey="p"><em>P</em>on lo que quieras</a></li>
   <li><a href="#7" title="Link 7" accesskey="p"><em>P</em>on lo que quieras</a></li> 
  </ul>
  </div>

Subir

Politica de Privacidad

noreply@blogger.com (jkor) — Wed, 08 Jul 2009 19:23:00 +0000

politica de privacidad

Google utiliza empresas publicitarias asociadas para publicar anuncios cuando visita nuestro sitio web. Es posible que estas empresas usen la información que obtienen de sus visitas a este y otros sitios web (sin incluir su nombre, dirección, dirección de correo electrónico o número de teléfono) para ofrecerle anuncios sobre productos y servicios que le resulten de interés. Si desea obtener más información sobre esta práctica y conocer sus opciones para impedir que estas empresas usen esta información, haga clic aquí.

aviso legal

Recuerde: Todas las marcas y simbolos aqui mencionados (as) estan registrados por sus legitimos propietarios, y solomente se emplean en referencia a las mismas y con un fin de cita o comentario, de acuerdo con el articulo 32 LPI. El Menudero no se responsabiliza del mal uso que se realice de los contenidos del Website, siendo exclusiva responsabilidad de la persona que acceda a ellos o los utilice.

Menu De Botones Nº 1

noreply@blogger.com (jkor) — Wed, 08 Jul 2009 16:27:00 +0000

Menu horizontal De Botones

Este es un menu de botones hecho con html y css con imagen como base.

El menu tiene varias opciones de configuracion y dependiendo de tu gusto o necesidad lo podras utilizar.

En las imagenes a continuacion veran las como queda de una forma o de otra, mas adelante les mostrare las opciones de configuracion.

Estas son las imagenes de como queda el menu dependiendo de la opcion:

1.Menu con fondo negro
Haz clic en la imagen para vizualizarla en tamaño real

2.Menu con fondo blanco

Como puedes ver el de fondo negro se extiende al ancho de la pagina y el de fondo blanco solo se muestran los botones, solo es cambiarle el color al codigo.

Estas son las imagenes que utilizaremos para el menu, tendras que subirla a tu servidor o a picasa y obtener la url de la imagen.

right

left

Empecemos por el codigo css, solo copia y pegalo en la pantilla de tu blog antes de ]]></b:skin>.

Codigo CSS


#MainMenu {
          height:37px;
          background:#111;
          border:0;
          margin:0;
          width:800px;    
}


#tab {
     top:0;
     height:0;
     background:repeat-x top;
     margin:0;

}


#tab ul {
     list-style:none;
     float:left;
     margin:0;
     padding:0;

}


#tab li {
     display:inline;
     float:left;
     margin:0;
     padding:0;

}


#tab a {
     background:url(images/right.gif) no-repeat right top;
     text-decoration:none;
     border:0;
     display:block;
     float:left;
     margin:0;
     padding:0;

}


#tab a span {
     display:block;
     background:url(images/left.gif) no-repeat left top;
     font-family:Arial, Helvetica, sans-serif;
     font-size:11px;
     color:#FFF;
     font-weight:700;
     line-height:37px;
     padding:0 25px;

}


#tab a:hover,#tab li.item_active a {
     background-position:right bottom;

}


#tab a:hover span,#tab li.item_active a span {
     background-position:left bottom;
     color:#000;
     font-weight:700;
     font-style:normal;
     text-decoration:none;

}

Para insertar el código siguiente tendras que ubicar el div donde esta la palabra inicio o home y sustituir la lista que haiga por la siguiente.

Esta suele encontrarse debajo del body en el div del header que es la parte de la cabeza de la plantilla.

Codigo HTML


<div id="MainMenu">
<div id="tab">
<ul>
<li class="item_active"><a href="##"><span>Inicio</span></a></li>
<li><a href="##"><span>Link</span></a></li>
<li><a href="##"><span>Link</span></a></li>
<li><a href="##"><span>Link</span></a></li>
<li><a href="##"><span>RSS</span></a></li>
<li><a href="contact.html"><span>Contacto</span></a></li>
</ul>
</div>
</div>

En esta parte del css podras quitar o poner fondo al menu, cambia el valor de background por #fff y tendras el fondo blanco como en la imagen 2 de arriba.


#MainMenu {
          height:37px;
          background:#111;
          border:0;
          margin:0;
          width:800px;    
}

En estas otras partes de codigo son donde van las url de las imagenes. solo tendra que remplazar el texto que hay dentro de las ( ) por las url, pon atencion al poner la url que estan marcadas cada una con su imagen correspondiente left y right.


#tab a {
     background:url(images/right.gif) no-repeat right top;
     text-decoration:none;
     border:0;
     display:block;
     float:left;
     margin:0;
     padding:0;

}


#tab a span {
     display:block;
     background:url(images/left.gif) no-repeat left top;
     font-family:Arial, Helvetica, sans-serif;
     font-size:11px;
     color:#FFF;
     font-weight:700;
     line-height:37px;
     padding:0 25px;

}

Subir

Menu Vertical Nº 2

noreply@blogger.com (jkor) — Wed, 08 Jul 2009 11:49:00 +0000

Menu Vertical Despegable Hacia La Derecha

Hoy les traigo un menu vertical despegable hacia el lado derecho.

Este menu se compone de html, css, y java scrip con la posibilidad de insertar el codigo java en la misma pagina ya que es pequeño.

Aqui una imagen de como queda el menu:

Como les habia mensionado podeis incluir el codigo directamente en la cabezera de blog o subirlo a un servidor y llamar el codigo mediante un enlace. eso ya seria a tu gusto.

Tambien puedes cambiarle el color al fondo del menu y ponerle uno a tu gusto, eso te lo explicare mas adelante por ahora vamos con los codigos, asi que manos a la obra.

Codigo JavaScrip

Nota: para incluir este codigo en tu blog solo copia y pegalo en la plantilla antes de </head>


<script type='text/javascript'>

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</script>

Codigo CSS

Nota: para tu Blog solo copia y pega el codigo en la plantilla antes de ]]></b:skin>


ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 160px;
 }


ul li {
 position: relative;
 }


li ul {
 position: absolute;
 left: 159px;
 top: 0;
 display: none;
 }


ul li a {
 display: block;
 text-decoration: none;
 color: #000;
 background: #D3E4F4;
 padding: 5px;
 border: 1px solid #ccc;
 border-bottom: 0;
 }

ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 160px;
 border-bottom: 1px solid #ccc;
 }

li:hover ul { display: block; 
            }

li:hover ul, li.over ul { 
 display: block; 
                      }


ul  a:hover {
             background: #E2EBF3;
             }

Codigo HTML

Este codigo como es obvio deves de incluirlo en la sidebar. solo tienes que ir a Diseño y en Añadir un gadget elegir html/Javascript, copiar y pegar y listo.


<ul id="nav"> 
  <li><a href="#">Inicio</a></li> 
  <li><a href="#">Link 1</a> 
    <ul> 
      <li><a href="#">Link 1.1</a></li> 
      <li><a href="#">Link 1.2</a></li> 
      <li><a href="#">Link 1.3</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Link 2</a> 
    <ul> 
      <li><a href="#">Link 2.1</a></li> 
      <li><a href="#">Link 2.2</a></li> 
      <li><a href="#">Link 2.3</a></li> 
      <li><a href="#">Link 2.4</a></li> 
      <li><a href="#">Link 2.5</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Link 3</a> 
    <ul> 
      <li><a href="#">Link 3.1</a></li> 
      <li><a href="#">Link 3.2</a></li> 
      <li><a href="#">Link 3.3</a></li> 
      <li><a href="#">Link 3.4</a></li> 
    </ul> 
  </li> 
</ul>

Para cambiar el color del fondo solo hay que cambiar el valor que hay en background en esta parte del codigo css.


ul li a {
 display: block;
 text-decoration: none;
 color: #000;
 background: #D3E4F4;
 padding: 5px;
 border: 1px solid #ccc;
 border-bottom: 0;
 }

Si tienes problemas con el codigo puedes ponerte en contacto mediante mi correo.

Subir

Menu Horizontal Nº 3

noreply@blogger.com (jkor) — Tue, 07 Jul 2009 18:00:00 +0000

Menu Horizontal Despegable De Color Azul

En esta ocasion les traigo otro Menu Despegable hecho en html y css.

Aunque es parecido a algunos del mismo tipo los codigos son diferentes y varian tanto su tamaño como su color.

Aqui tienes imagenes de como quedaria:

Haz clic en la imagen para visualizarla en tamaño completo

Como ya sabeis solo tienes que copiar y pegar los codigo. Por si quiere cambiar el color, en el codigo subnavar puedes hacerlo cambiando el valor de background.

El siguiente codigo lo tendras implantar en tu plantilla justo antes de: ]]></b:skin>

Codigo CSS


#subnavbar {
background: #003B8E;
width: 873px;
height: 27px;
font-weight:bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family:"Trebuchet MS";
}

#subnav {
margin: 0px;
padding: 0px;
}

#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;

}

#subnav li {width:100px;
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;
display: block;
font-size: 11px;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
border-left: 1px solid #FFFFFF;
}

#subnav li a:hover, #subnav li a:active {
background: #f1f1f1;
color: blue;
display: block;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #003B8E;
width: 120px;
heigth: 20px
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF;

border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#subnav li li a:hover, #subnav li li a:active {
background: #f1f1f1;
margin: 0px;
padding: 5px 10px 5px 10px;
}

#subnav li {
float: left;
padding: 0px;
}

#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}

#subnav li li { 
}

#subnav li ul a { 
width: 140px;
}

#subnav li ul a:hover, #subnav li ul a:active { 
}

#subnav li ul ul {
margin: 5px 0 0 161px;
}

#subnav li:hover ul ul, #subnav li:hover ul ul ul, 
#subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}

#subnav li:hover ul, #subnav li li:hover ul, 
#subnav li li li:hover ul, #subnav li.sfhover ul, 
#subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}

#subnav li:hover, #subnav li.sfhover { 
position: static;
}

Codigo HTML

Este codigo lo debes poner en la parte donde esta incluida el nav o el header de tu blog, fijate debajo de body


  <div id="subnavbar">
<ul id="subnav"> 
      
   <li><a href="URL DEL BLOG" title="Inicio">INICIO</a></li>
       <li><a href="" title="">LINK1</a>
         <ul>
    
              <li><a href="" title="">SUB-LINK1</a></li>
              <li><a href="" title="">SUB-LINK1</a></li>
              <li><a href="" title="">SUB-LINK1</a></li>
              </ul>
              </li>
              <li><a href="">LINK</a></li>
            <li><a href="" title="">LINK2</a>
          <ul>
        <li><a href="" title="">SUB-LINK2</a></li>
      <li><a href="" title="">SUB-LINK2</a></li>          

      <li><a href="" title="">SUB-LINK2</a></li>
      <li><a href="" title="">SUB-LINK2</a></li>
        </ul>
          </li>
            <li><a href="" title="">LINK3</a>
              <ul>
              <li><a href="" title="">SUB-LINK3</a></li>
              <li><a href="" title="">SUB-LINK3</li>
              </ul>
              </li>
              <li><a href="" title="">LINK4</a>
            <ul>
          <li><a href="" title="">SUB-LINK4</a></li>
        <li><a href="" title="">SUB-LINK4</a></li>
      </ul>  

      </li>
      <li><a href="" title="">LINK5</a>
        <ul>
          <li =><a href="" title="">SUB-LINK5</a></li>
            
              <li =><a href="" title="">SUB-LINK5</a></li>
              <li =><a href="" title="">SUB-LINK5</a></li>
              <li =><a href="" title="">SUB-LINK5</a></li>
              </ul>
            <li><a href="Contactarme">CONTACTO</a></li>
          </li>
</ul>
</div>

Fijate muy bien como ban los codigos para su entendimiento y poderlos configurar a tu gusto, si quires puedes poner o quitar link en el despegable solo hay que quitar o poner etiquetas li.

Subir

Menu Horizontal Nº 4

noreply@blogger.com (jkor) — Mon, 06 Jul 2009 18:32:00 +0000

Menu Horizontal Despegable De Color Gris

En el dia de hoy les traigo un menu sencilo, pero nos puede resultar muy util para nuestro Blog. Este menu es sencillo de hacer ya que solo esta hecho con css y html.

Aqui un ejemplo de como quedaria:

Haz clic en la imagen para vizualizarla en tamaño completo.

Como les habia dicho el menu se compone de codigos css y html los cuales solo tendra que copiarlos y pegarlos en su respectivo sitio.

El siguiente codigo lo tendras implantar en tu plantilla justo antes de: ]]></b:skin>

Codigo CSS


/*  1. PAGINA  */
/***************/

*{padding:0; margin:0;}

 body {
     font-size:62.5%; 
     font-family:"trebuchet ms" verdana,arial,sans-serif;
} 

/*Font-size: 1.0em = 10px when browser default size is 16px*/.page-container {
     width:900px; 
     margin:0px auto; 
     margin-top:100px; 
     border:none; 
     font-size:1.0em;
}

/**********************/
/*  2. Menu-Despegable */
/**********************/

.dropnav {
     white-space:nowrap /*IE hack*/; 
     float:left; width:900px; 
     border:none; 
     margin-top:30px; 
     background:rgb(225,225,225); 
     color:rgb(75,75,75); 
     font-size:130%;
}

 
.dropnav ul {
     list-style-type:none;
}

.dropnav ul li {
     float:left; 
     z-index:auto !important /*Non-IE6*/; 
     z-index:1000 /*IE6*/; 
     border-right:solid 1px rgb(175,175,175);
}


.dropnav ul li a {  
     float:none !important /*Non-IE6*/; 
     float:left /*IE-6*/; 
     display:block; height:3.1em; 
     line-height:3.1em; 
     padding:0 16px 0 16px; 
     text-decoration:none; 
     font-weight:bold; 
    color: rgb(100,100,100);
}

.dropnav ul li ul {
     display:none; 
     border:none;
}

.dropnav ul li:hover {
     position:relative;
}
 
.dropnav ul li:hover a {
     background-color:rgb(210,210,210); 
     text-decoration:none;
}
 
.dropnav ul li:hover ul {
     display:block; 
     width:10.0em; 
     position:absolute; 
     z-index:999; 
     top:3.0em; 
     margin-top:0.1em; 
     left:0;
}

.dropnav ul li:hover ul li a {
     white-space:normal; 
     display:block; 
     width:10.0em; 
     height:auto; 
     line-height:1.3em; 
     margin-left:-1px; 
     padding:4px 16px 4px 16px; 
     border-left:solid 1px rgb(175,175,175); 
     border-bottom: solid 1px rgb(175,175,175); 
     background-color:rgb(237,237,237); 
     font-weight:normal; 
     color:rgb(50,50,50);
}
 
.dropnav ul li:hover ul li a:hover {
     background-color:rgb(210,210,210); 
     text-decoration:none;
} 

.dropnav table {
     position:absolute; 
     top:0; 
     left:-1px; 
     border-collapse:collapse;
}

.dropnav ul li a:hover {
     position:relative /*Sylvain IE hack*/;  
     z-index:1000 /*Sylvain IE hack*/; 
     background-color:rgb(210,210,210); 
     text-decoration:none;
}
 
.dropnav ul li a:hover ul {
     display:block; 
     width:10.0em; 
     position:absolute; 
     z-index:999; 
     top:3.1em; t\op:3.0em; 
     left:0; 
     marg\in-top:0.1em;
}

.dropnav ul li a:hover ul li a {
     white-space:normal; 
     display:block; 
     w\idth:10.0em; 
     height:1px; 
     line-height:1.3em; 
     padding:4px 16px 4px 16px;
     border-left:solid 1px rgb(175,175,175);  
     border-bottom: solid 1px rgb(175,175,175); 
     background-color:rgb(237,237,237);  
     font-weight:normal; color:rgb(50,50,50);
}

.dropnav ul li a:hover ul li a:hover {
     background-color:rgb(210,210,210); 
     text-decoration:none;
}

En el body y el css la palabra width significa el ancho del menu, como veras tiene el 900 solo tendras que ponerle el numero del ancho de tu pagina.

Codigo HTML

Este código lo debes insertar en la parte del header de tu plantilla, solo busca debajo del body el div que encierra el header y ubica la lista que contiene inicio o home y sustituyela por la siguiente:


<!-- Menu-Despegable -->
    <div class="dropnav">
 
      
      <ul>
        <li><a href="#">Inicio</a></li>
      </ul>

      
      <ul>
         <li><a href="#">Despegable 1<!--[if IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
              <li><a href="#">Sublink 11</a></li>
              <li><a href="#">Sublink 12</a></li>
              <li><a href="#">Sublink 13</a></li>
              <li><a href="#">Sublink 14</a></li>
              <li><a href="#">Sublink 15 entrda de varias lineas</a></li>
            </ul>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
      </ul>          

     
      <ul>
        <li><a href="#">Despegable 2<!--[if IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
              <li><a href="#">Sublink 21</a></li>
              <li><a href="#">Sublink 22</a></li>
              <li><a href="#">Sublink 23</a></li>
              <li><a href="#">Sublink 24</a></li>
              <li><a href="#">Sublink 25</a></li>
            </ul>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
      </ul>  

      
      <ul>
        <li><a href="#">Despegable 3<!--[if IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
              <li><a href="#">Sublink 31</a></li>
              <li><a href="#">Sublink 32</a></li>
              <li><a href="#">Sublink 33</a></li>
              <li><a href="#">Sublink 34</a></li>
              <li><a href="#">Sublink 35</a></li>
            </ul>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
      </ul>  

      <ul>
        <li><a href="#">Muy muy larga</a></li>
        <li><a href="#">Otra entrada</a></li>
      </ul>         
    </div>

Si necesitas poner mas enlaces en los despegables solo tienes que insertar mas etiquetas li.

Si lo prefieres puedes copiar y pegar en el bloc de notas el siguinte texto, luego l guardas como .html y podras ver como queda el menu: Ver Archivo

Subir