MENÚ HORIZONTAL PARA BLOGGER DE 2 COLUMNAS .





Hoy tenemos un menú para tu blog de blogger con estilo bastante especial el mismo es desplegable
 y fácil de incorporar un detalle exclusivo es que en sus subpestañas se despliega en dos columnas 
lo cual hace que la casilla no se extienda tanto para esta subpestaña.

Lo primero será ingresar a Edición HTML allí buscamos el siguiente fragmento ]]></b:skin> y justo antes pegaremos lo siguiente:  

Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:



 Un clic en “Plantilla”





  Un clic en “Editar HTML”




  Ahora se te abrirá el Editor HTML de tu plantilla




En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, 



 Busca el siguiente código


]]></b:skin>

 Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste



/* Menú horizontal con subpestañas en dos columnas
----------------------------------------------- */
#toppic {
width:940px; /* Ancho del menú */
height:37px;
background-image: -moz-linear-gradient(top, #317FB8, #385D96);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #317FB8), color-stop(1.0, #385D96));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#317FB8,endColorStr=#385D96);
border-bottom:1px solid #002851;
border-top:1px solid #2f558b;
margin:0 auto;padding:0 auto;
overflow:hidden;
text-shadow:1px 1px 2px #002851;
}
#topwrapper {
width:940px; /* Ancho del menú */
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#top {width:100%;}
#top, #top ul {padding: 0;margin: 0;list-style: none;}
#top a {
border-right:1px solid #2f558b;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee; /* Color del texto de las pestañas */
}
#top a:hover {
background:#2f558b; /* Color de las pestañas al pasar el cursor */
color:#c5fa6f; /* Color del texto de las pestañas al pasar el cursor */
}
#top a.trigger {
/* Flecha */
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBcY2acCAZHwdR-6yeFqicFnOlYsfBoCMk4_WW_OszbcjoTAwGcweNafv8Mx-MEHo7MpJzLIsGgtjuHIkR0FAFuIrKdFIxQfec8Z6D16mZRhI3NAgMLT1ncJ8uSZYbLHS4GREgzIB6tGY/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {float: left;position: relative;}
#top li {position: static !important; width: auto;}
#top li ul, #top ul li {width:300px;} /* Ancho del contenedor de las subpestañas */
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#1a3352; /* Color de fondo del contenedor de las subpestañas */
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px; /* Ancho de cada subpestaña */
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {display: block;}
#top li:hover ul a, #top li.hvr ul a {
color:#ddd; /* Color del texto de los submenús */
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#c5fa6f !important; /* Color del texto de los submenús al pasar el cursor */
}

Ahora vamos a Diseño y añadimos un Gadget HTML/Javascript en dicho espacio pegaremos el siguiente código:

Para instalarlo 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 codigo en el interior





<div id='toppic'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='URL del enlace'>Pestaña 1</a></li>
<li><a href='URL del enlace'>Pestaña 2</a></li>
<li><a class='trigger' href='#'>Pestaña 3</a>
<ul>
<li><a href='URL del enlace'>Pestaña 3.1</a></li>
<li><a href='URL del enlace'>Pestaña 3.2</a></li>
<li><a href='URL del enlace'>Pestaña 3.3</a></li>
<li><a href='URL del enlace'>Pestaña 3.4</a></li>
<li><a href='URL del enlace'>Pestaña 3.5</a></li>
<li><a href='URL del enlace'>Pestaña 3.6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Pestaña 4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Pestaña 5</a>
<ul>
<li><a href='URL del enlace'>Pestaña 5.1</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
<li><a href='URL del enlace'>Pestaña 5.4</a></li>
<li><a href='URL del enlace'>Pestaña 5.5</a></li>
<li><a href='URL del enlace'>Pestaña 5.6</a></li>
<li><a href='URL del enlace'>Pestaña 5.7</a></li>
<li><a href='URL del enlace'>Pestaña 5.8</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 6</a></li>

</ul>
<br class='clearit'/>
</div>
</div>

Despues de haber insertado el código, un clic en  "Guardar"



Y listo hasta aquí nuestro menú deberá estar funcionando perfectamente en nuestro blog.

Explicación colores:

- En el primer código, lo que tenemos en naranja, son los comentarios frente al parámetro CSS que puedes modificara a tu gusto.
- Lo que tenemos en verde esmeralda es donde irá el link o URL al cuál llevará dicho sección del menú ¡Fácil!
- Lo que tenemos en color Rojo es el nombre de la pestaña el cuál llevará. 


Fecha de la Publicación; 08-08-2019

 Fuente; blogginred

 Publicado por;                                                                          







By
MENÚ DESPLEGABLE EN UN GADGET HTLM-JAVASCRIPT .




Por qué correr detrás de las secuencias de comandos, como jQuery, mientras que vosotros podeis utilizar simplemente CSS y HTML para crear un menú desplegable para tu blog o web. Ahora necesitas aprender cómo crear un menú desplegable en la navegación.

Un menú desplegable adicional, es cuando se tiene demasiado contenido en su blog o web o te gusta mantener las cosas bien organizadas. Para agregar un menú desplegable para blogs de Blogger tienes que hacer lo siguiente:

Si queréis verlo en acción podéis ir mi probador de códigos copiar el código y pegadlo en el probador y lo veréis tal como es.


Un clic en Diseño



Un clic en "Añadir un gadget"



Seleccione el widget HTML/Javascript, abrelo




Ingrese las siguientes lineas de código en su interior





<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>

Listo ahora ya tienes este menú horizontal con submenús en tu blog de Blogger

Reemplace # con las URLs de sus entradas y el texto en negrita Nombre 1 con el nombre de las páginas pertinentes.

Para añadir otra pestaña simplemente pega este código antes del cierre </ul>


<li>   <a href='#'>Nombre 4</a>  </li>



Si deseas puedes realizar algunos cambios:

Para cambiar el color de fondo del menú principal, cambia #060505
Para cambiar el fondo de una ficha con el ratón estacionario, cambia #BF0100
Para cambiar el color de fondo del menú desplegable, cambia #BF0100
Para cambiar el color de fondo del menú desplegable al pasar el ratón  estacionario, cambia #060505




Fecha de la Publicación; 08-08-2019

 Fuente;  ayudadeblogger

 Publicado por;                                                                           





By
REDES SOCIALES EN BLOGGER.






 Los métodos de insertar un código de redes sociales en blogger es tan simple de realizarlo,
lo que vamos a ser el día de hoy es insertar un código que contiene botones de redes sociales con efectos de transición, al cual cuando un usuario pasa el cursor por cualquier icono social se desprenderá el nombre de su red social.




Vamos a trabajar



 Un clic en “Diseño”




 Abre un gadget “Añadir un gadget”



 Busca el widget que dice “HTML/Javascript”





 Ábrelo he ingresa el siguiente código en su interior





<style type="text/css">
#ayudadeblogger ul {margin:10px 15px;padding:0px;}
#ayudadeblogger ul li {list-style-type: none;padding: 0;background: transparent;margin: 0;}
#ayudadeblogger ul li a{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXTpgeLJrLtfppja8fVyYcdxPkwSDjCX0NpUedpmgEU1LZOT4wIT_Hk9Js8LsjGxYQYNOEPSr4WpyuUN-Gyz40NpvHiEfumeg7PHFZe8xIqO0DsIDSf3L_W1CGtUTkHYEcSaRBfVZ5q4c/s1600/blsocial12.png') 0 0 no-repeat;   height:48px;padding-left: 48px;cursor: pointer;text-decoration: none;border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;-o-border-radius:0.5em;display:inline-block;margin:0;width: 220px;}
#ayudadeblogger ul li:hover span {margin-left: 10px;opacity: 1;}
#ayudadeblogger ul li span {border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
color: white;
margin-left: 100px;
opacity: 0;
position: relative;
text-align: center;
width: auto;
padding: 5px 10px;
transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
top: 14px;}
#ayudadeblogger span{padding:5px;background:#000;color:#fff;margin:0 5px;}
#ayudadeblogger .fb span {background-color: #0853A3;}
#ayudadeblogger .twiter span {background-color: #00B1F7;}
#ayudadeblogger .google span {background-color: #9E0202;}
#ayudadeblogger .pint span {background-color: #D00;}
#ayudadeblogger .linkedin span {background-color: #005075;}
#ayudadeblogger .devart span {background-color: #4C7A4A;}
#ayudadeblogger .ytube span {background-color: #A00;}
#ayudadeblogger .rss span {background-color: #EC5601;}
#ayudadeblogger a.fb {  background-position: 0 -384px;}
#ayudadeblogger a.twiter {  background-position: 0 -432px;}
#ayudadeblogger a.google {  background-position: 0 -480px;}
#ayudadeblogger a.pint {  background-position: 0 -528px;}
#ayudadeblogger a.linkedin {  background-position: 0 -576px;}
#ayudadeblogger a.devart { background-position: 0 -624px;}
#ayudadeblogger a.ytube {  background-position: 0 -672px;}
#ayudadeblogger a.rss {  background-position: 0 -720px;}
#ayudadeblogger a.fb:hover { background-position: 0 0px;color: #0374DD;}
#ayudadeblogger a.twiter:hover {  background-position: 0 -48px;color: #00A1DF;}
#ayudadeblogger a.google:hover {  background-position: 0 -96px;color: #A70000;}
#ayudadeblogger a.pint:hover {  background-position: 0 -144px;color: #C00;}
#ayudadeblogger a.linkedin:hover {  background-position: 0 -192px;color: #005772;}
#ayudadeblogger a.devart:hover { background-position: 0 -240px;color: #4C7A4A;}
#ayudadeblogger a.ytube:hover {  background-position: 0 -288px;color: #A00;}
#ayudadeblogger a.rss:hover {  background-position: 0 -336px;color: #EC5601;}
</style>

<div id="ayudadeblogger">
<ul>
   <li ><a href="https://www.facebook.com/pages/GrupoDelecluse/116336675191122" class="icon fb" ><span>Visítanos en Facebook</span></a></li>
   <li ><a href="https://twitter.com/grupodelecluse" class="icon twiter" ><span>Recomiéndanos en Twitter</span></a></li>
   <li ><a href="https://plus.google.com/104165660096684906208" class="icon google" ><span>Síguenos en Google +</span></a></li>
   <li ><a href="http://www.pinterest.com/luischavez/" class="icon pint" ><span>Pinterest</span></a></li>
   <li ><a href="http://ec.linkedin.com/pub/luis-chavez/53/549/a91/" class="icon linkedin" ><span>Contáctame en LinkedIn</span></a></li>
   <li ><a href="http://www.deviantart.com/" class="icon devart" ><span>DeviantArt</span></a></li>
   <li ><a href="http://www.youtube.com/" class="icon ytube" ><span>Youtube</span></a></li>
   <li ><a href="http://feeds.feedburner.com/ForoAyudaDeBlogger" class="icon rss" ><span>Suscríbete a nuestro RSS</span></a></li>
</ul>
</div>


Realiza estos cambios:

Cambia las URLs que están marcadas de color azul por las direcciones URLs de tus páginas sociales.

Eso es todo, ahora dales un clic en “Guardar” y ubica tu nuevo widget social donde mejor te parezca.


Fecha de la Publicación; 08-08-2019

  Fuente;  ayudadeblogger

  Publicado por;
By
MENÚ DESPLEGABLE PARA BLOGGER. 





Los menús desplegables para blogger, le dan al usuario que visita tu blog a escoger las diferentes categorías que las destacASTE  en tu menú. 

Obtener nuevos y fabulosos menús desplegables para blogger y que funcionen en cualquier blog de blogger, es lo que LA PAGINA DE KIKO DE BLOGGER. te ayudara. 

Renueva tu blog de blogger con temas únicos e interesantes, convirtiéndote en un experto en blogger.
El menú desplegable para blogger que os voy a presentar solo tendrás que insertarlo en un solo widget y no necesitaras introducirlo en el editor HTML de tu plantilla, 

es un código CSS simple que se inserta en un widget de tu blog de blogger, tendrás que realizar unos simples cambios para que se muestre las categorías que vosotros queráis.

Además este nuevo menú desplegable para blogger, funciona perfectamente en todos los navegadores como Firefox, Google Chrome, Internet Explorer etc.

 Vamos a trabajar


 Da un clic en “Diseño”


 Un clic en el gadget “Añadir un gadget”



 Busca el widget que tiene como nombre “HTML/Javascript”




 Inserta las siguientes líneas de código en su interior





<style>

    /*------Stard by Ayudadeblogger.com--------*/

    #ayudadeblogger-menu, #ayudadeblogger-menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    }

    #ayudadeblogger-menu {

    width: 960px;

    margin: 60px auto;

    border: 1px solid #222;

    background-color: #111;

    background-image: -moz-linear-gradient(#444, #111);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

    background-image: -webkit-linear-gradient(#444, #111);

    background-image: -o-linear-gradient(#444, #111);

    background-image: -ms-linear-gradient(#444, #111);

    background-image: linear-gradient(#444, #111);

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;

    border-radius: 6px;

    -moz-box-shadow: 0 1px 1px #777;

    -webkit-box-shadow: 0 1px 1px #777;

    box-shadow: 0 1px 1px #777;

    }

    #ayudadeblogger-menu:before,

    #ayudadeblogger-menu:after {

    content: "";

    display: table;

    }

    #ayudadeblogger-menu:after {

    clear: both;

    }

    #ayudadeblogger-menu {

    zoom:1;

    }

    #ayudadeblogger-menu li {

    float: left;

    border-right: 1px solid #222;

    -moz-box-shadow: 1px 0 0 #444;

    -webkit-box-shadow: 1px 0 0 #444;

    box-shadow: 1px 0 0 #444;

    position: relative;

    }

    #ayudadeblogger-menu a {

    float: left;

    padding: 12px 30px;

    color: #999;

    text-transform: uppercase;

    font: bold 12px Arial, Helvetica;

    text-decoration: none;

    text-shadow: 0 1px 0 #000;

    }

    #ayudadeblogger-menu li:hover > a {

    color: #fafafa;

    }

    *html #ayudadeblogger-menu li a:hover { /* IE6 only */

    color: #fafafa;

    }

    #ayudadeblogger-menu ul {

    margin: 20px 0 0 0;

    _margin: 0; /*IE6 only*/

    opacity: 0;

    visibility: hidden;

    position: absolute;

    top: 38px;

    left: 0;

    z-index: 9999;

    background: #444;

    background: -moz-linear-gradient(#444, #111);

    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

    background: -webkit-linear-gradient(#444, #111);

    background: -o-linear-gradient(#444, #111);

    background: -ms-linear-gradient(#444, #111);

    background: linear-gradient(#444, #111);

    -moz-box-shadow: 0 -1px rgba(255,255,255,.3);

    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    }

    #ayudadeblogger-menu li:hover > ul {

    opacity: 1;

    visibility: visible;

    margin: 0;

    }

    #ayudadeblogger-menu ul ul {

    top: 0;

    left: 150px;

    margin: 0 0 0 20px;

    _margin: 0; /*IE6 only*/

    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    box-shadow: -1px 0 0 rgba(255,255,255,.3);

    }

    #ayudadeblogger-menu ul li {

    float: none;

    display: block;

    border: 0;

    _line-height: 0; /*IE6 only*/

    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    }

    #ayudadeblogger-menu ul li:last-child {

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    }

    #ayudadeblogger-menu ul a {

    padding: 10px;

    width: 130px;

    _height: 10px; /*IE6 only*/

    display: block;

    white-space: nowrap;

    float: none;

    text-transform: none;

    }

    #ayudadeblogger-menu ul a:hover {

    background-color: #B40404;

    background-image: -moz-linear-gradient(#B40404, #B40404);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#B40404), to(#B40404));

    background-image: -webkit-linear-gradient(#B40404, #B40404);

    background-image: -o-linear-gradient(#B40404, #B40404);

    background-image: -ms-linear-gradient(#B40404, #B40404);

    background-image: linear-gradient(#B40404, #B40404);

    }

    #ayudadeblogger-menu ul li:first-child > a {

    -moz-border-radius: 3px 3px 0 0;

    -webkit-border-radius: 3px 3px 0 0;

    border-radius: 3px 3px 0 0;

    }

    #ayudadeblogger-menu ul li:first-child > a:after {

    content: '';

    position: absolute;

    left: 40px;

    top: -6px;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-bottom: 6px solid #444;

    }

    #ayudadeblogger-menu ul ul li:first-child a:after {

    left: -6px;

    top: 50%;

    margin-top: -6px;

    border-left: 0;

    border-bottom: 6px solid transparent;

    border-top: 6px solid transparent;

    border-right: 6px solid #3b3b3b;

    }

    #ayudadeblogger-menu ul li:first-child a:hover:after {

    border-bottom-color: #B40404;

    }

    #ayudadeblogger-menu ul ul li:first-child a:hover:after {

    border-right-color: #B40404;

    border-bottom-color: transparent;

    }

    #ayudadeblogger-menu ul li:last-child > a {

    -moz-border-radius: 0 0 3px 3px;

    -webkit-border-radius: 0 0 3px 3px;

    border-radius: 0 0 3px 3px;

    }


    </style>


    <ul id="ayudadeblogger-menu">
    <li><a href="/">Inicio</a></li>
    <li>
    <a href="#">Temas</a>
    <ul>
    <li><a href="#">Farandula</a></li>
    <li><a href="#">Deportes</a></li>
    <li><a href="#">Entretenimiento</a></li>
    <li><a href="#">Musica</a></li>
    </ul>
    </li>
    <li>
    <a href="#">Farandula</a>
    <ul>
    <li><a href="#">Farandula</a></li>
    <li><a href="#">Deportes</a></li>
    <li><a href="#">Entretenimiento</a></li>
    <li><a href="#">Musica</a></li>
    </ul>
    </li>
<li>
    <a href="#">Deportes</a>
    <ul>
    <li><a href="#">Farandula</a></li>
    <li><a href="#">Deportes</a></li>
    <li><a href="#">Entretenimiento</a></li>
    <li><a href="#">Musica</a></li>
    </ul>
    </li>
<li>
    <a href="#">Entretenimiento</a>
    <ul>
    <li><a href="#">Farandula</a></li>
    <li><a href="#">Deportes</a></li>
    <li><a href="#">Entretenimiento</a></li>
    <li><a href="#">Musica</a></li>
    </ul>
    </li>
<li>
    <a href="#">Musica</a>
    <ul>
    <li><a href="#">Farandula</a></li>
    <li><a href="#">Deportes</a></li>
    <li><a href="#">Entretenimiento</a></li>
    <li><a href="#">Musica</a></li>
    </ul>
    </li>
    <li><a href="#">Contactos</a></li>
    </ul>



 Realiza estos cambios:

 He marcado de tres diferentes colores en las cuales se identifica, los cambios que tendrán que realizar.

 Los numerales que están marcados de color azul #, tendrán que insertar las URLs correspondientes en cada una de ellas.

 El texto que esta marcado de color rojo, es el nombre principal de cada puesto del menú, cámbialos por el nombre de la categoría que quieras mostrar.

 Y por ultimo el texto que esta marcado de color naranja, tendrán que cambiarlos por lo nombres que ustedes quieran.

 Eso es todo, ahora dale un clic en “Guardar” y ubíquenlo debajo de la cabecera principal.

 Nota: Si desean cambiar el color rojo del desplegable, solo basta con buscar este código B40404 y remplazar todos los códigos de color que tienen esa descripción por el código de color que quieran.




Fecha de la Publicación; 08-08-2019

 Fuente;  ayudadeblogger

 Publicado por;                                                                       











By