How To Add Social Media Icons At Header In Blogger

This tutorial helps to add social media buttons at header in blogger . This widget give a professional look to your blog and also visitors can easily access your social sites . This buttons will appear always in homepage and also in sub posts page . In previous tutorial i explain how to add metro style social icons to blogger have a look and also try this widget in your blog .

Steps To Social Media Icons At Header in Blogger :

#1. Go to Blogger Dashboard .
#2. Now navigate to Template Tab and  click on EDIT/Javascript .
#3. Now Find ]]></b:skin>  tag by using CTRL+F .


Java Script : 

  /* 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;
}

#4. Now Find Below Line in HTML/Javascript by using CTRL+F.

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

#5. Now add the below code just above it .

 <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/AVvXsEhWV04JtHoyn0MPxe0isj9PjICdAyHbH-ZbakA2CikLyCJ3FHlhyio4avif_NAler-qMywXGA07KV8x-y221HvXieleb8-zubpr2ITCAi_OLTddxQekXmjBs2jcjDn7nk40Pl40OHnprgs/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/AVvXsEizeX-eGTeZCPs2SenRcUE9ATqvJMod5_oRJQt3an1R0dF8YA_WX4YhscjYBG_DObyJPwyClGWx7O8BOk9IwZAq14Ju-qP76Ck2MkZCK-391fKzIHQICnMJda0ufVCQNUIsl3G8gMA_NMY/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/AVvXsEiH8TcVlcgUUPYfo_VzJNjxNB6UuzwLyjAVTDUmb7eyn-5KS9xznfeOyUNpul1FjOOJaVPQrOIrbk1bRfvdFXTmCFJLQVAlqhGBQ7k-AMMLxVUmh35IvbY1Wl9YS1oBTizJC32TCAM3F3g/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/AVvXsEixE3Oss2Ahbi5kt7_aOFJJYtbhM4DcphhYOsxL2tNIJwZCM2fy_LIOzbZOlzCnBXnBT-ho1hc7lzPTFsob4uOB091HdhycqMxgbjFyh9dhXWb3e5SY1UGrpCSXv5zyV3TvEo4ZhKooD1c/s1600/RSS.png'/></a></li>
</ul></div> 

Note : Now change the colored lines with your desired name and add your google id in google plus section .

#6. After changing urls and names in code section , Save your template .


Don't forgot to share our article - " Sharing is caring "

If you have any suggestions or querie related please feel free to contact or comment in below section .