PRINCIPAL

  BIENVENIDA

ougittuulg

hfyifiy

MENÚ EN BLOGGER

Entramos a la opción de DISEÑO y debajo de encabezado creamos un GARGET, (creamos un GARGET y lo arrastramos debajo de encabezado en caso que no este la opción ahí.). El GARGET debe ser HTML/JAVASCRIP. pego el siguiente código en la caja de CONTENIDO.

<style>
#adbnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}
#adbnav {
    margin: 0;
    padding: 0;
}
#adbnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#adbnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#adbnav li a, #adbnav li a:link, #adbnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
#adbnav li a:hover, #adbnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
}
#adbnav li {
    float: left;
    padding: 0;
}
#adbnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#adbnav li ul a {
    width: 140px;
}
#adbnav li ul ul {
    margin: -25px 0 0 161px;
}
#adbnav li:hover ul ul, #adbnav li:hover ul ul ul, #adbnav li.sfhover ul ul, #adbnav li.sfhover ul ul ul {
    left: -999em;
}
/*--www.ayudadeblogger.com
  www.abogadosasociados.com www.volantedeportivo.com Drop Down Menu ----*/
#adbnav li:hover ul, #adbnav li li:hover ul, #adbnav li li li:hover ul, #adbnav li.sfhover ul, #adbnav li li.sfhover ul, #adbnav li li li.sfhover ul {
    left: auto;
}
#adbnav li:hover, #adbnav li.sfhover {
    position: static;
}
#adbnav li li a, #adbnav li li a:link, #adbnav li li a:visited {
    background: #BF0100;
    width: 120px;
    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;
}
#adbnav li li a:hover, #adbnavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
</style>

<div id='adbnavbar'>
<ul id='adbnav'>
   <li>
    <a href='/'>Inicio</a>
        </li>
        <li>
    <a href='#'>Temas</a>
       </li>
        <li>
   <a href='#'>Contactos</a>
      </li>
 <li>

  <a href='#'>Noticias</a>
         <ul>
         <li><a href='#'>Nombre 1</a></li>
         <li><a href='#'>Nombre 2</a></li>
         <li><a href='#'>Nombre 3</a></li>
         </ul>
    </li>
  </ul>
 </div>

MODIFICAR MENUS

 El codigo que modifico debe tener esta estructura:
<li>
  <a href='#'>Nonmbredelbotonsuperior</a>
         <ul>
        <li><a href='acavalaURL'>Opcion1</a></li>
         <li><a href='ejemploPrueba8012022.blogspot.com'>Opcion 2</a></li>
         <li><a href='https://prueba8022022.blogspot.com/p/precios.html'>Opción 3</a></li>
         </ul>

    </li>

MENU PARA DESPELEGABLE

Voy a diseño, creo un Garget HTML/JAVSCRIP debajo de encabezado y copio el siguiente código en contenido

<div id="navmenu">
<div id="navmenu">
<div id="navmenuleft">
<ul id="nav">
<li><a href="urldestino">opcion1</a></li>
<li>
<li><a href="urldestino">opcion2</a></li>
<li>
<a href="#">opcion3</a>
<ul>
<li><a href="urldestino">opcion31</a></li>
<li><a href="urldestino">opcion32</a></li>
</ul>
</li>
<li>
<a href="#">opcion4</a>
<ul>
<li><a href="urldestino">opcion41</a></li>
<li><a href="urldestino">opcion42</a></li>
</ul>
</li>
<li><a href="urldestino">opcion5</a></li>
</li>
<li><a href="urldestino">opcion6</a></li>
</ul>
</div>
</div></div>

Voy a TEMA, clic en personalizar, clic en opciones avanzadas, en la pestaña de abajo buscamos agregar css.

A continuación pegamos el siguiente código y GUARDAR parte inferior derecha.

.tabs-inner .section:first-child ul { margin-top: 0px;}
.tabs-inner .widget ul { background: #4a81d3; text-align: center !important;}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #000000; /*Color del texto de las pestañas al pasar el ratón por encima*/
background-color: #241aad; /*Color del fondo de las pestañas al pasar el ratón por encima*/
text-decoration: none;
}
.tabs .widget li, .tabs .widget li{ display: inline; float: none;}
#NavMenu {
position: relative;
margin: 0 auto;
padding: 0;
border-top: 0px solid #437b7e; /*Borde superior del menú, si no queremos borramos la línea*/
border-bottom: 0px solid #437b7e; /*Borde inferior del menú, si no queremos borramos la línea*/
background: #437b7e; /*Color de fondo del menú, si no queremos borramos la línea*/
}
#NavMenuleft {
width: 980px; /*Ancho del menú*/
float: none;
margin: 0 auto;
padding: 0;
}
#nav {
margin: 0 auto;
padding: 3px ; /*alto del fondo del menu*/
background:#64b6bb;/*color de fondo del menú completo*/
}
#nav ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: normal normal 18px ‘Georgia’, Trebuchet, Verdana, sans-serif; /* Tipo de letra */
color: #0975bd; /* Color de la letra */
text-transform: uppercase;/*poner texto en mayúsculas, sino lo quieres borra esta línea*/
border-left: 0px solid #0e85bd; /* Borde izquierdo de la celda */
border-right: 0px solid #0e85bd; /* Borde derecho de la celda */
}
#nav li a:hover, #nav li a:active {
color: #000000; /*Color del texto de las pestañas al pasar el ratón por encima*/
margin: 0;
padding: 10px 15px 10px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
font: normal normal 14px arial; /*Tamaño y tipografías de las subpestañas*/
background: #0975bd; /*Color del fondo de las subpestañas*/
border-top:2px solid #0975bd; /*borde superior de las suspestañas, sino lo quieres borra esta línea*/
width: 150px; /*Tamaño de éstas*/
color: #000000; /*Color del texto de las subpestañas*/
float: none;
margin: 0;
padding: 7px 10px;
}
#nav li li a:hover, #nav li li a:active {
background: #0a69a8; /*Color del fondo de las subpestañas al pasar el ratón por encima*/
color: #000000; /*Color del texto de las subpestañas al pasar el ratón por encima*/
padding: 7px 10px;
}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
#nav li ul a { width: 140px; }
#nav li ul ul { margin: -32px 0 0 171px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}
.tabs-outer{overflow: visible;}
.tabs-inner { padding: 0px; } .section { margin: 0px; }

Para modificar el menú en DISEÑO; edito el GARGET 

*********************************

<style>
#adbnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}
#adbnav {
    margin: 0;
    padding: 0;
}
#adbnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#adbnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#adbnav li a, #adbnav li a:link, #adbnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
#adbnav li a:hover, #adbnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
}
#adbnav li {
    float: left;
    padding: 0;
}
#adbnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#adbnav li ul a {
    width: 140px;
}
#adbnav li ul ul {
    margin: -25px 0 0 161px;
}
#adbnav li:hover ul ul, #adbnav li:hover ul ul ul, #adbnav li.sfhover ul ul, #adbnav li.sfhover ul ul ul {
    left: -999em;
}
/*--www.ayudadeblogger.com
  www.abogadosasociados.com www.volantedeportivo.com Drop Down Menu ----*/
#adbnav li:hover ul, #adbnav li li:hover ul, #adbnav li li li:hover ul, #adbnav li.sfhover ul, #adbnav li li.sfhover ul, #adbnav li li li.sfhover ul {
    left: auto;
}
#adbnav li:hover, #adbnav li.sfhover {
    position: static;
}
#adbnav li li a, #adbnav li li a:link, #adbnav li li a:visited {
    background: #BF0100;
    width: 120px;
    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;
}
#adbnav li li a:hover, #adbnavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
</style>

<div id='adbnavbar'>
<ul id='adbnav'>
   <li>
    <a href='/'>Inicio</a>
        </li>
        <li>
    <a href='#'>Temas</a>
       </li>
        <li>
   <a href='#'>Contactos</a>
      </li>
 <li>

  <a href='#'>Noticias</a>
         <ul>
         <li><a href='#'>Nombre 1</a></li>
         <li><a href='#'>Nombre 2</a></li>
         <li><a href='#'>Nombre 3</a></li>
         </ul>
    </li>
  </ul>
 </div>

TERCERA FORMA DE HACER MENU (DESPLEGABLE)

Ingreso a la opción TEMA y en la pestaña de PERSONALIZAR escojo la opción Editar HTML.

Doy clic por dentro del código y  presiono Ctrl + F para buscar, copio la linea que hay a continuación y la busco con Enter

]]></b:skin>

luego encima de esa lineal que encontramos pegamos el siguiente código( hasta esta linea none;})

.btn{ border: none; cursor: pointer; color: #fff; display: inline-block; padding: 16px 22px; /*margen interno*/ border-radius: 6px; /*borde redondeado*/ text-align: center; line-height: 22px; font-family: "Roboto", sans-serif; font-size: 18px; /*tamaño de las letras*/ overflow: hidden; margin-left: 15px; box-shadow: 0px 6px 18px -5px rgba(0, 0, 0, 0.5); background-size: 300% 100%; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .btn:visited, .btn:hover{ color: #fff; } .btn:hover { background-position: 100% 0; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .btn i{ color: #fff; font-size: 16px } /*Verde*/ .btn.color-verde { background-image: linear-gradient(to right, #137f4c, #2bb673, #2bb673, #137f4c); } /*Azul*/ .btn.color-azul { background-image: linear-gradient(to right, #0377a8, #4481eb, #4481eb, #0377a8); } /*Rojo*/ .btn.color-rojo { background-image: linear-gradient(to right, #eb3941, #f15e64, #f15e64, #eb3941); } /*Amarillo*/ .btn.color-amarillo { background-image: linear-gradient(to right, #e48803, #e4ae2d, #e4ae2d, #e48803); } /*Oscuro*/ .btn.color-oscuro { background-image: linear-gradient(to right, #29323c, #485563, #485563, #29323c); } /*Claro*/ .btn.color-claro { background-image: linear-gradient(to right, #ccc, #e8e8e8, #e8e8e8, #ccc); color: #000 } .btn.color-claro i {color: #000} .centrar{text-align: center;} a{text-decoration: none;}

Doy clic en guardar, parte superior derecha

En las primeras lineas encuentro <head>

debajo de <head> pegamos esto.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>

Doy clic en guardar, parte superior derecha

luego vamos a la entrada y pegamos teniendo en codigo html etiqueta

<a href="#" class="btn color-verde"> Boton verde </a>