Stylish Menubar! Add to Blogger Sidebar

sidebar menubar for blogger

We always trying to provide some unique widgets for our readers. So like as previous widgets today in this post we came up with another stylish widget for blogger users. In this post we are going to share a sidebar menu/navigation bar to our loyal readers. Every blogger want special and unique widgets for their blogs and our team always came up with unique widgets. Below we are going to attach a demo screenshot and also a live demo button. See it live by clicking on demo button.

Stylish Menubar for Blogger

Now, if you want to add it on your blogspot then we discuss some features of this widget.

Features of Sidebar Menu Bar

  1. Stylish and Unique Look.
  2. Gradient Background.
  3. Fast Loading.
  4. Made Up With CSS3 & HTML.
  5. Little Space On Sidebar.

How To Add Menu bar to Blogger Sidebar?

  • Go to Blogger Dashboard >> Layout >> Add A Gadget.
  • Copy and Paste below code inside popup window.

 @import url(|Open+Sans:400,300);
.mbg-sidebar-menu {
      float: left;
      position: relative;
      box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
      overflow: hidden;
    #mbg {
      display: none;
    .mbg-sidebar-menu section {
  background: black; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(black, red, black); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(black, red, black); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(black, red, black); /* For Firefox 3.6 to 15 */
  background: linear-gradient(black, red, black); /* Standard syntax */
      width: 300px;
      height: 80px;
      position: relative;
      transition: all 0.25s;
    .mbg-sidebar-menu section label {
      color: white;
      font: bold 14px Montserrat;
      text-align: center;
      border: 2px solid white;
      border-radius: 4px;
      display: block;
      padding: 10px 0;
      width: 60%;
      position: absolute;
      left: 20%;
      top: 20px;
      cursor: pointer;
      text-transform: uppercase;
    .sidenav {
 background: black; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(black, red, black); /* For Safari 5.1 to 6.0 */
 background: -o-linear-gradient(black, red, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(black, red, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(black, purple, black); /* Standard syntax */
width: 320px;
position: absolute;
left: 20px;
top: 10px;
bottom: 10px;
padding-top: 10px;
.sidenav li {
list-style-type: none;
.sidenav a {
color: white;
text-decoration: none;
.sidenav b {
font: bold 12px/48px Montserrat;
display: block;
opacity: 0;
transform: translateX(50px);
transition: all 0.4s;
.sidenav i {
display: block;
float: left;
font-size: 16px;
line-height: 48px;
text-align: center;
#mbg:checked ~ section {
transform: translateX(-200px);
#mbg:checked ~ section label {
padding: 7px 7px 7px 0px;
position: absolute;
left: 70%;
top: 10px;
#mbg:checked ~ .sidenav b {
opacity: 1;
transform: translateX(250);
#mbg:checked ~ .sidenav li:nth-child(1) b {
transition-delay: 0.08s;
#mbg:checked ~ .sidenav li:nth-child(2) b {
transition-delay: 0.16s;
#mbg:checked ~ .sidenav li:nth-child(3) b {
transition-delay: 0.24s;
#mbg:checked ~ .sidenav li:nth-child(4) b {
transition-delay: 0.32s;
#mbg:checked ~ .sidenav li:nth-child(5) b {
transition-delay: 0.40s;
#mbg:checked ~ .sidenav li:nth-child(6) b {
transition-delay: 0.48s;
<div class=”mbg-sidebar-menu”>
<input type=”checkbox” id=”mbg” />
<!– The menu –>
<ul class=”sidenav”>
<li><a href=”#”><b><i class=”fa fa-check”></i>Tasks</b></a></li>
<li><a href=”#”><b><i class=”fa fa-envelope”></i>Messages</b></a></li>
<li><a href=”#”><b><i class=”fa fa-pencil”></i>New Post</b></a></li>
<li><a href=”#”><b><i class=”fa fa-cog”></i>Settings</b></a></li>
<li><a href=”#”><b><i class=”fa fa-star”></i>Starred</b></a></li>
<li><a href=”#”><b><i class=”fa fa-power-off”></i>Logout</b></a></li>
<!– Label for #mbg checkbox –>
<label for=”mbg”>MENU <i class=”fa fa-th-list”></i></label>

  • Now, Change all # links , FontAwesome Icons, and Text Link as per your need. You can find Icon codes from our cheatsheet.
  • Now, Go To Blogger Dashboard >> Template >> Edit HTML.
  • Search for <head> tag and paste below FontAwesome Stylesheet link just below of <head> tag.

<link href=’’ rel=’stylesheet’/>

  • Now, Save Template.
  • Open your blog and see it live on your blog.

Our Recommended Blogger Widgets

  1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
  2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
  3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
  4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
  5. Cute & Stylish Email Popup Subscription Widget.


    So above guide is about How To Add Stylish Menubar To Blogger Sidebar? We hope you have added it successfully on your blog. If anyhow problem persist after following all steps then ask us via dropping a comment. Also share your views with us about this widget. Do Share.
    Thank You! Stay Blessed!

    Paramjot Singh

    Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I'm blogging since 2 years, and here on My Blogger Guides, I'm sharing my little mind knowledge which I learned in these past two years. :)

    Click Here to Leave a Comment Below 0 comments