UPLOAD PICTURES TO BLOG
To directly upload an image to the header login at Blogger.com and click on 'Layout' link on Dashboard. On the Page Elements tab which opens click on Edit link in the Header widget. In the popup window click on browse button to select an image file from your PC and then click on Upload.
CENTER PICTURES
To center your image header in templates which occupy the middle of the page you need to upload an image the width of which is the same as the width of the header-wrapper or outer-wrapper specified in the template. To do this go to Edit Html subtab of Template tab and scroll down till you come to the code of the header or outer-wrappers. Look for the width line and note down the number in pixels (px) specified. Then on your PC load your image in an Image editing program like Irfanview and resize the width to that many pixels.
In a template which stretches the full width of the page like the Stretch templates or the Sand Dollar template add this code :
#header-inner a {width:770px;margin:0 auto;}
immediately after this code :
/* Header
----------------------------------------------- */
#header-wrapper {
margin:0 2%;
padding: 15px;
margin-bottom:15px;
background-color: $headerCornersColor;
text-align: left;
}
Preview, Save Template, Clear Cache and View Blog.
SHOWING ANIMATED GIF IMAGES
If you want to put animated images in Blogger in the header or anywhere else make sure to upload them to a freehost like Googlepages or Photobucket.com. Because images uploaded at Blogger are hosted at Picasawebalbums and they do not support animation at present. Upload them to Photobucket.com and copy their link and then paste the link in the image upload dialog box of the header widget.
REMOVE HEADER BORDERS
To remove the borders round the header go to Edit Html subtab of Template tab and scroll down to this code :
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
In the line for the border change 1px to 0px. Save Template. Clear Cache and view blog.
10 comments:
Hehehe i'm more confused now than ever but very interesting,Thanks
Good stuff! I want to make my image slide to the left, instead of right in the center. My experimental blog did this automatically and I like it, but don't know how to make it happen on my other blog. Can you help me?
Roxylou,
What is the blog address and exactly what do you want to do?
Vin I am struggling I can not get my header centered!! I did not have the description code you mentioned in your post so I added the line you mentioned then I even added all of the HTML you wrote (I hope what I am saying is making sense) I also have resized my picture to several different sizes and nothing is working. I noticed in my HTML that is did say something about Sand dollar. my address is imafirsttimemom.blogspot.com Thanks for your help
New Mommy,
The picture seems to be too tall! Resize it in an image editor to 1024(w)x300(h). Then add it to background of header in the CSS part of the template.
Vin
Well I put my picture on photobucket and I also resized my picture and I went to the HTML and I have no code that matches the code description that you wrote on your website. I have found this true for many other things that you offer on your website so I am not able to complete and changes. Do you know why this is?
New Mommy,
Your blog looks much better now. :-)
Hi Vin,
I can't seem to get my header to be in the center of the page.
I've tried finding the width from the header-inner but I can't seem to find it.
What I see on my template is this :
#header-wrapper {
margin:0;
padding: 0;
background-color: $headerCornersColor;
text-align: center;
}
#header {
margin: 0 2%;
background-color: $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
position: relative;
}
Could you kindly help me out,if it isn't too much of a trouble to you.
Thanks.
My site at Its Not a Weekend;Its a Lifestyle
Napaboaniya,
Have a look at the header tip in 10 Quick Tips for Smarter Blogging.
cool stuffs man thank for this useful blog
CLICK HERE TO LEAVE A COMMENT.
Skip to top of post.