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.
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvQuSWVJcstke3vDxZlH9O7RzvqvgrSqfs-Oyo-7QgwIA8v_fJmvTcHxHU_Hi-WtFtAzruSt0hoZgN7Je8nZJLrGC3kjeuYoUop_W0ghLMm4tXvhIXy8yscIjY-N0zfDzCF8wAsKv9MKc6/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/AVvXsEjvQuSWVJcstke3vDxZlH9O7RzvqvgrSqfs-Oyo-7QgwIA8v_fJmvTcHxHU_Hi-WtFtAzruSt0hoZgN7Je8nZJLrGC3kjeuYoUop_W0ghLMm4tXvhIXy8yscIjY-N0zfDzCF8wAsKv9MKc6/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/AVvXsEjbBh9tjUppZQ_GbwDYVX8SSdZjZNK0j4qYG_zCAa6V51tkZscvcKqrLFw1pWxI2aOWO3Lr8Krv4riU-8TZX3jWrIi-0rlLq1xr9hN3Vx8PS_FboksR4JXIHUikA6RVeEGGAcSD9-Wfrq6s/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/AVvXsEiaK2d6SDQxR3B6fpF_u_HBixC5FaEgrmxdRuAsADhYCOTWM8DZhxEZvCjz5K7YVd1vUfOzVEqCOCjvsMBE_PPPwKtgmUzNVnO_1k5a04SSuxClniMNJQAttguCUIu2Oz4i3R5SJrCD2hTt/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/AVvXsEjyIbjvrdFDQsrkJmeiFItPESCJdKP9-Z56JtbpH07JgKczrs1kCqE5PYsI-2ns8o2biQmTNCiVzZg_BSeZ6kJuxawi7FEf0dRwa8EAsxUvLpKb1kR2x0ZYFZUMitN8ZEzbCJwXAKJrm2MI/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
Comentarios