Add Awesome Socail Share Button in Blogger 2016

Add Awesome Socail Share Button in Blogger 2016

Installing Latest Socail Share Button with 2016 - In accordance with the title of this article, I will share a key share / share you can post on your blog. Share button that makes it different from the others is their use of font awesome. Where in addition to make to see the share button to be interesting, share button is also very light when installed on our blog and it is suitable for you who prioritize the delivery speed of your blog. If interested please refer to the steps below.

To use a font awesome, we had to put the following CSS above </head>

<link href=//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css rel=stylesheet/>

1. If you have the above script pairs, then miss a step above and further in the next step.
2. For you who put CSS3 validation, then the script above you first download and reversible in order to be valid CSS3. Then re-upload the script using google drive.

Copy CSS below, then paste it above the </style> or </b: skin>

.share span {font-size:16px}
.share a, .share a:hover {color:#fff}
.fb, .twit, .gplus {text-align:center; padding:5px 12px; font-size:12px; border-radius:3px}
.fb { background-color:#1358BA}
.twit { background-color:#03C7E9}
.gplus { background-color:#FE1635}
.fb:hover, .twit:hover, .gplus:hover {background-color:#547279; transition:background-color 0.7s ease-out 0s}

Put the following HTML in the area of post footer. The trick, find <div class = post-footer-line-1> then paste the following HTML code below

<b:if cond=data:blog.pageType == &quot;item&quot;>
<div class=share>
<span>Bagikan Artikel:</span>
<a class=fb expr_href=&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url rel=nofollow target=_blank><i class=icon-facebook icon-large/> Facebook</a> 
<a class=twit expr_href=&quot;http://twittter.com/share?url=&quot; + data:post.url rel=nofollow target=_blank><i class=icon-twitter icon-large/> Twitter</a> 
<a class=gplus expr_href=&quot;https://plus.google.com/share?url=&quot; + data:post.url rel=nofollow target=_blank><i class=icon-google-plus icon-large/> Google+</a>
</div>
</b:if>

Create for who wants to use the pop up functions on the share button. So instead of target = _ blank replace with the code below:

onclick=javascript:window.open(this.href,"bloggerPopup","toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=300"); return false;

go to link download