How to Customize Width of Body, Post and Sidebar in Blogger Template

If you have downloaded a custom template and you are not happy with its width for the posts, body or sidebar, this post will guide you on what you need to change in order to achieve that. Normally you can easily do that by using the default template editor that Blogger provides, but in most cases it
does not support custom templates so you would need to manually change the HTML code yourself. 

Now before you begin doing any changes to your templates, it is highly advisable that you first create a backup just in case you are not happy with the final results or have accidentally changed the wrong code. On your right sidebar in the Blogger Administration panel, head into Template, then on the top right side you should see a button Backup/Restore. Click on that and then click on the orange button that says Download full template.

Now that you have made a backup of your template, you can begin experimenting with the width. Below you will find the three different codes being used for all three parts of your template.

1- Go to Blogger Dashboard
2- Go to Template  >>  Edit HTML
3- In the HTML code box, press Ctrl+F then type
#outer-wrapper {
#sidebar-wrapper {
#main-wrapper {

  • #outer-wrapper is Overall blog Width
  • #sidebar-wrapper is Sidebar Width
  • #main-wrapper is Posts Width
Below each of these codes, you should find another code that says the following
width: 500px;

In this case, the 500px is just an example. Yours could be 560px, 400px, etc. Keep in mind, in some case you may not have px being used but %. 

Now you may begin changing that value.
That's it!


Post a Comment

Powered by Blogger.