(100% Working) How to Fix a Sidebar Widget in Blogspot Blog or Website

When You start your blogging Journey as a hobby blogger, Blogspot is the best and cheapest Blogging Platform available from google.

But There are lots of issues in the platform that's why I suggest you to start your blog with self hosted WordPress.

One of the biggest issue I face with blogspot is Sidebar spaces.

Now try to understand to scenario.

First:- When You have longer Content then after scrolling you will get a blank space at Sidebar.

            For More see the below image.(red box shows the blank area)




Second:-  When You have short content and more widget then You will see a blank space below the                     post. (This second scenario comes when you add more widget to element side bar blank                        space. )

                For more see the below image.(red box shows the blank area) 




Solution:-

The Solutions for above problems and the main topic of this blog is same. You should add a sticky Sidebar Widget. It will also helps you to capture more leads and increase subscription (may be vary, Depends on your goals).

Now Here comes a Question, How to Fix a Sidebar Widget in Blogspot. For this simply Follow the below steps and You will get the best.


Step 1:- Login to your blogspot dashboard Then Select Theme from left menu. 




Step 2 :- Now you are in Theme Menu. There Select the Edit HTML Button. 




Now You will See a Code Editor. Where You can Add or edit html and JavaScript code.






Step 3 :- In the code editor search the </body> tag and Paste the Below code just above it. 

Step 4 :- Replace the Widget Id with your widget ID. (Widget Id will be the Id of the widget which you wants to Stick). 
If you don't know where to find widget ID then read the paragraph below the code. 


<script>
//<![CDATA[
HG_makeSticky("WIDGET_ID"); // enter your widget ID here
function HG_makeSticky(elem) {
var HG_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
HG_sticky.parentNode.insertBefore(scrollee, HG_sticky);
var width = HG_sticky.offsetWidth;
var iniClass = HG_sticky.className + ' HG_sticky';
window.addEventListener('scroll', HG_sticking, false);
function HG_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
HG_sticky.className = iniClass + ' HG_sticking';
HG_sticky.style.width = width + "px";
} else {
HG_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.HG_sticking {background:#ffffff !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative9 !important;}
</style>



How to Find Widget ID

Widget id is very necessary If you wants to make a Widget Sticky. To find a widget Id Just follow the below steps.

Step 1 :-  Login to your blogspot Dashboard. 

Step 2 :- Select the layout  from left menu. 

Step 3 :- There you will get the layout of your website. Select the Widget(which you wants to make sticky) and then select Edit. A popup will appear with the Url. The last string of the url is your Widget ID. Copy the id and paste it in the code.




P.S. Thanks for reading. If you have any issue then Please contact me. I will make sure to resolve all your issue. 

NOTE - Widget ID is Case Sensitive. So Simply Copy and Paste it. 

1 comment:

Powered by Blogger.