Menú vertical desplegable

December 16, 2016
0 Comments

Menú vertical desplegable



Aquí os traigo un menú vertical desplegable para usarlo en tu blog para incrustarlo 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 tu blog para mostrar un menú vertical desplegable es muy fácil de realizarlo, solo tienes que seguir mis instrucciones y podrás tener este grandioso truco para blogger. Os recuerdo que con este widget tipo menú desplegable vertical podrás aumentar las vistas de tu blog, ya que los usuarios podrán encontrar con facilidad los temas de interés



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 Encima 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhI63YGdVt9Kqe6JcJSh-8DpU9g7Y9DM1qLD9kV_aZ5BZZVhz3wetJlHDVOjMDJZ3Hv0y0P_1yyOamrNStE-1GvWQktfjRC8_h0kpUNRBU5THqWjDgAQRtgInjI3Wp6l3s1mX4WZ0QN8vm/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhI63YGdVt9Kqe6JcJSh-8DpU9g7Y9DM1qLD9kV_aZ5BZZVhz3wetJlHDVOjMDJZ3Hv0y0P_1yyOamrNStE-1GvWQktfjRC8_h0kpUNRBU5THqWjDgAQRtgInjI3Wp6l3s1mX4WZ0QN8vm/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiauJG_Z18r6H31up-KDZU3nrLIxaZtpOxB-xwDGKdusZhrXDzw9pTn4FhqpYcVgRzMY25LgM3JZQNdyBwOeTf6kREC_IsmTUHUc-W-Z7pIKw4WcM-E8wypbUQOvdsdQVSqpNVuzf4ciAz_/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNT3zpRPSELzFIA98KeGZJ4kePB1aoLfymec3eBlRglsuzwqtZWgc7zV1ENWY96LyeC2ECUCJzu3z6riEnPmdOKK79Pl_ar10_d1cg-E3hhZQ6wJT18itfjfo_bh7ctNKablnv9ZxmNs8t/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCpGdiZ2kgIekc4zKQgtijMFH7VvkQ5NLKvtQvgh9zdV0BEbr9cCXcV7PQ6_ChV76EJTEz4hF0e0JQ4S1IWUcqCvx1v0Ndu5gg31Dmu5gh34juOJdLuzoPa_Nn65Lwbr01lOH5qEYnWkn5/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 Azul claro “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 todas 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.



Fuente: ayudadeblogger





Blogs Famag

Related Posts:

No hay comentarios:

Publicar un comentario

Facebook

Related Posts Plugin for WordPress, Blogger...

AddToAny