Blogger has now introduced an easier way to put a picture in the Blog Header. Previously you had to either put in an image widget inside the header or put the link to the picture as a background property in the CSS for the header-wrapper. This required more manipulation of the template at the coding level. Instead now you can do this in the graphical interface of the Blogger Layouts............
The new Blogger introduced the graphical interface for editing your template. Instead of going into Template------>Edit Html as in old Blogger it introduced a 'Layout' link on the Dashboard itself. So all you have to do is to login to dashboard and click on Layout link and you will be taken straight to the Page Elements tab.
The Page Elements tab is a new subtab of the Templates tab where you can add new page elements. There are some 14 types of Page Elements which you can add to various sections of your blog. BLOG SECTIONS
Your blog is divided into the following sections :
1. Header.
2. The Sidebars.
3. The Body/Blog Posts.
4. The Footer.PAGE ELEMENTS
You can place as any Page Elements as you like in the above sections depending on screen space. Todate the various types of Page Elements are :
1. Newsreel (New!)
Automatically add current headlines from Google News to your blog.
2. Video Bar (New!)
Display clips from YouTube and Google Video for your readers to watch without leaving the page.
3. List
Add a list of your favorite books, movies, or anything you like.
4. Link List
Add a collection of your favorite sites, blogs, or web pages.
5. Picture
Add a picture from your computer or from somewhere else on the web.
6. Text
Add some words to your blog - like a welcome message - with our rich text editor.
7. HTML/JavaScript
Add third-party functionality or other code to your blog.
8. AdSense
Earn revenue by displaying relevant ads on your blog.
9. Feed
Add content from a site feed to your blog.
10. Labels
Show all the labels of posts in your blog.
11. Logo
Choose from a variety of Blogger logos to add to your page.
12. Profile
Display information about yourself.
13. Blog Archive
Display links to older posts.
14. Page Header
Display your blog's title and description.
Blogger may add more to this list from time to time. Whenever you wish to add something to your blog you just have to decide what type of Page element it is and choose that option. In general if you cannot think of an option just choose the Html/Javascript Page Element and paste your code in it.
NOTE : When you upload a new template to your blog the code for the Page Elements is added but they are empty and you have to add the data later. Also when you backup the template the content in the page elements is not saved along with the template. You have to backup the Page Elements data separately.IMAGE IN HEADER
The new addition in the header page element makes it easy for you to add picture to your header. Login to dashboard and click on Layout. Then click Edit link in header and you will get the various options. Click Browse to load a picture from your computer and then Upload. You can even choose to put the picture in the background of the Title or show just the picture. See picture below :
PICTURE IN HEADER SERIES
Add Picture to Header.
How To Customize Header.
Fixed Headers in Blogger.
Clickable Headers in Blogger.
Header for Dots Template.
Many Headers - One Blog.
Flash in Header.
Animated Gif In Header.
3-D Banner In Header.
Adsense Link Unit In Header.
Remove Title in Header.
You can watch a screencast on adding an image to the Blogger header at Blogger Buzz: Learn how to add an image to your blog's header
Labels Classified.
Picture In Blogger Header | Update.
New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!
Like this article? Subscribe to the RSS feed!What have you to say?
17 VIEWERS CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT.
EMail this post to a friend?
Post Labels
Labels: Blog Header, Picture in Header |Bookmark This Post
Related Article
Skip to top of post.
YOUR COMMENTS
Buy Vin a Beer :-) if you liked this post.
17 comments:
This blog is fantastic!
I think I'm using an older version of blogger. I tried to follow the instructions on removing the no follow tag and discovered that the code was written differently and the tabs you spoke of in the template section of the dashboard weren't there. I still found that no follow tag, though, and took it out!
I've been afraid to hit that "customize" link for a new template because it warns you could lose some changes. I'm technologically useless and it takes me forever to do anything, so I'm loathe to lose anything.
Do you have a blog post related to making that change without losing stuff?
Thank you so much for doing this!
Laurie
Your blog has been approved. Please add a link back to enewss.com with title 'Indian blogs' and anchor "Indian blog aggregator"
Best regards
sri
What if you want to use a flash movie in the header. Does blogger support that. I love the Loneley Tree one on this blog & have been wondering how to do it.
http://lauradebenedetto.blog.dada.net
Candace,
Take a look at :
Flash for Blogger
Very good news THAnks.
i have used pictures header before accroding to your old post. and if i want to have two header pictures is this ok ? can i use both or i have to delete old header picture.
thanks in advance
DZI BEADS,
Click the link "Many Headers -One Blog" under 'PICTURE IN HEADER SERIES' at the end of the above post.
This is great, I hadn't seen it!
But I'm wondering if the image must be of the exact dimension of the header, which I can't find (I'm using a rounders 3 template).
P.D: Very useful guide, there’s so much to discover!
I just uploaded a different picture onto my header and I can't find the buttons to adjust the placement of the blog descript and formatting the size of the actual picture. I've tried resizing, playing in editing the html and all that stuff, but I'm having no luck.
HELP!
hi
great site. it's been really helpful.
i'm having same problem as AWE i think.
i've switched from picture as a page element below the header page element to a pic behind titles in header. worked fine except there is no shrink to fit function. i have tried changing size of pic before uploading but it isn't making any differece once i add it to the page element.
my blog is http://leftofnarnia.blogspot.com
i want the pic flush, as you can see, it's overhanging on the right hand side. so, advice on shrink to fitting it would be appreciated.
thanks.
LB
Loserbaby,
I see the picture correctly fitting in Firefox2.
Help! I'm a new blogger and I am confused. I want to add a photo to my blog - i went through the steps to elements, etc. The area where you click on browse to add a photo from your computer does not have a browse button. It only has a horizontal scroll bar! What do I do??
Thanks so much!
my email is clutterbugstudio at comcast dot net - my blog site is clutterbugstudio dot blogspot dot com - if that helps any.
Thanks, carol
Carol,
Try refreshing the cache. See :
http://betabloggerfordummies.blogspot.com/2006/10/how-to-refresh-your-blog-page-in.html
Use