Insertar un menú desplegable para blogger en un solo widget

Insertar un menú desplegable para blogger en un solo widget.

 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 ya que tienes que instalarlo en un  widget “HTML/Javascript” y no tienes que asomarte a la plantilla para nada.



 Vamos a trabajar

1 Ir a blogger

2 Un clic en “Diseño”

3 Abre un gadget “Añadir un gadget”

4 Busca el widget que dice “HTML/Javascript”

5 Ábrelo e ingresa las siguientes líneas de código en su 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/AVvXsEhzhh1bBUbmRWXts6wni5KnSPA325vaPOK4h5ss5wl6dkfD3pklzjNWTWI0Bd-y-D2-bCdVe9_nlTQQAgxK4xO5rxdy8iPQ_3dxFtKpWSFYaP2yE9xNxY9KWB8OK7DAij5MAFGU3B3b3LQ/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 resto texto  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

Fecha de la Publicación; 28-12-2018

 Fuente; ayudadeblogger

 Publicado por;