Tuesday, March 24, 2015

How To: Design And Upload A Header In Blogger

Years ago, I taught myself HTML. Who knew, right?! I used to memorize codes and hex colors for the heck of it. Now-a-days, I don't memorize any codes (they've all slipped my mind anyways), but I can read a decent amount of HTML. Hence why I've been able to get by without ever paying a blog designer for my layouts. I simply design my own and it's completely free. 

I am totally in support of blog designers, because what they do is awesome, but if you have some extra time to work on your blog alone, why not give it a go? I think it's more fun anyways. Today I'll share one of the more simple things about creating your own blog: how to design and upload a header.

First off, it should be known that PicMonkey.com is the best resource ever. I do everything through this website! And it's completely free. I do, however, pay a small annual fee to get the upgraded fonts and editing resources. I think it's money well spent. If you're super unsure how to use their site, you can check out this entire page dedicated to tutorials. (I swear they're not paying me to advertise them - I just really like their site!)

Anyways, once I knew I was going to change from Texas Mrs. to Mrs. Southern Mama, I knew I wanted to switch up the design so I headed over to PicMonkey. I am happy to write a more lengthy post about how to design my exact header (as an example), but I will try to keep things basic today.

STEP ONE (design): Go to PicMonkey.com. Hover your mouse over the word "design". Your screen should look like the image below. Then simply select one of the designs to work with. It doesn't matter which one you use because you'll be cropping anyways. I just used the "Facebook cover" design.
Once you open your canvas, you can use the buttons on the left of the screen to create what you want. The 'Tt' button will be your texts. The butterfly button is where you can add pictures of your own, or use images that PicMonkey has stored. After you've created a masterpiece, just hit 'save' at the top center. I would use .png format when saving!
------------------------------------------------------------------------------------
STEP TWO (upload): Go to your blogger dashboard. Click on "layout" on the left side of the screen.
Once the layout page loads, click on "edit" on the header gadget. If you don't see an option to edit your header like have displayed, then you should at least have the option to "add a gadget" on this page.
Once you click "edit" on this page, a new window pops open and you will simply upload an image here that you want to use. Click on "instead of title and discretion" to ensure that this is your only header. You may have to play around the with sizing (either make it larger or smaller) depending on what the rest of your blog looks like. My header dimensions are 1000 x 283.
Simply click "save" to save your work. Refresh your blog and it should be appearing. 

If you don't like the sizing. or want to upload something different, click on the "remove image" button (you can see this in the image above) and simply re-upload a different image.

Happy creating! 

8 comments:

  1. I do love your new header!!! I have wordpress, so installing things is a bit different. I always feel like a badass when I actually get something to work on it! :)

    ReplyDelete
  2. I love this!! Thank you so much for doing this :)

    ReplyDelete
  3. Thank you so much for this post! I've been wanting to do my own header for awhile. I'm gonna get to work on this soon and I'll be using your instructions along the way. Thanks!

    ReplyDelete
    Replies
    1. Awesome... I hope it helps :) Cant wait to see your new header!

      Delete
  4. I pay for the upgraded version of PicMonkey but have only mastered it for editing photos or making designs for in a post. Definetely not anwhere near being able to design my own blog design yet!

    LOVE your header!

    ReplyDelete
  5. Thank you! I have been wanting to change mine up and its been too long to remember how I completed mine in the first place!

    ReplyDelete
  6. Great tutorial!! It's about time mine gets a little refresher ;)

    ReplyDelete