Membuat Social Share Buttons Tanpa Javascript

Jika Anda merasa loading blog agak berat atau lambat, salah satu penyebabnya yaitu terdapatnya javascript. Mungkin salah satunya yaitu sosial share buttons pada blog Anda.

Biasanya kita memakai sosial share buttons dari pihak ke tiga menyerupai AddThis.com dan lain-lain. Nah untuk mengurangi beban loading blog, Anda sanggup mengganti sosial share buttons ini dengan sosial share button tanpa javascript.

Artinya share buttons ini dibangun dengan memakai arahan CSS dengan menyertakan link untuk sharing artikel ke media umum tersebut menyerupai Facebook, Twitter, dan Google+.

Jika Anda tertarik untuk mencoba menggunakannya, silahkan copy arahan di bawah ini:

1. Social Share Buttons Tanpa Javascript Dengan Gambar.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:3px solid #ccc; border-bottom:1px solid #ddd; width:100%;height:35px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px'>
<div style='float:left;padding:6px 0 10px 0;margin-right:15px;font:bold 14px Arial;color:#777'>
<strong>Share this article</strong> :
</div>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' target='_blank' title='Share to Facebook'><img alt='Facebook' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpzst6FbjqTw-gGOqa1z-XAFLJULujc4eomMQHMx9d3byAW5UdyUjLddKKoITQZgByZxzhIHh6MX6BGMIkXhd7nIqXe0Q07HR9ilvQMQ91Oi4J9A99J5vgd-jh9NPZJghMiDdnlXwUCFbm/s57/Facebook%2520alt%25202.png' width='30' title='Share to Facebook'/></a> <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' style='margin-left:10px' target='_blank' title='Share to Twitter'><img alt='Twitter' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU8LsGCdggjhiOX9KR1PSH63TDeKTn-MLxVm4Aebnt3EH9NNGUrVu42a5FWTi89-InXHLz5N6lmYu8kHfR7GNZCjji6Jh9vFF3xxn6t8D2l-Iqb6Kxvqc5c_wKoTGVZhNazKvcVfGnYnW9/s57/Twitter%2520alt%25204.png' width='30' title='Share to Twitter'/></a> <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' style='margin-left:10px' target='_blank' title='Share to Google+'><img alt='Google+' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_cFFhaq9lzBBqBfKJjvgCZulSXkqXy7KUB19fe0bWj_-1H8xvkRsTRp6p8C9M0C5sZXPHSH5JcKgublfBZA1pdRmlOo4Napru6OEfTytC1MDMYx_uDK4xI0qj5QqNpBON3LyqZ6WuMHAH/s57/Google%252B%2520alt%25202.png' width='30' title='Share to Google+'/></a>
</div>
</b:if>

2. Social Share Buttons Tanpa Javascript Pure CSS.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:3px solid #ccc;border-bottom:1px solid #ddd;width:100%;height:24px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px'>
<div style='float:left;padding:1px 0;margin-right:15px;font:bold 13px Arial;color:#777'>
<strong>Share this article</strong> :
</div>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' target='_blank' title='Share to Facebook' style='color: #fff; background: #3b5998; text-decoration: none; border: 1px solid #313c7d; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;'>Share on fb</a> <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank' title='Share to Twitter' style='color: #fff; background: #4099FF; text-decoration: none; border: 1px solid #3a8be8; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;'>Tweet</a> <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank' title='Share to Google+' style='color: #fff; background: #c0361a; text-decoration: none; border: 1px solid #9c2c15; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;'>Share on G+</a>
</div>
</b:if>

Anda tinggal mengganti arahan HTML sosial share buttons usang Anda dengan salah satu arahan di atas. 

Sebenarnya Anda sanggup berkreasi lebih banyak lagi, sanggup dengan gambar sendiri atau menambah pengaruh hover, dan lain-lain, sehingga tampilannya mungkin akan lebih cantik lagi. Semoga dengan ini daya kreativitas dan imajinasi Anda berkembang.

Kalau pengen lebih komplit sanggup mengunjungi blognya mas Fajrin Ilham H. yaitu blog Master Jin DI SINI.

Sumber https://www.kompiajaib.com/

Share this post