How To Add Social Media Icons In Your Blog's Header

In this tutorial, I will show you how to add social media icons at the top right corner of the header. This is a smarter way to boost your social media subscribers. It also makes your blog to look more beautiful and professional. Just follow the below steps and you will be able to show Facebook, Twitter, Google+ and blog feed. Also, the icons will rotate when you hover over them.

Add Social Media Icons In Your Blogger Header

Step 1 : Open your blogger dashboard. Go to 'Template' and then click on 'Edit HTML' as shown in the picture below.

Step 2 : Click inside the code and then using the keys Control+F, open the search box. Now write the code given below inside the box and hit enter to find it.

            ]]></b:skin>

Step 3 : Now copy and paste the following code just above it.

             /* Social icons for Blogger

----------------------------------------------- */

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

Step 4 : Now search the following line in the search box

             <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Step 5 : Just above it, paste the code given below

             <div class='social-media-icons' id='social-icons'>

<ul>

<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmLNDXA1KwU9P1vxhyphenhyphenAorAMfckl6DN3KlOYaotkwirwYlhC5Xqibl-Gz57VMtfrN_euA84j5izKGECkFvJLgn7Qa0q3xqIIlt7ieQT72pWx831dRYf7zJap9qLfNyHySiUKxr4gtryylI/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhECiU8G9QiOmus6wOr2-Ej7T1Q3xyWDXNPdN1gdtXXs4dfZxHVJIgaBn049zXwqYkmUx7nh4Umb6VzRgK_7MLyQgnl5PHOt8pPcn5AO7jt0jFaLyF78GOFfUfViuq0xgoNho97R0gsVSc/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF0pzv6U4-miXXdJzXf9MaofVHdmgkwW4DbSK-CIvCmZqKnJymYq5D-Jpg-CHDynN1y1JOm2P4xUiuMlZjBeqyjmyAIaC4heWwcrWNOq5vuBb5ftMMPInEo4jrgDeTMrR2GL5OtrWR19w/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSE7RQuBAJ-3_uKCfr1q_1QFmYeFp0KMStD4BYVAYsr2thbmIdDv7V4ywIoOcBbamm6zxFI24RU5d1qQnSsR_PamtvN98z6N5qSPDATtzoE5iE_3nzqaWxBS7qnwGpbr7-G11ywy5_gMI/s1600/RSS.png'/></a></li>

</ul></div>

Customization

1. Change the red text with your user id, the first is your Facebook username, second is Twitter, third is your Google+ and in fourth as written, write the name of your blog.

2. To change the icons, you have to change the URLs shown in the blue color.

3. You can add more icons or remove, just add a line like shown below

   <li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li>

  Put your link and image URL of icon.

Step 6 : Save the template and you are done with it.