How To add Social Media Icons to Blog Header

How to Add Social Media Icons to Blogger Header:Important thing you should do in order to get more of your likelihood and reader from the social media Hub.However, adding Social media icons to Blogger Header is very simple, The following Tutorial will Surely help you to do this Hack.Actually applying this Hack will add a Bar of social media icons to your Blog top right corner with cool Hovering effect in advance.

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/AVvXsEia6L6yyGOMwXOnfdWTy5QeEJLfVnMe6kW6s2b1ilkLJ_UKCxQQqkJY2a5s7ZzBvbvufQtqzymHXl9E6-dr99FDYwEcOgSVpuwhFPPSnNGDaRPHPOcxsEHA082GYA5lDRdslY9NqhAkKrE/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/AVvXsEitdtfmFGWyR4PsGDhugqgvdoN_Hu7J3SA0BrKmK04WJBsvSWIq-jHeUGutSjn10725LZ9wytENbZRqUTGm1_dZbTxJulrWoSU7UV8EJ1KwGdwsWn_t1Uuv_s5aE3Cn_piv-BzpiQ2pwrE/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/AVvXsEioj_Sof3JtcV4qoc2yUHeF4ep958yq5-PyfXHWP62Fvg5J0TuPPC3tkARgAfTZ8iUzpJjmen2TzXbF19scsYvMwLCqLc1HGfp9akcmeAOsutoZfjrWYJ86QrxUqHl_K4owANOMa6ozysQ/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/AVvXsEjSZ6T8aR6eUP0fZF2j_DYFn4DzVr1wa0UwAO0NlhaScfnV6UyQYTog3BeP8bYXWWNO1V2wsliJ6XHX3TL_uAam4aUank4Uze9k2RQ5dK4_344_Qf4uWK0zSnIJtw4S9hKThKh8BSVVFFQ/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.

If you have any problem regarding this hack or you want to ask questions don,t be shy ask whatever you want in the comment BOX we are here to solve your problems.