1.05.2010

How To Make A Blog Header

mini heart garland

Well first off, thank you for all the header love! You've motivated me to keep on changing my header when the mood strikes. Which seems to be about once a month. Hmmm. And since you asked so nicely for a little tutorial, here it is.

Obviously I use Blogger, so these instructions are specifically for blogs hosted by Blogger. I upload all photos I use on this site to Flickr, and I create all of my headers over on Picnik. You can sign up for a free account on Picnik, and although Flickr offers photo editing options using Picnik, the editing options are much greater if you go straight to Picnik. You can link your Flickr account to your Picnik account, or select images straight from your computer.

To get started, determine the pixel width on your blog. Mine happens to be 950 pixels, but I've edited quite a bit of HTML to get it that size. Go to Layout on your Dashboard, select Edit HTML and scroll down until you see this:

/*Header
----------------
#header-wrapper{
width: 950 px

The number in red is your magic number. You will create a header this size for a custom fit. Exit Edit HTML before moving on. You don't want to mess up your pretty blog.

Next, go to Picnik and select your header picture. Open the picture to edit.

Crop the picture. I prefer the height of my header to be about a third of its width. Resize the picture to the right pixel size by typing your magic pixel number in the width box. The height will adjust accordingly. Edit your picture if desired.

Select Create then Text to add your blog name. There are many choices in font, size and color. You can also add a sticker (square, rectangle, heart, circle, oval, etc.) and put your blog name on top of the sticker. Save the header when you are done. I save my headers to Flickr.

Go to Flickr, open your new header, click on All Sizes, and copy the URL of the original size.

Go back to your blog, Select Layout, then Edit on the header box. Remove the existing image, then paste the URL for your new header. Select the option to have the picture instead of the blog title. Save changes. View blog. Pat yourself on your back. You give good header too.

Here's the header I made as an example:

how to make a blog header
I used the Cross Process effect and added a border around the picture. My preferred font is May Queen. The header is OK, but I have a feeling I'll come up with something different for January. The month has only just begun after all. And don't the hearts seem rather February?

Regarding borders, if you see a border around your header that you didn't put there, and you want it to go away, go back to Layout on your blog dashboard, select Fonts and Colors, scroll down to Border Color and change the color to white (assuming your blog background is white). The border will magically disappear and you will be happy.

Regarding the heart garland, I've crocheted a few and they're going into my shop. I'm also keeping a few for myself because they make me happy, just like new headers.

88 comments:

  1. you are SO great to take the time to do this!
    i love changing my header...
    and now thanks to you, i no longer have the border around my photo! THANK YOU!
    that edit HTML page scares me! :)

    ReplyDelete
  2. Oh THANK YOU! I'm gonna print this out and give it a go - in baby steps, of course - gotta check out that piknik thing first... how cool. I would LOVE to be able to do that - would give me a reason to get the camera out and play... and God knows I do need me some fun and play....

    so thanks again, the directions look clear even tho my knees shake when I even THINK about going into the template part of blogger.... we shall see :)

    mia

    ReplyDelete
  3. I love the tutorial, the button, the heart garland! And lordy what I wouldn't give for a little pot-bellied cast iron woodstove right now!
    xoxo

    ReplyDelete
  4. Yippeee! You totally rock Molly and yes, I think hearts are reserved for Feb. I'm sure you will make a lovely one for Jan.

    Thank you!
    :)

    ReplyDelete
  5. I also use picnik to do my editing and make my haeder.
    I have been into using the mosaic maker to add a few pictures in that I like...
    great tips on doing this...

    ReplyDelete
  6. Really nicely done Molly. If any of your readers want to take it any farther I have a tutorial here which talks a little more about the HTML part of the whole thing and background etc.

    ReplyDelete
  7. Thank you so much for doing this! i love your headers.

    ReplyDelete
  8. Thank you, thank you, thank you! I'd figured out to crop a photo and put it into blogger, but then I had to change the font color so I could read it on top of the photo, and I so wanted to figure out how to do the text myself, and place it where on the photo I wanted. I can't wait to try this! (I've always admired your changing headers, by the way.)

    ReplyDelete
  9. Wow. Talk about finding your voice. Ever since you opened up your shop, your strides have been greater and greater. You rock!

    I hope to update my very stagnant border soon. Thanks for the tutorial!

    ReplyDelete
  10. You do not understand. I've been so wanting to know how to make a header!!! You rock.

    ReplyDelete
  11. Thank you, thank you, thank you! I could never get my header to "fit" in the box... it never occurred to me to change the color of the box border... duh! I had never used Picnik... so easy! You gave me the confidence to try something new... thank you again!

    ReplyDelete
  12. YAY!!!! This has totally made my day, my whole month really. Thank you so much. I am really really grateful!
    Jane in BC

    ReplyDelete
  13. Free at last, the sky is the limit now. I've about driven myself crazy trying to figure out a way to use other fonts on headers. Your instructions are great.

    Now tell us the name of your 3 column template. Is it a blogger template?

    ReplyDelete
  14. Thanks I did it and love it. I can't wait to change it again :) Many smiles to you!

    ReplyDelete
  15. okay. i love those hearts. and the snow on the chicken wire. and too, the kick in the pants to change my header. thank you, thank you!

    ReplyDelete
  16. Question: Is there a particular reason you use Flickr to host your photos? You did say you can link it directly to a Picnik account, but any advantage besides that? It seems so many other bloggers use Flickr too, makes me wonder what I'm missing out on! I use Blogger, too, but just upload photos directly from my computer (which I'm pretty sure automatically puts them in a Picasa web album). I really like your blog, by the way. I can't remember exactly how I first found it, but I've been following it for a few months now!

    ReplyDelete
  17. Thanks Molly. I've always admired your headers. Helps that you start with one of your kick ass pictures! I'm going to follow your tute and see if I can get a better result. I've been increasing the size of my picture a different way than you described and it often makes it fuzzy and not so pretty.

    ReplyDelete
  18. Your blog keeps getting better and better! Your older articles are not as good as newer ones you have a lot more creativity and originality now keep it up!

    ReplyDelete
  19. Thank you! This is just what I needed to help zap the "lame header blues" on my blog. That heart garland is gorgeous by the way.

    ReplyDelete
  20. ohhh, thank you! and, if you wouldn't mind, I second Linda's question... I've been trying to figure out how to do a 3-column template and been dinking around in HTML. Any advice?

    ReplyDelete
  21. Many Thanks! My poor header is very much in need of a fresh start this new year!

    ReplyDelete
  22. um, yeah. You totally rock for doing this.

    ReplyDelete
  23. Thank you so much for the header making advice! Mine looks kinda funny at the moment and I just haven't had the patience to fiddle with getting it right. I'm going to try to fix it asap -- now that I have some idea of how to go about it.
    Thanks again & love your blog,
    G

    ReplyDelete
  24. Thank you, thank you, thank you!! I have wanted to learn to do this for oh so long.
    Warm wishes,
    Tonya

    ReplyDelete
  25. many THANKS for this detailed tutorial!! can't wait to change mine as well.

    ReplyDelete
  26. This is so fabulous! I get email asking about this all the time. I'll be linking!

    ReplyDelete
  27. Thank you , thank you, thank you! I have a blog but am not computer savvy. I know, I know, this doesn't make any sense. This is going to be such a help to me because I have been trying and trying to do something more interesting, but nothing was working. Can't wait to try with your instructions.

    ReplyDelete
  28. What a great tutorial! I found a link to this from http://martawrites.blogspot.com/2010/01/am-fan.html

    I love learning new things & had been bemoaning the boring state of my blog. I followed your steps and it took me less than 5 min. to get a simple, new header up on my page.

    Thank you so much for making this how-to.

    ReplyDelete
  29. You have no idea how glad I am to have found this tutorial via RW - thank you!

    ReplyDelete
  30. Hi Molly, I can't find your email to save my life - but thanks so much for that photo editor idea - it's so easy and quick - and i'm havin a lot of fun playin, but my html and yours dont quite look the same - mine doesn't give a width, just padding and margin :) can you give me an email when you get a chance?? This is so fun, I have to start lookin' around at stuff that would work well for banner pics :) THANK YOU!!

    ReplyDelete
  31. Amy and Linda, about 3-column templates, I just recently switched my blog format to three columns using this guide: http://www.threecolumnblogger.com/2008/09/adding-third-column-to-blogger.html There are different directions available depending on what Blogger template you are starting out with (mine is Minima Lefty Stretch--I might change it though b/c I'm not sure I like it stretching across the entire page). Hope that helps!

    ReplyDelete
  32. Hi this is the first time I've come over to your blog and it looks beautiful. I saw your comment on the purple house and thought I'd come over to your blog. Love the strawberries and thanks for the banner info. by the way found stainless steel straws on amazon. How awesome!

    ReplyDelete
  33. You're so awesome, Molly! Thanks so much for the tutorial. The sizing is what I've had so much trouble with, so I'm off to do some tinkering.

    ReplyDelete
  34. Thank you for posting this! I appreciate the link for editing!

    ReplyDelete
  35. thank you thank you thank you! I am "new" to blogging and I appreciate your help

    ReplyDelete
  36. Oh, my gosh...I did it!!! I am SO not html savvy; but not only was I able to make a new header, sleep deprived, too late at night, in mere minutes (ok, so it needs help, but it's better than what I had!), but I was able to remember your clear directions without having to look them up again (up until the border; when a reread fixed it in a sec!). Thank you, thank you, thank you!

    ReplyDelete
  37. Thank you Molly! I am WAY overdue for a makeover of that sort.

    ReplyDelete
  38. Thank you! Thank you! Thank you! I can't tell you how I have longed for this information!!! My best friend, Kelly and I have had too many conversations over the phone while staring blankly at computer hieroglyphics. You have my eternal gratitude!!!

    ReplyDelete
  39. Thank you for the nudge! It was on my list of things to do, but I never managed to get around to it until today. And thanks also for the info about Picnik - what an easy way to edit quickly. Much less intimidating than CS Photoshop.

    ReplyDelete
  40. Thanks for the tutorial, much easier than my way.

    ReplyDelete
  41. Thank you so much for sharing this...I had a great time at Picnik and ended up inproving on a header I already liked but that needed some tweeking. You are so nice to share!

    ReplyDelete
  42. i was wondering how did you get your blogger layout 3 column?

    ReplyDelete
  43. Thank you so much!!
    You have no idea how much i needed this info but just didn't know it!
    Now i am so excited to start designing my own blog headers YAY!!
    xx

    http://nikki-inthenet.blogspot.com/

    ReplyDelete
  44. Hi! GREAT Tutorial! I love your headers!!! So...question!? When I scroll down in my blog html, this is what I get...

    /* Header
    -----------------------------------------------
    */

    #header-wrapper {
    margin:0 2% 10px;
    border:1px solid $bordercolor;
    }


    Don't see anything about width here??? Is it because of the template I using? I will play around with it a bit more! Thanks again!

    ReplyDelete
  45. Thanks Molly for taking the time to share this with all of us.

    ReplyDelete
  46. Hey, this was such a serendipitous post for me to read today! I now have a new header for my new blog! Thank you so much for sharing your skills!

    ReplyDelete
  47. so....when i tried this, the header on my blog ended up HUGE (http://www.dearlittlewater.blogspot.com) Any of you have any idea why??? of course this would happen to me :)

    otherwise, this has been such a fun experience-- i could create headers all day long!

    ReplyDelete
  48. oops-- nevermind! i think i figured it out. I just have to use the medium size, instead of the original size, for some reason.

    thanks again! so fun!!!

    ReplyDelete
  49. Thanks for the tutorial... I needed a kick in the pants to make a new header for my blog :)

    ReplyDelete
  50. THANK YOU! I have wanted to do this for a long time, but couldn't figure it out. YOu would think that blogger would have a decent help section, but no.

    Gratefully,
    JIll

    ReplyDelete
  51. Many thanks! I am really so clueless as how to make adjustments. This is great information!

    ReplyDelete
  52. Thank you so much for this tutorial. I haven't managed the three column blog (for some reason the extra sidebar is being put on the right instead of the left) but I have managed a header and had enormous fun doing it.

    ReplyDelete
  53. More thanks, thanks, thanks.

    I'll try my hand at it this week.

    ReplyDelete
  54. This is a great tutorial but for some reason, blogger will not let me change my header. I've tried everything and it refuses to change it. Any suggestions? I even reverted my blog back to the plain old blog template, thinking that I had messed up something int the html that was preventing me from changing my header and it still won't work. :(

    ReplyDelete
  55. wow... this is brilliant. i am so excited to make my own header!! and i am so thrilled to have found your blog... it is wonderful. thank you for taking the time to share your creative energy and inspire the rest of us to join in.
    i have a very novice question... how do you make your comments visible to everyone? i can't figure it out?? i also use blogger.

    ReplyDelete
  56. I've been wondering how to do this and didn't have a clue. Thank you!

    I know nothing about html. And I haven't tried picnick yet. But you've inspired me.

    Thank you thank you thank you!!!

    ReplyDelete
  57. thank you thank you thank you!

    ReplyDelete
  58. I found you after googling how to make a blog header. So glad I landed here - what a lovely blog.

    Thank you for this excellent tutorial.

    ReplyDelete
  59. thank you so much for taking the time to post about this. you helped me out so much! my site looks better and i feel like i learned something! thanks!

    ReplyDelete
  60. Really glad I dicovered this! I have a lot of beautiful pictures I clicked but I had no idea how to do this.
    Thank you so much!

    ReplyDelete
  61. WHoo Hoo! I did it! Thanks for the great info!

    ReplyDelete
  62. HOORAY!!!!!!!!! Thank you so much!!! :D

    ReplyDelete
  63. this was soooo helpful. thank you so much! i would have NEVER figured that out on my own!! wow! i made a new header and i love it. also, thank you for introducing me to piknic. omg! i had NO idea! i am having a blast already!!

    ReplyDelete
  64. I finally had a chance to play with this and in 10 minutes I'm already happy with the results - thanks for the easy to understand tute!

    ReplyDelete
  65. Thank you so much!! I was so frustrated with my blog header until I found your post! I love it!

    ReplyDelete
  66. I love your new header! And I totally respect your internet-free decision, so if you don't have time to reply to this, I get it. But just in case...I've been using your wonderful directions to create my headers, and it's time for a new one, but Flickr's changed, and I can't figure out how to put the picture into blogger once I create the header! Any tips?

    ReplyDelete
  67. Thank you!!! Now my blog can be pretty :)

    ReplyDelete
  68. thanks so much for this post. I am finding some of my blogs need some experienced help..such as this one...going to try Picnik now

    ReplyDelete
  69. Great tutorial, i didn't even have to finish reading it! it was that easy... Thank you :-)

    ReplyDelete
  70. i could kiss you!! i knew how to do my header in picnik (disregard that i just opted to do a photo of portrait orientation rather than landscape). i did not know how to make that darn border go away!! my blog background is not white, but i was able to adjust it to make the border disappear. thanks!! ;)

    ReplyDelete
  71. yaaaaaaaaaaaaaaaayy!! it was so easy!!
    i did it with acdsee pro. thanks so much!! :D
    now my blog is purrrddy.. woohhooo :D

    ReplyDelete
  72. Just found your beautiful blog through a google search on Headers. I have been so frustrated but your tip about picnik solved the problem! Thank you! I'll definitely be back to look at your blog again.
    Sandra

    ReplyDelete
  73. Dear Lord where have you been all my life? Thankyou so much.

    ReplyDelete
  74. yes, THANK YOU!
    I feel like my blog is now somethin special!!

    ReplyDelete
  75. Thanks a million for these simple, easy-to-follow directions! They were just what I needed :)

    ReplyDelete
  76. I just wanted to say THANKS very much. I have hated not having a banner for SOOO long and today after finding this post I was finally able to pop one up and I just LOVE it! Nicolex

    ReplyDelete
  77. Thanks so much for this tutorial! I just applied it to my blog and it had made a world of difference from the original option.

    http://kitchencactus.blogspot.com/

    ReplyDelete
  78. Wow!!! Thank you so much! :)

    ReplyDelete
  79. Thanks for posting this awesome tutorial!!! Makes making headers a breeze!

    ReplyDelete
  80. thanks for the tutorial ,its so helping me..!!!~
    ^____^

    ReplyDelete
  81. Hey, that was one of the best tutorials I've found ~ thanks a bunch!

    ReplyDelete
  82. Love! Thank you it was simple and fast!

    ReplyDelete
  83. I adore your current header and would like to do something like this for my footer. Would you consider doing a tutorial on the line of circles? It's so unique!

    ReplyDelete
  84. Thank you so much for this - I'd been fiddling round for days and with your tutorial it took mminutes!

    ReplyDelete
  85. Hello,
    I found this via a google search for how to create a blog header. I just wanted to join everyone else above in saying thank you very much - this was easy and well explained and I just created my first blog header on Picnik, and I love it!
    I am now very sad to see that Picnik is closing down in April - I will have to create loads of headers and save them, until I find another site as good.
    Thank you!

    ReplyDelete

Archive

email: mollydunham@sbcglobal.net
Share |