5 Secrets of Blogger (Service) You Don't Know

Recent Posts

Add Custom Social Share Button after Blogger Post Footer With Font Awesome

Including share button in Blogger post helps to get more traffic from social site like Facebook, Twitter, Google Plus, Pinterest, Stumbleupon, Linkedin, Digg etc. Though Blogger provides share button after every blog post, but the design and feature are not so looking good specially professional. But the latest Blogger Free Theme released few days ago offer excellent share button. For custom theme you may need to customize social media button with social icon.  Many third party like Addthis, Sumo, Addtoany etc. allow to install share button in Blogger by providing their JavaScript code and limited design. So it would be more helpful and efficient if we can add custom share button in Blogger post. As a result we can custom design as we want without installing more JavaScript code in our HTML theme.
Add Custom Social Share Button after Blogger Post Footer With Font Awesome
Hey guys, today we will see how to add social media buttons to blogger posts.

Remove Default Share Button

If you are using Blogger default share button you have to remove this. To remove go to Blogger Dashboard → Layout → Choose Main Layout → Edit and unchecke button → Save

Installing Font Awesome

Probably you may have listened Font Awesome a fantastic icon feature. You can use awesome icons as font (so you can custom color, font-size, background etc.) in your blog or website without uploading images. See the cheetsheet of Font Awesome.

To install Font Awesome in your Blogger,

Go to Blogger Dashboard → Theme → HTML and paste the following code in your HTML Template.
<link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' integrity='sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN' rel='stylesheet'/>
Insert HTML code to Post Footer

Search for post-footer-line post-footer-line-1 from your Blogger HTML and after hitting Enter from your keyboard, you will get a div of given attribute.

Paste the following code just after the given div. If you don’t show the share buttons or blogger share buttons not showing then hit Enter again and you will see another div of given attribute, paste the following code after it.
<p style='font-size: 16px;font-weight: bold;font-family: Bree Serif, sans-serif;'>Share with others:</p>
 <div class='share_button'>

    <a class='xosocial' expr:href='"https://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><i class='fa fa-twitter fa_icon_share'/></a>
    <a class='xosocial' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&t=" + data:post.title' target='_blank' title='Share This On Google'><i class='fa fa-google fa_icon_share'/></a>
    <a class='xosocial' expr:href='"https://www.pinterest.com/pin/create/button/? url=" + data:post.url + "&t=" + data:post.title' target='_blank' title='Pin This On Pinterest'><i class='fa fa-pinterest fa_icon_share'/></a>
  <a class='xosocial' expr:href='"https://www.linkedin.com/shareArticle?url=" + data:post.url + "&t=" + data:post.title' target='_blank' title='Share This On Linkedin'><i class='fa fa-linkedin fa_icon_share'/></a>
   <a class='xosocial' expr:href='"https://www.digg.com/submit?url=" + data:post.url + "&t=" + data:post.title' target='_blank' title='Submit URL On Digg'><i class='fa fa-digg fa_icon_share'/></a>
   <a class='xosocial' expr:href='"https://www.stumbleupon.com/submit?url=" + data:post.url + "&t=" + data:post.title' target='_blank' title='Submit URL On Stumbleupon'><i class='fa fa-stumbleupon fa_icon_share'/></a>
  </div>
You can customize the above code what button you want to keep or remove.

Insert CSS code

Search for ]]></b:skin> from Theme HTML and paste the following CSS code just before it
 /*******************SHARE****************************/
.share_button{}
.share_button a{color:white}
.fa_icon {
  padding: 9px;
  font-size: 26px;
  width: 45px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}
.fa-facebook {
  background: #3B5998;
  color: white;
}
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-google {
  background: #dd4b39;
  color: white;
}
.fa-linkedin {
  background: #007bb5;
  color: white;
}
.fa-youtube {
  background: #bb0000;
  color: white;
}
.fa-instagram {
  background: #125688;
  color: white;
}
.fa-pinterest {
  background: #cb2027;
  color: white;
}
.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-skype {
  background: #00aff0;
  color: white;
}
.fa-android {
  background: #a4c639;
  color: white;
}
.fa-dribbble {
  background: #ea4c89;
  color: white;
}
.fa-vimeo {
  background: #45bbff;
  color: white;
}
.fa-tumblr {
  background: #2c4762;
  color: white;
}
.fa-vine {
  background: #00b489;
  color: white;
}
.fa-foursquare {
  background: #45bbff;
  color: white;
}
.fa-stumbleupon {
  background: #eb4924;
  color: white;
}
.fa-digg {
  background: black;
  color: white;
}
.fa-reddit {
  background: #ff5700;
  color: white;
}
.fa-rss {
  background: #ff6600;
  color: white;
}
Custom Design of Share Button
After completing all steps above now you are ready to choose the design of your custom share button.
Custom Share Button
Choose one of them to add custom share button

1. Bar Share Button:

Search for ]]></b:skin> from Theme HTML and paste the following CSS code just before it.
.fa_icon_share {
  padding: .5%;
  font-size: 30px;
  width: 9%;
  text-align: center;
  text-decoration: none;
}
2. Square Share Button:

Search for ]]></b:skin> from Theme HTML and paste the following CSS code just before it.
.fa_icon_share {
  padding: 1.5%;
  font-size: 25px;
  width: 5%;
  text-align: center;
  text-decoration: none;
}

3. Round Share Button:

Search for ]]></b:skin> from Theme HTML and paste the following CSS code just before it.
.fa_icon_share {
  padding: 1.5%;
  font-size: 25px;
  width: 5%;
  text-align: center;
  text-decoration: none;
  border-radius: 25px;
}

If you think you need more customization, very good, you can customize your share button from the CSS code. Let me know your custom share button. 😎

Have got this article helpful or not working? Put your comment below.