How to Add Flat UI Share Buttons to Blogger

Updated on July 09, 2016 - Post a Comment
Do you want to add simple and quick loading, non-JavaScript share buttons to your blogger blog? Then follow the steps given below to add Flat UI Share Buttons to your blog.
Author: Lasantha Bandara
1.Login to your blogger account and go to "Edit HTML" page.
2.Scroll down to where you see </head> tag .
3.Copy below code and paste it just before the </head> tag:
<style type='text/css'>
/* Blogger Share Buttons by www.bloggertipandtrick.net */
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,300,300italic,700,700italic,600,600italic&subset=latin,latin-ext);
.blogger-share-buttons{color:rgb(126,126,126);display:block;font-family:'Open Sans',Tahoma,Verdana,Arial,sans-serif;font-size:14px;font-weight:normal;height:auto;line-height:24px;margin-top:10px;margin-bottom:10px;width:100%;width:100%;text-align:center;}
.blogger-share-buttons div{display:block;width:120px;margin:2px;display:inline-block;vertical-align:middle;}
.blogger-share-buttons a{text-decoration:none;display:block;padding-left:20px;color:#fff !important;font-weight:bold;-webkit-transition:background-color .3s;-moz-transition:background-color .3s;transition:background-color .3s;}
.blogger-share-buttons a{padding:7px 10px 7px 10px;}
.blogger-share-buttons a i{margin-right:10px;}
.blogger-share-buttons .fb-sharebtn a{background:#3B5999;}
.blogger-share-buttons .twitter-sharebtn a{background:#01BBF6;}
.blogger-share-buttons .gplus-sharebtn a{background:#D54135;}
.blogger-share-buttons .linkedin-sharebtn a{background:#136F9B;}
.blogger-share-buttons .pinterest-sharebtn a{background:#CB2027;}
.blogger-share-buttons .delicious-sharebtn a{background:#3173D1;}
.blogger-share-buttons .fb-sharebtn a:hover{background-color:rgb(50,75,129);}
.blogger-share-buttons .twitter-sharebtn a:hover{background-color:rgb(1,159,211);}
.blogger-share-buttons .gplus-sharebtn a:hover{background-color:rgb(191,52,40);}
.blogger-share-buttons .linkedin-sharebtn a:hover{background-color:rgb(15,89,125);}
.blogger-share-buttons .pinterest-sharebtn a:hover{background-color:rgb(174,28,35);}
.blogger-share-buttons .delicious-sharebtn a:hover{background-color:rgb(38,90,168);}
</style>
4. Now find this line:
<b:includable id='post' var='post'>
5. From that line scroll down slowly until you see a code more similar to this:
<b:if cond='data:post.title'>
  <h3 class='post-title entry-title' itemprop='name'>
  <b:if cond='data:post.link'>
 <a expr:href='data:post.link'><data:post.title/></a>
  <b:else/>
 <b:if cond='data:post.url'>
   <b:if cond='data:blog.url != data:post.url'>
  <a expr:href='data:post.url'><data:post.title/></a>
   <b:else/>
  <data:post.title/>
   </b:if>
 <b:else/>
   <data:post.title/>
 </b:if>
  </b:if>
  </h3>
</b:if>
6.Copy below code and paste it after the above code:
<!-- Blogger Share Buttons by www.bloggertipandtrick.net -->
<div class='blogger-share-buttons'>
    <div class='fb-sharebtn'>
  <a expr:href='&quot;https://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,&quot;sharer&quot;,&quot;toolbar=0,status=0,width=626,height=436&quot;); return false;' rel='nofollow' target='_blank' title='Share this on Facebook'><i class='fa fa-facebook' aria-hidden='true'></i> Facebook</a>
    </div>
    <div class='twitter-sharebtn'>
  <a expr:href='&quot;https://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url' rel='nofollow' target='_blank' title='Tweet This!'><i class='fa fa-twitter' aria-hidden='true'></i> Twitter</a>
    </div>
    <div class='gplus-sharebtn'>
  <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' target='_blank' title='Share this on Google+'><i class='fa fa-google-plus' aria-hidden='true'></i> Google+</a>
    </div>
    <div class='linkedin-sharebtn'>
  <a expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share this on Linkedin'><i class='fa fa-linkedin' aria-hidden='true'></i> Linkedin</a>
    </div>
    <b:if cond='data:post.firstImageUrl'><div class='pinterest-sharebtn'>
  <a expr:href='&quot;https://pinterest.com/pin/create/button/?source_url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Pinterest'><i class='fa fa-pinterest' aria-hidden='true'></i> Pinterest</a>
    </div></b:if>
    <div class='delicious-sharebtn'>
  <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this on Delicious'><i class='fa fa-delicious' aria-hidden='true'></i> Delicious</a>
    </div>
</div>
7. Save your Blogger Template and refresh your site. Final result will look like this:


Share this: pinterest