Ir al contenido principal

Gadget: Menu horizontal desplegable Css- Sunrise Gloss

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
este menu totalmente personalizable es genial por sus posibilidades de resultados
para poner este menu en blogger se debe seguir los suiguientes pasos
  • se va a diseño de HTML y expanden plantilla de artilugios
  • luego para busqueda rapida presione Ctrl + f y busque la etiqueta ]]></b:skin>
  • y encima de ella pon li siguiente
@charset "utf-8";
/*^'^ Navigation Structure ^'^*/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(http://dl.dropbox.com/u/53097108/ihojosestudios/example/sunrise-gloss/nav-bg.jpg);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}

/*^'^ Primary Items ^'^*/   
#nav-container a{   
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: #FFFFFF;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(http://dl.dropbox.com/u/53097108/ihojosestudios/example/sunrise-gloss/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: top;
}

#nav-container a:hover{
color: #6C3600;
background: url(http://dl.dropbox.com/u/53097108/ihojosestudios/example/sunrise-gloss/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: center;
}

/*^'^ Secondary Items Container ^'^*/   
#nav-container div, #nav-container ul{   
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(http://dl.dropbox.com/u/53097108/ihojosestudios/example/sunrise-gloss/item-secondary-container-bg.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}

/*^'^ Secondary Items ^'^*/   
#nav-container div a, #nav-container ul a{   
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(http://dl.dropbox.com/u/53097108/ihojosestudios/example/sunrise-gloss/item-secondary-bg.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}

/*^'^ Secondary Items Hover State ^'^*/   
#nav-container div a:hover, #nav-container ul a:hover{   
background-color: #FFFFFF;
background: url(http://dl.dropbox.com/u/53097108/ihojosestudios/example/sunrise-gloss/item-secondary-bg.jpg);
background-repeat: no-repeat;
color:#CC0000;
}

/*^'^ Secondary Item Titles ^'^*/   
#nav-container .item-secondary-title{   
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
/* background: url(http://dl.dropbox.com/u/53097108/ihojosestudios/example/sunrise-gloss/item-secondary-title-bg.jpg); */
background-repeat: no-repeat;
font-weight:bold;
}

/*^'^ Horizontal Dividers ^'^*/   
#nav-container .divider-horiz{   
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}

/*^'^ Vertical Dividers ^'^*/   
#nav-container .divider-vert{   
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}
  • Lo que esta en rojo es donde vendra el Url de la imagen correspondiente
  • cuando lo hagan guarden los cambios
  • luego valla a elementos de pagina y añada un gadget HTML/javascript
  • y pegue lo siguiente

<div class="nav-container-outer">
   <img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/sunrise-gloss/nav-bg-l.jpg" alt="" class="float-left" /><img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/sunrise-gloss/nav-bg-r.jpg" alt="" class="float-right" />
   <ul id="nav-container" class="nav-container">
      <li><a class="item-primary" href="#">pestaña 1</a>
         </li>
  
      <li><span class="divider divider-vert" ></span></li>
      <li><a class="item-primary" href="#">pestaña 2</a>
  
         <ul style="width:150px;">
         <li><a href="#">subpestaña 2.1</a></li>
         <li><a href="#">subpestaña 2.2</a></li>
         <li><a href="#">subpestaña 2.3</a></li>
         <li><a href="#">subpestaña 2.4</a></li>
         <li><a href="#">subpestaña 2.5</a></li>
               </ul></li>
  
      <li><span class="divider divider-vert" ></span></li>
      <li><a class="item-primary" href="#">pestaña 3</a>
  
         <ul style="width:150px;">
         <li><a href="#">subpestaña 3.1</a></li>
         <li><a href="#">subpestaña 3.2</a></li>
         <li><a href="#">subpestaña 3.3</a></li>
         </ul></li>
  
      <li><span class="divider divider-vert" ></span></li>
      <li><a class="item-primary" href="#">pestaña 4</a>
  
         <ul style="width:150px;">
         <li><span class="item-secondary-title" >categoria 4.1</span></li>
         <li><a href="#">subpestaña 4.1</a></li>
         <li><a href="#">subpestaña 4.2</a></li>
         <li><a href="#">subpestaña 4.3</a></li>
         <li><span class="divider divider-horiz" ></span></li>
         <li><span class="item-secondary-title" >categoria 4.2</span></li>
         <li><a href="#">subpestaña 4.4</a></li>
         <li><a href="#">subpestaña 4.5</a></li>
         </ul></li>        
      
   <li class="clear">&nbsp;</li></ul>
</div>
  • lo que esta en rojo sera donde vendra el url de la imagen correspondiente
  • lo que esta en Fuchsia es el nombre de las pestaña y subpestañas
  • lo que esta en azul es donde vendra el url del enlace
  • lo que esta en azul mas claro es una categoria 
  • lo que esta en verde es el nombre de la categoria
  • lo que esta en purpura es la divicion de las categorias
  • si desea poner otra pestaña solo ponga esto antes de <li class="clear">&nbsp;</li></ul>.
<li><a class="item-primary" href="#">pestaña</a>
         </li>
  • si quiere poner una pestaña con subpestañas ponga esto antes de <li class="clear">&nbsp;</li></ul>.
<li><span class="divider divider-vert" ></span></li>
      <li><a class="item-primary" href="#">pestaña</a>
  
         <ul style="width:150px;">
         <li><a href="#">subpestaña</a></li>
         <li><a href="#">subpestaña</a></li>
         <li><a href="#">subpestaña</a></li>
         </ul></li>
  • si quiere una subpestaña mas solo ponga esto antes de </ul>
<li><a href="#">subpestaña</a></li>
  • si desea poner una categoria ponga esto antes de la subpestaña que empieza la categoria <li><a href="#">subpestaña</a></li>
<li><span class="item-secondary-title" >categoria</span></li>
  • si quiere dividir pestañas con una linea solo ponga esto despues de la subpestaña que va a dividir <li><a href="#">subpestaña</a></li>
<li><span class="divider divider-horiz" ></span></li>
  • Listo ya tendras el menu en tu blog.
Ver Ejemplo

Entradas populares de este blog

Blogger:Usar @font-face en tu Blog de Blogger

Muchos sitios están usando @font-face y es porque les permite usar fuentes en sus sitios web que son muy creativas y dan más estilo al sitio. Lo malo que tiene esta funcion es que solo se pueden usar fuentes si están en el mismo servidor de el sitio, lo que quiere decir que en blogs como los de Blogger no funcionaría. Pero eso se ha estado solucionando con el tiempo. Un dia me puse a buscar como hacerlo y no encontraba la manera hasta que un día pude hacerlo cuando puse una fuente codificada, funcionó instantaneamente, lo unico que sé es que funciona en Firefox, Firefox Aurora, RockMelt y Google Chrome y no se si funcione en los demás navegadores pues no tengo los demás y IE9 no me funciona bien . "Si es compatible en los otros navegadores lo comentan para agregarlo a la lista de compatibles" Sigue los siguientes pasos y podrás cualquier fuente y poner con @font-fae en tu Blog. Se usarán imagenes de ilustracion para que sea más entendible, has click en donde diga (ve

Paquetes de Idioma Windows 7 MUI (64bits / x64)

Paquete de idiomas para windows 7 para aquellos que nacesitan tener varios idiomas en su pc. Es compatible con la mayoria de versiones de Windows 7 Hay que tomar nota de que si se instalan demasiados paquetes de idioma adicionales, el espacio de disco y el rendimiento del sistema puede verse afectados. En particular, el espacio de disco y el rendimiento del sistema se ven afectados durante las operaciones de servicios, tales como las instalaciones de Service Pack (KB972813). Por lo tanto, se recomienda sólo añadir un paquete de idioma, el que necesitares exclusivamente. Paquete de idiomas Windows 7 RTM MUI 64-bit (x64) Arabe Descargas Bulgaro Descargas Chino (Simplifi...) Descargas Chino (Tradicio...) Descargas Croata Descargas Checo Descargas Danés Descargas Holandés Descargas Inglés Descargas Estonio Descargas Finlandés Descargas Francés Descargas Alemán Descargas Griego Descargas Hebreo Descargas Húngaro Descargas Italiano

Manual:Codigos y plantillas Aegisub

Aegisub es un programa que le permite a las personas añadir subtitulos y karaoke a sus videos, actualmente Aegisub para dar esos estilos y animaciones a los subtitulos y karaokes usa una serie de codigos que activan dichas animaciones en un tiempo y colores determinados, como un script en HTML. Los que más utilizan este programa son los Fansubs y empresas de karaoke. Los codigos son dificiles de aprender pero no imposibles si mantienes practica. REGLAS DE LOS CÓDIGOS. Debes saber unas reglas para los codigos y es que cada coigo está entre parentesis {} . El codigo inicia con una diagonal inversa (invert slash) \ . El indicador de la accion biene negreado . El codigo numerico saldrá normal. El codigo viene antes del texto. Cada codigo se divide con una diagonal inversa \ . BÁSICO. _________________________________________________________________________ Lo basico son esos codigos que son los más utilizados y faciles, además de que el mismo programa te da las opciones