how to add social media buttons to blogger

social widget is very important for your site. today almost every people use social media. If your blog contains some valuable post on it, social media definitely gonna help you a lot. you can share something to your facebook page or let visitors contact to your facebook page or any social media site your using.

1 Copy below code and paste inside your bloagger template, under <head> . . . </head> tag(below title). If your template already have these links then no need to put it again.

Paste inside header

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

2 Below, it is a social link widget code you can copy this code and paste into your blog layout. if you want to add it on the top of your page (fixed position). then you have to add this code below your <body> tag. Just after it.
Replace those orange colored text by your links. Add more <li>tags to create more Social links such as linkedIn or youtube or vk
If you dont know how to do that follow these steps.

Main code

<div id="OuterBox" class="w3-container">
 <ul class="w3-pagination">
  <li>
   <a href="facebook link" class="w3-blue w3-hover-light-grey"><i class="fa fa-facebook"></i>  | facebook </a> 
  </li>
  <li>
   <a href="google plus link" class="w3-red w3-hover-light-grey"><i class="fa fa-google-plus"></i>  | plus+ </a> 
  </li>
  <li>
   <a href="twitter link" class="w3-light-blue w3-hover-light-grey w3-text-white"><i class="fa fa-twitter"></i>  | twitter </a> 
  </li>
 </ul>
</div>

how to add to my blooger :

Go to blogger dashboard
Click layout from left side menu
Go o any sidebar and select gadget
Choose HTML/JavaScript from 'basic' menue
Give a title and paste code inside the content

Also try

Only icon with mouse over style

<style>      
 .codepp {
 }
 .codepp:hover{
  transform:scale(1.2,1.2);
 }
</style>
<div id="OuterBox" class="w3-container">
 <ul class="w3-pagination">
  <li>
   <a href="facebook link" class="codepp w3-blue w3-hover-light-grey"><i class="fa fa-facebook"></i> </a> 
  </li>
  <li>
   <a href="google plus link" class="codepp w3-red w3-hover-light-grey"><i class="fa fa-google-plus"></i></a> 
  </li>
  <li>
   <a href="twitter link" class="codepp w3-light-blue w3-hover-light-grey w3-text-white"><i class="fa fa-twitter"></i> </a> 
  </li>
 </ul>
</div>