How to Make A Blog Header with Clickable Social Media Icons

Today let me share how to make a blog header with clickable social media icons just like my new blog header.

How to Make A Blog Header with Clickable Social Media Icons

First, I made a new header using the ever reliable Photoscape. Then, I added social media icons and here it is.

So how to make a blog header with clickable social media icons?

Here's an easy step-by-step tutorial on how to make a blog header with clickable social media icons.

After making a banner of your own choice of design and with social media icons, we will go to Image-Map.com. This is a FREE graphics tool on the web.

1. Upload your banner.

2. Click Start Mapping and then Continue to proceed to the mapping page.

3. Right click the icon and click Create Rect or Circle. Your choice, but I choose Rect because it is much easier.

4. Draw a rectangle/square and add your URL. In this case, the first icon is for FB so I change the map URL to the URL of my FB page.

5. Click the Events tab. Then click _blank under Target if you want the link to open up in a new page.

Click Save. Repeat steps 3-5 for each icons. Don't forget to click save after each icon.

6. Right click to the screen and click Get Code. A new pop up box will appear, then click HTML code.

Scroll down and you will find the HTML image map code below. But there's a warning there in red saying that the image URL is just a temporary URL. You need to upload the image to your own image hosting site. 

I uploaded mine at Photobucket. How? I just upload the banner and copy the image URL. I then use that URL from Photobucket to replace the temporary URL above.

How to add this new blog header with a clickable media icons? I remove my header widget and add gadget instead using the HTML image map code. But remember to change the image URL with the URL from your own image hosting.

That's it. Feel free to leave a comment and by the way, see my signature below? I also made that clickable =)