para ver si trae anuncios.
INCORPORAR MENU DESPLEGABLES EN EL BLOG
Paso N° 1
Estando en la pantalla de diseño del blog seleccionamos:
(Tema, clic en los tres puntos verticales, luego
Editar HTML, dentro del código html presionamos la teclas
Esta es la pantalla de diseño del blog
Buscamos en siguiente código:
<div class='region-inner header-inner'>
Cambiamos los siguientes valores debe quedar así en la programación del blog
(maxwidgets=´10´ showaddelement=´yes´
Locked=´false´)
Paso N° 2 (Crear los Menús y Sub Menús)
(Diseño, en todas las columnas añadir un Gadget,HTML Javascript) copiamos alli la codificación (arreglar la estructura del menú de acuerdo a su interés cambiando los datos que se te presentan en la siguiente programación)
<div id='mbwnavbar'>
<ul id='mbwnav'>
<li>
</li>
<li>
<a href='#'>CATEGORIAS</a>
<ul>
<li><a href='#'>Cuentos Para Niños</a></li>
<li><a href='#'>Fè y Religiòn</a></li>
<li><a href='#'>Sociales</a></li>
<li><a href='#'>Libros Publicados</a></li>
</ul>
</li>
<li>
<a href='#'>PORTADAS</a>
<ul>
<li><a href='#'>Programaciòn Anual</a></li>
<li><a href='#'>Unidad de Aprendizaje</a></li>
<li><a href='#'>Proyecto de Aprendizaje</a></li>
<li><a href='#'>Experiencia de Aprendizaje</a></li>
</ul>
</li>
<li>
<a href='#'>DIAGNOSTICO DEL AREA</a></li>
<li>
<a href='#'>RESULTADOS ECE</a> </li>
<li>
<a href='#'>RECURSOS</a>
<ul>
<li><a href='#'>Ficha 1</a></li>
<li><a href='#'>Ficha 2</a></li>
<li><a href='#'>Ficha 3</a></li>
<li><a href='#'>Ficha 4</a></li>
</ul>
<li>
</ul>
</div>
Paso N° 3
(nuevamente seleccionamos TEMA en el blog, clic en puntos verticales Editar HTLM,
Control + F)
Buscamos en siguiente código:
]]></b:skin> ó /b:skin
Copiamos en siguiente código encima de la línea encontrada:
/**MBW Navgation bar**/
#mbwnavbar {
background: #bdbfbf;
width: 900px;
color: #d8f602;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid;
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: #023d90;
color: #0a0a0a;
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: #023d90;
width: 150px;
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;
}
Bibliografía
Adaptado de la pagina de youtube.com
https://www.youtube.com/watch?v=mJa0R22WKTE&t=8s
pagina de colores
copiar el codigo del color en la programacion