Responsive Social Share Button For Blogger: Buttons Below Posts.

Social media is very important for getting more exposure. This is also very helpful to get target traffic within a short time. Search engines also notice the presence of social media. So, social media could be a strong source 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 your content. That’s why I will suggest you take the advantage of social media.

There are many popular social media like facebook, twitter, google plus 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. So you should add social sharing buttons to your every post to let people share. In this way, you will have the chance to get more viewers for your every content.

Social Share Button For Blogger

If people like your content and share that, you will get more visitors. This will help you to get higher rank in search engines very fast. Today I will show you how you can add social share buttons for blogger. You will be able to add world’s most popular social media site's sharing buttons below every post of your blogger blog. These social sharing buttons are responsive and very attractive.

How To Add Social Share Button For Blogger?

I have selected five most popular social media sites. These are Facebook, Twitter, Google Plus, Pinterest and LinkedIn. These five social share button will be shown after every article of your blogger blog. I will show you step by step.

Before starting the process we must confirm that we have installed the “FontAwesome” and “Jquery” script into our blogger theme. To know that sign into your blogger account > Go to the Template section > Click on the Edit HTML button and search between the <head>………</head> section for these codes.
<link href='' rel='stylesheet'/> <script src=''/>

If these two codes are already available in your template then go for the rest. Otherwise, copy these code and paste it right above the ending </head> tag as shown below. Then click on the Save Template button.

Adding Social Share Button For Blogger 1

Step 1: Adding The CSS Of Social Share Button.

1. Before editing your blogger template, It is highly recommended to backup your blogger template. Now Login to your blogger account. Go to the “Template” section and click on the “Edit HTML” button.

2. Search for “<b:skin>” and click on the arrow. 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 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. Now click on the “Save Template” button. Here is a screenshot to make you clearer:

Adding Social Share Button For Blogger 2

So, You have successfully added the CSS for your new social share button for blogger which will be shown after all of your blogger posts. Now let's add the HTML code.

Step 2: Adding The HTML Of Social Share Button.

1. Like the above, first of all, login to your blogger account and go to the “Template” section. Click on the “Edit HTML” button.

HTML Code:
<b:if cond='data:blog.pageType == &quot;item&quot;'> <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='&quot;;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick=',&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   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='&quot;; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @Blog_Ornate - &quot;' onclick=',&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   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='&quot;; + data:blog.url' onclick=',&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   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='&quot;; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick=',&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   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='&quot;;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick=',&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   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 @Blog_Ornate 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 the “Save Template” button. Go to your blog and check any post. You will see your social sharing buttons have appeared.

If you do not find this 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. Save the template and see the magic.

Adding Social Share Button For Blogger 3

If you have followed my instruction correctly then these social share buttons should works perfectly for your blogger blog. If you are having any problem to add these share buttons on your blog then please let me know by leaving a comment.

As I have told you before that social media is very important to your blogging success so I will highly recommend to add social sharing buttons to your blog and let your readers share your content. If you like this article then please share it.

I love to share my knowledge and experience. I am a part time blogger and a student of Computer Science & Engineering. I am a regular web developer & SEO analyst at Upwork. You can follow me on...

We accept <a> (for making links), <b> (for bold), <strong>, <em> and <i> Tags. Spam comments will be deleted.