Cómo agregar un menú desplegable de barra de enlaces en Blogger

Añadir un menú desplegable a la barra de vínculos en Blogger para simplificar la navegación de su blog de Blogger para sus lectores. Añadir menú desplegable a la navegación de su blog da a un visitante varias opciones para proceder cada vez que se mueve el cursor sobre el menú. La instalación requiere la inserción de código en su blog. 

Barra de enlaces BLOGGER

Iniciar sesión en Blogger con sus credenciales de Google. Elija un Diseño de abajo el nombre del blog en el que desea agregar a los menús desplegables.

Seleccione Editar HTML, a continuación, desplácese por el documento hasta llegar a la etiqueta / cabeza. Haz clic en la línea por encima de la etiqueta, a continuación, haga clic derecho y pega el siguiente código:

estilo # sddm {margin: 0; padding: 0; z-index: 30}

# Sddm li {margin: 0; padding: 0; list-style: none; float: left; / * Fuente del menú superior * / font: bold 11px Arial}

# Sddm li a {display: block; margin: 0 0 0 1px; padding: 10px 4px; / * ancho de cada menú superior * / Ancho: 60px; / * color de fondo del menú principal * / background: # 5970B2;

/ * Color del texto del menú principal * / color: # FFFFFF; text-align: center; text-decoration: none}

# Sddm li a: hover {

/ * Color de fondo del menú principal en vuelo estacionario * / background: # 49A3FF}

# Sddm div {position: absolute; visibility: hidden; margin: 0; padding: 0;

/ * Color de fondo del menú desplegable * / background: # FFFFFF; / * límite del menú desplegable * / border: 1px solid # 5970B2}

# Sddm un div {position: relative; display: block; margin: 0; padding: 10px 5px; width: auto; espacios en blanco: nowrap; text-align: left; text-decoration: none; / * el color de fondo de cada elemento de menú * / background: # FFFFFF; / * color del texto de cada elemento del menú * / color: # 2875DE; / * fuente de cada elemento del menú * / font: 11px Arial}

# Sddm div a: hover {/ * El fondo de cada elemento en vuelo estacionario * / background: # 49A3FF; / * color de la fuente de cada elemento de menú en vuelo estacionario * / color: # FFFFFF} / estilo script type = 'text / javascript'

var timeout = 500; closetimer var = 500; ddmenuitem var = 0;

/ / Abrir oculta capa función mopen (id) {/ / cancelar cerca mcancelclosetime temporizador ();

/ / Capa estrecha vieja if (ddmenuitem) ddmenuitem.style.visibility = # 39, # 39 oculta;;

/ / Obtiene nueva capa y mostrarlo ddmenuitem = document.getElementById (id); ddmenuitem.style.visibility = # 39, visible # 39;;

} / / Cerrar mostró función de capa mclose () {if (ddmenuitem) ddmenuitem.style.visibility = # 39, # 39 oculta;;}

/ / Ir cerca mclosetime función de temporizador () {closetimer = window.setTimeout (mclose, tiempo de espera);}

/ / Cancelar cerca mcancelclosetime función de temporizador () {if (closetimer) {window.clearTimeout (closetimer); closetimer = null;}}

/ Capa / cerrar cuando se haga clic en Salida document.onclick = mclose; / script

Reemplace los elementos de código de color con códigos de colores que se corresponden con el tema de tu blog, a continuación, haga clic en Guardar plantilla. Seleccione el vínculo Elementos de página en la parte superior de la página.

Seleccione Añadir un gadget, a continuación, haga clic en HTML / JavaScript. Haga clic en el campo del cuerpo, a continuación, péguelo en el código siguiente:

ul id = sddm lia href = # onmouseover = mopen ('m1') onmouseout = mclosetime () Home / a div id = m1 onmouseover = mcancelclosetime () onmouseout = mclosetime () a href = # Primera Menú # 1 Opción / aa href = # Segundo Menú # 2 Opción / aa href = # Tercera Menú # 2 Opción / a / div / li lia href = # onmouseover = mopen ('m2') onmouseout = mclosetime () Descargar / a div id = m2 onmouseover = mcancelclosetime () onmouseout = mclosetime () a href = # Primera Menú # 2 Opción / aa href = # Segundo Menú # 2 Opción / aa href = # Tercera Menú # 2 Opción / a / div / li div style = claro: ambos / div

Vuelva a colocar el # detrás de cada uno a href = elemento con la dirección URL de la página a la que desea establecer el vínculo, luego vuelva a colocar el título de la muestra detrás de cada uno con el título de la página. Haga clic en Guardar Widget.

Ver su blog en una nueva pestaña o ventana. Los menús desplegables son ahora activo en la barra de vínculos.