Wednesday, 11 July 2012

Beginner Blog Experiments: Headers + Icons

Have you ever wondered how to make clickable headers or your own social networking icons?

I am quickly approaching my one month blogoversary and have really enjoyed exploring the blogging community and messing with blog design, and as you may have noticed, I just changed my blog header!

I am not a web designer, graphic designer, professional writer, or anything that would lend my blog professional credibility, but I know how to google, and I know how to read. :) In other words:

This is not a tutorial. This is a list of resources containing other bloggers' tutorials that I followed and merged! While brushing up on my pathetic HTML/CSS skills, I found it difficult to find straightforward tutorials that taught you how to make clickable headers, so I've decided to share the ones I found that worked.

If you're a new blogger like me with nonexistent web skills looking for an easy way to make basic changes to your blog, these ones work great:

Social Networking Icons:

If you want clickable social media icons in your header, make the icons first. If you're linking already-made images or to other websites, skip to 'Clickable Headers'.

I followed Something Swanky's tutorial, "How to Create Your Own Social Media Icons using Picmonkey". Thank you!

While she links you to a great set of vector images to use for your icons, she isn't a book blogger and the set does not include a Goodreads icon. Alex Peattie, a web designer, has a set that does (scroll to the bottom). Follow her instructions using his icons instead.

Once you've created your icons with 
Picmonkey, add them to your header image in Photoshop! I don't have Photoshop, so I used Microsoft Paint, which is pretty crude but worked just fine. I literally just dragged the icons into place.

Adjust the header size to the desired width in Paint using the Resize button.
How do you know what width to make it? Go to Templates > CustomizeAdvanced > Adjust widths in Blogger to check the width of your blog and adjust accordingly. Mine is around 900 x 350 px. You'll be left with a single, unclickable image:

Clickable Headers: 

Once you've made your header on Photoshop or other similar programs, host your header on an image-hosting site like Photobucket.
A quick google search led me to Arnold Byun, a youtuber/student entrepreneur who does a pretty straightforward video tutorial:

Follow his instructions and map your image using Image-Maps! Make sure you upload your image using the Photobucket link or similar photo-hosting site, because Image-Maps doesn't host photos and the photo will eventually disappear. This site will allow you to link different parts of your header to different sites or applications like Facebook, Twitter, Goodreads, etc.

Once you've watched how he does it and clicked 'Get Code' at the end, do the following to add the new header to your blog:
  1. Backup your blog.
  2. Go to Blogger > Layout
  3. Click 'Add Gadget'
  4. Add an HTML/Javascript gadget. 
  5. Paste the code you got from Image-Maps. 
  6. Drag the HTML/Javascript gadget box to where you want your header to be (presumably at the top of the page). 
  7. Remove your old header. 
  8. Check your blog and links to make sure they work.

And there you have it! This is the method that worked for me, so I hope this help!


  1. This is such a cool post! My computer skills are rubbish, so finding something easy to follow is a blessing. ;) Thanks for sharing! :)

    1. Thanks girl! Hope it helps! I'm sure you can do much better than I did!

  2. Wow, I really like this! I don't think I have come across clickable buttons in a blog header before... If I have, I haven't noticed. ;)

    Thanks for this! I suck at this sort of stuff too so it's nice to get a simple breakdown. :)

    1. Thanks for reading!! Let me know if you try it out; would love to see how it works for you!

  3. Oh my word. I am in love with this post. I struggle so much with this type of stuff and I needed this in my life, haha! Thank you, Lauren! :)

    Grabbing your blog button & adding it to mine. So adorbs ;)

    1. Glad I could help!! And thank you!! So flattered; if you ever make one let me know so I can grab yours too!

  4. Your new header is so cute!! Looks like a really helpful post, will be sure to refer to it if i ever need it.....

    1. Hehe thank you stranger. Hahah you better use it in the future!! So excited for this potential blog...

  5. Thanks so much for this post! I am awful at computer-ish things but I've been dying to have this type of thing on my blog so this will really help! :)

    1. Aw, so glad I could help, Lauren! Let me know if you do it so I can see how it turns out. :) I will be posting more of my experiments soon so keep a look out!

  6. That's really good, thanks! It's nice to have a collection of straightforward resources all in one place! (Yes, I would be too lazy to go figure this all out for myself *sheepish smile*) When I have some time (WHY does it always seem like I'm crazy busy?!? Even though it's the summer holidays now and I really should be UN-busy!!) Anyway, thanks for this post, it was really helpful! :)

    1. Hehe thank you! I totally know what you mean. I'm sometimes so lazy to look this stuff up but I really do want to learn! Glad I could help! Let me know if you try it and it works. :)

    2. Oh, and if you have any questions or if something wasn't clear don't hesitate to ask! Happy to help!

  7. Hi! This post couldn't be written any better! Reading through this post reminds me of my old room mate! He always kept chatting about this. I will forward this post to him. Fairly certain he will have a good read. Thanks for sharing!

    My blog post - Local Florists In Kennesaw Ga

  8. If you are going for most excellent contents like me, only pay a visit this website
    daily for the reason that it gives quality contents, thanks

    Have a look at my web page:

  9. Nice answers in return of this issue with real arguments and telling all regarding that.

    Here is my webpage - Chiropractor

  10. My coder is trying to convince me to move to .net from PHP.
    I have always disliked the idea because of the expenses.
    But he's tryiong none the less. I've been using Movable-type on various websites for about a year
    and am worried about switching to another platform. I have
    heard fantastic things about Is there a way
    I can transfer all my wordpress content into it? Any
    kind of help would be greatly appreciated!

    my blog -

  11. Thanks very nice blog!

    My web page golf chipping schools

  12. What's up, after reading this awesome post i am also cheerful to share my know-how here with friends.

    Also visit my weblog ... personal injury attorney

  13. My spouse and I absolutely love your blog and find
    most of your post's to be precisely what I'm looking for.
    Would you offer guest writers to write content for yourself?
    I wouldn't mind creating a post or elaborating on a few of the subjects you write concerning here. Again, awesome site!

    My blog post ... St Cloud Floral

  14. Pretty part of content. I just stumbled upon
    your site and in accession capital to claim that I acquire actually loved
    account your weblog posts. Any way I will be subscribing on your feeds or even I fulfillment you get entry to persistently

    Feel free to visit my website ... athletic trainer degree texas


I love meeting other bloggers and readers, so let me know what you think! I try to always reply to comments, either directly or on your blog.

Related Posts Plugin for WordPress, Blogger...