Un saludo a todos, nuevamente estamos procreando con los menús, Los cuales la mayoría de los diseños y estilos, los podemos encontrar en esta página APYCOM.COM.
En los tutoriales de hace 2 años, la plantilla de blog era diferente a la que es ahora. Por eso les he traído mejores tutoriales además espero que me disculpen ya que con 12 años tenía muy mala ortografía.
EMPECEMOS
Antes de ver cómo ponerlo asegúrate de estar utilizando una plantilla de diseñador, debido a que esto genera problemas en los menús, también asegúrate de editar la plantilla para que acepte cualquier tipo de menú.
Bueno, abre tu blog dirígete a Plantilla y dale click en Editar HTLM. Ahora antes de la etiqueta </head> colocaras el siguiente código
<link type="text/css" href="https://dl.dropboxusercontent.com/u/71104108/Volley%20Loads/Menu%20Black%20Shadow/menu.css" rel="stylesheet" /> <script type="text/javascript" src="https://dl.dropboxusercontent.com/u/71104108/Volley%20Loads/Menu%20Black%20Shadow/jquery.js"></script> <script type="text/javascript" src="https://dl.dropboxusercontent.com/u/71104108/Volley%20Loads/Menu%20Black%20Shadow/menu.js"></script>
Luego le das guardar y te diriges a Diseño allí añadirás el gadget HTLM/JavaScript y pegarás el siguiente código.
<div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>Home</span></a><div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a><div><ul>
<li><a href="#" class="parent"><span>Sub Item 1.1</span></a><div><ul>
<li><a href="#"><span>Sub Item 1.1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.1.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
<li><a href="#"><span>Sub Item 1.3</span></a></li>
<li><a href="#"><span>Sub Item 1.4</span></a></li>
<li><a href="#"><span>Sub Item 1.5</span></a></li>
<li><a href="#"><span>Sub Item 1.6</span></a></li>
<li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.7.1</span></a></li>
<li><a href="#"><span>Sub Item 1.7.2</span></a></li>
</ul></div>
</li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 2</span></a></li>
<li><a href="#"><span>Sub Item 3</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Product Info</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>Sub Item 2</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 2.1</span></a></li>
<li><a href="#"><span>Sub Item 2.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 3</span></a></li>
<li><a href="#"><span>Sub Item 4</span></a></li>
<li><a href="#"><span>Sub Item 5</span></a></li>
<li><a href="#"><span>Sub Item 6</span></a></li>
<li><a href="#"><span>Sub Item 7</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Help</span></a></li>
<li class="last"><a href="#"><span>Contacts</span></a></li>
</ul>
</div>
CAMBIAR PESTAÑAS Y SUB-PESTAÑAS
Para poder cambiar las pestañas y las sub-pestañas debemos hacer lo siguiente.Todo lo que se encuentra en rojo es el nombre de la pestaña y/o sub-pestaña ejemplo:
<li><a href="#" class="parent"><span>Home</span></a><div><ul>
<li><a href="#" class="parent"><span>cambiar</span></a><div><ul>
Los numerales # servirán para colocar el link al cual la pestaña se dirigirá ejemplo:
<li><a href="http://littleloads.blogspot.com" class="parent"><span>cambiar</span></a><div><ul>
AÑADIR PESTAÑAS Y SUB-PESTAÑAS
- Para añadir una nueva pestaña colocas esto antes de </ul>
<li><a href="#"><span>Help</span></a></li>
- Para añadir una nueva pestaña con sub-pestañas solo pegamos esto antes de </ul><li><a href="#"><span>Product Info</span></a><div><ul><li><a href="#" class="parent"><span>Sub Item 1</span></a><div><ul><li><a href="#"><span>Sub Item 1.1</span></a></li><li><a href="#"><span>Sub Item 1.2</span></a></li></ul></div></li>
</ul>
ATENCIÓN
En los tuturiales me preguntaban mucho ''¿Cómo quitar un cuadrito verde que dice ''No Back Link''
la solución es muy fácil...
Te diriges a Plantilla luego Editar HTLM buscas la sección <body> y debajo de ella, colocas esto:
<a href="http://apycom.com/"></a>
Eso es todo, espero les halla gustado y cualquier duda comenten en youtube y en la entrada de este blog, debido a que el youtube no lo reviso mucho. Gracias..
0 comentarios:
Publicar un comentario