add

Menú desplegable para blogger nuevo estilo CSS3


Los menús desplegables para blogger, le dan al usuario que visita su blog a escoger las diferentes categorías que usted las destaco a en su menú. Obtener nuevos y fabulosos menús desplegables para blogger y que funcionen en cualquier blog de blogger, es lo que Ayudadeblogger.com te ayudara. Renueve su blog de blogger con temas únicos e interesantes, convirtiéndose en un experto en blogger. El menú desplegable para blogger que les voy a presentar solo tendrán que insertarlo en un solo widget y no necesitaran introducirlo en el editor HTML de su plantilla, es un código CSS simple que se inserta en un widget de su blog de blogger, tendrán que realizar unos simples cambios para que se muestre las categorías que ustedes quieran. Además este nuevo menú desplegable para blogger, funciona perfectamente en todos los navegadores como Firefox, Google Chrome, Internet Explorer etc.

Menú desplegable para blogger

En anteriores publicaciones di a conocer algunos Menús desplegables para blogger de los cuales les dejo los links de estos post.

  1. Como agregar un menú para mi blog de blogger con un solo widget
  2. Como hacer un Menú vertical desplegable para mi blog de blogger
  3. Como hacer un menú horizontal con submenús y buscador integrado para blogger
  4. Crear un menú desplegable en Blogger
  5. Menú Jquery para blogger
  6. Menú desplegable para blogger
  7. Menú desplegable para blogger con imágenes

A continuación mire su demostración en mi blog de demos


Les gusto!

Vamos a trabajar

1 Ir a blogger

2 Da un clic en “Diseño

Menú desplegable para blogger

3 Un clic en el gadget “Añadir un gadget

Menú desplegable para blogger

4 Busca el widget que tiene como nombre “HTML/Javascript

Menú desplegable para blogger

5 Inserta las siguientes líneas de código en su interior

<style>

    /*------Stard by Ayudadeblogger.com--------*/

    #ayudadeblogger-menu, #ayudadeblogger-menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    }

    #ayudadeblogger-menu {

    width: 960px;

    margin: 60px auto;

    border: 1px solid #222;

    background-color: #111;

    background-image: -moz-linear-gradient(#444, #111);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

    background-image: -webkit-linear-gradient(#444, #111);

    background-image: -o-linear-gradient(#444, #111);

    background-image: -ms-linear-gradient(#444, #111);

    background-image: linear-gradient(#444, #111);

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;

    border-radius: 6px;

    -moz-box-shadow: 0 1px 1px #777;

    -webkit-box-shadow: 0 1px 1px #777;

    box-shadow: 0 1px 1px #777;

    }

    #ayudadeblogger-menu:before,

    #ayudadeblogger-menu:after {

    content: "";

    display: table;

    }

    #ayudadeblogger-menu:after {

    clear: both;

    }

    #ayudadeblogger-menu {

    zoom:1;

    }

    #ayudadeblogger-menu li {

    float: left;

    border-right: 1px solid #222;

    -moz-box-shadow: 1px 0 0 #444;

    -webkit-box-shadow: 1px 0 0 #444;

    box-shadow: 1px 0 0 #444;

    position: relative;

    }

    #ayudadeblogger-menu a {

    float: left;

    padding: 12px 30px;

    color: #999;

    text-transform: uppercase;

    font: bold 12px Arial, Helvetica;

    text-decoration: none;

    text-shadow: 0 1px 0 #000;

    }

    #ayudadeblogger-menu li:hover > a {

    color: #fafafa;

    }

    *html #ayudadeblogger-menu li a:hover { /* IE6 only */

    color: #fafafa;

    }

    #ayudadeblogger-menu ul {

    margin: 20px 0 0 0;

    _margin: 0; /*IE6 only*/

    opacity: 0;

    visibility: hidden;

    position: absolute;

    top: 38px;

    left: 0;

    z-index: 9999;

    background: #444;

    background: -moz-linear-gradient(#444, #111);

    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

    background: -webkit-linear-gradient(#444, #111);

    background: -o-linear-gradient(#444, #111);

    background: -ms-linear-gradient(#444, #111);

    background: linear-gradient(#444, #111);

    -moz-box-shadow: 0 -1px rgba(255,255,255,.3);

    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    }

    #ayudadeblogger-menu li:hover > ul {

    opacity: 1;

    visibility: visible;

    margin: 0;

    }

    #ayudadeblogger-menu ul ul {

    top: 0;

    left: 150px;

    margin: 0 0 0 20px;

    _margin: 0; /*IE6 only*/

    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    box-shadow: -1px 0 0 rgba(255,255,255,.3);

    }

    #ayudadeblogger-menu ul li {

    float: none;

    display: block;

    border: 0;

    _line-height: 0; /*IE6 only*/

    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    }

    #ayudadeblogger-menu ul li:last-child {

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    }

    #ayudadeblogger-menu ul a {

    padding: 10px;

    width: 130px;

    _height: 10px; /*IE6 only*/

    display: block;

    white-space: nowrap;

    float: none;

    text-transform: none;

    }

    #ayudadeblogger-menu ul a:hover {

    background-color: #B40404;

    background-image: -moz-linear-gradient(#B40404, #B40404);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#B40404), to(#B40404));

    background-image: -webkit-linear-gradient(#B40404, #B40404);

    background-image: -o-linear-gradient(#B40404, #B40404);

    background-image: -ms-linear-gradient(#B40404, #B40404);

    background-image: linear-gradient(#B40404, #B40404);

    }

    #ayudadeblogger-menu ul li:first-child > a {

    -moz-border-radius: 3px 3px 0 0;

    -webkit-border-radius: 3px 3px 0 0;

    border-radius: 3px 3px 0 0;

    }

    #ayudadeblogger-menu ul li:first-child > a:after {

    content: '';

    position: absolute;

    left: 40px;

    top: -6px;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-bottom: 6px solid #444;

    }

    #ayudadeblogger-menu ul ul li:first-child a:after {

    left: -6px;

    top: 50%;

    margin-top: -6px;

    border-left: 0;

    border-bottom: 6px solid transparent;

    border-top: 6px solid transparent;

    border-right: 6px solid #3b3b3b;

    }

    #ayudadeblogger-menu ul li:first-child a:hover:after {

    border-bottom-color: #B40404;

    }

    #ayudadeblogger-menu ul ul li:first-child a:hover:after {

    border-right-color: #B40404;

    border-bottom-color: transparent;

    }

    #ayudadeblogger-menu ul li:last-child > a {

    -moz-border-radius: 0 0 3px 3px;

    -webkit-border-radius: 0 0 3px 3px;

    border-radius: 0 0 3px 3px;

    }


    </style>


    <ul id="ayudadeblogger-menu">
    <li><a href="/">Inicio</a></li>
    <li>
    <a href="#">Temas</a>
    <ul>
    <li><a href="#">Farandula</a></li>
    <li><a href="#">Deportes</a></li>
    <li><a href="#">Entretenimiento</a></li>
    <li><a href="#">Musica</a></li>
    </ul>
    </li>
    <li>
    <a href="#">Farandula</a>
    <ul>
    <li><a href="#">Farandula</a></li>
    <li><a href="#">Deportes</a></li>
    <li><a href="#">Entretenimiento</a></li>
    <li><a href="#">Musica</a></li>
    </ul>
    </li>
<li>
    <a href="#">Deportes</a>
    <ul>
    <li><a href="#">Farandula</a></li>
    <li><a href="#">Deportes</a></li>
    <li><a href="#">Entretenimiento</a></li>
    <li><a href="#">Musica</a></li>
    </ul>
    </li>
<li>
    <a href="#">Entretenimiento</a>
    <ul>
    <li><a href="#">Farandula</a></li>
    <li><a href="#">Deportes</a></li>
    <li><a href="#">Entretenimiento</a></li>
    <li><a href="#">Musica</a></li>
    </ul>
    </li>
<li>
    <a href="#">Musica</a>
    <ul>
    <li><a href="#">Farandula</a></li>
    <li><a href="#">Deportes</a></li>
    <li><a href="#">Entretenimiento</a></li>
    <li><a href="#">Musica</a></li>
    </ul>
    </li>
    <li><a href="#">Contactos</a></li>
    </ul>

Realiza estos cambios:

He marcado de tres diferentes colores en las cuales se identifica, los cambios que tendrán que realizar.

Los numerales que están marcados de color azul #, tendrán que insertar las URLs correspondientes en cada una de ellas.

El texto que esta marcado de color rojo, es el nombre principal de cada puesto del menú, cámbialos por el nombre de la categoría que quieras mostrar.

Y por ultimo el texto que esta marcado de color verde, tendrán que cambiarlos por lo nombres que ustedes quieran.

Eso es todo, ahora dale un clic en “Guardar” y ubíquenlo debajo de la cabecera principal.

Nota: Si desean cambiar el color rojo del desplegable, solo basta con buscar este código B40404 y remplazar todos los códigos de color que tienen esa descripción por el código de color que quieran.

Fácil verdad!

¿Necesitas ayuda?

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

Saludos.

10 comentarios:

  1. Bro lo e colocado pero igual no despliega los menús niños solo los principales me aparecen

    ResponderEliminar
  2. Este menú me interesa solo que no despliega al colocarlo solo aparecen las pestañas de inicio en adelante pero las pestañas niños no aparecen

    ResponderEliminar
    Respuestas
    1. Es por que la plantilla que estas utilizando no dispone de estilos CCS. Insera todo el codigo dentro del Editor HTML de tu plantilla y ubicalo despues del < body >
      Saludos

      Eliminar
  3. Una pregunta, se pueden eliminar los espacios que se generan arriba y abajo del menu??

    ResponderEliminar
    Respuestas
    1. claro que si, pero solo los espacios..
      Saludos

      Eliminar
  4. muchas gracias , me gusta mucho el estilo de este menu

    ResponderEliminar
  5. como puedes a este tipo de menu agregarle scroll para que quede fijo? y si quiero insertar un buscador a este estilo como lo hago?

    ResponderEliminar
  6. Hola Luis,

    Primero de todo felicitarte por el blog y por la estupenda entrada. Me ha encantado el menú que propones, sobre el cual tengo una duda:

    Ojalá me puedas ayudar. Me gustaría que me dijeras que parte del código modificar, para eliminar o reducir, el espacio que deja el menú entre cabecera y cuerpo del blog.

    Muchas gracias.

    Saludos.

    ResponderEliminar
  7. Muchas gracias por tu tiempo.
    Cómo hago para meter pestañas dentro de una de las categorías ?
    Quisiera eliminar todas las pestañas que tengo y hacer con tu menú, un resumen y que se desplegaran para hacerlo más simple.

    ResponderEliminar

Discusión

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