How To Add Social Share Button to Blogger Blog Post


There are approximately 7.395 billion population in the world and more than 3.419 billion internet user. usage of social media is growing much faster than everything else.The social networking site is immensely great for blogging it gives the power of sharing your thought to the world.

When it comes to Blogging then its totally great to connect your blog with social media network, you may notice or not there are many Problogger who use lots of social media sites to connect their blog, and they also add social share button to their blog which is great for sharing site content with the world.

Social share button gives power to your visitor share your blog content to their social network site. Blogger love when they see their content share with someone else, therefor every blogger should use social media and also add social media icons or buttons to their blogger blog
In this lesson I'll be show how to add Social media button below to every blog post of blogger blog its easy and simple to add.

Demo




first of all 
In this lesson we are using font-awesome icons so you need to add this code to your head section just copy below code .
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>



Adding social media Icons to blogger blog

1st step
first of all login to your blogger account and then go to template>>edit HTML>>and click anyware in the html Editor then open search box by pressing CTRL+F  and paste the following code and hit Enter.
<b:skin></b:skin>

you will see this

2nd step
Now paste the following CSS codes between <b:skin>..code here</b:skin> .
/*--------------------MERALESSON SOCIAL SHARE BUTTON CSS--------------------*/
.ml-div{
width: 100%;
}
.ml-share-title{
text-align:center;
}
.ml-share-title h3{
border-bottom: 2px solid #7FFF4B;
margin: 5px 0px;
}
.ml-share-full{
margin: 0px auto;
width: 89%;
}
.ml-social-share{     
width: 90px;
height: 50px;
border-radius: 6px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
overflow: auto;
cursor: pointer;
margin:0px 2px;
float: left;
}
.ml-social-share a,.ml-social-share a:hover{     
color: white;
text-decoration: none;
display: block;
line-height: 50px;
}
.ml-social-share:hover,.ml-social-share:active{
box-shadow: 0px 0px 2px black;
}
.ml-facebook{
background: #3b5998;
}
.ml-twitter{
background: #3cf;
}
.ml-pinit{
background: #e06060;
}
.ml-linkedin{
background: #0077b5;
}
.ml-google-plus{
background: #d34836;}
/*--------------------MERALESSON SOCIAL SHARE BUTTON CSS ENDS--------------------*/
Note: Make sure you paste CSS before </b:skin> ending tag "<b:skin>paste the css code there..</b:skin>"

3rd step
Copy below html codes .
<!-- MERALESSON SOCIAL MEDIA SHARE BUTTONS-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='ml-div'>
<div class='ml-share-title'>
  <h3>Share</h3>
</div>
<div class='ml-share-full'>
  <!--facebook div-->
  <div class='ml-social-share'>
      <div class='ml-facebook'>
        <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Facebook!'>
        <i class='fa fa-facebook'/>
        </a> 
      </div>
  </div>
  <!--twitter div-->
  <div class='ml-social-share'>
      <div class='ml-twitter'>
        <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;-&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Twitter!'><i class='fa fa-twitter'/></a> 
      </div>
  </div>
  <!--pinterest div-->
  <div class='ml-social-share'>
      <div class='ml-pinit'>
        <a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Pin it!'><i class='fa fa-pinterest'/></a> 
      </div>
  </div>
  <!--linkedin div-->
  <div class='ml-social-share'>
      <div class='ml-linkedin'>
        <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Linkedin!'><i class='fa fa-linkedin'/></a>
      </div>
  </div>
  <!--google plus div-->
  <div class='ml-social-share'>
      <div class='ml-google-plus'>
        <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Google Plus!'><i class='fa fa-google-plus'/></a> 
      </div>
  </div>
</div><!--ml share ends-->
</div>
</b:if>
<!-- MERALESSON SOCIAL MEDIA SHARE BUTTONS ENDS-->

4th step
Now search for the following code and paste html code below .
<data:post.body/>

If you find this article helpful then share it you can also follow us on twitter and like our facebook page

Don't let someone else's opinion of you become your reality. -Les Brown

Comments