Código y Estilo

Todo Sobre Desarrollo Web, Tutoriales Blogger y Mas

Menu Fixed de Bootstrap en Blogger

Unknown 9:03 p.m. viernes, 4 de diciembre de 2015 , No hay comentarios.
Menu Fixed de Bootstrap en BloggerUna Cabecera, Navbar, Menu de Opciones o como tu lo conozcas es de suma importancia en un sitio web para mantener la navegabilidad del sitio y si creías que construir uno era tedioso y requiere tener conocimientos previos, con Bootstrap podemos tener uno muy fácilmente y nosotros solo tenemos que añadir el Html necesario y ya tendremos nuestro Navbar personalizado y con un estilo muy Profesional.




Navbar de Bootstrap en Blogger


Ahora para colocar nuestro Navbar podemos ir a la documentación de Bootstrap y encontrar ya uno hecho y simplemente copiarlo, pero para este tutorial ya me di la molestia de hacerlo y personalizarlo a un estilo estandard y fácil de entender para cualquiera. El código a continuación:

Código del Navbar de Bootstrap Personalizado para nuestro Blog:


<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Codigo y Estilo</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">C y E</a>
    </div>

    
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="http://codigoyestilo.blogspot.com">INICIO <span class="sr-only">Codigo y estilo,Desarrollo Web y Blogger</span></a></li>

      </ul>
   
      <ul class="nav navbar-nav navbar-right">
          <li><a href="http://codigoyestilo.blogspot.pe/search/label/Blogger">Blogger</a></li>
          <li><a href="http://codigoyestilo.blogspot.pe/search/label/Bootstrap">Bootstrap</a></li>
   <li><a href="http://codigoyestilo.blogspot.pe/search/label/Jquery">Jquery</a></li>

      </ul>
    </div>
  </div>
</nav>


El código que puse, da como resultado el Menú que estoy usando actualmente, pueden notarlo en la parte superior de este Blog, coloque mis propias opciones ustedes pueden editarlas según corresponda al de sus Blog.

Poner el Navbar de Bootstrap en nuestro Blog

Para colocarlo en nuestro Blog, solo tenemos que copiar el código y dirigirnos al Menú principal de Blogger y seleccionar plantilla y luego editar Html:


Ahora solo tenemos que pegar el código después de la etiqueta <body> en mi caso quedaría de la siguiente forma, comprimir el código para la foto, ya que es muy extenso y tendría una imagen muy extensa, así que a mi me quedo de esta forma :

Html Navbar de Bootstrap en Blogger

Ahora solo queda dar en Guardar Plantilla y listo ya tendríamos nuestro Navbar de Bootstrap en Blogger, a lo largo de este Blog iremos haciendo mas personalizaciones con Bootstrap a nuestro Blog así que si tienes alguna idea compártela porque compartir la información nos brinda mas conocimiento, espero que este Post les sea de mucha utilidad.

No hay comentarios. :

Publicar un comentario

Suscribirse a: Comentarios de la entrada ( Atom )