Añadir Css Menu Desplegable A Tu Blog

El Menu desplegable que compartire esta hecho de puro CSS y HTML, y por que buscar scripts y jquery cuando puedes jugar con CSS y HTML para blog de blogger., Este consiste de dos estructuras, el CSS y la HTML y no afectara e ltiempo de carga de tu pagina.


Ver Ejemplo:

Añadiendo el menu desplegable

Paso 1

• Entra en blogger
• DaClick en"Diseño" > "Editar HTML" > Haga Copia de Tu Plantilla
• Use ctrl F para encontrar ]]></b:skin> y pegue el codigo de abajo

/* CSS3 Menu Desplegable Por Ciudadblogger.info */
#nav {
 float: left;
 font: bold 12px Arial, Helvetica, Sans-serif;
 border: 1px solid #121314;
 border-top: 1px solid #2b2e30;
 overflow: hidden;
 width: 100%;
 background: #3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
}

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

#nav ul li {
 float: left;
}

#nav ul li a {
 float: left;
 color: #d4d4d4;
 padding: 10px 20px;
 text-decoration: none;
 background: #3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
 border-left: 1px solid rgba(255, 255, 255, 0.05);
 border-right: 1px solid rgba(0,0,0,0.2);
 text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
/* CSS3  Menu Desplegable Por Ciudadblogger.info */
#nav ul li a:hover,
#nav ul li:hover > a {
 color: #252525;
 background: #3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
 background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}

#nav li ul a:hover,
#nav ul li li:hover > a {
 color: #2c2c2c;
 background: #5C9ACD;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
 background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
 background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
 border-bottom: 1px solid rgba(0,0,0,0.6);
 border-top: 1px solid #7BAED9;
 text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
/* CSS3Menu Desplegable Por Ciudadblogger.info */
#nav li ul {
 background: #3C4042;
 background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
 background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 left: -999em;
 margin: 35px 0 0;
 position: absolute;
 width: 160px;
 z-index: 9999;
 box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
 -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
 -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
 border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li:hover ul {
 left: auto;
}

#nav li ul a {
 background: none;
 border: 0 none;
 margin-right: 0;
 width: 120px;
 box-shadow: none;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 border-bottom: 1px solid transparent;
 border-top: 1px solid transparent;
}

.nav ul li ul {
    position: absolute;
    left: 0;
    display: none;
    visibility: hidden;
}

.nav ul li ul li {
    display: list-item;
    float: none;
}

.nav ul li ul li ul {
    top: 0;
}

.nav ul li ul li a {
    font: normal 13px Verdana;
    width: 160px;
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
}

#nav li li ul {
 margin: -1px 0 0 160px;
 visibility: hidden;
}

#nav li li:hover ul {
 visibility: visible;
}
/* CSS3 Menu Desplegable Por Ciudadblogger.info */

• Da Click "Guardar Plantilla"

Paso 2

Ahora añadiremos el codigo Html

• Da Click en "Elemento de Pagina" > "Añadir un Gadget"
• Seleccione "HTML/JavaScript" y copie el codigo de abajo en cuadro de contenido dejando el espacio de titulo en blanco

<div id="nav">
 <ul>
  <li><a href="#">PaginaPrincipal</a></li>
  <li><a href="#">Contactenos</a></li>
  <li><a href="#">Sobre Autor</a></li>
  <li><a href="#">Tutoriales</a></li>
  <li><a href="#">Mapa deSitio</a></li>
  <li><a href="#">Servicios</a>
  <ul>
   <li><a href="#">Sub Pagina #1</a></li>
   <li><a href="#">Sub Pagina #2</a></li>
   <li><a href="#">Sub Pagina #3</a></li>
   <li><a href="#">Sub Pagina #4</a></li>
   <li><a href="#">Sub Pagina #5</a></li>
  </ul>
  </li>
  <li><a href="#">Crea Esto</a></li>
 </ul>
</div>

• Reemplace # con una url en tu menu
• Reemplace toda palabra sombreadas en verde       con titulo de tu menu

Read More

Añadir Menu Desplegable A tu Blog

El Menú desplegable es una herramienta o widget esencial para cualquier blog o pagina web. Le da buen sentido o vista a tu plantilla por ende a tu blog. El menu desplegable le permite navegar facilmente a las diferentes partes de tu blog.

En este tutorial te enseñare añadir un sencillo menu desplegable a tu blog. Lo interesante de este widgetno requiere jquery y es codificado en  Html y CSS. Asi es mas rapido en ejecutarse. Empecemos!.

Como Añadir el Menu Desplegable  ?

1.Entra a la interface de blogger y da click en Diseño.
2. Entonces da Click en Añadir Gadget (Debajo de la Cabecera no en la bara del lado) y escoja el widget Html/Javascript .
3.Ahora pega el siguiente codigo

<div id='mbwnavbar'>
      <ul id='mbwnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Contact</a>
        </li>
         <li>
           <a href='#'>Sitemap</a>
            <ul>
                <li><a href='#'>Sub Category #1</a></li>
                <li><a href='#'>Sub Category#2</a></li>
            </ul>
        </li>
      </ul>
    </div>

4. Ahora cambie el texto en Bold(ejemplo:Home,About,Contact,Sitemap) con la etiqueta apropiada  tambien reemplace la Url sombreada en color rojo (#).
5.Para anadir otra Etiqueta al menu desplegable entonces anada el codigo antes de </ul>. o si desea borar alguna etiqueta  solo borre la que no desea mostrar en el menu desplegable. ejemplo de etiqueta abajo.Aqui ves la etiqueta de Contact puedes reemplazar por otro nombre en ve de Contact o borrarla eliminando el codigo que empieza con <li> y termina con </li>.

 <li>
       <a href='#'>Contact</a>
 </li> 

6.Ahora anadiremos el CSS, Entre a la interface de blogger y de click en Plantilla luego busque Edite Html. Haga una copia de tu plantilla .


7. Luego busque el siguiente codigo en tu plantilla.

]]></b:skin>

8.Pegue el siguiente codigo encima o arriba de codigo del Paso 7.

/**MBW Navgation bar**/
#mbwnavbar {
    background: #464849;
    width: 960px;
    color: #FFF;
    margin: 0px;
    padding: 0;
    position: relative;
    border-top:0px solid #960100;
    height:35px;
}
#mbwnav {
    margin: 0;
    padding: 0;
}
#mbwnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbwnav li {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left:1px solid #333;
    border-right:1px solid #333;
    height:35px;
}
#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
   color: #FFF;
   display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
     
}
#mbwnav li a:hover, #mbwnav li a:active {
    background: #028490;
    color: #FFF;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 9px 12px 10px 12px;
             
}
#mbwnav li {
    float: left;
    padding: 0;
}
#mbwnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbwnav li ul a {
    width: 140px;
}
#mbwnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav li.sfhover ul ul ul {
    left: -999em;
}
#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {
    left: auto;
}
#mbwnav li:hover, #mbwnav li.sfhover {
    position: static;
}
#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
    background: #028490;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    z-index:9999;
    border-bottom:1px dotted #333;
 
}
#mbwnav li li a:hover, #mbwnavli li a:active {
    background: #70b6bd;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
}

 9.Guarde la plantilla y tendras anadido el menu desplegable a tu blog.

Read More