How to create a permanent stick in Blogger

How To Make Fixed Sticky Sidebar In Blogger

To make money online through AdSense is not an easy task and monetizing your blog is one of the most important ideas every blogger wants.

And placing your ads in correct place plays a vital role to get clicks from your visitors, otherwise, there is no money at all.

So, here is a very good way to keep your ads displayed at a fixed widget, even if your visitors scroll downward or upward. As floating sidebar fix widget gets more attention from your visitors than normal sidebar widgets.

So, before implementing I want you to kindly note that:

1. This widget will float from one of your blogger sidebar widgets as per your choice.

2. It will not overlap with your footer area.

3. The good thing is, that if your using a responsive template than, this fixed widget will be hidden automatically.

How To Make Sticky And Fixed Sidebar In Blogger

I have two methods of making a sticky sidebar widget. So, follow the simple steps and you will be done.

1^st Method.

Step 1. Login to your Blogger blog and select Template and then click on Edit HTML.

Step 2. Pressing Control + F search for the

tag. Kindly note that if you have already installed the jQuery before, you can skip this step.

Otherwise, copy and paste the below code just above the

tag.

Step 3. Again pressing Control + F search for the

tag and paste the below code just above the tag.

   




Note: 





Replace the highlighted widget ID with your own sidebar widget ID which you want to fix as a sticky widget.




Replace the highlighted footer div ID with your own footer div ID, in order to stop your sticky widget from floating over your footer.





How to find the Widget and Footer div ID

In my case, my widget ID is PopularPost2, or you can also search typing b:widget id and select which widget you want to fix as a sticky widget and for footer ID, search div id= ‘footer-wrapper’.




Widget ID



Footer ID

Kindly note, when you search for widget and footer ID, you will get more than once for your search, but choose, the one that is appropriate. See the image below to understand better.


Modifying the CSS code





Search for the ]]><b:skin> code and paste the below code just above the ]]><b:skin> code.





 #PopularPosts1{width:100%;max-width:320px}  
 @media only screen and (min-width:260px) and (max-width:989px){  
 #PopularPosts1{display: none!important;}}

If you don’t add this code and if you are using a responsive template than the sticky widget will float over your entire site in mobile devices.

So, my suggestion is to hide this sticky widget from mobile devices by adding the CSS code otherwise, you can skip this step.

You can also define the highlighted maximum width of your sticky sidebar widget based on your requirement.

Step 4. Now, the last part is saving your settings by clicking on Save option.

2^nd Method.

Step 1. Login to your Blogger blog and select Template and then click on Edit HTML.

Step 2. Pressing Control + F search for the ]]><b:skin> code and paste the below code just above the ]]><b:skin> code. Choose as per your requirement, whether it’s your right sidebar or left.