El menú de una web, es sin duda uno de los atributos mas importantes que un sitio debe tener, en el menú se pueden colocar todas las subdivisiones o temas que contiene nuestra web o Blog. Así que tener un menú interactivo y visible puede ser una gran ayuda para que nuestros visitantes puedan encontrar lo que buscan con mas detalles, así que en esta Post veremos como crear un menú usando los estilos de Bootstrap, de esta forma mantendremos un estilo muy particular ademas de hacerlo siempre visible a medida que bajamos por el blog.
Navbar de Bootstrap en Blogger:
Para que tengan un mejor ejemplo de lo que aremos, pueden ver el Navbar de bootstrap implementado en nuestro Blog, si se toman la molestia de bajar por el blog, se darán cuenta que el menú también se mantiene haciendo de esa particularidad algo muy útil.
Para empezar con este tutorial debemos asegurarnos de tener enlazados los estilos de bootstrap a nuestro Blog, en una entrada anterior aprendimos como hacerlo, así que si aun no lo hiciste te invito a visitar: Twitter Bootstrap en Blogger.
Ahora una ves enlazado las funcionalidades de Bootstrap a nuestro blog, procederemos a crear nuestro Código, que sera el siguiente:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><span><img style="width: 55px; height: 55px;"src="url imagen"/></span>
<span style="font-weight:bold;color:white;">Titulo de tu blog</span>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href='url de la pagina1'>Pagina1</a></li>
<li><a href='url de la pagina2'>Pagina2</a></li>
<li><a href='url de la pagina3'>Pagina3</a></li>
<li><a href='url de la pagina4'>Pagina4</a></li>
</ul>
</div>
</div>
</nav>
El código anterior es el que nos permitirá tener nuestro menú con el mismo estilo del Navbar de Bootstrap, ademas de ponerle un valor agregado como el logo de la pagina. Si deseamos que nuestro menú no sea de color negro en la parte de la clase donde dice navbar-inverse la cambiamos por navbar-default.
Pegar el codigo en nuestro Blog:
Ahora solo nos queda pegar el código en nuestro Blog, hay dos formas de hacerlo:
- podemos introducirnos directamente al código de nuestro blog y ponerlo inmediatamente después de la etiqueta <body>
- O podemos añadir un gadget HTML/JavasScript y pegar el código en el gadget.
Cualquiera de las opciones que elijamos sera valida.
Ahora en las Url de las paginas a manera de sugerencia pueden poner las Url de las categorías de sus Blog, ya que estas actúan como subtemas y apartados que clasifican el contenido del blog, y pueden ser de buena herramienta para el Menú.
Espero que este Post sea de mucha utilidad, con esto podemos ver que podemos añadir fácilmente las funcionalidades de Bootstrap a nuestro blog, ya nada mas queda de nuestra creatividad el sacarle provecho.
Recuerden antes de usar las funcionalidades de Bootstrap en Blogger, hay que enlazar los CSS y los JS a nuestro Blog, y luego ya podremos aplicar cualquier clase que Bootstrap nos brinda a nuestro Sitio, para mayor información vean la guía de Boostrap.
Cualquier duda o opinión, pueden hacerlo por comentarios. Gracias por su Tiempo!
Hola soy una novata y quisiera crear jerarquia de categoria en blogger. Posrías ayudarme?
ResponderEliminarno me deja copiar el codigo, que puedo hacer?
ResponderEliminarAmigos gracias de verdad por compartir conocimiento, paginas como ustedes y Tutoliber con su curso de POWER BI online gratis son magnificas para aprender desde casa y poder crecer profesionalmente para los que no tenemos dinero. mil gracias
ResponderEliminar