14 February 2016

Add a Floating Menu to your Blog on Blogger

Blogger is a great platform for blogs, but it's missing a lot of modern features. One of those features is a customizable Floating Menu.

Fortunately, now there is an easy way to add a Floating Menu to your blog, without the need to add or change complicated coding.

I've created this code and I'm currently using in on my own blog (the one that you're on right now). You can see the floating menu on the top and you can see how it works if you scroll down on the page.

Here is the step-by-step video tutorial on how to do the procedure:

Add Floating Menu in Blogger

The special code mentioned in the video that you need to copy and paste is this:

.tabs-outer {background:#fff; height: 60px;position:fixed;z-index:100;width: 100%;top:0;}
.navbar {height:50px!important;}
.header-outer {display:none;}
.tabs-inner .widget li:last-child a {border:none;}
.tabs-inner .widget li a {margin-top:15px; border:none;-webkit-font-smoothing: antialiased !important;-moz-font-smoothing: antialiased !important;-o-font-smoothing: antialiased !important;-moz-osx-font-smoothing: grayscale;;padding:10px 19px 10px 19px!important;}

Simply copy and paste the above code in the "Add CSS" section of your Blog template, and it will transform the Pages Gadget into a floating menu.

If you have any questions about the procedure, please feel free to contact me.