How To Add Social Sharing icons To Blogger Header?

In this tutorial I will show you how to add social sharing icons to blogger header which could increase your likelihood that reader can follow through the social network. This widget contains icons of Facebook, Google+, Twitter and blog feed. Just follow these simple steps.

1. Go to Blogger Dashboard and Select Template.

2. Backup your Template before making any changes to your blog.

3. Click on Edit HTML.

4. Now expand the style by clicking the small arrow on the left of <b:skin>...</b:skin> in the template coding, as shown in below screenshot.

5. After expanding the style search (using CTRL + F) for this tag: ]]></b:skin>

6. Now Copy and Paste the below Code just above:  ]]></b:skin> tag

/*…………… Social icons for Blogger blog……………..*/

#social-icons {

margin-bottom:-30px;

height:50px;

width:100%;

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;

}

7. Now search for this code:

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

8. And just above it add the following codes:

<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/AVvXsEi39tw2wwvxEGasEnMUEL25vVCpqt-FUmJHGApR-SKnvLYWtDDqgHo5UsrfJ4X240GW3_2fn18bapXYOmuqRxqVrXw2jrG1AgamCFS4c-QySotZ8Vwh1RvZ835dpT-O9gC5vIPCAsrbZz8/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='http://3.bp.blogspot.com/- x7YZ7aKIxM8/UaKErq0FZlI/AAAAAAAADhE/3zNd_IFPT8g/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/xxxxxxxxxxxxxx/about'><img border='0' src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXD-UI6SB3lRmPvJhkDfaQYSZKcQ3bKDxckfC0XkuafWgXNVYfuf62LL07WWlmLXijJ8oRi9W7sADuWUXhTX7QeQ89JLj-N8I6H3xLnvUzPqOFfexCjU6dMcZQBasq20Fwiz2ylIAb42s/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://name-of-your-blog /feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFaFiNC3XO7vBiRw3GqNtTxfz3t22vLmxYzc3vS3IPxQAe21sZq-8H86oIHFRbAbOjJbvt6p8c5pYUYHd8_5nbj4TisvjrNFMtVZqpPA-jQ-nJHhxZc1lfx7B2f-DBCjcic0_imCrtkNw/s1600/RSS.png'/></a></li>

</ul></div>

Customization:

1. Replace username with your Facebook and Twitter username.

2. Replace xxxxxxxxxxx with your Google+ Id.

3. Replace name-of-your-blog with your Blog Name.

4. If you want to change the icons with your own image, just replace the url in green with the ones of your image.

5. Save the template to apply the changes.