add

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. 

2 comentarios:

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios