Membuat Social Share Buttons Tanpa Javascript

Luki Ardana

Jika Anda merasa loading blog agak berat atau lambat, salah satu penyebabnya adalah terdapatnya javascript. Mungkin salah satunya adalah sosial share buttons pada blog Anda. Biasanya kita menggunakan sosial share buttons dari pihak ke tiga seperti AddThis.com dan lain-lain. Nah untuk mengurangi beban loading blog, Anda bisa mengganti sosial share buttons ini dengan sosial share button tanpa javascript, artinya share buttons ini dibangun dengan menggunakan kode CSS dengan menyertakan link untuk sharing artikel ke media sosial tersebut seperti Facebook, Twitter, dan Google+.

Social Share Buttons

Sebagai contohnya bisa Anda lihat pada gambar di atas, . Silahkan coba pada share buttons-nya pada bagian bawah postingan.

Bagaimana Anda tertarik untuk mencoba menggunakannya? Silahkan copy kode 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/AVvXsEjmG9m2LBu7rHC81u4E0xPXu7w6eFN-pV-OA0XqqjB9ytfwUkgdUUHCjEjXeDWbfldJ0uRSdwKrhKuHduNhVCISq-eFjB50qRApue__V8gaaeSPyCaqA2DXaAFi8FDC7_VrFLV5KeWHtKBx/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/AVvXsEjXFOvabIT2I2y-uKSifeXNcrAF1g9OiMqPjbVXPPMMmAqPie2Xv1xypDNrjjn2yTCuJf_NXstGBuj5NsRB0SYckeXn6ZthcL__ZrUxP4qa5WUiMYAYj_HGc1b3mjuhA5oo-VQLeVOEu4Y-/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/AVvXsEgn9TW8FMermwHpLd1hvtDJqKRoKH0ROUYmIMEckP-vsr-6WrqfptRegZsYoxh7HZ17d3trIDzV1XkkoAoX0VM2xilzR9NUBylD0my06SJ2R1b_lDLBKiJExCMTVb1qaODKcay-wRahepJe/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 kode HTML sosial share buttons lama Anda dengan salah satu kode di atas. 

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

Jika Anda merasa loading blog agak berat atau lambat, salah satu penyebabnya adalah terdapatnya javascript. Mungkin salah satunya adalah sosial share buttons pada blog Anda. Biasanya kita menggunakan sosial share buttons dari pihak ke tiga seperti AddThis.com dan lain-lain. Nah untuk mengurangi beban loading blog, Anda bisa mengganti sosial share buttons ini dengan sosial share button tanpa javascript, artinya share buttons ini dibangun dengan menggunakan kode CSS dengan menyertakan link untuk sharing artikel ke media sosial tersebut seperti Facebook, Twitter, dan Google+.

Social Share Buttons

Sebagai contohnya bisa Anda lihat pada gambar di atas, . Silahkan coba pada share buttons-nya pada bagian bawah postingan.

Bagaimana Anda tertarik untuk mencoba menggunakannya? Silahkan copy kode 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/AVvXsEjmG9m2LBu7rHC81u4E0xPXu7w6eFN-pV-OA0XqqjB9ytfwUkgdUUHCjEjXeDWbfldJ0uRSdwKrhKuHduNhVCISq-eFjB50qRApue__V8gaaeSPyCaqA2DXaAFi8FDC7_VrFLV5KeWHtKBx/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/AVvXsEjXFOvabIT2I2y-uKSifeXNcrAF1g9OiMqPjbVXPPMMmAqPie2Xv1xypDNrjjn2yTCuJf_NXstGBuj5NsRB0SYckeXn6ZthcL__ZrUxP4qa5WUiMYAYj_HGc1b3mjuhA5oo-VQLeVOEu4Y-/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/AVvXsEgn9TW8FMermwHpLd1hvtDJqKRoKH0ROUYmIMEckP-vsr-6WrqfptRegZsYoxh7HZ17d3trIDzV1XkkoAoX0VM2xilzR9NUBylD0my06SJ2R1b_lDLBKiJExCMTVb1qaODKcay-wRahepJe/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 kode HTML sosial share buttons lama Anda dengan salah satu kode di atas. 

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

Winkom 13 Apr, 2013


-
Source: http://winkom.blogspot.com/2013/04/membuat-social-share-buttons-tanpa_3726.html
--
Manage subscription | Powered by rssforward.com

 
Design by Yuza Cheater | Bloggerized by Free Blogger Templates | Info Terlaris