add

Crear un Menú de colores para blogger


Obtener nuevos e impresionantes trucos para blogger que funcionen en todos los navegadores web como Firefox, Google Chrome, Internet Explorer etc, es lo necesario para una página web profesional creada en blogger. Les presento un nuevo menú para blogger, este nuevo menú para blogger tiene 5 diferentes colores, en los cuales se podrán diferenciar el tema o categoría que quieran dar a conocer en su blog de blogger. La inserción el código es muy fácil, no le causara ningún error a la estructura de su blog de blogger, lo que vamos hacer es insertar un código en un widget y ubicarlo debajo de la cabecera principal o al final del blog, es más como ustedes lo quieran utilizar. Además si necesitan conocer diferentes tipos de menús para blogger, les dejo algunos post que publique anteriormente:

  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. Menu Jquery para blogger
  6. Menú desplegable para blogger
  7. Menú desplegable para blogger Mega menú V2
  8. Menú desplegable para blogger con imágenes
  9. Menú desplegable para blogger nuevo estilo
  10. Menú desplegable para blogger nuevo estilo CSS3
Crear un Menú de colores para blogger

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


Les gusto verdad!

Vamos a trabajar

1 Ir a blogger

2 Da un clic en “Diseño

Crear un Menú de colores para blogger

3 Abre un gadget “Añadir un gadget

Crear un Menú de colores para blogger

4 Busca el widget que dice “HTML/Javacript” ábrelo e inserta las siguientes líneas de código en su interior

Crear un Menú de colores para blogger

<style>

    .ayudadeblogger-Social-metro {
        width: 980px;
        float: left;
        margin: 0;
        padding: 1em 0;
    }

    .ayudadeblogger-Social-metro ul {
        margin: 0;
        padding: 0;
    }

    .ayudadeblogger-Social-metro ul li {
        list-style: none;
        list-style-type: none;
        padding: 0;
        text-transform: none;
        margin: 0;
        float: left;
        display: inline-block;
        width: 20%;
    }

    .ayudadeblogger-Social-metro ul li a {
        font-size: 80%;
        color: #fff!important;
        display: block;
    }

    .ayudadeblogger-Social-metro ul li a:hover {
        color: #000!important;
        background-color: #999;
        text-decoration: none;
    }

    idc-scoail ul li a, ul li a:hover {
        -moz-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
    }

    .ayudadeblogger-Social-metro ul li .Menu1 {
        background: url("") no-repeat scroll 10px center #7FB51A;
        background-size: 20px;
        padding: 10px 50px;
    }

    .ayudadeblogger-Social-metro ul li .Menu2 {
        background: url("") no-repeat scroll 10px center #4CACEE;
        background-size: 20px;
        padding: 10px 50px;
    }

    .ayudadeblogger-Social-metro ul li .Menu3 {
        background: url("") no-repeat scroll 10px center #3B5998;
        background-size: 20px;
        padding: 10px 50px;
    }

    .ayudadeblogger-Social-metro ul li .Menu4 {
        background: url("") no-repeat scroll 10px center #D44937;
        background-size: 20px;
        padding: 10px 50px;
    }

    .ayudadeblogger-Social-metro ul li .Menu5 {
        background: url("") no-repeat scroll 10px center #3692C3;
        background-size: 20px;
        padding: 10px 50px;
    }

    /* width of 768px */
    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .ayudadeblogger-Social-metro ul li {
            width: 50%;
        };
    }

    /* width of 480px */
    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .ayudadeblogger-Social-metro ul li {
            width: 50%;
        };
    }

    /* width of 320px */
    @media only screen and (max-width: 480px) {
        .ayudadeblogger-Social-metro ul li {
            width: 100%;
        };
    }

    </style>

    <div class='ayudadeblogger-Social-metro'>
    <ul>
    <li><a class='Menu1' href='http://www.ayudadeblogger.com/'>Noticias</a></li>
    <li><a class='Menu2' href='http://www.ayudadeblogger.com/'>Deportes</a></li>
    <li><a class='Menu3' href='http://www.ayudadeblogger.com/'>Farandula</a></li>
    <li><a class='Menu4' href='http://www.ayudadeblogger.com/'>Negocios</a></li>
    <li><a class='Menu5' href='http://www.ayudadeblogger.com/'>Chat en vivo!</a></li>
    </ul>
    </div>
<br/>
<br/>

Realiza estos cambios:

He marcado de dos diferentes colores en los cuales tendrán que realizar sus diferentes cambios.

Tendrán que borrar las URLs que están marcadas de color azul y remplázalo por las URLs de los post que quieras dar a conocer.

Cambia los nombres que están marcados de color rojo y pon ahí los nombres correspondientes de tus categorías.

Eso es todo, ahora dale un clic en “Guardar” y ubica tu widget debajo de la cabecera principal

Fácil verdad!

Recuerda suscribirte para que recibas mis nuevas actualizaciones directamente en tu bandeja de entrada

¿Necesitas ayuda?

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

Saludos

1 comentarios:

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