Android Apps Like Sliding Responsive Menu Bar for Blogspot
<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: "Roboto", sans-serif;
}
body { min-height:3000px;}
.custom1 {
display: block;
cursor: pointer;
}
.off-canvas > .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 > input[type="checkbox"] {
display: none;
}
.off-canvas > input[type="checkbox"]:checked ~ .cstm-shade {
background: rgba(0, 0, 0, 0.75);
width: 100%;
height: 100%;
transition: background 0.5s ease;
}
.off-canvas > .cstm-shade > .cstm-navi {
background: white;
width: 300px;
height: 100%;
position: fixed;
right: -300px;
transition: right 0.5s ease;
}
.off-canvas > input[type="checkbox"]:checked ~ .cstm-shade > .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!
