Menu horizontal

ATENTO: Si Tú plantilla fue hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.

En mi primer entrega les traigo un menú horizontal para blogger.

• Menu
• Menu & submenu
  • Submenu
  • Submenu
• Menu
• Menu & submenu
  • Submenu

Lo primero que tenemos que hacer es colocar el estilo CSS dirigiendonos en el menú principal de blogger. en la apartado (Tema), como muestro en la siguiente imagen.

Luego nos dirigimos hacia el boton (Personalizar)

Dentro de las personalización nos dirigimos hacia (Avanzado)=>(Añadir css).

Y pegamos el siguiente código.

/*MENU
----------------------------------------*/
#menu{
margin:5px;
 width:100%;
 background:#99b3ff;
}
#menu>ul{
display: flex;
-ms-display:flex;
list-style: none;
position: relative;
}
#menu ul li{
position: relative;
padding: 10px 15px; /*Relleno*/
cursor: pointer;
background-color: #99b3ff; /*Color de fondo*/
}
#menu ul li:hover{
background-color: #b3c6ff;
}
#menu>ul li:first-child{
border-radius:4px 0px 0px 4px;
}
#menu>ul li:last-child{
border-radius: 0px 4px 4px 0px;
}
#menu ul li a{
text-decoration: none;
color:#e6ecff;
}
#menu ul li a:visited{
color:#e6ecff;
}
#menu ul li a:hover{
color: #ccd9ff;
}
#menu ul li>ul{
position: absolute;
list-style: none;
margin-left: -55px;
display: none;
margin-top: 15px;
}
#menu ul li>ul:after{
content: "";
position:absolute;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #99b3ff transparent;
bottom: 100%;
left: 25%;
}
#menu ul li>ul:before{
content: "";
position: absolute;
bottom: 100%;
left: 25%;
border:5px solid transparent;
padding:0 80px;
}
#menu ul li>ul li{
padding: 5px 10px;
margin:0px 5px 0px 5px;
position: relative;
width: 150px;
display: block;
background-color: #99b3ff;
}
#menu ul li:hover>ul{
display: block;
}
#menu ul li>ul li:first-child{
border-radius: 4px 4px 0px 0px;
}
#menu ul li>ul li:last-child{
border-radius: 0px 0px 4px 4px;
}

Damos click en el botón (Aplicar al blog) que se encuentra en la esquina superior derecha.

Luego de haber aplicado el estilo css dos dirigimos en el menú principal de blogger apartado (Diseño).

 Ya estando en el editor por debajo de cabecera se encuentra Multicolumnas. agregamos un nuevo gatget

HTML/Javascript

Y colocamos el siguiente código HTML

 <div id="menu">
<ul>
<li>
<a href="#">
Menu
</a>
</li>
<li>
<a href="#" style="">
Menu & submenu
</a>
<ul>
<li>
<a href="#">Submenu</a>
</li>
<li>
<a href="#">Submenu</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu</a>
</li>
<li>
<a href="#">Menu & submenu</a>
<ul>
<li>
<a href="#">Submenu</a>
</li>
</ul>
</li>
</ul>
</div>

con esto ya tendríamos el menú en nuestros blogger, para hacerlo funcionar correctamente debes cambiar  lo  siguiente.

Para el titulo de cada apartado del menu cambiar lo que esta en rojo por la palabra que desees

/* EJEMPLO*/
<li>
  <a href="#">Menu</a>
</li>

<li>
  <a href="#">Inicio</a>
</li>

Y para cambiar la dirección del menú el HASH que se encuentra en azul

<li>
  <a href="#">Menu</a>
</li>

<li>
  <a href="http://kwards.blogspot.com/2018/01/menu-horizontal.html">Inicio</a>
</li>

Con esto ya tendrías tu menú horizontal  en tu Blogger. si te fue de ayuda, te invito a suscribirte y estar pendiente de los siguientes tutoriales para blogger.