Tutorial # 32 - Add Social Media Icons to Blogger Header

This tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers can follow through the various social networks. The icons will rotate when you hover over them.

Step 1: Go to Blogger dashboard > Template > Edit HTML

Step 2
To expand the style, click on the small arrow on the left of <b:skin>...</b:skin>,

Then click anywhere inside the code area to search (using CTRL + F) for the ]]></b:skin> tag

And then add the following code just above it

Step 3: Now search for this line


Step 4: And just above it, add this code


Step 5: Following changes shall be made by you
- Change usernames at lines 4, 6, 8, 10 with your usernames and id: the first is your Facebook username, the second is that of Twitter, in the third you should change the X by the ID of your Google+ profile and in the fourth you will put the name of your blog.
- To change the icons, just replace the urls in the above mentioned lines with the ones of your images.
- You can add more icons if you want, you just have to add before </ul></div> a line like this for each extra icon you want with a Link URL and Image URL:


Step 6: Finally, Save the Template to apply the changes.