NUEVO MENÚ DESPLEGABLE PARA BLOGGER

NUEVO MENÚ DESPLEGABLE PARA BLOGGER .

El tutorial del día de hoy trata de como insertar un menú desplegable para blogger en un widget, la inserción del código es muy fácil de realizarlo solo tendrán que seguir las instrucciones de este tutorial y lo obtendrán así de fácil.

Este nuevo menú desplegable para blogger funciona perfectamente en todos los navegadores web como Firefox, Google Chrome, Internet Explorer etc. Además, no le causara ningún error en la estructura de su plantilla.

A continuación mire su demostración de el menú desplegable.

• Inicio
• Tendencias
  • Negocios
  • Interes
  • Economía
• Farandula
  • Internacional
  • Películas
  • Tendencia
    • Noticias
• Noticias
  • Categoría 1
    • Sub Categoría 1
    • Sub Categoría 2
    • Sub Categoría 3
  • Categoría 2
  • Categoría 3
  • Categoría 4
• Películas
• Deportes
  • Categoría 1
  • Categoría 2
• Contactos

Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:

Un clic en “Diseño”

Clic en “Añadir un gadget”

Busca el widget que dice “HTML-Javascript” y ábrelo

Coloca el siguiente código en el interior

<style>
/* -------- start menu By Ayudadeblogger -------- */
.menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;line-height:1.0}
.menus ul{position:absolute;top:-999em;width:100%}
.menus ul li{width:100%}
.menus li:hover{visibility:inherit}
.menus li{float:left;position:relative}
.menus a{display:block;position:relative}
.menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
.menus li:hover li ul,.menus li.sfHover li ul{top:-999em}
.menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}
.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}
.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}
.sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
.menus .sf-shadow ul.sf-shadow-off{background:transparent}
.menu-secondary-container {
background: none repeat scroll 0 0 #E30000;
border-color: #FFFFFF;
height: 34px;
position: relative;
z-index: 300;
}
.menu-secondary{}
.menu-secondary ul{min-width:160px}
.menu-secondary li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqmUpGsX2ZJLGfowqhuGnwuyZvHubF2icg3SVKO4F-2ncdp2tufEdfE6FEuSyUF7n3cBENv_zBVDt6aVAPLTW3UpcREDKZkqkd1V-XddAmvmQPhsT4qqGWKusXcSwSTGCf-V3c5qxrjXI/s1600/menu-secondary-separator.png) left top no-repeat}
.menu-secondary li:first-child{background:none}
.menu-secondary li a {
color: #FFFFFF;
font: bold 12px Arial,Helvetica,Sans-serif;
margin: 0 0 0 2px;
padding: 11px 15px 8px;
text-decoration: none;
text-transform: uppercase;
}
.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat > a,.menu-secondary li.current_page_item > a,.menu-secondary li.current-menu-item > a{    background: none repeat scroll 0 0 #F40404;
color: #000000;
outline: 0 none;
}
.menu-secondary li li{background:none;margin:0}
.menu-secondary li li a{color:#df0000;text-shadow:0 1px 0 #fff;background:#FFF;padding:10px 15px;text-transform:none;margin:0;font-weight:normal}
.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat > a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-menu-item > a{color:#fff;text-shadow:0 1px 0 #000;background:#df0000;outline:0}
.menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px}
.menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:9px 13px 0 0}
.menu-secondary li li .sf-sub-indicator{padding:9px 13px 0 0}
#footer-bg {
text-align:center;
Background-color: #333333;
color : #ffffff;
}
</style>
<div class='span-24'>
<div class='menu-secondary-container'>
<ul class='menus menu-secondary'>
<li><a href='/'>Inicio</a></li>
<li><a href='#'>Tendencias</a>

<ul class='children'>
<li><a href='#'>Negocios</a></li>
<li><a href='#'>Interes</a></li>
<li><a href='#'>Economía</a></li>
</ul>
</li>
<li><a href='#'>Farandula</a>
<ul class='children'>
<li><a href='#'>Internacional</a></li>
<li><a href='#'>Películas</a></li>
<li><a href='#'>Tendencia</a>

<ul class='children'>
<li><a href='#'>Noticias</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Noticias</a>
<ul class='children'>
<li><a href='#'>Categoría 1</a>
<ul class='children'>
<li><a href='#'>Sub Categoría 1</a></li>
<li><a href='#'>Sub Categoría 2</a></li>
<li><a href='#'>Sub Categoría 3</a></li>
</ul>
</li>
<li><a href='#'>Categoría 2</a></li>
<li><a href='#'>Categoría 3</a></li>
<li><a href='#'>Categoría 4</a></li>
</ul>
</li>
<li><a href='#'>Películas</a></li>
<li><a href='#'>Deportes</a>
<ul class='children'>

<li><a href='#'>Categoría 1</a></li>
<li><a href='#'>Categoría 2</a></li>
</ul>
</li>
<li><a href='#'>Contactos</a></li>
</ul>
</div>
</div>

Realiza estos cambios:

He marcado de tres diferentes colores en los lugares que tendrán que realizar sus diferentes cambios

El texto que está marcado de color rojo, pertenece al título principal de las pestañas del menú, cámbialos por los nombres de las categorías que quieras mostrar

Borra los símbolos numerales que están marcados de color azul #, por la dirección URL de los post que quieras dar a conocer en cada pestaña del menú

Además, también tendrás que cambiar el texto que está marcado de color verde por el nombre que tú quieras

Eso es todo, ahora dale un clic en “Guardar” y ubica tu nuevo widget de menu desplegable para blogger debajo de la cabecera principal de tu blog

Después de haber insertado el código, un clic en "Guardar"

Data de la Publicación; 03-09-2019

 Fuente;  ayudadeblogger

 Publicado por;