I get asked about my blog header a lot. And I love sharing knowledge and helping out other bloggers,so I decided to put together a tutorial on how I customized it and added clickable social media icons to it.
You don’t need a lot of geeky knowledge to do it either.
First, create your banner and include the social media icons images you want to use. There are many free social media icons you can download online or you can purchase them from designers or even make your own.
If you don’t know what size to make your banner, the easiest way to find out is to:
Right click on your existing website banner.
Click – Open image in new tab. The full-size image will appear in a new tab.
Copy and paste that image into a picture program like Paint.
To get a clean, white background just SELECT ALL and DELETE.
You should now have a clean white background at the exact size you need your banner.
Save that white background as a jpeg.
Next, open up that new image in your picture program – Photoshop or PicMonkey and design your new header.
I use Photoshop to make all my graphics but you can use any picture program.
Make your banner clickable…
Once you have your banner the way you want it. Save it.
Now go to one of my favorite FREE graphics tool on the web -> Image Map Tool.
You will see a screen like this. Upload the image you just made.
Click Start Mapping, then Continue and it will bring you to a screen like this.
Right Click – select Create Rect
This will bring up a pop-up box where you can select which area you want to be clickable.
The first icon here is Pinterest. So drag the points to the ends of each button. Now in the pop-up box, where it says MAP URL, enter in your link.
Next, click on the Events tab. You want the link to open up in a new tab or page. Select _blank in the first option.
SAVE. Do this for each icon.
Once you are done mapping all of your icons, Right click and select GET CODE.
That will bring you to a screen where you will be able to copy the HTML code to put on your site. The second box will have your code.
Now notice this little message here in red? This means that this is just your temporary image URL unless you subscribe to the image-map site.
I want to host my own image and not have to rely on the site. So in order to do this, upload your new banner to your own image hosting site, whether that be in your Word Press Media Library or Photobucket or wherever else you have your blog photos.
I uploaded mine to my Media Library in Word Press.
This is my image in my media library. The red arrow is pointing to the IMAGE URL on my own site. This is what I need to replace in the HTML code.
You can’t edit the code in this box. So select all the code and paste it into your header or widget on your website where you want it to display. Where you put in the header code depends on your layout and your blogging platform – (Blogger vs WordPress).
Now you can replace the image source with your own. Replace the URL in quotes after “src=“. I highlighted it above.
And now you have your very own customized banner with clickable social media icons!
If you aren’t familiar with HTML and don’t feel comfortable replacing the code, you can always subscribe to the Image Map Tool website and use the original code. I just chose not to do that.
Check out my signature below. I made that that clickable as well! You can do so many things with this.
Hope this tutorial has helped!