Got a question from a blog reader about how to go about finding the width of the blog Header, so I thought I might as well make a post to let more people know about it.
To get the width of the blog Header, sidebars, main column, sign into Dashboard. In the section for the relevant blog, click LAYOUT tab (Update: LAYOUT is now DESIGN), then click EDIT TEMPLATE. This will open the template editor window. Search through the templates for the following:
#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#main-wrapper {
width: 400px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
These codes are from the template of this blog. The first block of codes tells me that the width of the Header is 750 pixels. The second block says the main column width is 400 pixels. The last two block of codes tells me that both the sidebars are of width 150 pixels.
How can I make tmy blog wider? The width it is now crowds some of the sidebar content. If there is a 3 col version of this template in new blogger, all the better! Thank you Fake Janice Combs
ReplyDeleteFor instructions on adjusting the widths of sections of the blog, refer to How to change the width fo the main column and the sidebar.
ReplyDeleteRegarding 3 column templates, there is now plenty for you to choose from:
New Blogger 3 column templates modified by Charlemagne Stavanger
Dots New Blogger 3 column template with Header
Mew Blogger 3 column templates modified by Ramani of Hackosphere
New Blogger 3 column templates by Isnaini
New Blogger 3 column templates by Thur
Ramani's 3 column fixed width Neo New Blogger template.
BTW, if you are worried about the wide space you see in this blog when viewing with a wide screen (1024x768 and above), there is a reason for it. It is to take into consideration visitors who uses small screen (800x600). If you want to observe how such visitors see the blog, try typing or copy-pasting
javascript:top.resizeTo(800,600)
into the address bar and press the ENTER key (FireFox and IE6). The window will resize to 800x600
Also, read this post: What is the best template for my blog. However, that is my opinion. You may have a different opinion and may want to do otherwise.
Peter (Blog*Star 2006 and 2007)
Testing Blogger Beta (now New Blogger)
Hi Peter. Help me...please. I have not been able to get into my blog to edit a post. It's so frustrating. I keep getting the Apache error message with http status 500 message. do you know what I am referring to? Please help me. My email is : qoryiman@yahoo.com.sg.......My blog is www.solelyseoul.blogspot.com
ReplyDeleteThanks.
Hi Aini,
ReplyDeleteSee if using a different browser will help. I has helped me (and others) in solving a lot of different problems, cannot login, cannot upload photo, cannot open a page, cannot see Add a Page Element in the Layout, etc. Refer to
What to do when your cannot publish post, cannot login, cannot upload photos, etc.
Why you should be using more than one browser.
If you are one of the 80% of surfers still only using Internet Explorer, it is time you get FireFox. You can download and install FireFox with the Google toolbar by clicking the "Browse the Web better with FireFox with Google toolbar" text link at the top of the right sidebar of my blogs.
Peter (Blog*Star 2006 and 2007)
Dummies Guide to Google Blogger
"online book" in progress
Hi Peter, thanks so much. I have tried using firefox, and now I am getting this error message: Status code: 1-500-19 .
ReplyDeleteIs there anything that can be done?
Argh!!!!
Hi Aini,
ReplyDeleteTry other browsers, There are plenty. I have IE, FireFox (my favourite), Opera and Flock. Recently, I have been having good experience with Flock and Blogger.
If this still doesn't solve your problem, post your problem in the Google Blogger Help and hope to catch the attention of Blogger Employee. Otherwise, try to catch Blogger Support attention (just as hard). How to contact Blogger Support, but you will have to try your best.
Peter (Blog*Star 2006 and 2007)
Testing Blogger Beta (now New Blogger)
Hii Peter,
ReplyDeleteI wonder, if you could help me in getting my blog's width fixed on http://visitformoney.blogspot.com
I wished to reduce the gap between main bar and side bar, hope u got what i mean to say. As always before, i m waiting for your reply. THank you
Best Regards,
Eliena Andrews
Hi Peter, It is so awesome that you offer soooo much help to those of us learning to use blogger. I have tried adding a graphic to my header, but it doesn't fit, as you will see. Is there any way I can stretch it to fit by changing the size of the picture I've chosen? Also, most times when I try to find the code that you suggest in my template, I can't find the exact code you mention. Thanks for your help sooooo much!!
ReplyDeleteHi Jewel,
ReplyDeleteThere are various ways of adding graphic to Header. Some like to incorporate the blog title into the graphic and delete the text title. For SEO purposes, I think that is a bad idea and I would avoid it if I can. Here are various alternatives:
Adding graphic, ads, search box etc. to blog Header
Adding graphic background to blog Header
Adding image or logo at the side of blog Header
Another way to add graphic to blog Header (this I think need editing which I will do when I get the time. It may fit what you want to do)
Special fonts for your clickable image Header without removing text title.
Peter (Blog*Star 2006 and 2007)
Earning Online
Hi Jewel,
ReplyDeleteForgot to add, if you need to resize your graphic, Irfanview is a very good free photo editor which I use extensively. If you use <img> tag to add your graphic, you can resize by adding the attribute width="W" where W is the width in pixels. The height will adjust automatically to keep the aspect ratio constant, meaning the image will remain undistorted.
Peter (Blog*Star)
Testing Blogger Beta (now New Blogger)
Hi Peter,
ReplyDeleteI have 1 question for you, if you were so kind to help me.
My question is related on how to find the width of my blog Header, sidebar and main column, as in my template the codes appear with percentages like this:
#header-wrapper {
margin:0 2% 5px;
border:5px solid $bordercolor;
#main-wrapper {
margin-right: 2%;
width: 67%;
float: right;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float
#sidebar-wrapper {
margin-left: 2%;
width: 25%;
float: left;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float
¿Do you know the percentages are relative to what? ¿How can I calculate the measurement in pixels?
My Blogger Template Style is: Minima Lefty Stretch
Thanx
Hi Mia,
ReplyDeleteThe template you are using is a fluid width template and it is not possible to find the width as it will be dependent on the screen resolution (large screen or small screen). There are advantages and disadvantages of fixed width and fluid width templates. The advantage of fluid width templates is that the site adjust to the screen of the visitor, and they will be able to see your whole blog/site without having to scroll horizontally. The disadvantage is you never know how your blog/site will appear unless you take the trouble of viewing it in different resolutions. I don't know what resolution you are using but I suspect it will be a large screen. If so, type or copy-paste this into the address bar in your blog/site to see it as a person with a small screen will see it:
javascript:top.resizeTo(800,600)
Which type of templates depend on the individual. Me, I prefer fixed width template because I know exactly the width of things I can put into the post/sidebar without worrying about problems when viewers with different resolution visit my site.
For more information, see What is the best template for your blog. Please note that this is a subjective opinion plus things may change as more and more surfers change to large screen. But I feel the small screen will always be with us because of laptops, although what percentage one can never tell.
hey peter! i am easily able to adjust the width of the header but iwant to change the hieght as well!! what to do now? thanks in advance!
ReplyDeleteHi Anuj,
ReplyDeleteI think height is fluid, at least for template of this blog. Depends on length of description and what you put there. Eg. Putting search box in Header made the hight higher.
Peter Blog*Star
Tips and Tricks for Blogger or "Son of Blogger Tips and Tricks" slotted for conversion to custom domain
Hi Peter,
ReplyDeletePlease help me. I am very new to blogger. I need your precious help in setting up my blog. I am using minima
1. Please tell me how to resize "HEIGHT" and width of the header-wrapper to fit my header image. Right now I'm able to change only width.
2.When the width is increased it is not getting centred in the page... How to fix it?
3. and lastly.... what should be done if I want to insert an animated gif as header instead of an image...
You have been so resourceful. Kindly help.
Hi Iqbal,
ReplyDelete1. Please tell me how to resize "HEIGHT" and width of the header-wrapper to fit my header image. Right now I'm able to change only width.
I use the New Blogger Minima template modified to 3 column by Ramani of Hackosphere. As far as I now, you can control the blog Header width via CSS of the template. I have used lots of template before, and I believe practically for all of them, the height adjust to what you put in the Header. Eg. Write a long description or like me, put a multiple-site search box and the height become higher. Isn't that the case for your blog? Feedback welcomed.
2.When the width is increased it is not getting centred in the page... How to fix it?
My experience with the above template (the original template has blog Header width less than total width of content) is that when you change the width, it is automatically centered, but I supposed it depend on he template CSS. Again, feedback welcomed
3. and lastly.... what should be done if I want to insert an animated gif as header instead of an image..
Add animated .gif images to Blogger blog
Peter Blog*Star
Digital Candlelight Vigil
Hey Peter,
ReplyDeleteI understand that usually the header HEIGHT would increase or decrease depending on the header picture... but on my case, it doesn't. It's a fixed height.
How to I fix this??
Btw, I'm used a Minima layout and then tweaked it to 3 columns myself. Could it be that I messed with the codes along the lines?
Thanks in advance!
Joy
Hi Joy,
ReplyDeleteI actually want to do some tests before I answer but unfortunately Blogger seem to be not having its best days these days. See Cannot change or edit template.
Reason why I want to do 2 tests is because the answer to your question I believe will depend on the template but I need to be sure. If you want to pursue this matter, remind me in a few days.
Peter Blog*Star
Blogger Dough
(Blogging helped my put 2 sons through college on my pension and if not for blogging, I would have been in financial difficulties. We want to help you do the same)
Hey thanks for the reply. I think I've managed it already. Went ahead and added the "height" code into the header code. It's still not self adjusting though. Oh well. Thanks alot anyways :D
ReplyDeleteBtw, it's great that you're helping others with your tutorials :)
PS: Yeaps, thats me playing the guitar :).
Hi Joy,
ReplyDeleteOK you found the answer. But you didn't mentioned about anything on my comments regarding youths?
Peter Blog*Star
Blogger FAQ (Frequently Asked Questions_
(Blogger FAQ in progress. More will be added as I have the time)
im new in blogger
ReplyDeleteI found many answer here
thank u
i learn lot here
thanks alot for ur info
ReplyDeleteWhen i try to widen the main body of my blog, the sidebar gets moved to the very bottom of the page. Why does it do this and how can i fix it?
ReplyDeletePlease refer to Changing widths of blog, main column and sidebar
ReplyDeleteI just realized that my 3 column that looks great in Firefox does not work in IE. I have tried everything, I have read through your blog looking for the answer, I have looked at the source code for other 3 tier, I have changed size of columns, headers, everything but I can't get the 3rd column to move up in IE so I gave up and put it all back the way it was. Can you point me to where/how to fix that please!?! Thank you. it's http://hiporganicmama.blogspot.com btw
ReplyDeleteVery likely you have something in your posts or sidebar that is too wide for the column it is in. Refer to sidebar pushed to bottom of page or troubleshoot sidebar at bottom of the page
ReplyDeleteHi! I finally figured out the 3 column template, but the only problem is my header will NOT widen up- I tried what you suggested but it won't budge. Please visit my site and try to help me??
ReplyDeletewww.beautiful-vegan.blogspot.com
Thanks,
Lyn
You apparently are using a modified Rounders 4 3-column template. Rounders uses graphic to get the rounded column and this is harder to modify.
ReplyDeleteHi! Peter,
ReplyDeleteNeed your help!
I can't edit my post body width? i can edit sidebar ,header, footer, outer wrape except post body, Its seem does not change anything if i try to increase the px/% property.
i can't edit/remove the adsense ready column at the top right sidebar? Seem default by the designer.
Please take a look at my site: http://whatsoffer.blogspot.com
You may email me to whatsoffer@gmail.com
I recently came across your blog and have been reading along. I thought I would leave my first comment. I dont know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
ReplyDeleteMargaret
http://guitarlearntoplay.net
I found your blog and helpful insights through Blogger search. I am trying to increase the size of my header photo, but am unable to find the size of my header. I have opened my blog up in Dashboard, but can't find a LAYOUT option, which you indicate is the way to find the header width. What should I do?
ReplyDeleteLAYOUT is now DESIGN.
ReplyDeleteHi, I use the following blog template
ReplyDeleteBlogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
and could not find tags like #sidebar or#sidebar-margin.
in all the posts concerned with altering the width of blog, these 2 r mentioned. Can you help.
Thank you for your time.
With the new template designer, changing width is as easy as click-hold-slid to the width you want. You don't need to go to the template. It can be done via the LAYOUT (DESIGN)
ReplyDeleteFor me and my site that isn't working. Could someone please help? I'm trying to stretch a bigger image all across the top of the screen but while I can increase the size it will not go from left to right. I'm doing this at santiagoicc.org .
ReplyDeleteHere's the code:
Here's the code:
ReplyDelete" ?/*
Theme Name: 03 Plantilla Wordpress 3
Theme URI: http://www.juguetipedia.com
Description: Plantilla Wordpress 3
Version: 1.0
Author: http://www.juguetipedia.com
Author URI: http://www.juguetipedia.com
*/
/**********************************************************************************/
a, a:hover { color: #8ab459; text-decoration: none; }
#content {
width: 720px ;
overflow: hidden;
text-align: left;
border-top:solid 1px #CED4CA;
border-bottom:solid 1px #CED4CA;
border-left:solid 1px #CED4CA;
border-right:solid 1px #CED4CA;
float: left;
margin: 5px;
padding-top: 0px;
padding-left: 15px;
padding-right: 5px;
padding-bottom: 30px;
background: #ffffff url(images/header.jpg) no-repeat top left;
}
/********************************************************************************/
#wrapper { padding-left: 30px; }
#hode {
width: 400px;
color: #FFFFFF;
height: 170px;
text-align: left ;
clear: both;
margin: 5px;
padding-top: 10px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
background: transparent;
}
body {
width: 1000px;
background: #F0F1EE url(images/back.gif) repeat-x;
font: 11px "Lucida Sans Unicode", "Lucida Sans", verdana, arial, helvetica;
color: #888;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
#sidebar-1 {
overflow: hidden;
float: left;
width: 150px;
}
#sidebar-2 {
width: 170px;
background: #ffffff url(images/header3.JPG) no-repeat top left;
}
#logo {
width: 140px;
padding:10px;
}
/********************************************************************************/
.sidebar {
text-align: left;
padding-top: 10px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 30px;
border-top:solid 1px #CED4CA;
border-bottom:solid 1px #CED4CA;
border-left:solid 1px #CED4CA;
border-right:solid 1px #CED4CA;
float: left;
margin: 5px;
background: #ffffff;
font-size: 0.9em;
}
...
Seem like you are using a Wordpress template for a Blogger blog? Before that can be done, the template need to be edited and I am not the person to do it.
ReplyDeleteCan you help?
ReplyDeleteI followed your instructions on scribd, and I have got the document on my blog.
However the document is in a very small window and requires a lot of scrolling.
I have tried changing the height and the scrolling parameters but this is not working.
Here are the links
http://www.scribd.com/doc/55602316/Iap-Guide-Book-on-Immunization-Iap-Immunization-Time-Table-2011
And the blog post
http://dailydose4kids.blogspot.com/2011/05/latest-indian-academy-of-pediatrics-iap.html
Can you help ?
Would this Test embed Scribd pdf with iFrame be an improvement? From what I see to make it easily visible you will need to change your template to allow wider main column then editing the width and height when you get the embed script from Script.
ReplyDeleteThe other alternative is to provide for a link to the full screen off your blog.
i want to make my blog like your's 4 coulamn
ReplyDeletehow can i and see my blog
www.bcatmdu.blogspot.com
and give me some sugestion to improve
Update your template to a template designer template and then go to LAYOUT to chose a 4 column template. Now very easy, no need to edit template
ReplyDeleteHi Peter,
ReplyDeleteI have been reading alot about your HTML code on this blog whenever I need to fix my blog but this time if you look at my blog
www.winna-craftitude.blogspot.com
The sidebar width which is orange is taking alot of space.
I wanted to reduce the width of sidebars as it makes the main blog column clumsy.
Thank you for your help.
Hey peter, some corrections.
ReplyDeleteIts actually the orange background behind the main post which I wanted to reduce.
Though I am not very good in explaining, but after seeing my blog you will understand maybe.
Thanks again
Liang
Hi Winna, are you using the Template Designer template? If so the solution is very simple - Dashboard > Design > Template Designer > Adjust width.
ReplyDelete