Jadi Cerdik Menciptakan Tombol Share Sederhana Untuk Mempercepat Loading Blog

Kita tahu bahwa hampir setiap blog memakai tombol share semoga pengunjung dapat membantu membagikan artikel yang mereka baca kepada teman-temannya melalui media social ibarat google plus, facebook, twitter, dan lain-lain. Namun sangat jarang sekali pengunjung yang tiba dari search engine membagikan artikel kita. Blog yang sudah terkenal ibarat kompi asing saja jumlah sharingnya dapat dihitung dengan jari, apalagi blog eceng-eceng ibarat blog ini.

Saya mengganggap bahwa tombol share hanya sebagai suplemen saja, sehingga keberadaannya tidak perlu memberatkan loading blog meskipun scriptnya sudah di defer, ibarat DonReach Share Buttons With Counts. Sehingga tombol share ini tidak eksklusif tampil tepat melainkan hanya berupa teks saja, apalagi koneksi sudah stadium akhir.

Karena itulah untuk mempercepat loading, DonReach Share Buttons With Counts blog ini aku ganti dengan tombol share yang lebih mudah dan sederhana semoga tidak mensugesti loading blog. Saya ngoprek tombol share dari template kompi males, hanya aku modif lagi dan hanya menyisakan tombol share google plus, twitter dan facebook saja. Untuk tombol share whatsapp tetap aku gunakan alasannya ialah hanya tampil untuk terusan mobile saja.

Bagi teman-teman yang ingin memakai tombol share ibarat blog ini, silahkan simpan isyarat dibawah ini:

1. Simpan isyarat 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 isyarat dibawah ini;

 <b:includable id='share-tool' var='post'>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <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 == &quot;true&quot;'>
 <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 isyarat ini sudah ada, jadi anda tinggal menggantinya.

3. Untuk menampilkannya dipostingan, silahkan copy isyarat 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 memakai related posts, simpan tepat diatas isyarat pemanggil related post biasanya ibarat 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 isyarat 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 terusan link js ini
https://cdn.rawgit.com/KompiAjaib/js/master/flexible-post-6-1a.js
kemudian 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 eksklusif di blog utama, tapi gunakan blog demo. Jika sudah beres tinggal copas ke blog utama.
Selesai dan selamat mencoba ...

Update
Jika ingin memakai simple share button ini dengan icon SVG, silahkan simak artikelnya pada postingan berikut ini:

Mengganti icon simple share button dengan SVG icon