Descarga Media 1 Fire
Esperar los segundos correspodientes ingtresar el capcha
click en cree lazo de descarga
Click en boton de descarga ( No las letras)

martes, 9 de junio de 2015

Menu desplegable para Blogger en un solo gatget

Menu desplegable para Blogger en un solo gatget
(Sirve para todos las plantillas)

Solo copiar el codigo y ponerlo en un gatget .Completamente funcional .
Para que quede mejor lo ideal seria hacer un pequeño cambio en la plantilla que consistiria en cambiar al
principio de todo este codigo ## maxwidgets='1' showaddelement='no'>##
cambiar solo 1 por el 2 y el no por el yes dejo foto para ver el codigo que esta al principio de la plantilla no
se necesita utilizar el buscador


PARA EDITAR EL MENU
Para cambiar la velocidad cambiar el valor que esta de color verde cuanto mas alto mas lento hast 500 se puede cambiar
Para cambiar el color se pude cambiar el degrado cambiando los colores que estan en rojo
y  si le quitais uno de los colores quedara el menu de un solo color

Para añadir en categoria mas (padre) solo copiar el color aqua y pegar a continuacion

Para añadir una subcategoria (hijo nieto)
en la li sta donde esta el asterisco darle un enter 

<li class="list"><a href="#">SUBMENU-1.2</a>#</li>
Qudara asi
<li class="list"><a href="#">SUBMENU-1.2</a>
</li>
lugo darle mas enter para separarlo quedara asi
<li class="list"><a href="#">SUBMENU-1.2</a>


</li>
y luego pegar en medio las etiquetas siguientes primero <ul> segundo </ul>
qudara asi
<li class="list"><a href="#">SUBMENU-1.2</a>
<ul> 
@@@@@@@@@@@@@@@@@@
</ul>
</li>
donde estan las @ (arroba ) pegerle tantas listas como querrais
esta es una
<li class="list"><a href="#">nieto</a></li>
quedara asi
<li class="list"><a href="#">SUBMENU-1.2</a>
<ul> 
<li class="list"><a href="#">nieto</a></li>
(podeis pegar tantas listas como querrais)
</ul>
</li>


repetir el mismo procedimiento para poner tantas subcategorias como querrais solo separar el codigo final de la lista final mediente enter   </a>#</li>
para poner imagenes parecido como este blog solo pegar est codigo 
<img border="0" src="AQUI LA URl de la imagen" height="20" width="100" />

en le titulo de la categoria  color naranja

<li class="list"><a href="#">SUBMENU-1.3</a></li>

este el el codigo para abrir en una nueva pestaña se puede borrar para abrir en la misma a continuacion de la direccion web
 target="_blank"



Codigo
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(5);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){     
mainmenu();
});
</script>

<style type="text/css">
/**** CODIGO DEL COLOR *****/
#menu a, #menu li, #menu li li{
background-color: #2E2E2E;
}

#menu a:hover, #menu li:hover, #menu li li:hover{
background:-webkit-linear-gradient(top,#646262 0%,#000000 100%);
text-decoration: none;
}
/****** FIN ********/
/**** CODIGO DEL COLOR *****/
#menu a, #menu li, #menu li li{
background-color: #2E2E2E;

}

#menu a:hover, #menu li:hover, #menu li li:hover{
background:-moz-linear-gradient(top,#646262 0%,#000000 100%);
text-decoration: none;
border-radius:15px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
}
/****** FIN ********/
#center
width:800px;
margin:opx auto;
#nav{
padding: 0;
list-style-type:none;
list-style-position:outside;
overflow: visible;
}
#nav a{
display: block;
overflow: visible;
border: none 0px;
}

#menu{
height: 80px;
border: none 0px;
}

#menu ul {
margin: 0;
list-style: none;
float: left;
}

#menu li.parent {
position: relative;
margin-left: 1px;
display: block;
float: left;
z-index: 113;
width: auto;
list-style: none;
border: none 0px;
padding: 4px;
background-color:-webkit-linear-gradient(top,#585858 0%,#000000 100%);
}

#menu li {
position: relative;
margin: 0;
z-index: 3;
width: auto;
border: none 0px;

}

#nav ul {
position: absolute;
top: 31px;
left 0px;
z-index: 33;
width: 150px;
visibility: hidden;
border: none 0px;
overflow: visible;
list-style-type:none;
}

#nav ul ul
{
left: 176px;
top: 0px;
width: 150px;
border: none 0px;
overflow: visible;
}

.ul-child li a{
margin: 0px;
padding:0;
z-index: 2;
position: relative;
display: block;
width: 100%;
border: none 0px;
}

.ul-child li{
margin: 0px;
padding: 0px;
border: none 0px;
}

#menu li a{
text-decoration: none;
border: none 0px;
padding: 1.8px 8px;
}

#menu li.list{
border: none 0px;
width: 188px;
border-bottom: 1px solid #292A0A;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

.tabs-outer
{
overflow: visible;
}
</style>

<div id="menu">
<ul id="nav">
<li class="parent"><a href="AQUI LA DIRECCION WEB" target="_blank">inicio</a></li>
<li class="parent"><a href="AQUI LA DIRECCION WEB " target="_blank">padre</a>
<ul>
<li class="list"><a href="AQUI LA DIRECCION WEB" target="_blank">hijo</a>
<ul>
<li class="list"><a href="AQUI LA DIRECCION WEB" target="_blank">nieto</a></li>
<li class="list"><a href="AQUI LA DIRECCION WEB" target="_blank">nieto -2</a></li>
<li class="list"><a href="AQUI LA DIRECCION WEB">nieto 3-3</a></li>
</ul>
</li>
<li class="list"><a href="AQUI LA DIRECCION WEB" target="_blank">SUBMENU-1.2</a></li>
<li class="list"><a href="AQUI LA DIRECCION WEB" target="_blank">SUBMENU-1.3</a></li>
</ul>
</li>
<li class="parent"><a href="AQUI LA DIRECCION WEB" target="_blank">madre</a>
<ul>
<li class="list"><a href="AQUI LA DIRECCION WEB" target="_blank">hija</a></li>
<li class="list"><a href="AQUI LA DIRECCION WEB" target="_blank">hija 2</a>
<ul>
<li class="list"><a href="AQUI LA DIRECCION WEB">nieta 1</a></li>
<li class="list"><a href="AQUI LA DIRECCION WEB" target="_blank">nieta 2</a></li>
<li class="list"><a href="AQUI LA DIRECCION WEB" target="_blank">nieta 3</a></li>
</ul>
</li>
<li class="list"><a href="AQUI LA DIRECCION WEB" target="_blank">hija 3</a></li>
</ul>
</li>
<li class="parent"><a href="AQUI LA DIRECCION WEB" target="_blank">tio</a>
<ul>
<li class="list"><a href="AQUI LA DIRECCION WEB" target="_blank">sobrino 1</a></li>
<li class="list"><a href="AQUI LA DIRECCION WEB" target="_blank">sobrino 2</a></li>
<li class="list"><a href="AQUI LA DIRECCION WEB" target="_blank">sobrino 3</a></li>
</ul>
</li>
<li class="parent"><a href="AQUI LA DIRECCION WEB" target="_blank">MENU-4</a></li>
<li class="parent"><a href="AQUI LA DIRECCION WEB" target="_blank">MENU-5</a></li>
<li class="parent"><a href="AQUI LA DIRECCION WEB" target="_blank">MENU-6</a></li>
</ul></div>


No hay comentarios:

Publicar un comentario en la entrada