DIY Blog Design

How to change your background in blogger

This post was originally published at Songbird. If you like DIY inspiration of the home and decor kind, than please visit me there.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Well it’s about time, isn’t it! That I would write another episode in my DIY blog design series. I didn’t mean to keep you waiting this long, but yeah life happens.

Voor de Nederlandse dames. Voor het gemak (vooral dat van mij) schrijf ik mijn blog in het Engels en dus ook deze serie over hoe je zelf het een en ander aan je blog kunt veranderen. Dat wil niet zeggen dat jullie mij geen vragen in het Nederlands kunnen stellen of niet om wat meer uitleg kunnen vragen. Aarzel dus niet om het mij te laten weten als je iets niet snapt of als je vragen hebt. Ik help jullie graag!

Ok then. I ended the last episode with a new header for my DIY Blog Design blog

That blue background really needs to change stat! Don’t you agree. So let’s get on with that, shall we.

When you think about your background it is good to realize that it consists of two parts: the main blogging area (where you posts and sidebars are) and the outer shell around your blog. Here at Songbird the main blogging area is white and the outside area has this grey flowery pattern. If you have a small screen and you have set your blog width pretty wide (I covered how to do that here) than that outer space can be quite narrow, but with the big screens some people have these days it can be a visible and integral part of your blog. Most of what I am going to cover today has to do with that outer space.

But first a little bit about you main blogging area. Just like the rest of your blog you can customize this too and add a background or color to it. I personally don’t like busy patterns here. Your blog is first and foremost about your posts, the writing and the pictures, and you want them to stand out as much as possible. So although your main posting area definitely doesn’t need to be white I’d go for light colors as your background. Make sure there is enough contrast between your text and the background. It is so much easier for your readers that way.

Ok then now how to change that background behind and around that posting area?

How to change the background of your blog

You have several options.

1. Use the blogger template designer and choose a single color for your background.

The template designer will give you some good options based on your color scheme. But that is a bit limiting. You might want to adjust your background color to the colors of your banner picture or font. Blogger allows you to choose your colors by the Hex code, so if you know the hex code of your desired background color you can be very precise. But how do you find the hex code? Well I always use my photo editing software. I open the picture I want to use as my color source (this can be a print screen too), get the color picker and choose the color.

Here I picked a color from my red mouse, got the code and pasted it in the outer background box. You can customize your colors that way on the backgrounds tap in the advanced menu. Already a lot better than that blue, blogger suggested for me isn’t it.

2. Use the blogger template designer and the background pictures blogger provides.

Although the red is already a lot better I think we could do even better. Maybe a nice picture will make it stand out - in a good way- some more. How about this:

I choose some construction paper that I found under the business options. Just go to backgrounds – click on the arrow next to the color box and choose something you like in the drop down menu.

There are a few issues I have with this option blogger gives us here.

First almost all of them are full size pictures, which means there is one picture that gets pasted behind your main area. Therefore most of the background image is not visible and what is visible becomes pretty meaningless. They are nice pictures to use as your desktop wallpaper but not for your blog background.
Second the options for the most part aren’t exactly feminine. For us Home Décor bloggers the choice options are limited.
Which brings me to:
Number three: your background will hardly be original and that’s what this whole exercise is about.
Four this is a biggy! I have heard rumors that the background can make your blog hard to scroll and load. So that would be a big no-no.

3. Use your own picture for your background.

Right in that same screen where blogger shows you the options they have collected, you also have the option to upload your own picture.

Any picture that is big enough and that you have stored on your computer can be uploaded here. So maybe you have a great cloud picture, or a field of flowers, or of the fur of your doggy baby. Or you could use scrapbook paper that you have scanned.

The Background Fairy wrote a full tutorial on how to upload your own background image.

4. Use a (free) background someone else made for you.

There are several kind and generous souls who have made it their mission to provide us all with beautiful free backgrounds. Sometimes they even throw in matching headers and buttons to create a cohesive blog look.

Pasting one of those backgrounds to your blog is easy. You just save the code they give you into a HTML/Java script gadget box and your done. (all the sites tell you exactly how to upload their backgrounds).

Let’s see what The Background Fairy can do for my DIY Blog Design blog shall we.

I found this linen look background that I liked, I copied it as a gadget to my blog and looksee:

When using a free background there are a few things to consider:

Try them out on your test blog first, because not all of them work with the new template designer
Check to see if they work with your settings, some of them are designed for blogs that haven’t adjusted the width of the main area
You will have some advertising somewhere on your background. I guess that is only fair because you are getting the background for free.

You can find loads of background designers if you Google “free blogger backgrounds”, but I have selected a few favorites:

www.backgroundfairy.com   ~~~~~~~~~~                      lots of lovely vintage images here!
romantikgrafik.blogspot.com ~~~~~~~~~                      very romantic backgrounds
1stfloorflatblogology.blogspot.com ~~~~~                      backgrounds with a nice fancy twist
shabbyblogs.com/?page_id=5 ~~~~~~~~~                      lovely selection of backgrounds with a cottage feel
www.freebloggerbackgrounds.com ~~~~~                     if you like graphics this is the site for you
thecutestblogontheblock.com ~~~~~~~~~                      an amazing collection in all kinds of styles

5 Design your own background by using tileable wallpaper

Okay then these are not ‘unique’ enough for you yet, you want to fully customize your background. Find a design with a nice little pattern that fills up that screen. Maybe something like I have here on Songbird? Well that kind of background is made with tileable wallpaper, which basically means that I have uploaded a really tiny picture that repeats itself into infinity AND whose pattern runs fluently without any visible lines between the pictures.

You can search for tileable wallpaper and you will find hundreds and hundreds of different textures to choose from. Damask, toile, paper, sheetmusic, stripes, polka dots you name it and it is out there.

Here are just three links that will give you an amazing choice already:

www.grsites.com/archive/textures/
bestdesignoptions.com/?p=1576
webtreats.mysitemyway.com/category/photoshop-resources/patterns/

Since I am looking for a background to fit my DIY Blog Design scheme how about a background consisting of nails?

I found that tile in link number 1.

This is how it looks:

Not bad he. I think I like it. This is how I did it:

- remember try this on your testblog first -

1. Choose the background you want to use and save it to your computer.

2. Upload the picture to a picture host, this can be photobucket, picasa webalbums or even a post on your testblog. As long as you get a web address for that picture.

3. Copy this bit of code EXACTLY and paste it in your CSS style sheet (you’ll find it at the bottom of the list on the advanced tab). I explained what the CSS style sheet is in the post on How to Make a Blog Header.

body {
background:url(http://i562.photobucket.com/albums/metal065.jpg);
}
.body-fauxcolumn-outer div {
background: none !important;
}

4. Copy the link to your picture and replace the text in red with it.

5. Click apply to blog

This is fun you can test a whole bunch of different backgrounds this way.

I think I quite like that last one, so here it is a bit bigger

Or got to my DIY Blog Design blog to see it live.

Ok and one more for the road. If all of those free downloadable tileable wallpapers are still not enough for you. I found a tutorial on how you can make one yourself using Photoshop:

How to make your own tileable wallpaper

Ok. This concludes this episode, I think I have given you enough options here.

Remember always fiddle with your testblog before you make any changes to your real blog, and save your blog and your template before you do anything. You can read all about the five safety precautions you should take before you fiddle with your blog design here.

Have fun designing a background for your blog! And remember just keep asking me questions, I will answer them either in the comments or in a next episode of my DIY Blog Design series.

Love,

Marianne

How to make a blog header in Blogger

This post was originally published at Songbird. If you like DIY inspiration of the home and decor kind, than please visit me there.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Hello my friends, finally another episode in my DIY blog design series. A lot of you said they had questions about how to make a blog banner and how to get it up on your blog the way you want it.

So todays topic is HOW TO MAKE A BLOG HEADER.

A good header or banner for your blog is very important. It’s like your business card for your blog, or your front door. It is the first thing people see, when they stumble unto your blog and it might be the one thing that determines whether they want to hang around or not.

That space on top of your blog is gold, and you should use it really well. It is the curb appeal that has to convince a casual passer-by that she is curious to see what’s inside.

So before you upload a new header to your blog, you should make sure that it is the best possible header for your blog. Here are five things I would want you to consider.

Five things to consider about your blog header

1. Let it be a reflection of you and what your blog is about

I think this banner from Dutch Sisters is a beautiful example of ‘what you see is what you get’. Their banner fits their blog to a t.

That header should convey a clear message. This is my blog, this is who I am, and this is what this blog is about. There are about a million styles of blog headers out there. Choose the one YOU feel comfortable with. Don’t just follow a trend. If everyone is doing collage style picture banners, but you are more of a ‘one picture says it all’ kind of gal, than go with that.

2. Don’t automatically think the bigger the better

Style queen Heather Bullard shows this principal beautiful. Her header is quite small but has a lot of impact, and you can even see a part of a very intriguing first picture. I want to see more….

Don’t go too big. It might be tempting to make a really large header and put a lot of teasers and beautiful elements in it, but it might not work so well. You don’t want people to come and admire your blog banner, you want them to read your post. I am a strong fan of blog headers that allow me to see at least the title of the first post without having to scroll. Of course that only shows how important the title of a post is too, but that is a subject for a later date.

3. Do you want to change your banner often?

The Inspired Room does the changing of the seasons very elegantly, the basic banner stays the same and only some small decorative elements change (f.e. the little birdies and green bush in Spring)

It is popular to change your banner regularly and have it reflect the seasons (I try to do that for example). But before you decide to go that route please consider two things.
1 it might be more work than you realize. I for one have cursed my banner on more than one occasion when I was frantically trying to come up with a new one half January because I still had a Christmas theme going on. Once you have made yourself a typically Spring banner you know you will have to change it again in a few weeks.
2 people might not recognize you straight away. With all the nest/cottage/junk/beach/bungalow blog names around, I sometimes get confused about whose house I am visiting. While bloghopping it might be easy to forget which cottage I am currently seeing and who is feathering their nest here. A clearly recognizable blog banner makes it much easier to recognize where I am in a split second. Let’s face it, with the hundreds of blogs out there, there is no way we are going to remember all of those blog names. Having a visual reminder as well, really helps. So sometimes NOT changing your blog banner is the way to go (unless you are one of the really big ones, but then you wouldn’t be reading this anyway).

4. Use your absolute best pictures. No Flash!!!!

I think these pictures from I found my home, prove my point very well. Great shots, matching color tones, nice details with enough context to make me want to see more.

Sometimes I come across blogs with really big and might I say bad pictures in the blog header. I think that that is such a shame. We all can’t really say it enough: flash kills your pictures. You might get away with an occasional flash picture in a post, but please, pretty please, if you use a picture in your banner, let it be a great picture! Don’t try to show us your whole house, but choose a detail that represents you. But don’t zoom in too much either, I want to be able to catch the atmosphere. So if you are going to use photographs it better be great photographs.
Oh and if you are using more than one photograph, make sure the the colors kind of ‘match’. I don’t mean necessarily all of the same colors but not one picture with a yellowish undertone and the other with a blue-ish one. Thrust me it doesn’t look half as nice as it could look (most post processing programs allow you to match color tones).

5. If photographing isn’t your thing, graphics work wonderful too!

I think this cartoon-like header from Homemaking Joyfully, is a very inviting way to show us what her blog is about.

There is no law that says you have to use pictures in your header. If you are not confident about the quality of your photographs, or your blog isn’t about showing photographs, using some graphic header works really well too. Again choose your own style, don’t let the masses influence you. Technically even a graphic header is a photograph too, but there were no pictures harmed in the making of a graphic header.

Think that that doesn’t work in our DIY/ Home/ Craft bloggers niche? Ha think again….

You can’t get bigger than Nesting Place and not a picture in sight on her blog header. So if it is good enough for The Nester herself…….

How to make a blog banner

Now that you now what to do, go on and make a blog banner …..

The easiest way to make a header is by using a photo editing software like Picasa, Picnik, or Photoshop.

Brenda from Cozy Little House did an awesome tutorial on how to make a banner collage using Picnik
Sarah from Clover Lane shows us how to make a collage banner using Picasa
Lara from LaLakme shows us how to make a blog banner using Photoshop Elements
And if you prefer video tutorials I found another ‘how to make a banner in Photoshop’ tutorial on Blogher

Make your title and (if you have it) your tagline part of that picture. Be creative with your colors and your fonts. But do remember that people should be able to read and recognize it in a split second. So don’t go too crazy.

I think Beth form Home Stories A2Z really has a knack for making banners. Her logo is part of it, her tagline makes it clear in an instant what her blog is about, the great pictures reinforce that, she uses a couple of repeating colors both in the graphics as in the pictures, creative use of different fonts without overdoing it, and even with that ad banner there, I can still see what her first post is about.
Her banner is a clear representation of her brand. That’s how you do it people!

Using more than one font, really is a great way to make your banner and title look interesting. You can Google for free fonts. But I get mine from Kevin and Amanda, they have a wonderful creative font collection. But again be careful. Readability is more important than the fun factor, and I wouldn’t suggest using more than three different fonts on your entire blog, unless you are a real pro with this design stuff and know what your are doing.

Great way of different fonts and coordinating colors from 30 days

How to install a blog header in blogger

Okay let’s get on with it and install us a blog header. First things first, set the width of your blog. I’d suggest go for the maximum width that blogger’s editor allows. Just about all monitors can handle that comfortably and it allows you to post really big pictures.

On your dashboard click on DESIGN
Go to TEMPLATE DESIGNER
Go to ADJUST WIDTHS
Move the slider for ENTIRE BLOG to maximum
Choose how wide you want your sidebars to be and move the slider
click APPLY TO BLOG
Make a note of your choices in your Blog Design Log

You can even go wider than this (I did) but some people will have to use sliders to see your whole blog and it does require some HTML editing, so I’ll save that for a later date.

Now that you have your new header all ready you have to upload it to your blog. First make sure that it is the correct size. Using your photo editing software resize your picture. Resize it in pixels and as a maximum size it to your blog width. So the width of your picture must not be more than 1000 pix (if that is how wide you made your blog). Then upload the header picture:

On your dashboard click on DESIGN
Go to PAGE ELEMENTS
click on EDIT HEADER
UPLOAD picture from pc
click INSTEAD OF TITLE AND DESCRIPTION
click SAVE

If you choose to make a slightly smaller header (which often looks better) than you might want to center it above your main posting area and your sidebar(s). This requires a tiny amount of html editing. Don’t be scared it is real easy.

How to center your header on your blog

On your dashboard click on DESIGN
Go to TEMPLATE DESIGNER
Go to ADVANCED
Scroll down to ADD CSS
Copy and paste the following lines into the STYLE SHEET:

.Header {
text-align: center;
}

Click APPLY TO BLOG

The CSS style sheet is basically a place where you can put all kinds of notes about customizations you made to your blog that the blogger machine must know when it loads your blog. Often when you make personal changes to your blog design you put them in this style sheet, but not always….

This is important: if you have never done this before (and even if you have) make the changes in your testblog first! That way you don’t mess up your blog.

Now your header should be nicely centered.

I have started a special DIY Blog Design blog so I can follow along with all the tips I give you and do not unintentionally forget some design issue I have applied a long time ago. This is how far my DIY design blog has come. I think next time we desperately need to work on the background behind my blog. That blue is awful.

Further reading:

How to design a blog header by Musings of a Housewife
How to create a free blog header with Photoscape by the Etsy Blog Team
How to create a cute text based blog header by Dawn by Design
Add a title to your blog header with Picnik by the Background Fairy
How to make a header with Picnik by All About Us

So did you learn something new? Was this helpful? Did I answer all of your questions? Let me know folks!!!

Love,

Marianne