How To Display Social Media Icons In Blogger Header

Adding Social Media icons in the Top Right Corner of your Blog will help you to increase fan following. Today, in this article we will show you "How To Display Social Media Icons With Rotating Effect In Blogger Header". These icons include Facebook, Twitter, Google+ and RSS feed. We have published many social widget already on Blogs Daddy blog. In easy steps you can add this widget to your blogger blog. 

Add Social Sharing Icons To Blogger Header

The first thing you need to do go to Blogger dashboard. Now select your blog and go to Template ›› Edit HTML, and find ]]></b:skin> code in your template. Copy-Paste the below code just above ]]></b:skin> tag.

  /* Social Icons
----------------------------------------------- */
#social-icons {
margin-bottom:10px;
height:50px;
width:100%;
display:block;
clear:both;
}
.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;
}

• Now, search for the below Line

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

• And just above it, add given below code:

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

<ul>

<li class='media_icon'><a href='http://www.facebook.com/BlogsDaddy' target='_blank' rel='nofollow'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx4gu0AoPCu9RaqyazmhnuaQzs0RmNQ36_lW9ZMGzXDMkEo9tSAk0TiHch1LsQ5i24VR3Ziz8ZbwxwNBewgDlb2asU-8hijWFu2iOE6LvysA0lnXkZ8KtrfHIPANgN_EsqS9WtcCHmLJk/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/BlogsDaddy' target='_blank' rel='nofollow'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV2Z-rCrwPnf_YzE213WUfphbEIxXznC3AyT3d65T6XRBBMq0AhOtenhfzZLSC34PLamVP0DwRFvGFp9ZWOf6G1ucs4qtmwO-vjo0Qp_m3j7H5xIloRNXq4c_lmrNw2TD5o7L-PTZ18ZM/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/117100549673033253859' target='_blank' rel='nofollow'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC-JdnrkGBGT7dQvdLz0Qow96J6u0hy5fSH-3vSROeiwuXZYa3R91P1qmaQIwyXdkcr7dC2YndBateVRykQRjnsEMI4QeBRCJHkzgS1v82sFyOjM1n5NAFFyH8jEgH0E6yiHhmV0xqex0/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://feeds.feedburner.com/BlogsDaddy' target='_blank' rel='nofollow'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfJwk8TTYdz3qYvfnWq5ALclSjBPfY6Cqxny2LEkXcsP-TiKqfFtu571coaqBWQo6kSLIbUAj3_SGLwI0mqrybQOpKtYjrkWXvybOnSDuL85m3qFOPLCS8uQurd3z61nA9-R_4dn2ln5o/s1600/RSS.png'/></a></li>

</ul></div>

Also Read - Circle Social Media Icons Widget For Blogger Blog 

Customization

The social and RSS feed links are highlighted in red color, you need to change these to your own. If you our help then ask via comments. Peace, Blessings and Happy Blogging :)

Author - Gagan Masoun is the owner of Blogs Daddy Blog. Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can follow him on twitter @BlogsDaddy. You can also follow him on Google+.