Add Responsive Social Share Button For Blogger – Buttons Below The Posts

Rate this post

Are you looking for Social Share Button for Blogger?

Then, you’re in the right place.

Today, in this article I’m going to show you how you can add responsive social share button for your blogger website.

Most of people who started blog with blogger, he faces this kind of problem. Because blogger doesn’t provide any plugin to add social share button to their website.

That’s reason we have to add social share button with the help of HTML & CSS code.

Table of Contents

Why Social Share Button Important for us?

Social media is very important for getting more traffic or exposure. This is also very helpful to get traffic within a short time. Search engines also notice the presence of social media.

So, social media could be a strong part to become a successful blogger. You should think that if you can bring your content in front of people then people will have the opportunity to see you content. That’s why I will suggest you take the advantage of social media.

There are many popular social media like Facebook, Twitter, Instagram, Pinterest, and more available out there. Where thousands of people are waiting to see your content. You should share your content by yourself and also you should let people share your content they wish to share. That’s the reason you should add social sharing buttons to your every post to let people share. In this way, you will have to chance to get more traffic or viewers for your every content.

If you write high quality content and people like your content, and share that, you’ll get more visitors. This will help you to get higher rank in search engines very fast.

How To Add Social Share Button For Blogger?

I have selected five most popular social media sites. These are Facebook, Twitter, Pinterest, Google Plus and LinkedIn. These five social share buttons will be shown end of the article of your blog. I will show you step by step that how you can add social share button for blogger website.

Before starting the process, you must confirm that you have installed the “FontAwesome”and “jQuery” script into your blogger theme. To check that sign into your blogger account >> Go to the theme section >>Click on Edit HTML button and search between the <head>………</head>section for these codes.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

If these two codes are not available there, then copy these codes and paste between <head>……</head>section. After paste these codes click on save Theme.

Now let’s move to the next step.

Step 1:Adding The CSS Code of Social Share Button.

1. Before editing your blogger template, make sure to take backup your blogger template. Go to the “Theme” section and click on the “Edit HTML”.

2. Press CTRL+Fkey to Search for “<b:skin>” and click on the (…….) sign. This will expand the CSS section of your blogger template. Scroll down and find the ending tag of the CSS part. This will look like “]]></b:skin>”.

CSS Code:

/* CSS Share Button
----------------------------------------------- */
.tlp_post_sharebar {background:none;position:relative;z-index:2;width:100%;display:inline-block;margin:5px 0px;padding:10px 0;font-family:sans-serif;border-bottom:1px dotted rgba(0, 0, 0, 0.05);border-top:1px dotted rgba(0, 0, 0, 0.05);}
.tlp_post_sharebar .tlp_Share_buttons {display:block;}
.tlp_post_sharebar .tlp_Share_buttons .wrap {display:inline-block;text-align:center;min-width:41px;margin:0 auto;}
.tlp_post_sharebar .tlp_Share_buttons .wrap1 {float:left;display:inline-block;width:31px;}
.tlp_post_sharebar .tlp_Share_buttons ul {margin:0;padding:0;}
.tlp_post_sharebar .tlp_Share_buttons ul li a, .tlp_post_sharebar .tlp_Share_buttons ul li a:hover {display:block;text-decoration:none;color:#FFF !important;cursor:pointer;height:100%;line-height:25px;}
.tlp_post_sharebar .tlp_Share_buttons ul li {float:left;list-style:none;list-style-type:none;margin:1px;padding:0;width:16%;max-width:115px;display:inline-block;overflow:hidden;font-size:13px;line-height:25px;text-align:left;height:25px;color:#fff;border: 1px solid rgba(0,0,0,0.04);-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.tlp_post_sharebar .tlp_Share_buttons ul li .fa {font-family:FontAwesome;font-weight:normal;background-color:rgba(0,0,0,0.1);color:#fff;font-size:17px;display:inline-block;text-align:center;padding:0;width:30px;height:25px;line-height:inherit;border-right:1px solid rgba(0,0,0,0.05);}
.tlp_post_sharebar .tlp_Share_buttons .button_fb {background:#3a579a;}
.tlp_post_sharebar .tlp_Share_buttons .button_fb:hover {background:#314a83;}
.tlp_post_sharebar .tlp_Share_buttons .button_twtr {background:#00abf0;}
.tlp_post_sharebar .tlp_Share_buttons .button_twtr:hover {background:#0092cc;}
.tlp_post_sharebar .tlp_Share_buttons .button_gplus {background:#df4a32;}
.tlp_post_sharebar .tlp_Share_buttons .button_gplus:hover {background:#be3f2b;}
.tlp_post_sharebar .tlp_Share_buttons .button_pntrst {background:#cd1c1f;}
.tlp_post_sharebar .tlp_Share_buttons .button_pntrst:hover {background:#ae181a;}
.tlp_post_sharebar .tlp_Share_buttons .button_linkdin {background:#2554BF;}
.tlp_post_sharebar .tlp_Share_buttons .button_linkdin:hover {background:#224EB4;}
.tlp_post_sharebar .tlp_Share_buttons .share.h6 {font-size:14px;font-weight:bold;text-shadow:none!important;text-decoration:none;text-align:center;color:#333;margin-top:3px;}
.tlp_post_sharebar .tlp_Share_buttons .share {border:none;margin:0px 5px 0px 1px;overflow:visible !important;width:95px !important;}
.tlp_post_sharebar .tlp_Share_buttons .button_fb .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_twtr .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_gplus .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_pntrst .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_linkdin .share-buttons {position:relative;color:#C3C3C3;display:inline-block;text-align:center;font-weight:bold;font-size:11px;float:right;min-width:12px;font-family:sans-serif;padding:0px 5px;background-color:rgba(0,0,0,0.28);border-radius:0px 0px 0px 15px;}
@media only screen and (min-width:260px) and (max-width:989px){
.button_pntrst,.button_linkdin{display:none !important}}

3. Copy the above CSS Code and paste it right before the ending CSS tag “]]></b:skin>”of your blogger template. After paste these CSS code, click on “Save Theme”button.

So, you’ve successfully added the CSS code for your new social share button for blogger which will be shown end of the article of your blogger posts.

Now let’s add the HTML code.

Step 2:Adding The HTML Code of Social Share Button.

1. Go to “Theme”section and click on “Edit HTML”.

HTML Code:

<b:if cond=’data:blog.pageType == "item"’>
<div class=’tlp_post_sharebar’>
<div class=’tlp_Share_buttons’>
<ul>
<li class=’share’>
<div class=’share-buttons’ data-service=’total’>
<div class=’share h6′>
SHARE :
</div>
</div>
</li>
<li class=’button_fb’>
<a expr:href=’" http://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + data:post.title’ onclick=’window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;’ rel=’nofollow’>
<div class=’wrap1′>
<i class=’fa fa-facebook’/>
</div>
<div class=’wrap’>
Share
</div>
<div class=’share-buttons’ data-service=’facebook’>
</div>
</a>
</li>
<li class=’button_twtr’>
<a expr:href=’"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + " via @vickykr555 – "’ onclick=’window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;’ rel=’nofollow’>
<div class=’wrap1′>
<i class=’fa fa-twitter’/>
</div>
<div class=’wrap’>
Tweet
</div>
<div class=’share-buttons’ data-service=’twitter’>
</div>
</a>
</li>
<li class=’button_gplus’>
<a expr:href=’"http://plus.google.com/share?url=" + data:blog.url’ onclick=’javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); return false; ‘ rel=’nofollow’>
<div class=’wrap1′>
<i class=’fa fa-google-plus’/>
</div>
<div class=’wrap’>
Share
</div>
<div class=’share-buttons’ data-service=’google’>
</div>
</a>
</li>
<li class=’button_pntrst’>
<a data-pin-config=’beside’ expr:href=’" http://pinterest.com/pin/create/button/?url=" + data:post.url + " &media=" + data:blog.postImageUrl + "&description=" + data:post.title’ onclick=’window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;’ rel=’nofollow’>
<div class=’wrap1′>
<i class=’fa fa-pinterest’/>
</div>
<div class=’wrap’>
Pin It
</div>
<div class=’share-buttons’ data-service=’pinterest’>
</div>
</a>
</li>
<li class=’button_linkdin’>
<a expr:href=’" http://www.linkedin.com/shareArticle?mini=true& url=" + data:post.url + " & title=" + data:post.title + " & summary=& source=" ‘ onclick=’window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;’ rel=’nofollow’>
<div class=’wrap1′>
<i class=’fa fa-linkedin’/>
</div>
<div class=’wrap’>
Share
</div>
<div class=’share-buttons’ data-service=’linkedin’>
</div>
</a>
</li>
</ul>
</div>
</div>
</b:if>

Note: Replace the highlighted @vickykr555 with your own Twitter user name.

2. Now search for this HTML line “<div class=’post-footer’>”. Copy the above HTML code and paste it right after this line. Click on “Save Theme”button. Go to your blog and check any post. You will see your social share buttons have appeared.

Note: If you don’t find the HTML line “<div class=’post-footer’>” then don’t worry. Search for the <div class=’post-footer-line post-footer-line-1’>and paste the above HTML code right before the line and then click on “Save Theme”.

If you’ve followed my instruction step by step correctly, then these social share button should work perfectly for your blogger blog. If you’re having any problem to add these share button on your blogger blog then please let me know on the below comment section.

As I told you in the beginning social media is very important to your blogging success so I’ll highly recommend to add these social share button to your blog and let your readers share your content. If you like this article then please share it with your friends and family. You can also follow me on Facebook and Twitter to get more update.

Add Responsive Social Share Button For Blogger – Buttons Below The Posts

Why Social Share Button Important for us?

How To Add Social Share Button For Blogger?

Step 1:Adding The CSS Code of Social Share Button.

Step 2:Adding The HTML Code of Social Share Button.

Leave a Comment Cancel reply

EIG INFO BLOG

Categorys

Site Links