Register Login Featured
Stats: 2321 members, 1523 topics. Date: Friday, 17th August 2018

General Wordpress Blogspot Forums Crypto Traffic Money

How to Adjust the width of custom blogger Template

How to Adjust the width of custom blogger Template by : 11:43 am On January 5, 2018

Modifying Blogger Widths, For Old and New Blogger Templates has being made easier with this tutorial.

Learn to change your blog’s widths by various methods to suits your template. 

Basically, there are two types of codes written for blogger templates

Simple Codes

If your template is in regular codes then following lines need alteration.

Fixed Width Templates

#header-wrapper {

#outer-wrapper {

#main-wrapper {

#sidebar-wrapper {

#footer {

You will see different width values below each of above codes.

To change above values

Log in to your blogger

Select the blog for editing

Click on the template on the very left corner of the blogger dashboard

Click on Edit HTML

Press CTRL+F inside the code box and type #header-wrapper {

Change the values as per your requirements, make sure different resolutions are used everywhere, so do not modify too much higher limits unnecessarily.

Try to alter values looking above self-explaining the image, while doing changes you will automatically learn what is happening. Keep in mind that Post Section, Side Bar, Outer Wrapper are co-related.

Variable Codes

Some templates are made to fit automatically into different browsers and monitor resolutions. Much of new blogger support this type of codes.

It can be done in two ways.

Template designer/ Template Editor

For Custom Templates

To do this go to your blog’s Dashboard

Click Design > Template Designer > Adjust Widths

You can easily change the values and also see the preview of your blog at the bottom. The difficulty is it just allows up to 1000px value. If you want to edit for more values then you need to edit template’s codes. Also, note only some layouts have this facility.

Altering template’s HTML Codes (It’s Simple!)

Fluid width or Stretch templates

Be careful to backup your template every time you try changes.

Again Click on Edit HTML in Template option

Note: If you do not see Expand Widgets option, then click each arrow inside the code box (Near code line numbers) to ensure your search do not miss codes.

Search for “<b:template-skin>”

You will see below line of codes


      <b:variable default=’986px’ name=’content.width’ type=’length’ value=’986.px’/>

      <b:variable default=’0′ name=’main.column.left.width’ type=’length’ value=’0.px’/>

      <b:variable default=’310.px’ name=’main.column.right.width’ type=’length’ value=’310.px’/>

Change main “Post Section” width by altering value 986 to say 1100. Accordingly you may need to change main column right width to fit on the page. You can always save and see the changes in blog’s preview in a new page.

Do not go away from the blog’s main edit page. Often try to right down values on a notepad to ensure you do not miss original values and do not require template restore.

Note: Main Wrapper + Side Wrapper + Margin = Outer Wrapper

How to change blog’s Content Width?


Go to blogger Dashboard

Go to Template

Click on Edit HTML

Press CTRL+F

/*———–Container .Style—————*/


{ float: .left;

margin: .0;

overflow: .hidden;

padding: .15px .20px .15px .25px;

width: .640px;

word-wrap: .break-word;


Adjust width according to by altering the width px. And also remove the dots from the above code.


Still having issues??  Please use the comment box…


Publication author

offline 2 months


18 - An All in one Solution Forum Where we discuss Blogging related Issues, Make Money Online, Traffic and Adsense tips. Etc.

Comments: 103Publics: 664Registration: 31-10-2017


You must be logged in to post a comment.


(Go Up)

Links: (0) (1) (2) (3) (4) (5) (6) (7) (8) (9)

GitHubNg.Com - Copyright © 2017 - Henry Ijogu. All rights reserved. See How To Advertise.
Disclaimer: Every member is solely responsible for anything that he/she posts or uploads on this Forum.


Password generation