Thursday, January 27, 2011

Template Designer: How to increase entire blog width beyond maximum


The new Blogger Template Designer has made it very easy to change overall blog width as well as the width of the main column and the sidebars. All you need to do is to sign into Dashboard, click DESIGN > TEMPLATE DESIGNER > ADJUST WIDTH and you will be provided with sliders to drag and drop to whatever values your heart desires, then click APPLY TO BLOG to save the new settings (see screenshot below):



Not only that, you can view the result of your selected changes below and if horrified by your changes, just click RESET WIDTHS TO TEMPLATE DEFAULT. (Note that while there is no slider to adjust the width of the main column, it would be indirectly set by the overall width - whatever width you have set for the sidebar)

However with the Simple (and I believe the others too) template, the overall width is limited to maximum 1000px. So what do you do when you want your overall blog width to be greater than 1000px.?

Update: It may be interesting for you to read the comment by Vanja Milicevic and my responses before you change your blog width to wider than 1000px. However, if you have specific reasons for not worrying about getting that inconvenient horizontal scroll bar like for example you upload a lot of large photos, it may still be a good idea to have a wider template and main column


Well, while in the DESIGN tab/mode, click EDIT HTML to open the template editor and search for these codes (use ctrl+ F and search for, say, <b:template-skin> or any portion of the codes below:

<b:template-skin>
<b:variable default='930px' name='content.width' type='length' value='1000px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>


then change that 1000px to whatever values you fancy and you would have changed the overall blog width.

BTW the default for the overall blog width is 930px which is roughly the value you would need to set in order to optimize your blog for 1024x768 screen resolution which is what many web designers are doing because the previous lowest denominator 800x600 screen is now used by very few people.

52 comments:

  1. thanx for this nice post.

    ReplyDelete
  2. Very nice article, Very easy tutorial. I changed the value to 1250 and applied it to my blog. Take a look.

    http://freeebooks-makingmoneyonline.blogspot.com/

    ReplyDelete
  3. Thank you SO much! I've been blogging about 4 months and am at the stage of wanting to change certain things that the template will not allow. Just today I was wishing I could change the width of my blog and voila, I follow you in Google Reader, there was your article. I'm thrilled! Don't want to hire a web designer for tweaks so I really appreciate your guidance!

    ReplyDelete
  4. Thank you alot! I was looking for something just similar to this! :D

    Also, I followed you, would you mind following me back?

    goretekz.blogspot.com

    ReplyDelete
  5. great tip, my blog looks great now

    ReplyDelete
  6. You have really great tips, thanks for sharing!
    I just wanted to ask , ive changed my blog template completely , its simple, with white background and wider space for post and photos!And i have one problem now, some of the people told me, that it doesnt fit to their screen resolution or its all messed up, when they open my blog, but most of the people doesnt have problems like this!
    Can you give me advice, how to solve this problem?
    Is there anything i can do, to make that my blog looks the same in every browser, screen resolution etc...
    Here is the link :
    http://fashionandstylev.blogspot.com/
    I will appreciate it , if you answered me when ever you have some time!

    ReplyDelete
  7. Look the same in every browser? That would be a fixed width template like the one you are using now. However, note that visitor with small screen would have part of your blog hidden and there will be a scroll bar at the bottom of the browser to scroll to see the hidden part and some visitors may be discouraged by that inconvenience.

    On the other hand, those with large screen will not have the scroll bar as the whole width will be visible thus no need to but there will be "wasted blank space".

    That was why previously most webmaster (a blogger is by default a webmaster) will configure their template to cater to the majority of visitors and that is why you should have a visitor counter and/or Google Analytics what screen the majority of your visitor use.

    Previously webmaster will optimize their template for 800x600 screen but now very few are using 800x600 and now most webmaster will now optimize it for 1024x768.

    If you widen your blog width to more than the default Blogger set (1000) visitors with screen 1024x768 will have part of the screen hidden and there will be a scroll bar at the bottom of the screen.

    ReplyDelete
  8. Forgot to add Vanja. You have large photos in your blog so perhaps you have reasons fo not minding that inconvenient horizontal scroll bar.

    ReplyDelete
  9. I use a blog generator to assemble my blog, but it wouldn't fit and so I had to learn how to edit the dimensions. I made my wrapper 1150 and divided the main and sidebars 800 and 300. I do like to post images. In fact, most of my hits are just google image searches in and gone with out a read or a comment (boo hoo). I view it on my HP Lappy and my desktop and there is NO horizontal bar. I even can see a good inch of my colorful background. It is a weird secret number deception or something? LOL Or is screen resolution of 1024 actually some other number in pix? I am happy it is a wide bodied blog, though.
    Could you help me figure out how to make my pages widget have a background when I put it on the top of my blog body? Since I have a colorful background, the text gets lost. I wanted to change it to a strip of color with text on it. Where do I find the html for the widget "page" I tried to examine the source view I can get with right click...but I am lost there is soooo much code. And when I think I have it there is no mention of color just the link names to pages...(when reading the source view)

    ReplyDelete
  10. cheers matey. that helped me out a bunch over here: Funny photos and videos blog

    thanks heaps 'ay!

    - tork.

    ReplyDelete
  11. thanks for advice and explanations! i fixed this problem by adding some code, and now it looks good even for those with smaller s.resolution! Thank you so much!

    ReplyDelete
  12. It would be helpful for others if Vanja Milicevic tells what code he added to solve this problem.

    ReplyDelete
  13. Vanja Milicevic solved "this problem"? Did Vanja solve a problem? I thought he was asking for help regarding complaints of his readers that his blog don't look the same to all his readers and I have have responded with what I understand of what he wrote and that he used the template designer SIMPLE template which is a fixed width template.

    ReplyDelete
  14. Thanks you so much. You solved my query with just one change. I am grateful to you.

    http://shabareesanchay.blogspot.com/

    ReplyDelete
  15. Good Night I admire you Peter @ Environ Man how you face and the respect you treat your work/hobby, that depends in our results blogs also sometimes work/hobby, I have adjust automatically the display of the main and left column by using <b variable name="content.width" .. value=$(page.width) ..>
    then

    body
    {
    .width=$(content.width)*0.8
    ..
    }
    .content.inner.left.column
    {
    .width=$(content.width)*0.15
    ...
    }
    so content autofits to the pages size can you do something similar in the limit 1000px bar having % bars also? for users will be a neat trick. thank you in advence sensei

    ReplyDelete
  16. Wow! That's definitely very useful and easy to follow instructions. I changed the width according to your instructions and it came out perfect but then when I modified the layout, it went back to the default size, how is that ? Could you please explain about that in your next post if possible.

    ReplyDelete
  17. Huh? That never happen to me? Let me do some more testing

    ReplyDelete
  18. thanks.. works fo me

    ReplyDelete
  19. Very very very helpful! And so easy!! Thank you, I have been searching all day for this answer and you gave it to me, fixed in 1 minute. Thanx

    ReplyDelete
  20. Hi..
    Nice Work
    I Like To Visit Your Website Daily
    Today I am Doing First Comment In Your Web Blog.
    Is It Possible To Make Money From Blogs...?

    ReplyDelete
  21. Sure you can make money from blogs provided you get sufficient traffic. General the more the traffic (visitors) the higher the income.

    ReplyDelete
  22. nice post i like it........keep writing..........plz add my blog url to your site i will also add your url to my blog..........my blog url is http://besttipsntricks.blogspot.com/

    ReplyDelete
  23. Thank You! I needed more room for my google calendar in my left column, now it fits better and I don't have weird event corruption.
    I went to width 1250 and then went into template designer>adjust width and reassigned left column width.
    Can't wait to find more treasure on your site!
    http://twoeagleskitchen.blogspot.com/

    ReplyDelete
  24. In my blog it says that not applicable with this template..
    plz look at my blog and tell why is it showing so:
    http://madh1261.blgspot.com

    ReplyDelete
  25. Your template is probably pre-template designer and so you use old method to change width and Blogger then don't limit like in this post the maximum width to 1000. Should be easier.

    ReplyDelete
  26. my template blog using simple no. 7. add note in sub dashboard button not applicable for this template, basic color white, why? what can i using upload image for background weblog. Legal or Illegal ?!

    ReplyDelete
  27. This post of yours is very informative, Peter, and contains all the answers I've been looking for.

    I link Medium 640px photos from my Flickr account to MY REAL BLOG. I would really like to have images appear somewhat wider, but the next step up with Flickr is Large 1024px. The latter required me to use the code you provide here with a width of 1160px to allow a reasonable border at the sides of images when doing a trial on MY TEST BLOG.

    NOTE that I have no sidebar at all on either of these, and have all links and the blog archive at the bottom of the page. Otherwise things still wouldn't fit on the test blog.

    Your stating of the maximum pixel dimensions normally used by webmasters, and the reason behind the Blogger Template Designer default width has made me decide for now to keep MY REAL BLOG at slightly round the latter (and actually slightly under, as 920px wide), so as to not alienate tablet users who it seems would have to scroll horizontally to see each side of the blog.

    To illustrate the above.

    My test blog (extra wide): http://aggtestblog.blogspot.com/

    My real blog:
    http://www.andrewgraemegould.com/

    ReplyDelete
  28. Congrats Andrew, you have show full understanding of what I wanted to convey about widths and templates.

    ReplyDelete
  29. What an awesome blog! First of all i would like to say thank the author for sharing such a valuable information!

    Event Templates

    ReplyDelete
  30. thanks that was really helpful

    ReplyDelete
  31. It worked! Thank you so much.

    ReplyDelete
  32. Thanks, will be trying it when I get a moment....

    ReplyDelete
  33. hi.... I have tried this and it does not do a thing to my blog.... i copy the code and change the 1 number and nothing happens!

    ReplyDelete
  34. Hi Peter,
    I've gone through many of your posts. Most useful for new bloggers like me. I've changed the width of my blog to 1260px. You can have a look at it http://oracleapplicationsfunctional.blogspot.com/
    You are really doing wonderful work.....Keep doing. Thanks a lot for your useful tips.

    ReplyDelete
  35. thanks, it was really help me

    ReplyDelete
  36. Hi Peter

    I have searched around the web for an answer to my question and each time I get your website - so please dont feel obliged to answer this question, but it appears you are the GO TO MAN!

    http://www.chezlieve.com/

    you will see that this is a "simple" template with blogger - with only one column. I really want the blog to be 900px or more. I adjusted the width within the design template and all was fine except for some reason the text field did not change size, it appeared to still be 700px.

    I have been through all the code on here, it works great to adjust the overall size of the blog, but I can't find a way to adjust the main body text. Unusually though, when I change the width. all images within the body copy move (they are centre justified) but text does not and I have a huge white space of approx 150px to my right side of the screen.

    any thoughts?
    I have a screen print to illustrate, but obviously cant post.

    Thanks so much in advance!!!

    ReplyDelete
  37. follow here...
    great job..cool

    ReplyDelete
  38. Okay, used this on my college advice blog but for some reason max width is still 1500px. So my blog always looks off center, and the sideways scroll exists in the browser. Any ideas how to fix?

    ReplyDelete
  39. hello, i stared my blog in 2009 and at some point followed some advice changing some piece of code to enlarge the photos i upload to flickr. not huge maybe 640 wide. now that blogger has changed, my photos that are 640 wide on flickr look cropped on my blog. when i tried to "widen" my blog in template designer, it just says "not applicable for this template." I don't really want to change templates, or change the look of my blog at all, I just want the pictures to be wider/bigger. Can you please help me?

    ReplyDelete
  40. Likely your current template is a fixed width one. You can go edit the main column width by editing the template

    ReplyDelete
  41. brillant piece of information, I had come to know about your web-page from my friend hardkik, chennai,i have read atleast 9 posts of yours by now, and let me tell you, your webpage gives the best and the most interesting information. This is just the kind of information that i had been looking for, i'm already your rss reader now and i would regularly watch out for the new posts, once again hats off to you! Thanx a million once again, Regards, photoshop

    ReplyDelete
  42. Can you give the width in a relative way? like 80% (of the resolution of the viewers screen) because it says illegal variable if I try this. Can someone help?

    ReplyDelete
  43. If you use fluid width template, visitors will see the whole width (100%) of the blog whatever screen resolution they have.

    ReplyDelete
  44. This comment has been removed by a blog administrator.

    ReplyDelete
  45. Hi,I am using google blogger... I applied ourBlogger.com Template.....Why my blog is displaying "Not applicable for this template" What should I do. Can i change template now?? Can u please tell me...

    ReplyDelete
  46. You probably is still using an old pre-template designer template. You need to change to the newer templates. Go to Dashboard > Template then chose a suitable template.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics