You can add this widget by pasting the below code in the desired location or if you want to show these icons after the post then go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for <data:post.body/> code and paste the below given code just below <data:post.body/>.
NOTE : There maybe more than one <data:post.body/> so make sure that you have selected the right code.
<div class="social social_intro">
<span class="title-ico">
Follow Us On :
</span>
<a href="#"><i class="fa-facebook"></i></a>
<a href="#"><i class="fa-twitter"></i></a>
<a href="#"><i class="fa-rss"></i></a>
<a href="#"><i class="fa-pinterest"></i></a>
<a href="#"><i class="fa-github"></i></a>
<a href="#"><i class="fa-cloud"></i></a>
</div>
<link href="http://theme20.com/demo/valeo/styles/icons.css" rel="stylesheet" type="text/css"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"></link>
<link href="http://files.allbloggertricks.com/abt-icons.css" media="all" rel="stylesheet" type="text/css"></link>
<style>
.social a {color: #fff !important;}
</style>
After adding the code follow the below given instruction.
How to Customize
First of all you have to replace #
with the desired profile link you want to add. Secondly you can add,
remove or edit the <a.... </a> as per your wish. To change or
add new icon you may add a new <a..</a> or edit the existing
one. You just have to remember to change the class name i.e. from
fa-cloud to fa-instagram, fa-stackexchange, fa-skype, fa-dribble or
anything as per your wish. Most of the major icons have been covered in
the above given code. You may also change the color of the icons
according to your blog's skin color. To do so scroll to the bottom of
the given code and change it as you want. By default it is White
Thats it. Save the template and you
are finished. Now you can see awesome icons on your blog and with a
greater possibility of editing them as per your need.