Create A Sticky Navigation Scrolling Menu For Blogger

Creating a simple sticky or scrolling navigation menu for blogger is quite important for many bloggers. Today creating a sticky navigation menu for blogger is our tutorial and let’s make this done. Hope this article would help many blogger and website designers to add this sticky navigation menu for blogger. Ok this is quite different process, but don’t worry I would help you to make this done. Ok before getting into the tutorial have a look at live demo, link is below. If you have any problem with this sticky floating navigation widget for blogger then have a look at video tutorial at the end of article.

LIVE DEMO

Create sticky navigation menu for blogger
Create sticky navigation menu for blogger
  1. Login into Blogger
  2. Select your blog if you have many
  3. Then migrate to TEMPLATE –> Click on “EDIT HTML
  4. Then find for </body>
  5. Then copy the below code and paste above it / before it., then make your editing
  6. Then click on save template .

ALSO READ 7 TYPE OF NAVIGATION MENU WIDGET FOR BLOGGER WITH DROPDOWN EFFECTS

<script>
// Sticky Widget By www.bloggerbulk.com
//<![CDATA[
wha_makeSticky(“WIDGET ID HERE“); // enter your widget ID here
function wha_makeSticky(elem) {
var wha_sticky = document.getElementById(elem);
var scrollee = document.createElement(“div”);
wha_sticky.parentNode.insertBefore(scrollee, wha_sticky);
var width = wha_sticky.offsetWidth;
var iniClass = wha_sticky.className + ‘ wha_sticky’;
window.addEventListener(‘scroll’, wha_sticking, false);
function wha_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
wha_sticky.className = iniClass + ‘ wha_sticking’;
wha_sticky.style.width = width + “px”;
} else {
wha_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.wha_sticking {background:#f2f2f2 !important; position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}
</style>

Now we have completed 60% of our work in adding a sticky navigation menu in blogger, let’s complete the remaining work also. Now you need to visit our blog and find the navigation menu widget code. Note you should have already logged in into your account.

How to create a simple sticky navigation menu for blogger

When you visit your blog then you find the widget, with settings icon, just right click on it and click copy link location. Then paste the code in a notepad and find the widget code and replace the highlighted widget code. You still worried about the widget code then have a look at sample shown below.

http://www.blogger.com/rearrange?blogID=****************&widgetType=HTML&widgetId=HTML**&action=editWidget&sectionId=crosscol

Then just copy the code after &widgetId= and replace the WIDGET ID HERE highlighted in the above code. If you still have a problem and worried about the code then. Have a look at sample in the below image highlighted is the WIDGET ID code.

ALSO READ :  HOW TO MAKE A BLOGGER STICKY ON SCROLLING

How to find widget code in blogger

Are still worried and confused about this article. Then don’t worry we have made an video to solve your doubt. Please watch the video shown below for better understanding if you have any confusion with this article creating a simple sticky navigation menu for blogger.

Tutorial in creating a sticky navigation widget for blogger

HOPE YOU ENJOYED THIS ARTICLE IF YOU HAVE ANY DOUBTS PLEASE DROP A COMMENT BELOW

Article By Tharun

Hey! Tharun here. A Blogger makes blogging on wordpress tips, blogger tricks, SEO tricks, Android Apps, He love to share what he knows. Meet him at Facebook, Twitter. Get free Wordpress Installation Service Contact Here.

Comments

  1. says

    Hi Tharun, I really appreciate your style of writing content that can easily understand by beginners like me. Thanks.
    I need multi tabbed widget in sidebar with tag1,tag2 and tag3 for popular posts,tags etc. Please guide me to get that, or plz share the link for the tutorial.

Leave a Reply