• Translate

8/09/2016

Tutorials Make Share Button with the Count of Don Reach

Tutorial Blogspot |

Advertisement

Tutorials Make Share Button with the Count of Don Reach | Although these social share buttons of a third party, but it's really lightweight. Social share button is equipped with a counter or the number of clicks to share so they can know how many posts we shared on social media. In addition this button is responsive so it looks to be safe in a variety of sizes of devices.

And making buttons share this light is script js of social media is defer so it will not disturb loading blog. You can see his demonstrations in all tutorials in this blog.

Resposive Share Button Donreach
If you want to try it also, please follow the steps below.

1. The First Step
Please copy code html below and savings under blog post .Please find this code <b:includable id='post' var='post'> then roll screen down and find code below or that is similar to below
<data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
Please keep code below under a code on ( under code </div>)
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="don-share" data-limit="3">
  <div class="don-share-total"></div>
  <div class="don-share-facebook"></div>
  <div class="don-share-twitter"></div>
  <div class="don-share-google"></div>
  <div class="don-share-linkedin"></div>
  <div class="don-share-pinterest"></div>
  <div class="don-share-tumblr"></div>
  <div class="don-share-stumbleupon"></div>
  <div class="don-share-reddit"></div>
  <div class="don-share-pocket"></div>
</div>
<div class='clear'/>
</b:if>
2 .The second step
Please save javascript js defer social share button at the top of the code </body>. JS I am hosting with my Google Drive account, so for security please hosting on your own Google Drive account.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://googledrive.com/host/0Bw9JHrugzgvtbUNaTGhPenFZRGs",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>
3. Third Step
For a bit of tidying zoom, please add the CSS below the above code </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.don-share{padding-left:90px}
.don-share .don-share-total{margin-left:-80px!important}
.don-share.don-active .don-share-total:after{bottom:15px!important}
.don-share .don-share-expand:before{line-height:20px!important}
</style>
</b:if>
4. Done.
 
Social share buttons takes time to show the number of clicks to share, so do not be strange if the number of clicks does not immediately appear. This widget can be used not only in the Blogger but also can be used in Wordpress.

Thank's to :
http://donreach.com/social-share-buttons
http://www.kompiajaib.com/2016/03/menggunakan-responsive-social-share.html

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments not appropriate topic will sign SPAM.