INSERTAR UN MENÚ EN MI BLOG DE BLOGGER

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.


Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:

Un clic en “Diseño”

Clic en “Añadir un gadget”

Busca el widget que dice “HTML-Javascript” y ábrelo

Coloca el siguiente código en el 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

Data de la Publicación; 19-09-2019

 Fuente;  ayudadeblogger

 Publicado por;