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 No one would prefer to stay on those simple and not 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 . 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.
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>.
- 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.
- You can adjust -18px to decrease or increase spacing between main body and sidebar.
- 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;
- 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.