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...