Gadget: Menu desplegable Black

el
Este menu sirve para aquellos blogs de estilo negro o gris, este es un menu del sitio web Apycom.com que es un sitio de menus desplegables con animación para sitios web.
style 1 black
Para los que usan plantillas del diseñador de plantilla primero deben hacer lo que dice en la siguiente entrada, Poner cualquier menu en las plantillas del diseñador de Blogger
Para agregar este menu a blogger sigue estos pasos: (Ver ejemplo)
  • Ve a plantilla luego has click en Edicion de HTML.
  • Das click en expandir plantilla de artilugios y luego busca </head> y encima de ella pega esto:
<link href='http://dl.dropbox.com/u/53097108/ihojosestudios/example/style1black/css/menu.css' rel='stylesheet' type='text/css'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/style1black/js/menu.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/style1black/js/jquery.js' type='text/javascript'/>
  • Guarda los cambios.
  • Ahora ve a Diseño y agrega un nuevo Gadget HTML/Javascript.
  • y pega lo siguiente:
<div id="menu">
<ul class="menu">
<li><a href="#"><span>Pestaña 1</span></a></li>
<li><a href="#" class="parent"><span>Pestaña 2</span></a>
<ul>
<li><a href="#" class="parent"><span>Subpestaña 2.1</span></a>
<ul>
<li><a href="#"><span>Subpestaña 2.1.1</span></a></li>
<li><a href="#"><span>Subpestaña 2.1.2</span></a></li>
<li><a href="#"><span>Subpestaña 2.1.3</span></a></li>
</ul>
</li>
<li><a href="#"><span>Subpestaña 2.2</span></a></li>
<li><a href="#"><span>Subpestaña 2.3</span></a></li>
</ul>
</li>
<li><a href="#" class="parent"><span>Pestaña 3</span></a>
<ul>
<li><a href="#"><span>Subpestaña 3.1</span></a></li>
<li><a href="#"><span>Subpestaña 3.2</span></a></li>
<li><a href="#"><span>Subpestaña 3.3</span></a></li>
</ul>
</li>
<li><a href="#"><span>Pestaña 4</span></a></li>
<li><a href="#"><span>Pestaña 5</span></a></li>
</ul>
</div>
  • Lo que está en Rojo es donde pondrás el nombre de la subpestaña.
  • Lo que está en Purpura es donde pondrás el nombre de la pestaña.
  • Lo que está en Rojo claro es donde pondrás el nombre de la subpestaña que está dentro de otra subpestaña.
  • Lo que está en Azul es donde pondrás el enlace de la pestaña o subpestaña correspondiente.
  • Para agregar una pestaña solo agrega lo siguiente antes de </ul>.
 <li><a href="#"><span>Pestaña</span></a></li>
  •  Para agregar una pestaña con subpestañas agrega esto antes de </ul>.
 <li><a href="#" class="parent"><span>Pestaña</span></a>
<ul>
<li><a href="#"><span>Subpestaña 1</span></a></li>
<li><a href="#"><span>Subpestaña 2</span></a></li>
<li><a href="#"><span>Subpestaña 3</span></a></li>
</ul>
</li>
  •  Para agregar una subpestaña agrega esto antes de </ul>.
 <li><a href="#"><span>Subpestaña</span></a></li>
  •  Para agregar una subpestaña con subpestañas agrega esto antes de </ul>.
<li><a href="#" class="parent"><span>Subpestaña</span></a>
<ul>
<li><a href="#"><span>Subpestaña 1.1</span></a></li>
<li><a href="#"><span>Subpestaña 1.2</span></a></li>
<li><a href="#"><span>Subpestaña 1.3</span></a></li>
</ul>
</li>
  •  Para agregar una subpestaña dentro de otra subpestaña agrega esto antes de </ul>.
 <li><a href="#"><span>Subpestaña 1.3</span></a></li>
  •  Listo eso es lo que debes saber para agregar este menu a tu blogger.

Fuente | Apycom.com