Jadi Cendekia Mengganti Icon Simple Share Button Dengan Icon Svg On Javascript

Postingan ini aku buat gara-gara ngoprek HTML blog untuk mempercepat loading blog dengan mengganti icon font awesome dengan icon SVG kemarin. Sedikit ada hambatan pada tombol share sebab dikala mengganti icon-nya, tombol share malah menghilang tanpa bekas. Jika biasanya icon SVG ini kita paste di HTML, untuk tombol share harus kita paste ke javascript. Perlu diperhatikan bahwa kalau ingin mengganti icon yang ada didalam javascript dengan icon SVG (jika tidak berfungsi), maka icon SVG-nya harus dibentuk satu baris dihentikan ada enter. menyerupai itulah kata mas +Adhy Suryadi.

Oke cukup sudah penjelasannya, kita kembali pada judul diatas bagaimana mengganti icon tombol share sederhana yang pernah aku bagikan (by template kompi males). Simak baik-baik pelajaran berikut ini:

Langkah pertama

Silahkan simak postingan aku sebelumnya wacana cara menciptakan simple share bottom untuk mempercepat loading blog.

Langkah kedua

Cari dan ganti arahan dibawah ini (pada langkah pertama);

 <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+'&via=username_twitter&related=username_twitter" target="_blank" title="Share to Twitter">\
 <i class="fa fa-twitter tewe"></i> Twitter</a> \
 \
 </div>\
 <div class="clear"></div></div> \
 ');
 //]]>
 </script>

dengan arahan berikut;

 <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+">\
 <svg viewBox="0 0 24 24"><path d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z" /></svg> Google</a> \
 <a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
 <svg viewBox="0 0 24 24"><path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" /></svg> Facebook</a> \
 <a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&via=username_twitter&related=username_twitter" target="_blank" title="Share to Twitter">\
 <svg viewBox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" /></svg> Twitter</a> \
 \
 </div>\
 <div class="clear"></div></div> \
 ');
 //]]>
 </script>

Langkah ketiga

Kemudian tambahkan arahan css berikut pada css yang ada pada langkah pertama;

 .gp svg,.fb svg,.tw svg{width:20px;height:20px;vertical-align:middle;}
 .gp svg path,.fb svg path,.tw svg path{fill:#fff}

Selesai... kini simple share bottom blog anda tidak lagi memakai icon font awesome.
Dan selamat mencoba...

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