How To add Social Media Icons to Blog Header

How to add Social Media Icons To Blogger Header

• Sign up to your Blogger Dashboard.
• Click on Template Tab over there.
• Then click the "Edit HTML" Tab there.
• Now proceed in the Code area.
• Search for ]]></b:skin> Tag.
• Now copy the Below code and Paste it above the ]]></b:skin> Tag.

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
display:block;
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;
}

• If you do the above steps search for the Below Line.

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

• And just above the Line, Add the Following script.

<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/AVvXsEg081AhOcnRzh3EjX75chSN_5gbF0mpnlsxAIM0Uh8iL_xHX2Keyujem5No_SBiooh_QpwhyphenhyphenM4puBl0m8Wq-ezmHGUCkbODCWBJ1wv_0uArfL2MQNBzhvLs5yMc05EfbNfYNnvwAZNDoLc/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/AVvXsEjWvZ3EhVXPl5HBhELd-EmSnDbmD9bFZ2ZmD1juJx6kTBKND7v0c8OsZ1pFqrlOrc4GuMZu4Fz-yqWQIPfJoiV-0oDx0U4Od9aDIPqKyvpzEHXQE16sxO7aSJV-GuXydbJQQtouWp1lW7E/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/AVvXsEj6dQEa9iZthWLYZtVcD8ZRs55V-3j0z5weMZv0rwnWoajKCcgfZP6GXVIKxj7Ah3AX8dpq98CxxR_KdXpgbls1h_lAza64cGzNyQQbNClqreoF8GMyLF4hFeeTTmFYvzVkDkh2bYKZoMM/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/AVvXsEjEFtqe-nC89dwT_nrxmUiMNJrnntvEKfeftA5qfxaZrMd86bffrU2JycG7R-ra4j3rsPICgI3tw-YvLFT6IhbXtwSZ3soQCccXYnmKEIjzKagQW21eL6vpUL4Xoq7NNvF9mt4TvHoxEqg/s1600/RSS.png'/></a></li>

</ul></div>

 Customization

• Change in red with your own usernames and ID, change the First one with your Facebook username, the 2nd with your Twitter username and the Third with the ID of your Google+ Profile, and the last with your Feed URL.
• Now save your Template and Enjoy the Awesome change.