Stylish Navigation Menu For Blogger

Sunday, 11 October 2015

Stylish Navigation Menu For Blogger

10/11/2015
Stylish Navigation Menu For Blogger by askwithloud
How to add fixed and stylish navigation menu bar in blogger - Tiny navigation menu is one of the best navigation menus for every dashing blog. The reason I'm telling you because it takes a little bit space of your blog. Really guys this navigation menu is very awesome and you don't need to worry about codes because you can install it with the help of one simple CSS code. The actual advantage of this widget is that - it fixed, it's stylish, it's sticky and It's small.

So if you want to setup this widget in your own blog, then don't worry, before adding this widget take a look of this widget for better understanding.
Now if you watched the demo of this widget and want to install in your own dashing blog, then simply follow the below simple steps and trust me you can do it without any problems.

How To Install Fixed Tiny Nav In Blogger?

First visit to your blogger dashboard - Login
Now go to "Template" section and then click on "Edit html" button.
After that find the below tag (code) by pressing "Ctrl + F" key together from your keyboard.
<head>

And then copy the below CSS code and paste it just after <head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0BxB51PrIeBaiOXZ2MmVucC1PaTA" />

Now once again find the below tag (you did before)
</body>

After that, copy the below JavaScript and paste it just before </body>.
<script>
(function() {
  window.Menu = (function() {
    Menu.init = function() {
      return $('[data-menu]').each(function(idx, el) {
        return new Menu($(el));
      });
    };

    function Menu($el) {
      this.nav = $el;
      this.menubtn = $('.menu-btn', this.nav);
      this.menubtn.on('click', (function(_this) {
        return function(ev) {
          _this.nav.toggleClass('active');
          return false;
        };
      })(this));
    }

    return Menu;

  })();

  $(function() {
    if ($('[data-menu]').length) {
      return Menu.init();
    }
  });

}).call(this);
</script>

And then click on the orange save template button.

Now go to the "layout" section and then click on " Add a widget ".
After that, select " Html/JavaScript ". (See the below image)


Now copy the below html code and paste it in Html box.
<nav class='nav' data-menu>
  <a class='menu-btn' href='#'>
    <i class='fa fa-bars'></i>
    <i class='fa fa-times'></i>
  </a>
  <ul class='unstyled-list nav-menu'>
    <li class='nav-item'>
      <a class='nav-item-link' href='#'>About</a>
    </li>
    <li class='nav-item'>
      <a class='nav-item-link' href='#'>Articles</a>
    </li>
    <li class='nav-item'>
      <a class='nav-item-link' href='#'>Work</a>
    </li>
    <li class='nav-item'>
      <a class='nav-item-link' href='#'>Contact</a>
    </li>
  </ul>
</nav>

After that, click on the blue save button to make changes. Now refresh your blog and see the magic.

 That's it! I hope you like this navigation menu! Stay tuned for more blogger widgets! Thanks for reading @Prince
Load comments

0 Comment to "Stylish Navigation Menu For Blogger "

Post a Comment