Skip to main content

How To Change Width of Custom Template on Blogger

While you use blogger's own template then you can easily change the width of your blog's template. To change the width of the blogger's own template you need to login to your blogger account and then click Layout and click Customize. You will switch to Blogger Template Designer page. Now you need to click Adjust width.

Now scroll the width button left (to decrease the width) or right (to increase the width). Then click Apply to Blog. If you don not use blogger's own template then what happens. If you use your custom template then you will get a message like "Not applicable for this template".

While you use custom template for your blog then you cannot edit your template from the blogger template designer page. You need to change HTML code directly from Layout. Because every custom template does not meet your requirements.

Sometimes width of the custom template is small in size and because of the small width your gadgets won't appear in full size. You can add large gadget or AdSense ads (728x90 Leader board) but they won't appear as per their size. These gadgets are squeezed in size. That's why bloggers need to increase the width of their blog template. It is not very difficult anyone can do this using method.

Steps to Change Width of Template

Step 1. Login to your blogger account and select your blog (if you have created multiple blog)

Step 2. If you use older blogger template then click Design and then click Edit HTML and then click Expand Widget template. If you use Dynamic views template then click Layout and then click Edit HTML and then click Edit template.

Step 3. Search #wrapper and change width to 1020px. In #wrapper section your blog's top menu locates.

Step 4. Now you need to search for #header-wrapper. Once you find change the width value to 1020px (default is 960px).

Step 5. Similarly, search for #outer-wrapper and change the width of the outer wrapper in the same value as header wrapper

Step 6. If there is navigation menu bar then search for #nav{width: and change the width as you wish or you can keep it same as of header wrapper

Step 7. Search #header-inner and change this value as you wish (default is 468px). #header-inner is a place where you write your blog's description.

Step 8. If you place Google AdSense ad or other add right side of your blog's header then search #r_head and change the width as you wish (default is 468px). If you change the width to 960 or 1020 then adds will appear just before your blog's menu bar.

Step 9. search for /*Menu*/ and change the width to 1020 or as you wish (default is 960).

Step 10. Search for #main-wrapper and change the width value as your wish (eg : 700).

Step 11. If your template sidebar the search #sidebarwrap .subscribe and the change the width (default is 300).

Step 12. Before save the template click Preview button to see the preview of your blog. If it requires more changes then do it and then again see Preview. When you satisfied with your your template then click Save template.

Thanks for reading the post. Let me know have you ever experienced this tips. Also let others to experience this tips by sharing this post on your social networks.