How to put a picture where your title is with new blogger blogs

This is what I hope to be one of the easiest and coolest html hints your ever going to see. Its only for the new blogger templates. Its designed for newbies to put a picture where their title is. If this is you then...

So your wanting to put a picture where your title is. You feel you can create that 'magic' picture but you know its going to be just too hard to swim through all the oodles of code to put a picture in.

Well this is the easiest and simplest way of doing it.

I developed this method through my own observations and blogging experience.

Firstly If you haven't converted to the new form of blogger then this trick isn't for you. In fact if you're not with blogger, then this isn't for you either.

This is basically a one trick pony, its for new blogger but its very effective.

If you have a new blogger template and you would like to swap the title and default description with a picture then this is how you do it.

First have a look at your template via the template tag in the blogger menu. You get to the blogger menu by going to the dashboard and clicking Layout

Ok now when you've clicked Layout you will see that your template is broken up into 'regions' or widget plug in areas which are actually a fantastic idea by Google.

You'll notice at the top is Nav bar. This is where you can change the color of the 'Navbar' which appears at the top of your blog.[try it if you like].

Now the next thing I'm going to tell you is the Golden Rule of what to do before you make changes to your blog. If you don't do this you're really just 'stoopud' and sending emails to Google isn't going to help you.

Whilst your on the Template 'Add and Arrange Page Elements' page you'll see up the top a tab that says Edit HTML well go ahead and click on it.

Now where it says Back Up / Restore Template click the Download Full Template

Save it to where you usually save your files for your blog. Now you have just downloaded a back up of your template. What this means is when things go horribly wrong you can 'back up' to your last saved template back up and not have to start all over again.

I can't emphasize how important this is. In fact the more complex the coding or confused you feel, the more you should make multiple back ups of your work. That way you end up only losing the last 'half an hour of work, because you did a back up 30 minutes ago...

Ok now that we have the safety of a back up we can proceed to do some really easy but cool blogger hacks.

The first hack we are going to do is to turn the 'Header' widget region to being 'editable'.

Yes just like the widgets on your side bars you can actually turn the header widget 'on' and edit it.

This is how you do it.

Go to Edit HTML again.

Now look carefully for this particular piece of code.

To See the code clearly click on the picture

You ll find it towards the very bottom of the html just after the 'Body' tag.

To See the code clearly click on the picture

Once you've found it change the things that are in red.

Change max widgets from 1 to for now '3'.

Change showaddelement from 'no' to 'yes'

Change locked='true' to 'false'

After you have done this, click on preview and if you don't notice any change, then that's good, click on SAVE TEMPLATE.

Ok you have now just made your 'header' editable which is actually quite groovy.

You can see that its editable because when you go to 'Add and Arrange Elements' you will notice that above the Header region there is now a Add a Page Element label which of course means you can add an element.

Ok Now that we have this done, the next thing to do is if you haven't already filled in a short description in your header description click on header Edit button and do it.
(If you want a description)

There's now actually nothing stopping you from actually adding a picture into the header and displaying it with your title and description. Which one of the two elements is on top your title with its description or your picture is totally controlled by the order of the two widgets in the Add and Arrange Page Elements .

To create a picture widget simply click Add a Page Element.

When the choose a New Page Element dialogue comes up click on add a Html/Java Script element. In the html window you can add a picture.

I generally for a 'mast photo' would leave the title blank. Using html insert a image in the html area.

If you don't know how to do this, then this is a quick example:

To See the code clearly click on the picture

I would recommend putting a tiny picture in just for the moment until we sort a few other things out.

Super New Blogger Hints: A lot of folks never realise that you can have blogger pages which are saved as drafts that you never publish but which contain important pictures and of course web addresses which you can use to 'furnish' your blogger blog. The advantage with this is that because Blogger hosts the pictures such as your new mast picture they load quicker than if you use a '3rd party 'free photo hoster'. So if you're looking for a way to host your brand new spanking Mast head, host it via a blogger draft page! If you are using a big picture blogger displays a smaller picture, when you click on it it shows the larger one. For a large mast we don't want bloggers 'smaller' display picture we want the big wide one. But where is it? Go to the html view of the post where you uploaded the picture.

In the html code view for the picture you will see there are actually two picture addresses.

One is the small picture, the larger picture is first and is notated by a href=...."address you actually want". When you get this address, there is one little thing that needs to be changed.
the address will be really long and end in .jpg or .gif.

the last bit of the address is: ..../s1600-h/mynewbigpicture.gif when you see this you will know where to do a careful edit. you have to remove the '-h'.

so the address reads ....../s1600/mynewbigpicture.gif

OK, now if you would like to have your picture only and not Bloggers title of your blog and the description as well, (which I understand due to it getting a bit crowded up there) then there is a few ways to do it.

Some people recommend simply deleting the 'header1 widget which contains your title and your description.

To me, this is a really poor choice. I'm not going to get into it but suffice to say that Google the lovely company that brings us Blogger and can make or break a website (or blog) by the use of spider search bots actually uses your title and description as indexing criteria in the blog code. Its in the code and plain to see if any html cowboys want to grab that bull by its horns.

So unless you happen to know how to write your own meta tags (which you don't because if you did you wouldn't be here, your going to end up being more invisible than KFed handing out rock concert tickets.

So how do we keep our title, our description (which is used by Google to help 'index your site') yet clear up the top part of your now 'busy' space blog.

This next hint is really cool!

I'm going to show you how to put your Title of your blog and your description into your Footer.

Your Footer is the long thingy me-bob at the bottom of your page. Its where most people don't usually see if you have a lot of posts on one page. But it is where we can put your description and title, and which just happens to make you look like you know what your doing when people see it down there.

Ok, now that we have made the Header 'editable' you if your in Add and Arrange Page Elements, (this is so easy) you can actually drag the header down to your footer at the bottom and it will stay there.

Do it, preview your blog and see that your title and description is now at the bottom.

Ok, now that's sorted and Google will still visit us and care about us enough to occasionally mention us in their search results there's one final thing we have to do.

Where the header originally was, it may have been a 'small space with a border etc' when you go putting in an image that's 600 pixels, 660, 800 pixels wide its probably not going to like it.

This is because in your html template, there have been borders, and margins and padding set to a smaller size. This is set to a smaller size because the designer who designed your template was expecting a text title and not some radical change to allow for a image to be inserted.

We have to go in to the html namely the 'CSS' and adjust the padding, margin, border widths etc. The CSS is the cascading style sheet. its at the front part of the html, search along the html until you come across this:

To See the code clearly click on the picture

Now it all depends on which template you use and how big a picture you are wanting to put in. But simply you have to play with the margin and border widths. I think its easiest if you simply set border to zero(after you have got your picture centered, that way you don't have to try to fit the border around the picture. If the space for your picture is smaller than the picture its going to throw it most likely to the right.

What I recommend you do is before you go trying to fit a particularly bigger picture as a mast in, you save your template (back it up) so that if you make a mistake with the margin settings you can simple revert to your previous saved back up and not lose all the good work you have done so far.

One last hint: Make sure you creat a 'hyperlink' so when people click on your mast they go to your home page. This is the standard default page of your blog. o create a hyperlink you simply surround the picture address with a href. See the example below.

To See the code clearly click on the picture

If you want to see the end result of this simple series of hacks go here:

New Blogger Hints

I hope this New blogger hint helps people feel free to leave comments in the comment section. I can't help people do their own individual blog. I am certainly not going to help any one that has not had a very hard try at it.

Remember: You must do a back up first before you edit your template.

Always Fresh: Bagelblogger
: Blog Hints * Blogger Hints * New Blogger Hints * Replacing your title with a picturePicture for title * New Mast * Swap picture for title * Jewish * Mr Bagel * BagelBlogger * Bagel Blogger * Jew *