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 > Customize > Advanced > 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!