Como agregar un menú para mi blog de blogger con un solo widget

Muchos me han preguntado si es posible instalar un menú para blogger con un solo widget y no entrar en el código HTML de su blog para poder insertarlo, la verdad si es posible, hoy van a aprender como agregar un menú en su blog de blogger con un solo widget, es un solo paso.

A continuación mire su demostración

Luego de que hayan visto la demostración y ver como funciona vamos a trabajar.

1 Ir a blogger

2 Dirigite a “Diseño”, de un clic donde dice “añadir un gadget” y busca un widget que dice “HTML/Javascript”, ábrelo y pega el siguiente código.

<style> #ayudadebloggernavbar {     background: #3B5998;     width: 100%;       color: #FFF;         margin: 10px 0;         padding: 0;         position: relative;         border-top:0px solid #960100;         height:35px; } #ayudadebloggernav {     margin: 0;     padding: 0; } #ayudadebloggernav ul {     float: left;     list-style: none;     margin: 0;     padding: 0; } #ayudadebloggernav li {     list-style: none;     margin: 0;     padding: 0;       } #ayudadebloggernav li a, #ayudadebloggernav li a:link, #ayudadebloggernav li a:visited {     color: #FFF;     display: block;    font:bold 12px Helvetica, sans-serif;    margin: 0;     padding: 9px 12px 11px 12px;         text-decoration: none;         border-right:0px solid #627AAD; } #ayudadebloggernav li a:hover, #ayudadebloggernav li a:active {     background: #627AAD;     color: #FFF;     display: block;     text-decoration: none;         margin: 0;     padding: 9px 12px 11px 12px;               } #ayudadebloggernav li {     float: left;     padding: 0; } #ayudadebloggernav li ul {     z-index: 9999;     position: absolute;     left: -999em;     height: auto;     width: 160px;     margin: 0;     padding: 0; } #ayudadebloggernav li ul a {     width: 140px; } #ayudadebloggernav li ul ul {     margin: -25px 0 0 161px; } #ayudadebloggernav li:hover ul ul, #ayudadebloggernav li:hover ul ul ul, #ayudadebloggernav li.sfhover ul ul, #ayudadebloggernav li.sfhover ul ul ul {     left: -999em; } #ayudadebloggernav li:hover ul, #ayudadebloggernav li li:hover ul, #ayudadebloggernav li li li:hover ul, #ayudadebloggernav li.sfhover ul, #ayudadebloggernav li li.sfhover ul, #ayudadebloggernav li li li.sfhover ul {     left: auto; } #ayudadebloggernav li:hover, #ayudadebloggernav li.sfhover {     position: static; } #ayudadebloggernav li li a, #ayudadebloggernav li li a:link, #ayudadebloggernav li li a:visited {     background: #EDEFF4;     width: 120px;     color: #3B5998;     display: block;     font:normal 12px Helvetica, sans-serif;     margin: 1px 0 0 0;     padding: 9px 12px 10px 12px;         text-decoration: none; z-index:9999; border:1px solid #ddd; -moz-border-radius:4px; -webkit-border-radius:4px;   } #ayudadebloggernav li li a:hover, #ayudadebloggernav li li a:active {     background: #627AAD;     color: #FFF;     display: block;   } #ayudadebloggernav li li li a, #ayudadebloggernav li li li a:link, #ayudadebloggernav li li li a:visited {     background: #EDEFF4;     width: 120px;     color: #3B5998;     display: block;     font:normal 12px Helvetica, sans-serif;     padding: 9px 12px 10px 12px;         text-decoration: none; z-index:9999; border:1px solid #ddd;     margin: 1px 0 0  -14px;     } #ayudadebloggernav li li li a:hover, #ayudadebloggernav li li li a:active {     background: #627AAD;     color: #FFF;     display: block; } </style> <div id='ayudadebloggernavbar'>           <ul id='ayudadebloggernav'>             <li>               <a href='/'>Inicio</a>             </li>             <li>               <a href='#'>Quienes somos</a>            </li>             <li>               <a href='#'>Contactos ▼</a> <ul>         <li><a href='#'>Facebook 1</a></li>                         <li><a href='#'>Twitter 2</a></li>                         <li><a href='#'>Google+ 3</a></li>  </ul>                           </li> <li>               <a href='#'>Categorias ▼</a> <ul>         <li><a href='#'>Temas 1</a></li>                         <li><a href='#'>Temas 2</a></li>                         <li><a href='#'>Temas 3</a></li>  </ul>                           </li> <li>               <a href='#'>Temas ▼</a> <ul>         <li><a href='#'> Tema 1</a></li>                         <li><a href='#'> Tema 2</a></li>                         <li><a href='#'>Tema 3</a></li>  </ul>                           </li>      <li>                <a href='#'>Sitemap ▼</a>                 <ul>                     <li><a href='#'> Tema 1</a></li>                     <li><a href='#'> Tema 2</a></li>                     <li><a href='#'>Tema 3</a>                    <ul>                     <li><a href='#'>Sub Tema 1</a></li>                     <li><a href='#'>Sub Tema 2</a></li>                     <li><a href='#'>Sub Tema 3</a></li>                   </ul> </li>                   </ul>             </li>           </ul>         </div>

Ahora solo da un clic en "Guardar" y listo, ya tienes un menú para tu blog de blogger.

Y si quieres aumentar más opciones a tu menú basta con poner el siguiente código después del cierre de </li>

<li> <a href="#">Información</a> </li>

Eso es todo espero te haya servido de mucha ayuda

¿Necesitas ayuda?

Cualquier pregunta no dudes en hacérmelo saber y de inmediato te responderé.

Saludos.

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Diseño WebMenu desplegableTrucos BloggerTrucos CSS y HTML

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.