How to Adjust Space Between Blog Posts and Sidebar?

/ How To / By
Blogspot offers a couple of ready-made templates. Newbie bloggers can use them at an initial level if they are going to learn some basics of blogging. You are free to customize them. To make some relevant changes in the inbuilt template Google has provided an option inside blogger called Template Designer. You can find it easily by navigating to Blogger>>Layout. We keep on learning new things as we grow up. This condition also applies to blogging. 

Adjust Space B/W Main Body And Sidebar
Adjust Space B/W Main Body And Sidebar

No one would prefer to stay on those simple and not properly SEO optimized templates provided on blogspot. It’s a natural thing once we’ve started receiving readers we want to improve the layout of our template to make them feel better. At that time we would move to a custom template. 

Now the problem would occur once you’ve implemented any third-party theme. Most probably Template designer option would be disabled for you. You can’t make changes using it. The only option left is template’s html code. If you’re very  much  familiar with HTML and css then it’s a child play for you but I am writing this guide for those who’ve a little bit idea about coding skills. 


This guide is on how to remove the unwanted space between your blog posts body and the sidebar. Currently I am using responsive template on this blog but on mobile view the sidebar was looking a little shifted towards right side. So I started to find out the fix for this and after a deep study of 1 hour I fixed this error on my blog.
I have found two methods to increase or decrease gap between post body and your sidebar. You can check them out below.
See also : [Tutorial] How to Add Old Menu Bar in Google Chrome

Method 1: –

  • Navigate to Blogger>>Template>>Edit HTML.
  • Press ctrl+F to open search window.
  • Now search for this code ]]></b:skin>.
  • Place the following code either below or above ]]></b:skin>.

 

#sidebar-right-1{
position: relative;
left: -18px !important;
}
  • Alternatively you can paste it in CSS menu too simply navigate to Layout>>Template Designer>>Advanced and paste the above code there. Press enter and click on Apply to blog.
Add CSS
Add CSS
  • You can adjust -18px to decrease or increase spacing between main body and sidebar.

Method 2: –

If the above solution doesn’t work for you then simply give a try to this method. Frankly saying above method didn’t work for me rather this one gave output. But is it not so that it won’t work for everyone.

  • First of all don’t forget to take backup of your template. You can easily backup your template, simply navigate to Template section and click on Backup/Restore>>Download full template. (This would save you from any accidental damage)
  • Now go to Template then press Edit HTML.
  • Press ctrl+F and search for “sidebar-wrapper”. You’ll notice many but remember to choose only that one which is having margin-left: 0px;
Sidebar Wrapper
Sidebar Wrapper
  • Now just adjust 0px; according to your need. As you can notice I have given it 0 while previously it was 20.
  • Once you’re done click on Save Template to save your work.

So this was all about on removing gap between posts body and sidebar. Let me know if you’re still facing this issue. Feel free to leave a comment below in the comment section for any query, doubt or another method for this problem.

 

Subscribe
Subscribe
Scroll to Top