add

Como insertar un Menú en mi blog de Blogger


Con unos simples pasos podrás insertar un Menú en su blog de Blogger, lo que vamos hacer es implantar un código en un widget HTML/Javascript y luego ubicarlo debajo de la cabecera principal de nuestro blog. La facilidad de crear un nuevo Menú en su blog de Blogger y sobre todo que tenga un hermoso diseño es lo que aprenderás a realizarlo con unos simples pasos en este tutorial de Blogger. No le causara ningún error en la estructura de su blog, además este Menú de Blogger funciona perfectamente en todos los navegadores web.

Como insertar un Menú en mi blog de Blogger

A continuación mire su demostración en el siguiente blog de demos

DEMO

Les gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño

Como insertar un Menú en mi blog de Blogger

3 Abre un gadget “Añadir un gadget

Como insertar un Menú en mi blog de Blogger

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

Como insertar un Menú en mi blog de Blogger

5 Inserta el siguiente código CSS en su interior

<style>
#ayudadeblogger-nav {
  font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
  color:white;
  text-transform:uppercase;
}

#ayudadeblogger-nav ul {
  height:50px;
  margin:0px 0px;
  padding:0px 0px;
  overflow:hidden;
}

#ayudadeblogger-nav li {
  float:left;
  display:inline;
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

#ayudadeblogger-nav a,
#ayudadeblogger-nav a:before {
  display:block;
  margin:0px 0px;
  padding:0px 30px;
  line-height:50px;
  color:white;
  text-decoration:none;
  background-color:#900;
  background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  position:relative;
  /* Transicion CSS */
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

#ayudadeblogger-nav a:before {
  content:attr(data-clone); /* Atribucion */
  position:absolute;
  top:100%;
  left:0px;
  display:block;
  background-color:white;
  background-image:-webkit-linear-gradient(top, #ddd, white);
  background-image:-moz-linear-gradient(top, #ddd, white);
  background-image:-ms-linear-gradient(top, #ddd, white);
  background-image:-o-linear-gradient(top, #ddd, white);
  background-image:linear-gradient(top, #ddd, white);
  border-top:2px solid rgba(0,0,0,0.2);
  color:#333;
}

#ayudadeblogger-nav a:hover {
  margin-top:-50px;
  margin-bottom:1px;
}
</style>
<nav id='ayudadeblogger-nav'>
    <ul>
        <li><a href='/' data-clone='Inicio'>Inicio</a></li>
        <li><a href='AQUI LA DIRECCION URL DE SU ARTICULO' data-clone='Noticias'>Noticias</a></li>
        <li><a href='AQUI LA DIRECCION URL DE SU ARTICULO' data-clone='Entretenimiento'>Entretenimiento</a></li>
        <li><a href='AQUI LA DIRECCION URL DE SU ARTICULO' data-clone='Farandula'>Farandula</a></li>
        <li><a href='AQUI LA DIRECCION URL DE SU ARTICULO' data-clone='Deportes'>Deportes</a></li>
        <li><a href='AQUI LA DIRECCION URL DE SU ARTICULO' data-clone='Inversiones'>Inversiones</a></li>
        <li><a href='AQUI LA DIRECCION URL DE SU ARTICULO' data-clone='Videos'>Videos</a></li>
        <li><a href='AQUI LA DIRECCION URL DE SU ARTICULO' data-clone='Contactos'>Contactos</a></li>
    </ul>
</nav>

Realiza estos cambios:

He marcado de dos diferentes colores en los lugares que tendrás que realizar sus diferentes cambios

Borra las palabras que están marcadas de color azul, y remplázalos por las direcciones URLs de los artículos que quieras dar a conocer

Además, tienes que borrar todas las palabras que están marcadas de color rojo y remplazarlas por un título en particular

Eso es todo, es momento de dar un clic en “Guardar” y ubica tu nuevo Menu debajo de la cabecera principal de tu blog

Fácil verdad!

Aún más, si necesitas otros tutoriales de Menús para Blogger les dejo algunos post que publique


Recuerda suscribirte y recibirás 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

emailEnviar por correo

6 comentarios:

  1. Hola Luis.. ¿Qué tal?
    No se me carga la página del DEMO. ¿Hay algún error?

    ResponderEliminar
  2. A este se le pueden agregar sub-Menú!??

    ResponderEliminar
  3. Hola amigo! Emmm... Quería saber si se puede cambiar el color... Es decir, el blanco esta bien, pero quería saber si se le podía cambiar el rojo tirando a marron o como se diga xDD

    Gracias n.n

    ResponderEliminar
  4. Que tal Luis! Excelente el post, y muy útil el widget del menú. Ahora bien, yo lo instalé pero no necesitaba tantos botones, así que elimine algunos, el problema es que la barra del menú no queda centrada en relación a la cabecera, porque ya no tiene el mismo largo que al principio, y además quedan unas lineas tipo recuadro vacío hacia el lado derecho donde estaban antes los otros botones eliminados. Como puedo hacer para centrar el menú y reducir las lineas externas para que no se vea como si faltaran botones? Gracias por la ayuda!

    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 (33) 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 (11) 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