Picture In Blogger Header | Update.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
Like this article? Subscribe to the RSS feed!
Travel blog - North to South 3: The best post ever
-
Travel blog - North to South 3: The best post ever: This post is so good,
that I am going to share it in various social networks.
27 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 Firefox browser.
How can i make my header's picture shrink to fit when i minimize my IE browser?
currently when i minimize my browser, the border of the header is auto fit to IE size, but my picture is not.
Anonymous,
First resize image on PC before uploading to header :
http://betabloggerfordummies.blogspot.com/2007/06/10-quick-tips-for-smarter-blogging.html
Hi thanks for the guide, i did everything, except when it came to uploading the picture, i chose upload from the web and then pasted the url I got from picasa, when I clicked on save changes, a triangular sign came out which said please specify an image. What am i doing wrong?
Pandoras Box,
Try uploading picture to Photobucket.com and pasting the url you get from there.
I have played around with this all darned day and I still cannot get my photo to be as big as the title box.
Here is my blog link:
http://itsmythingy.blogspot.com/
I've tried a lot of things and it still won't get big {it did it for me a couple of days ago and now it won't}
Thanks! Elizabeth
Vin--
hope you are still answering questions on this thread! I am using the Stretch Demin template and trying to add a picture to the header, but with size (width) is a problem. I want the picture to be the same width as the blog itself, but can't seem to accomplish that. I get it sized right in one browser and it looks wrong in another. Can I fix the width? Oh and if I use the "shrink to fit" the picture is smaller than I want.
Thanks--
cps
URL: http://thetuningroom.blogspot.com
CPS,
See how to center header in stretch template.
Vin--must be I am just slow--my picture was too wide for the header--adding this code didn't seem to impact it at all. So I reloaded it using the shrink to fit and your does did center it, but then when I went to increase pixel size it just moved it tot he left. Is it that I need to be starting with a certain size picture for this template? If so, how do I determine the right size? Thanks again so much.
Vin--ignore last question--figured it out with help from another of your pages--thanks!
cps
Hope you're still answering on this. I've created a picture to use for my header but it's not showing up. I've tried from my pc or from flikr and it's not working. I've tried different sizes and it doesn't work either. Not sure why it's not showing up. I'm using the minima template. Here's my blog http://noniewooley.blogspot.com/ I've also tried deleting all my cookies and stuff and that didn't help either. HELP!!! I'm so frustrated!!!
Nonie,
Try adding picture as a background image to header in the CSS.
I hope you still check this section. :)
I uploaded my photo for the header, but the rounder from the template shows in the background. How can I fix this? Thanks in advance. Here's my blog so you can see what I mean:
http://dcmumbosauce.blogspot.com
DJ Heat,
You have to delete the code in the CSS which is responsible for the corner graphics in the Rounders template.
Have a look at it in The Three Column Rounders Template.
Hello vin, hope you see this... im having a problem with this on my blog i just create it. i upload the image in the header section and i save it, but in the blog never appear the image in the header, i clear the cockies etc but nothing, its a posibility that its a way to fix that without coding or edit the code?
thanks... and sorry for my bad english.
eXodi4,
Try this method of adding image to header in CSS.
CLICK TO LEAVE A COMMENT..... :-)
Skip to top of post.
Who is talking about the above post?