Monday, January 18, 2010

How To Create A Header For Your Blog

I am going to try my best and walk you through step by step on how I created the header for my blog. Let me first begin by telling you that if I can do this, you CAN too! It took a little playing around for awhile, but once I got the hang of what I was doing, I had a whole lot of fun!

Are you ready? Let's begin...

Start by downloading Picasa (you can do this for free). Once you have the program downloaded, you can start uploading your pictures. I know when I downloaded the program, all of my pictures from my iphoto instantly were uploaded.



Now, you will want to choose the pictures you want for your header to create a collage. Do this by clicking on the pictures from the library and then clicking on the "COLLAGE" icon at the bottom of the screen. I put all my pictures in the "PICTURE PILE" so that I could place them where I wanted them to be.




I made sure my pictures were lined up at the top of the workspace. You will notice a lot of white space under the photos, but you are going to crop this later.



Once you have all your pictures, click on the "CREATE COLLAGE". At this point, you can then double click on your picture to enlarge it and move it around.




Once you have created the collage, you can now add "TEXT". You can place the text anywhere you like and choose from plenty of fonts, sizes and colors. This is the part where you play around and have FUN!




Once you have your design, it's time to crop your image. Go to the "CROP" icon and then take your cursor across your image and crop the white from underneath your image. Once your picture is cropped, click "APPLY."



Now, it's time to  upload your image. If you have the STRETCH MINIMA TEMPLATE (like mine), the size of your image needs to be 1024 pixels. If you have the MINIMA TEMPLATE, the size needs to be 640 pixels.  Once you have that finished, go to your "LAYOUT" on Blogger.




You will need to remove the image you previously had and replace it with the new image. Make sure to click on "INSTEAD OF TITLE AND DESCRIPTION" and you DON'T want it shrunk to size.




The only thing left to do now is remove the border around your header. Go to your "SETTINGS" page and click on "EDIT HTML".



You will see all kinds of letters and numbers here. What you are looking for is this...

#header-wrapper {
margin:0 2% 10px;
border:2px solid $bordercolor;
#header { margin: 5px; border: 2px solid $bordercolor; text-align: center; color:$pagetitlecolor;



Change the number I have highlighted in RED to 0. It is really, really important to only change the number because your blog needs all the other stuff to stay the way it is. 


Now, "SAVE TEMPLATE" and go check out your new look!


If you have any questions, leave them on my comments page and I will answer them (on my comments page) the best I can. 

21 comments:

  1. Oh, I would LOVE to try this. I did a collage but I didn't know how to apply it.....I am crossing my fingers and hoping that it works...I LOVE yours! Thanks so much, Christy!

    Suzanne

    ReplyDelete
  2. Wow. How on earth did you figure all this out? It looks just wonderful. And your photography is amazing. I got a Nikon D60 two years ago and my goal this year is to stop using it in the auto feature... and to finally read the PhoneBook size manual it came with. :-) It's a hobby you have a great gift for. Hope you are having a great day Friend!

    ReplyDelete
  3. Ok, now I am semi-inspired to get back to blogging. But, why oh why... do I have the sneaky suspicion that what you explained in 2 minutes will take me 456 hours to accomplish??? Looks great! And I love your picture a day too! Lets get together soon!

    ReplyDelete
  4. I am so impressed! I'm shaking my head over this! I don't know how in the world you figured this out - but am so glad you did, and that you are sharing it with us. Pretty soon, all of our blogs will look like yours! ;-)

    One of these days, I'm going to change my blog around... and I'll definitely be coming back here for some info! (And maybe calling on you for some help!!!!) :-)

    Blessings to you, Christy. Looking forward to seeing you soon...
    Jennifer

    ReplyDelete
  5. You are amazing...and I posted a THANK-YOU to you today over at my place. :-)

    Love ya friend.

    ReplyDelete
  6. oh my goodness, GF, it looks FABULOUS!

    congrats on the new look!

    ReplyDelete
  7. Thanks so much Chica! You really get into this blogging hobby! Love it by the way!

    ReplyDelete
  8. Thank you soooooo much! I can't wait to give it a try. You really make this seem very do-able. Once again, yours looks positively fabulous! = )

    ReplyDelete
  9. I have been looking for someone to explain this to me and I came across your blog while blog hopping. I'm so excited and I definately try this! Have a blessed day!
    With joy,
    Renee

    ReplyDelete
  10. Thanks! I was able to make it work. I'm so thankful for others who are willing to help us "beautify" our blogs!!

    ReplyDelete
  11. I am going to try to do this-I swear, I am computer illerate, and this is something I have been wanting to do! I will give it a try-if it doesn't work for me, do you take Starbucks gift cards for work??!!??
    God Bless-

    ReplyDelete
  12. I am going to go try it tonight! I am so happy you posted about this, it is something I have been wanting to do for a while. One question, how do i create my blog so that i have a one large column on the right and then a small sidebar on the left? Thanks,Jessica

    ReplyDelete
  13. Jessica,

    To have the sidebars you need to go in and look at the different templates on blogger. I know that the minima template allows you to have one on the right side. If you use one of these templates, remember to adjust the size of your pictures.

    Hope this helps!

    ReplyDelete
  14. I just created a header using your instructions and it was so easy! until it came to resizing it. I am not sure when to re-size it and how. Do I re-size it after it is on my blog or before i save it in picassa? Thanks for your help!
    Jessica

    ReplyDelete
  15. Jessica,

    You should be able to resize it when you export it to your files. You need to have it 1024 pixels for the stretch minima template.

    ReplyDelete
  16. I am such an idiot! I've been working on my blog and creating a header. THEN it dawned on me you had givena tutorial!!! And, yesterday I found Picasa, somehow I missed you had recommended it all this time ago. AHHH. Anyhoo.... THANKS AGAIN so much for this post. Happy Tuesday....

    ReplyDelete
  17. Ok Christy.... I'm so sorry. But HELP! I made my picture 1024 pixels and it's still the entire size of my screen. ANy ideas?

    ReplyDelete
  18. Thank you! I can't wait to try this!

    ReplyDelete
  19. I was ready to "spring clean" and simplify my blog...and was tired of my old header. I used this tutorial to create a new one. It worked perfectly! Thanks!

    ReplyDelete
  20. Christy, I happened upon your journal(blog). A couple of months ago. I have been following as one of those unknown followers. But, I decided I needed to let you know that I jumped off into the world of sharing my heart. Your blogging information about the header was so helpful. I can't believe I did it. I have enjoyed reading your blog, hope you will drop by and visit mine.
    www.placesofmyheart.blogspot.com
    Karen

    ReplyDelete
  21. Just found your beautiful blog thru a search for ragamuffin garlands... Loved that pink one you made and your header (your whole layout actually) and then saw your great topic on blogs! This was just what I needed to give me a bit more confidence. Had seen the directions, but somehow yours seem less intimidating. :-) I hope to be able to demonstrate what I've learned on my blog soon. Just so scared to mess with my old layout and lose it all! THANK YOU for ALL the inspiration!
    hugs,
    Leslie
    PS - Hope you're having a ball at the Country Living Fair!

    ReplyDelete

Your thoughts...