How to Install share button in blog .Full Tutorial with Code.

Installing the Share Button in Blog - In the second post in this day falcontech will share how to embed a share button on a blogger blog. This tutorial I have created at the request of the bloggers here.

Share button is useful to facilitate visitors who want to share the articles were deemed beneficial to their social media networks. Such as Facebook, Twitter, Google plus, and Linkedin. Share This button will appear in each of your blog posts.

This Is The Picture How It will Look At your Blog post...

Here's the steps to follow:

1. Log in to Blogger> Template> Edit HTML> Find the code below and then select the second one in the markup post (not mobile post)

<data:post.body/>

2. Then copy the code below right after the code mentioned above

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-falcon'>
<div class='tombol-berbagi-falcon-fb'>
<a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='tombol-berbagi-falcon-tw'>
<a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>
</div>
</div>
</b:if>

3. Subsequently apply the code below just before the ]]></b:skin> or </style>

/* CSS Share Button */
.tombol-berbagi-falcon{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.tombol-berbagi-falcon-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-falcon-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjujG8m54mqrHRQOwv2tSWaT2rha6hDaHQ1gXq4EpiEqKqXK12DlDHiY4x4duQtrP5V_yjtyvYnyYfiHn5S6yGlXRA-p9Se9Yx96mZr6tIhsejvtx79seT9lILNFjMRWqECUJYLkEw7VQy/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.tombol-berbagi-tw{background-position:0 -43px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0 -86px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-lin{background-position:0 -129px}
.tombol-berbagi-falcon a{color:#999;transition:all .3s;}
.tombol-berbagi-falcon a:hover{color:#7cb0ed}

@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-falcon-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-falcon-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}

4. Save the template.

And Yes feel free to ask any queries....