Menu Vertical Nº 13

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

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

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