Kita tahu bahwa hampir setiap blog menggunakan tombol share supaya pengunjung bisa membantu membagikan artikel yang mereka baca kepada teman-temannya melalui media social seperti google plus, facebook, twitter, dan lain-lain. Namun sangat jarang sekali pengunjung yang datang dari search engine membagikan artikel kita. Blog yang sudah populer seperti kompi ajaib saja jumlah sharingnya bisa dihitung dengan jari, apalagi blog eceng-eceng seperti blog ini.
Saya mengganggap bahwa tombol share hanya sebagai pelengkap saja, sehingga keberadaannya tidak perlu memberatkan loading blog meskipun scriptnya sudah di defer, seperti DonReach Share Buttons With Counts. Sehingga tombol share ini tidak langsung tampil sempurna melainkan hanya berupa teks saja, apalagi koneksi sudah stadium akhir.
Karena itulah untuk mempercepat loading, DonReach Share Buttons With Counts blog ini saya ganti dengan tombol share yang lebih simpel dan sederhana supaya tidak mempengaruhi loading blog. Saya ngoprek tombol share dari template kompi males, hanya saya modif lagi dan hanya menyisakan tombol share google plus, twitter dan facebook saja. Untuk tombol share whatsapp tetap saya gunakan karena hanya tampil untuk akses mobile saja.
Bagi teman-teman yang ingin menggunakan tombol share seperti blog ini, silahkan simpan kode dibawah ini:
1. Simpan kode CSS berikut diatas
</style>
.share,h2.sharetitle{display:block;float:left}
h2.sharetitle{font-size:18px!important;margin:10px 10px 0px 20px;font-weight:500;line-height:1.4em!important;padding:0;border:none;position:relative;top:0;left:0;}
.share-box{position:relative;margin:0}
.share{display:block;float:left}
.share,.sharethis{position:relative}
.sharethis{margin:10px 0 10px 20px}
.sharethis a.fb,.sharethis a.gp,.sharethis a.tw,.sharethis span.pl{cursor:pointer;text-decoration:none!important;display:inline-block;margin:0 5px 5px 0;font-size:12px;font-weight:300;border-radius:3px;color:#fff!important;box-shadow:0 1px 0 rgba(0,0,0,.08);text-shadow:none;line-height:23px;padding:1px 8px 0 5px;transition:all .4s ease-in-out}
.fbi,.goplus,.pplus,.tewe{font-size:18px!important;margin-top:1px;vertical-align:middle}
.sharethis a.fb:active,.sharethis a.gp:active,.sharethis a.tw:active,.sharethis span.pl:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
.sharethis a.fb{background:#3b5998;}
.sharethis a.gp{background:#d34836;}
.sharethis a.tw{background:#00acee;}
.sharethis a.fb:hover{background:#293E6A;}
.sharethis a.gp:hover{background:#933326;}
.sharethis a.tw:hover{background:#0077A6;}
2. Copy kode dibawah ini;
<b:includable id='share-tool' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
document.write('<div class="sharethis"><div class="share"> \
<a class="gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
<i class="fa fa-google-plus goplus"></i> Google</a> \
<a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
<i class="fa fa-facebook fbi"></i> Facebook</a> \
<a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&related=NomIfrod" target="_blank" title="Share to Twitter">\
<i class="fa fa-twitter tewe"></i> Twitter</a> \
\
</div>\
<div class="clear"></div></div> \
');
//]]>
</script>
<b:if cond='data:blog.isMobileRequest == "true"'>
<script>
//<![CDATA[
var whatsurl = window.location.href;
var whattitle=encodeURIComponent(document.title);
var whattitle_esc=unescape(whattitle);
document.write('<span style="display:block;font-size: 18px;font-weight: 500;margin-bottom:5px">Share On Whatsapp:</span>\
<a href="whatsapp://send" data-text="'+whattitle_esc+'" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Share On Whatsapp">\
Share</a>\
');
if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/0015517398/whatsapp-button.js";h.appendChild(s);}
//]]>
</script>
</b:if>
</b:if>
</b:includable>dan simpan tepat dibawah
<b:includable id='threaded_comments' var='post'>. Biasanya kode ini sudah ada, jadi anda tinggal menggantinya.3. Untuk menampilkannya dipostingan, silahkan copy kode berikut;
<h2 class='sharetitle'>Bagikan :</h2>
<div class='share-box'>
<b:include data='post' name='share-tool'/>
<div class='clear'/>
</div>kemudian simpan tepat diatas
</article>. Jika anda menggunakan related posts, simpan tepat diatas kode pemanggil related post biasanya seperti ini;<div class='related-post' id='related-post'/>Bagi pengguna template kompi flexible dan ingin mengganti DonReach Share Buttons With Counts bawaan template, anda harus menghapus semua kode berikut:
.share-box{position:relative;margin:0 20px}
.share-whatapp{display:block;font-size: 18px;font-weight: 500;margin-bottom:5px;margin-left:20px}
.don-share{padding-left:80px}
.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{font-weight:bold!important;line-height:20px!important}
.don-share .don-share-expand{max-height:34px}
<div class='don-share' data-limit='2'>
<div class='don-share-total'/>
<div class='don-share-facebook'/>
<div class='don-share-twitter'/>
<div class='don-share-google'/>
<div class='don-share-linkedin'/>
<div class='don-share-pinterest'/>
<div class='don-share-tumblr'/>
<div class='don-share-stumbleupon'/>
<div class='don-share-reddit'/>
<div class='don-share-hackernews'/>
<div class='don-share-buffer'/>
<div class='don-share-xing'/>
<div class='don-share-pocket'/>
<div class='don-share-fancy'/>
<div class='don-share-yummly'/>
<div class='don-share-scoopit'/>
<div class='don-share-weibo'/>
<div class='don-share-vk'/>
<div class='don-share-mailru'/>
<div class='don-share-odnoklassniki'/>
<div class='don-share-hatena'/>
</div>Dan untuk menghapus script-nya, coba akses link js ini
https://cdn.rawgit.com/KompiAjaib/js/master/flexible-post-6-1a.jslalu temukan dan hapus script berikut;
(function() {
var dr = document.createElement('script');
dr.type = 'text/javascript'; dr.async = true;
dr.src = '//share.donreach.com/buttons.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);
})();Saran saya; jangan ngoprek langsung di blog utama, tapi gunakan blog demo. Jika sudah beres tinggal copas ke blog utama.
Selesai dan selamat mencoba ...
Update
Jika ingin menggunakan simple share button ini dengan icon SVG, silahkan simak artikelnya pada postingan berikut ini:
Mengganti icon simple share button dengan SVG icon
