if you are new to starting a blog you will need a header and a blog button.
First off you need to decided on the colour scheme of your blog. I recommend you choose 2-4 colours. use this HEX code chart to choose which colours you want to use and note down the number codes for all the colours for when you make your header and blog button. Keep these colour codes safe as you may need them in the future if you add or change something else on your blog
Ok now to make your blog header.
Open Picmonkey. Picmonkey is a free online photo editing program. Once you are on the picmonkey website choose ‘edit a photo’. Now choose any of your photos to upload. It doesn’t matter which one you upload. Here I have used a lovely photo of myself. Now the first thing we need to do is resize it. so click on the resize button.

You want to resize it to either the same width as your blog or slightly smaller. I resized mine to 1000×200. Make sure the two options are unchecked. Oh, don’t I look lovely now.

Then you need to click on the icon on the left side (as shown in the pic below). Then choose the rectangle overlay. Drag the shape over your photo so it completely covers it. Choose the colour you would like to use as the background, I choose white – code #FFFFFF. Remember to use the code colour you chose from the Hex code chart. Once you are done, click on the icon at the top of the page to add the overlay, so it won’t move around.

Once you have done this, the next step is to add your blog name. So click the P on the left side and choose a font and colour and write in your blog name. 

Now you can add other overlays or writing to personalize your header any way you like.
Once you are ready click on the save button
There you are, now you have a lovely header to add to your blog.
If you have a blogger blog I will now show you how to add it. Simply go to your blogger dashboard and select the layout button. Then click on where the header goes.
Upload your image and then make sure you select the ‘instead of title and description’ check box

Now your done!!
And to make your blog button just follow the steps to make your header but resize your button to 200×200 or what other size you want to use. It is also a good idea to make a few different sizes of buttons, especially if you want to place your button on other blogs that may require a different size, 300×100, for example
To add your button to your side bar for blogger. Click on layout and select add widget. Choose either image or html. If you choose image all you need to do is upload your button image. If you choose html, you need to have your button uploaded already on the web, then you need to copy the url of the image and then in the html widget write <img src=”YOUR IMAGE URL”> and put the url of your image where is says your image url. If you want to make the button clickable write this <a href=”YOUR BLOG URL”><img src=”YOUR IMAGE URL”></a>
And I’ll let you into a little secret that I like to use. I don’t use image hosting websites. What I do is make a new post in blogger, and upload my buttons to this post and save it. DO NOT PUBLISH IT just save it it. And to get the image url of the image simply right click on the button and click copy image url and I paste this into the html of where I want my button. If that makes sense. 

Here are the other posts in my Blogging A-Z series

Linking to some of these great parties


This post has been featured on:

Ducks 'n a Row

Vote for me @ Top Mommy Blogs - Mom Blog Directory

25 comments on “How to Make a Blog Header & Button”

  1. THANK YOU SO MUCH!!!! I have been looking for a tutorial lie this for ages! I am so NOT tech savvy so thanks for the step by step guide! Need to try this out….so I may be back with questions! I use WordPress so I hope this works there too!

  2. Hi! I am also using these steps when I change my blog headers. Luckily there are online sites like PicMonkey to edit your photos. I used to upload my pictures on Picasa btw since it goes with my Blogger account. I had a recent post on How to make add a Blog Button Code Box in case you want to know. Thanks for sharing this on Make it yourself Monday!

  3. Thanks for posting this very useful tutorial. I’m new to blogging, and I’ve been wanting to tweak my header…your post was just the help I needed.

  4. Wow. This was such an amazingly easy to follow tutorial.. I followed it step by step and it worked!! Thank you so much for the great ideas. I am so not techy..Gluten Free A-Z blog

  5. Actually , I did have one question. How do you pick the background color. I had to use black because I didn’t know where to go to change it.

  6. Thanks for the tutorial. I won a contest and that’s how I got my blog header and buttons and stuff. But I am wanting to learn more stuff so thanks for the help! ๐Ÿ˜‰

  7. Great tutorial! I have set this to open when I boot up so that I can come back to it to walk through the process.

    BTW….I featured this post on last week’s Wonderful Wednesday Blog Hop #23 on Ducks ‘n a Row. ๐Ÿ™‚

    Ducks ‘n a Row

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.