Cara membuat widget tombol share tanpa javascript

Cara membuat widget tombol share tanpa javascript - Tombol share adalah salah satu item terpenting bagi sebuah blog yang ingin mendapatkan pengunjung lebih. Dengan adanya tombol share, pengunjung dapat dengan mudah membagikan artikel ke social media mereka.

Ada banyak situs yang menyediakan widget tombol share seperti addthis.com dan sharethis.com. Kebetulan blog ini menggunakan tombol share dari sharethis.com. Kelebihan tombol share dari situs - situs tersebut adalah tampilannya yang menarik. Namun kekurangannya adalah penggunaan javascript pada tombol share. Javascript adalah salah satu penyebab mengapa blog menjadi berat. Nah oleh sebab itu, kali ini saya akan memberikan tutorial cara membuat tombol share tanpa javascript. Anda bisa melihat contohnya pada artikel di www.unikplus.com. Bagi anda yang berminat dengan tombol share ini, berikut tutorialnya:

• Seperti biasa saat ingin mengedit template lebih baik anda backup dulu template blog anda untuk mencegah hal - hal yang tidak diinginkan. Setelah itu lanjut klik Edit HTML.
• Cari kode <data:post.body/> kemudian copy kode dibawah ini dan paste dibawah kode <data:post.body/> untuk menampilkannya dibawah postingan blog, lalu save template.

<b:if cond='data:blog.pageType == "item"'><style type="text/css">#faridganteng{font:11px tahoma;padding:0;margin:5px 0}#faridganteng a,#faridganteng a:hover{color:white}</style>
<div id="faridganteng"><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' style='background:#4c68ac url(http://3.bp.blogspot.com/-wLijOSkUeMQ/UmdKgC0LDAI/AAAAAAAACDU/4fy1QKnbmtU/s1600/download.png) no-repeat;background-position-y:-159px;background-position-x:-10px;padding:10px 10px 10px 24px' target='_blank' title='Share to Facebook'>Facebook</a><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' style='background:#00a3ff url(http://3.bp.blogspot.com/-wLijOSkUeMQ/UmdKgC0LDAI/AAAAAAAACDU/4fy1QKnbmtU/s1600/download.png) no-repeat;background-position-y:-107px;background-position-x:-10px;padding:10px 10px 10px 30px' target='_blank' title='Tweet to Twitter'>Twitter</a><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' style='background:#d80000 url(http://3.bp.blogspot.com/-wLijOSkUeMQ/UmdKgC0LDAI/AAAAAAAACDU/4fy1QKnbmtU/s1600/download.png) no-repeat;background-position-y:-208px;background-position-x:-10px;padding:10px 10px 10px 33px;' target='_blank' title='+1 This'>Google Plus</a></div></b:if>