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.
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='"https://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' 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='"https://twitter.com/home?status=" + data:post.title + " -- " + 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='"https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600");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='"https://www.linkedin.com/shareArticle?mini=true&title=" + data:post.title + "&url=" + 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='"https://pinterest.com/pin/create/button/?source_url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + 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='"http://del.icio.us/post?url=" + data:post.url + "&title=" + 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:
