}

Optimized Social Share buttons for Blogger

Social share

Social share buttons like Facebook, Twitter, and LinkedIn etc. has become one of the basic features of your blogger blog, and why not? 

It improves your blog’s visibility and easily allows your readers to take part in your social media campaign. But it is also necessary to have a website, as well as mobile devices, optimized social share button.

Because if your share buttons are not visible on mobile devices than you will lose a huge amount of shares. 

This also helps your website to get more traffic and ultimately helps you rank high in search engines. 

So, if you let your visitors have stylish, customized social share buttons, it will be a positive front for your visitors and your visitors will like and share within seconds. 

Just follow the steps carefully and you will be done in minutes.

Login to your Blogger account and click Layout

Step 1. Click on Theme and Edit HTML

Step 2. Find end of the head tag /head (Ctrl + F)




<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'/>





Step 3. Copy the below code and paste the code right above the (/head) tag.


Step 4. Save


Social Share buttons for Blogger

Before you make changes your template, kindly backup your template and it is a good practice to always backup your template because if editing does not work perfectly then you will be able to retrieve it later. So, let’s go.



Step 5. In your HTML template editing window, find “ (]]<>b:skin)”  


Step 6. Paste the below code just above the “ (]]<>b:skin)” code and click Save

This will successfully add CSS to your template and now the real magic, the social share buttons. 


Social Share buttons for Blogger

/* 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}}








































Step 7. In your template search for (HTML mode) (div class=’post-footer) and copy the below codes and paste just below the (div class=’post-footer) code. 

Save your template and view your blog and check your post. Your social share buttons are ready for sharing.

Note: If you do not find this line (div class=’post-footer)
 then do not panic, instead search for (div class=’post-footer-line post-footer-line-1) code; and paste the above HTML code right before the line. 

Save your template and change via Twitter ID code with your twitter address.



Social Share buttons for Blogger

<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 Twitter ID - "' 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>


I hope you have successfully added your social share button and if you have enjoyed, then do let me know in the comment below.


1 comment: