How To Add Social Media Icons To Blogger Header

Please follow below steps for add social medial icons to blogger:
Step 1
Log in into your blogger Dashboard, Go to Template and click on the Edit HTML.
Step 2
Search below code with help of CTRL + F and type ]]></b:skin>
Step 3
Add below code just above it:

/* Social icons for Blogger ----------------------------------------------- */ #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; }

Step 4. Now search for this line

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Step 5. And just above it, add this code:

<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/AVvXsEgTvuh3xuuPqI6rZfSxKlRodRdwex4OlB8iWPl-e1NiISkFZCkXSIKI5Nrcp5TczDkHZyU3VS4k5oiIyf6-8XZE0jhSo0r5KOOtgVpQc3N8P3rjHeUKxPODVqO2x2V9Elf2l92w0vIWiak/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/AVvXsEjoYK5nt9m_4lrbULaIjod3b4UgM2j8qnNKdFnFiE3_9SCHYkxigRV1QWd_YVEVBijDNPcs9gh727PLtjybuqzYe5pi6duCrixFw68naGeCYNCmWjyGE-qTNvGMmOsC4wn0yItuOAiUcyU/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/AVvXsEhz1r5Z1RPJgMXkUYiboEHZTZ5FRD2xSsG8n_yUG9dCJzGgYq0UEMavg1lzYDev19LK-aREFsS73w2JUo4y5ImSlKCFOxaeFyimHre2PLt7yZek3GYMndVHEXvPq-j_GvPtp1k4XGulZH8/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/AVvXsEiaQ-aJzcZbKzT4j_N7XcdZe0qhuMsEpoz3RHbuO__h4LDKhgwJ0RRheSmjLu2VBzdJbUH_h57JpiyPyXfNsKYV-5Lw5xxSoB_6ch7QmxMuic963jS80-PIJQtwhAhbhjnUCLUX24YgdFY/s1600/RSS.png'/></a></li> </ul> </div>
Step 6.
- Change what's in red 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.
Step 7. Finally, Save the Template to apply the changes.

The effect is done with CSS3, so this effect will not work in older browsers.