"Sharing Buttons" Ringan tanpa JavaScript

Lama sudah tidak update. Kali ini saya hanya ingin berbagi tutorial dari +Damar Zaky tentang membuat tombol media sosial tanpa JavaScript yang pernah Ia bagikan di blognya dengan sedikit modifikasi agar terlihat lebih cantik :).

Demo gambar

Oke, langsung saja. Seperti biasa masuklah ke dasbor Blogger Anda masing-masing. Setelah itu, mari kita lihat kode sharing button ini.

KODE

<link href='http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/> 
<style type='text/css'>
#sharing-buttons {font-family:"Arial", Helvetica, Sans-Serif; font-size:0.8em; text-shadow:0 1px 0 rgba(0,0,0,.2);}
#sharing-buttons a {color:#fff; text-decoration:none; background-image: -webkit-gradient( linear, left top, left bottom, color-stop(.2, rgba(0,0,0,.0)), color-stop(1, rgba(0,0,0,.2)) ); background-image: -moz-linear-gradient( center top, rgba(0,0,0,.0) 20%, rgba(0,0,0,.2) 100% ); margin:0 5px 0 0; padding:2px 5px; border:1px solid rgba(0,0,0,.2); border-radius:3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 1px 1px 0 rgba(255,255,255,.4), 1px 1px 2px rgba(0,0,0,.4); cursor:pointer;}
#sharing-buttons a:active {background-image: -webkit-gradient( linear, left top, left bottom, color-stop(.2, rgba(0,0,0,.2)), color-stop(1, rgba(0,0,0,.4)) ); background-image: -moz-linear-gradient( center top, rgba(0,0,0,.2) 20%, rgba(0,0,0,.4) 100% ); margin:0 4px 0 1px; box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
#sharing-buttons .icon {margin:0 0.5em 0 0; padding:0 0.5em 0 0; border-right:1px solid rgba(0,0,0,.2); box-shadow:1px 0 0 rgba(255,255,255,.2);}
#sharing-buttons .fb {background-color:#3B5998;}
#sharing-buttons .twtr {background-color:#4285F4;}
#sharing-buttons .gpls {background-color:#DF5138;}
#sharing-buttons .lkdn {background-color:#4393BB;}
#sharing-buttons .lkdn.last {margin-right:0px !important;}
/* Silakan dihapus di bawah ini haha :D */
.silakandihapus {margin:10px 0 0 0; font-family:"Arial", Helvetica, Sans-Serif; font-size:0.5em; text-transform:uppercase;}.silakandihapus a {color:#999; text-decoration:none;}.silakandihapus strong {font-size:1.2em; margin:0 0.5em 0 0;} 
</style>
<div style='clear:both'></div><!-- Just both --><div id='sharing-buttons'><a class='fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' target='_blank'><i class='icon icon-facebook'></i>Share</a><a class='twtr' expr:href='"http://twitter.com/share?url=" + data:post.url' target='_blank'><i class='icon icon-twitter'></i>Tweet</a><a class='gpls' expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank'><i class='icon icon-google-plus'></i>Plus</a><a class='lkdn last' expr:href='"http://www.linkedin.com/cws/share?url=" + data:post.url' target='_blank'><i class='icon icon-linkedin'></i>Lnkd</a></div><div class='silakandihapus'><a href='http://dasbor7.blogspot.com/2013/06/sharing-buttons-ringan-tanpa-javascript.html' target='_blank'><strong>»</strong>Get this widget!</a></div><div style='clear:both'></div><!-- Just both -->

Letakkan kode di atas dimana saja Anda mau tampilkan. Namun, agar lebih rapi, Anda dapat meletakkan kode berwarna biru di atas kode </head>, meletakkan kode warna hijau di atas kode ]]></b:skin>, dan meletakkan kode warna merah di tempat Anda ingin tampilkan. Biasanya di bawah kode <data:post.body/> (di bawah posting).

Silakan hapus link saya, karena link itu mungkin sangat menganggu... :D