How to Add Scrollable Sticky Links to Your Blogger Website

Hello everyone, welcome back to gplofficial! And today, we’re going to see how we can add a scrollable link like this to your Blogger website. So, as you can see, this section is sticky. So if I scroll down, then the same section is sticky, and users can jump between pages. And if I switch to mobile view, then users can easily scroll between these links like this. So you can add a sticky scrollable links like this to your Blogger website pretty easily. So let’s check how you can do that. And before that, I recommend you to hit the like button and do subscribe our channel for more updates like this.

Getting Started with Blogger Dashboard

So first of all, let’s go to the Blogger dashboard and here, go to Theme and just click on Edit HTML. Now, you can scroll down to the end of this code and find the closing body tag. And I have added the code like this. So as you can see, this is the code for a sticky footer menu.

Customizing Your Links

And here, you can edit the link. So the first one is the homepage, and then we have categories. So you can add your category. Let’s say I want to add a Blogger category here. Then I can name it, and I can just copy my Blogger category. So let’s say, let me copy the blogging category here. So I will go to blogging, and I will copy the blogging link, and I will replace it here, and I will change it to blogging. Similarly, you can replace your about us page link, contact page link, privacy policy page link like this.

Adding or Removing Links

• If you want to add more links, then you can just simply copy it and you can duplicate it like this • If you want to delete some of the links, then you can just select the list item and delete it like this

So it is pretty easy to manage your links like this. And here you can see the CSS code, and we have the JavaScript code for the scrollable mouse drag options. So let me hit save.

Testing the Implementation

Now let me go to the website, and let’s go to homepage. And as you can see, now the category is now removed to switch to blogging. And if I click on blog, then it will go to the blogging category page like this. So let’s go to homepage here.

Fixing Footer Overlap Issues

So here, there is one issue that it is covering the footer section. So for this, you need to make some changes to your footer section as well so that it will not cover the existing footer links. So for this, what I can do is, I will right click on it and click on inspect. Just scroll down, and here, let me select the whole footer element here. And here you can see footer wrapper. Just click on that, the parent footer element. So you can see less than footer id.

Adding Padding to Footer

And here, what I can do is, I will add a padding bottom. So I will simply type padding-bottom and let’s say I will add a bottom padding of 60 pixel. Now if I scroll down, you will see the links like this. Now if I close it here, you can see the links like this. But earlier, if you don’t add the padding, then the section will not be accessible. So it will depend on the layout of your website. So make sure to set the adjustment here. So you can add a bottom padding value according to your website layout.

Making Permanent Changes

Let me inspect it here. And in mobile and desktop, it is looking quite good. And you can also set the footer wrapper. And you can adjust it. Let’s say I want to add 65 pixel, then I can also do that. And I will simply copy this and let’s go to the theme code, and let me search for my CSS code. So let me hit enter, and here it is, footer wrapper. And what I can do is, I will add a semicolon, and I will add the same code padding-bottom: 65 pixel. So let me add it, and let’s hit save.

Final Result

And here it is! Now your sticky footer section is added, and users can easily switch between pages. So it is a must-have feature you should implement on your blog or website. And let me know if you face any issue during implementation of this sticky footer menu.