Sep 4, 2016

Android Apps Like Sliding Responsive Menu Bar for Blogspot

data:blog.title
In previous we have shared many drop down menu bar for blogspot blogs. One of our readers request us to share a sliding menu bar for blogger blogs which looks like a android app and which is without of any jQuery script. So today we are here with a sliding menu bar for blogger blog.

A Menu bar is a most wanted element of every blog because it is navigating a blog reader to stand alone pages and help them to find content by specific categories on the blogs which they are reading. As usual every blog has navigation bar on their blogs but they are useless if they are not looking good. So we are here with this stylish menu bar.

Responsive Menu Bar, Slider Menu Bar, Android Apps Like Menu Bar

Which navigation bar we are going to share is designed by bootstrap technique. The navigation bar is designed for top bar of a blog and it is specially designed for navigating readers to stand alone pages like about us, contact us, privacy policy and terms and conditions, etc. In above screenshot you can see how it works on a blog. You can see a live demo of this menu bar by clicking on below demo button.

Live Demo

Wanna add this navigation bar to your blogger blog? Okay! Lets get straight to work.

How To Add This Navigation Bar to Blogspot Blogs?


STEP1] Go To Blogger.com >> Click on Template >> Backup/Restore Your Template.

STEP2] Click on Edit HTML button >> Press anywhere inside the code area and search for below similar lines. These lines are located on the top section of your blogger template code area.

<b:if cond='data:blog.isMobile'> <meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if>

STEP3] Now replace above lines with below lines of custom Meta ViewPort Code.

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

STEP4] Now search for </head> tag and paste below lines just above of it.

<style type='text/css'>
* {
  font-family: &quot;Roboto&quot;, sans-serif;
}
body { min-height:3000px;}
.custom1 {
  display: block;
  cursor: pointer;
}
.off-canvas &gt; .cstm-shade {
  width: 0;
  height: 0;
  position: fixed;
  top: 0;
  left: 0;
  transition: background 0.5s ease, width 0s ease 0.5s, height 0s ease 0.5s;
}
.off-canvas &gt; input[type=&quot;checkbox&quot;] {
  display: none;
}
.off-canvas &gt; input[type=&quot;checkbox&quot;]:checked ~ .cstm-shade {
  background: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 100%;
  transition: background 0.5s ease;
}
.off-canvas &gt; .cstm-shade &gt; .cstm-navi {
  background: white;
  width: 300px;
  height: 100%;
  position: fixed;
  right: -300px;
  transition: right 0.5s ease;
}
.off-canvas &gt; input[type=&quot;checkbox&quot;]:checked ~ .cstm-shade &gt; .cstm-navi {
  right: 0;
}
.cstm-navi-content {
  padding: 20px;
  padding-top: 110px;
}
.search-box{width:65%; border:1px solid #0c6aff;  height:40px;}
.search-box:hover{border: 1px solid #2a2;}
.search-btn{width:30%; background:#222; color:#fff; border: 1px solid #0c6aff; height:40px; }
.search-btn:hover{box-shadow:4px 4px 4px -4px rgba(0, 0, 0, 0.75); }
</style>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

STEP5] Now search for <body> tag and just below of it paste below lines of code.

<nav class='navbar navbar-default navbar-fixed-top' style='box-shadow:4px 4px 4px -0px rgba(0, 0, 0, 0.75); '>
<div class='ct-wrapper'>
  <div class='container-fluid'>
    <a class='navbar-brand' href='/'>My Blogger Guides</a>
    <label class='navbar-toggle custom1' for='off_canvas'>
      <span class='sr-only'>Toggle navigation</span>
      <span class='icon-bar'/>
      <span class='icon-bar'/>
      <span class='icon-bar'/>
    </label>
  </div>
  </div>
</nav>
<div class='container-fluid'>
  <div class='row'>
    <div class='col-xs-12'>
    </div>
  </div>
</div>
<div class='off-canvas'>
  <input id='off_canvas' type='checkbox'/>
  <div class='cstm-shade'>
    <div class='cstm-navi'>
      <div class='cstm-navi-content'>
        <ul class='nav nav-pills nav-stacked'>
          <li class='active' role='presentation'>
            <a href='/'>
              <span class='glyphicon glyphicon-home'/>
              Home
            </a>
          </li>
          <li role='presentation'>
            <a href='#'>
              <span class='glyphicon glyphicon-heart'/>
              Favourites
            </a>
          </li>
          <li role='presentation'>
            <a href='#'>
              <span class='glyphicon glyphicon-user'/>
              Profile
            </a>
          </li>
          <li role='presentation'>
            <a href='#'>
              <span class='glyphicon glyphicon-cog'/>
              Account Settings
            </a>
          </li>
          <li role='presentation'>
            <a href='#'>
              <span class='glyphicon glyphicon-off'/>
              Logout
            </a>
          </li>
<li>
<form action='/search'> <input class='search-box' name='q' placeholder='Search here' type='text' value=''/> <input class='search-btn' type='submit' value='Search'/> </form>
</li>
        </ul>
      </div>
    </div>
  </div>
</div>

STEP 6] Now replace all # links and icons which you want to use.

 Note:  You can find all icons from this bootstrap icon cheatsheet.

STEP 7] Now click on Save Template button to save it properly.

Open your blog to see it live on your blog.

Also Read : How To Write An Effective & Magnetic Blog Post?

Conclusion:

So above guide is about, How To Add Android Like Sliding Responsive Menu Bar to Blogger Blog? We tried our best to make tutorial easy as much as possible but if any case problem persist during installing this menu bar then let us know via dropping a comment below. We will help you out of sure. Do Share and Subscribe Us.
Thank You! Stay Blessed!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.