Como hacer un Menú vertical desplegable para mi blog de blogger

Menú vertical desplegable. En vista que he recibido cientos de emails piándome que publique un menú vertical desplegable para usarlo en su blog de blogger en cualquier parte de su sidebar. Hoy voy a compartir este grandioso truco de uso exclusivo para blogger. El truco de insertar los códigos en su blog de blogger para mostrar un menú vertical desplegable es muy fácil de realizarlo, solo tienen que seguir mis instrucciones y podrán tener este grandioso truco para blogger. Les recuerdo que con este widget tipo menú desplegable vertical podrán aumentar las vistas de su blog, ya que los usuarios podrán encontrar con facilidad los temas de interés.

Como hacer un Menú vertical desplegable para mi blog de blogger

A continuación mire su demostración en mi blog de demos, el widget se encuentra a la derecha y se llama “Mis Categorias”.


Ahora que ustedes han visto el funcionamiento del Menú vertical desplegable, nos dirigimos a incrustar el código en su blog de blogger.

1 Abrir Blogger

2 Dirígete a “Plantilla”, da un clic en “Editar HTML

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación


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, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.


3 Busca este código ]]></b:skin>

4 Arriba del código que encontrastes ]]></b:skin> inserte el siguiente código

<!-- Start  HTML - http://www.grupodelecluse.com by www.grupodelecluse.com-->
#mas-op-box{padding:0;margin:0;width:245px;list-style:none outside none}
#mas-op-box li{background:#1f1c19;position:relative;border-bottom:1px solid #110f0e;border-top:1px solid #3d3732;}
#mas-op-box li ul{position:absolute;padding:0;margin:0;left:245px;top:-1px;display:none;width:160px;list-style:none outside none;z-index:9990;background:#00CC33}
#mas-op-box li a{background:url(http://4.bp.blogspot.com/-OUWQIoB0PY8/T8d4QfR64LI/AAAAAAAAGYg/E9-mRT-rawc/s1600/slider_item.png) no-repeat 5px 10px;display:block;min-height:30px;line-height:30px;margin:0;padding:0 5px 0 25px;text-decoration:none;color:#777;color:#b69786;font-size:14px;border-right:4px solid #35322c;cursor:pointer;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
#mas-op-box li a:hover{border-right-color:#665d54;text-decoration:none;color:#ddd;background:#38332d url(http://4.bp.blogspot.com/-OUWQIoB0PY8/T8d4QfR64LI/AAAAAAAAGYg/E9-mRT-rawc/s1600/slider_item.png) no-repeat 5px 10px;}
#mas-op-box li:hover ul, #mas-op-box li.over ul{display:block}
.mas-tp-dhead-wrap{background:url(http://3.bp.blogspot.com/-g9JKNBlbWD0/T8e3z08_u2I/AAAAAAAABXk/tVPjO7Aw_1U/s1600/sidebar.png) no-repeat top;display:block;padding:10px 3px;margin:0;line-height:1.2em;margin-bottom:6px;-webkit-box-shadow: 0 8px 6px -6px black;-moz-box-shadow: 0 8px 6px -6px black;box-shadow: 0 8px 6px -6px black;}
.mas-tp-dhead-wrap img{width:25px;height:30px;float:left;margin:-2px 0 0 3px;background:no-repeat url(http://3.bp.blogspot.com/-mVKUJ7DifTI/T8eonfitv5I/AAAAAAAAGZ0/Q_Wk7FalFF4/s1600/categ_bullet.png)}
.mas-tp-dhead-wrap span{color:#aaa;font:14px Oswald;margin-left:10px}
<!—End Widget  HTML - http://www.grupodelecluse.com by www.grupodelecluse.com-->


5 Dale un clic en “Guardar plantilla

6 Ahora da un clic en “Diseño”, “Añadir un gadget” y busca el widget que dice “HTML/javascript” e inserta el siguiente código en su interior.

<div class="mas-tp-dhead-wrap"><img src="http://2.bp.blogspot.com/-wNh1gi5xt40/Tv3GnNjRMzI/AAAAAAAAAEk/y_3G6tuErUg/s1600/lb-one-px.gif" alt="" /><span>Mis Categorias</span></div>
<ul id="mas-op-box">
    <li><a href="#">Widgets</a>
        <ul>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20para%20Blogger?max-results=12" title="Widget blogger 1"> Categoria1</a></li>
              <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20para%20Blogger?max-results=12" title=" Widget blogger 2"> Categoria1</a></li>
              <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20para%20Blogger?max-results=12" title=" Widget blogger 3"> Categoria1</a></li>
              <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20para%20Blogger?max-results=12" title=" Widget blogger 4"> Categoria1</a></li>
        </ul>
    </li>
   
    <li><a href="#">SEO</a>
        <ul>
            <li><a href="http://www.ayudadeblogger.com/search/label/Posicionamiento%20SEO?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
              <li><a href="http://www.ayudadeblogger.com/search/label/Posicionamiento%20SEO?max-results=12" title=" Widget blogger 2"> Categoria1</a></li>
              <li><a href="http://www.ayudadeblogger.com/search/label/Posicionamiento%20SEO?max-results=12" title=" Widget blogger 3"> Categoria1</a></li>
              <li><a href="http://www.ayudadeblogger.com/search/label/Posicionamiento%20SEO?max-results=12" title=" Widget blogger 4"> Categoria1</a></li>
              <li><a href="http://www.ayudadeblogger.com/search/label/Posicionamiento%20SEO?max-results=12" title=" Widget blogger 5"> Categoria1</a></li>
        </ul>
    </li>
   
    <li><a href="#">Herramientas Blogger</a>
        <ul>
            <li><a href="http://www.ayudadeblogger.com/search/label/Herramientas%20Blogger?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
              <li><a href="http://www.ayudadeblogger.com/search/label/Herramientas%20Blogger?max-results=12" title=" Widget blogger 2"> Categoria1</a></li>
        </ul>
    </li>
   
    <li><a href="#">Blogger</a>
        <ul>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Widgets%20y%20Plugins?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
        </ul>
    </li>
   
    <li><a href="#">Slideshow</a>
          <ul>
            <li><a href="http://www.ayudadeblogger.com/search/label/Slideshow?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Slideshow?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Slideshow?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Slideshow?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Slideshow?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Slideshow?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Slideshow?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Slideshow?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
        </ul>
    </li>
   
    <li><a href="#">Plantillas</a>
        <ul>
            <li><a href="http://www.ayudadeblogger.com/search/label/Plantillas?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Plantillas?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Plantillas?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Plantillas?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Plantillas?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Plantillas?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Plantillas?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Plantillas?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Plantillas?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Plantillas?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Plantillas?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
        </ul>
    </li>
   
    <li><a href="#">Galeria de Imagenes</a>
        <ul>
            <li><a href="http://www.ayudadeblogger.com/search/label/Herramientas%20Blogger?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Herramientas%20Blogger?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Herramientas%20Blogger?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Herramientas%20Blogger?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Herramientas%20Blogger?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Herramientas%20Blogger?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Herramientas%20Blogger?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Herramientas%20Blogger?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Herramientas%20Blogger?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Herramientas%20Blogger?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Herramientas%20Blogger?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
        </ul>
    </li>
   
    <li><a href="#">Ganar Dinero </a>
             <ul>
            <li><a href="http://www.ayudadeblogger.com/search/label/Ganar%20Dinero?
max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Ganar%20Dinero?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Ganar%20Dinero?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Ganar%20Dinero?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Ganar%20Dinero?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Ganar%20Dinero?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Ganar%20Dinero?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
        </ul>
    </li>
   
    <li><a href="#">Menu para Blogger</a>
        <ul>
            <li><a href="http://www.ayudadeblogger.com/search/label/Menu%20desplegable?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Menu%20desplegable?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
            <li><a href="http://www.ayudadeblogger.com/search/label/Menu%20desplegable?max-results=12" title=" Widget blogger 1"> Categoria1</a></li>
        </ul>
    </li>
</ul>

Realiza estos cambios:

Las letras que están marcadas de color Rojo “Widgets”, las puede cambiar por cualquier nombre.

El link que se encuentra marcado de color verde, por ejemplo” http://www.ayudadeblogger.com/search/label/Widgets%20para%20Blogger”, tiene que cambiarlas por los link de la pagina que quieran mostrar.

Al igual que las letras que están marcadas de color anaranjado “Widget blogger 1”, tiene que cambiarlas por el nombre que usted quiera mostrar al momento que el mouse pase por enzima de su categoría.

Y por ultimo cambie el nombre que dice “Categoría 1” por el nombre de la entrada que quiera mostrar, eso es todo, ahora dele un clic en “Guardar” y ubique su nuevo widget de menú vertical desplegable en cualquier parte de su blog de blogger.

Espero haber sido lo mas explicativo posible.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé.

Saludos. 

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



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.

Related post

Comentarios