How to make Share Button on Material Design -
I will share is a version of Material Design.
This Share Button is located at the bottom of the article, this is very useful to make it easier for visitors to share articles they read to Social Media. Well, in this tutorial there are only 3 buttons, namely a button to share to Facebook, Twitter and Google Plus . Please friend with your friend's wish to make it more suitable on your blog.
Okay, we go to the installation step.
Note :
The template used must have installed Font Awesome. If not, please read this article How to Install Awesome Fonts on Blogger.
How to Install Share Button :
As usual, my friend logged in to your blog first
After that go to Template > Edit HTML
Add the code below where you want, to add it below the article, you can find the code <data:post.body/>
Then copy this code just below it
<h4 class='post-under'>Share it!!</h4>
<div class='sharepost'>
<ul>
<li>
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook' /></a>
</li>
<li>
<a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter' /></a>
</li>
<li>
<a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus' /></a>
</li>
</ul>
</div>
After that, add the CSS below right above the code ]]></b:skin>
h4.post-under {
text-align: center;
}
.sharepost {
padding: 20px;
text-align: center;
}
.sharepost li a {
padding: 10px;
width: 20px;
height: 20px;
color: #fff;
display: inline-block;
border-radius: 50%;
margin: 0 10px;
transition: all 0.5s;
box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
}
.sharepost li a:hover {
box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
.sharepost li a.facebook {
background: #3A5795;
}
.sharepost li a.twitter {
background: #1DA1F2;
}
.sharepost li a.gplus {
background: #DB4437;
}
The last step is Save & See the results