How to Create a Custom Blog Header and Sidebar Titles (Part 2 Designing on Picmonkey)

Tuesday, November 19, 2013

This is part two in a three part series aimed at new bloggers, (you can check out part one here). In this post I'm going to be showing you how to create your own header as well as some sidebar title images to start building and customising your blog. In this guide I'll be using the website Picmonkey: this is an editing software site that requires no signup or no installation, all of the features I'll be using are completely free. This is one of the best free resources out there for bloggers!

Step One: Prepare Your Header
You'll need to start off by creating a plain white rectangle to upload to Picmonkey, you can do this in any basic 'Paint' or 'Paintbrush' type editor on your computer. Size isn't important at this stage, just a plain white rectangle is fine. Then go to www.picmonkey.com and click 'edit a photo.' Select your plain white header, and on the left hand side click 'resize.' Resize your header to 1000px x 200px

Step Two: Get Creative
There are loads of features on here, but the ones you'll need to create your blog header are text which is found under the 'Tt' button and overlays (shapes) which are found under the butterfly shaped button. You'll be able to use most of the features, but any with a little crown next to them are 'Royale' and require you to sign up and pay. Just avoid those, there are plenty of free options on there so get creative and see what you can come up with. Keep your background white though, or it won't blend into the content area on your blog. You'll find that the more you play around with this the better you'll get at it, you can easily update your header later down the line and so if you want to go with something simple at first that's fine too

Step Three: Match Colours To Blogger Template
In order for your header to match your blog design from the previous guide, you'll need to have a note of the hexadecimal codes for the colours you used. If you didn't write these down you can find them again by going into your Blogger template designer, go to 'date header background' and copy the code in the box (this is colour 1). Colour two will be in the boxes under the 'links' option. You can then use these codes on Picmonkey. First you'll need to click on your text in Picmonkey and when the text box pops up, click the colour code in the corner (will probably be '000000' unless you have changed it). Delete that, and paste your new colour code in instead. This will mean the colours in your header will match the colours in your blog exactly and will look much better once it all comes together.

Step Four: Crop and Save
Don't crop AT ALL from the width of your header- even if your header design doesn't reach the edges, the white space is needed to make the header sit central on your blog. You can crop the top and bottom from your header though if necessary, but don't crop too closely a bit of white space is fine. 

Step Five: Create Sidebar Titles
To create your sidebar titles you'll need to upload a plain white rectangle to Picmonkey in the same way that you did with your header. You then need to resize this so that the width is the same size as your blogger sidebar- if you're following on from the last guide we set the sidebar to 270px (you can check this in Blogger template designer under 'adjust widths.') For height I went with 50px, don't make it too tall you want to keep it in a rectangle shape. Then using the same fonts and colours that you used in your header, create some sidebar titles. This gives your blog a bit more interest and customises it further than just using Blogger's standard text titles. If you're not sure what your sidebar is going to include yet some ideas are 'followers' 'search' 'popular posts' and 'archive.' You'll need to save each of these as individual images. Again make sure to use the hexadecimal colour codes that you used in your header and on your blog, as if you just guess it will look really obvious when you bring it all together as the colours will be off.

Step Six: Create Picture/ Introduction Widget
In Paint, create a rectangle with your photo like the one shown above, and upload it to Picmonkey. Write a short introduction so your readers know who you are, use the same fonts and colours that you used in your blog header so that everything is consistent throughout. If the secondary blog font from your header looks really difficult to read as a large chunk of text then change it for a different one, but stick to the same colour. Crop any excess, and resize the finished graphic to around 270px wide (with the keep proportions box ticked). When you come to upload this, make sure the 'shrink to fit' box in bloggers image widget is NOT ticked.

Step Seven: Prepare to Upload (Important)
IMPORTANT: if you skip this step, when you upload your header it will appear with a grey cast to it. This is because of annoying settings in Google Plus that need to be switched off. You need to go HERE (opens in a new window) scroll down to towards the bottom of the page and turn 'auto enhance' off. 

Step Eight: Upload Your Header
After you've switched off Google Plus auto enhance, you can upload your header by going to 'layout' in the drop down bar on your blogger dashboard and click on the header rectangle towards the top. Set the 'placement' button to 'instead of title and description. Save and then view your blog. If your header doesn't look central, you can go into Blogger's template designer and 'adjust widths' until it sits in the middle of your blog. If the widths are way off, then you'll need to resize your header again in Picmonkey.

Step Nine: Upload your Sidebar Images
Go back to 'layout' and upload your sidebar titles. You do this by clicking 'add a gadget' in your sidebar, and adding the image widget. From there you'll get a pop up window that looks like the one above. A problem Blogger is having at the moment is that it wont let you upload an image widget without entering a title, and as these are already titles we definitely don't want to be adding another one. You can get around this by entering <h2></h2> into the title field. This will show up blank when you save the image. Upload all of the sidebar images you have created, and then move everything around in 'layout' so that the correct title is above the correct widget. If the widget already has a default title you'll need to delete it, again if it says you have to enter a title, type in <h2></h2> Make sure the 'shrink to fit' box is NOT ticked, we've already set our sidebar headers to be the correct width, if you tick this Blogger will shrink them to be way too small.

Step Ten: Remove Shadow Border
 You'll now notice that you have messy looking borders around your nice white images, you can fix this by following THIS easy tutorial. You simply have to copy and paste a piece of code into the 'add css' menu in Blogger template designer (make sure you press enter/ return after pasting it for it to work).

Where We're At So Far
If you've followed part one and part two of these guides, you should have your own version of this so far. All of your fonts and colours will be streamlined, and you should have matching sidebar titles. Everything should tie together perfectly giving your blog a very clean look. In the final part of this guide I'll be showing you how to add the finishing touches, such as centring your tab links, centring your sidebar titles and getting rid of the messy looking Blogger bar along the top. I'll also show you how to find a background image that sits correctly on your blog if you'd prefer something different to the plain colour. You can add the finishing touches which includes tidying everything up and adding a background pattern (if you want to) over on part three HERE.

Let me know if you found this helpful!
Follow on Bloglovin

You Might Also Like

15 comments

  1. I love all these little design tutorials you are doing!

    My sister has just started up a blog, so I'll recommend your page to her :)

    I try to help her as much as I can but she doesn't listen to me haha.

    Laura x
    http://www.laurasallmadeup.com/

    ReplyDelete
  2. Stacey this post is amazing! I had someone design my blog because I was utterly clueless but this post would have made me feel I could (almost) do it myself!!

    Stacey Expat Make-Up Addict

    ReplyDelete
  3. This is a really useful post Stacey. Thank you for taking the time to put all the information together and making easy to follow instructions, I am sure many people who are starting up will come to this post for reference. :0)

    ReplyDelete
  4. Such a helpful post! It really helped me,thank you:)

    http://relocatewonderland.blogspot.gr/

    ReplyDelete
  5. this was so helpful thank you!xx

    www.justsaying13.blogspot.com

    ReplyDelete
  6. Such a great tutorial for beginners! Definitely will be referring new bloggers to this post! :)

    ReplyDelete
  7. i love this, could you please also include the way you did your connect bit on the right hand side in part 3? :D

    ReplyDelete
  8. Love tutorials for blogs. Great tips!

    ReplyDelete
  9. So helpful!

    http://woodwinked64.blogspot.co.uk/

    ReplyDelete
  10. so helpful thank you but do you know what to do when the background of the subheading keeps going greyish?x

    ReplyDelete
    Replies
    1. hi, read 'step 8' :) you need to switch off google 'auto enhance' then reupload anything with a grey cast to it x

      Delete
  11. OMG your blog is such a life saver wish I had found out about it earlier.
    Thank you! x
    http://katandthewardrobe.blogspot.co.uk/

    ReplyDelete
  12. I have nominated u for an award on my latest blo post! ❤️❤️

    ReplyDelete
  13. this is quite possibly THE most helpful blog post ever written!! thank you so much I am eternally grateful <3

    www.charlottesweb8.blogspot.com

    ReplyDelete
  14. This was so helpful! Thank you very much :) x

    ReplyDelete

Subscribe