Share button merupakan sebuah kebutuhan bagi seorang blogger. Dengan ada nya share button, para pengunjung dapat membagikan link berisikan informasi yang ada di blog yang dikunjungi. Share Button ini biasanya terletak pada bagian di bawah sebuah post. Share Button ini biasanya berisikan share Facebook, Twitter dan Google+. Kali ini Hack4rt akan memberikan sebuah tutorial cara membuat Share Button Facebook, Google+, Twitter dan ditambahkan dengan Digg dan LintasMe. Share Button ini didesign oleh Mas Sugeng yang terlihat berwarna dan elegan.
Contoh Share Button
Masukkan CSS Share Button
#share-button{margin:0 0 8px;padding:0;overflow:hidden}#share-button p{float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);background:#fafafa;display:block;padding:5px 8px !important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff}#share-button a{position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:6px 6px;display:block;color:#fafafa;padding:5px8px;margin:0 3px 3px;border:1px solid #fff}#share-button a:hover{top:1px;
left:1px;box-shadow:0px 0px 3px rgba(1,1,1,.1)}
Masukkan Kode HTML Share Button
Letakkan kode HTMLberikut tepat di bawah kode HTML post anda
<b:if cond='data:blog.pageType == "item"'>
<div class='clear'/>
<div id='share-button'>
<p>Share to</p>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' style='background:#3b5998;'>Facebook</a>
<a expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' style='background:#c0361a;'>Google+</a>
<a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + "&lang=id"' rel='nofollow' style='background:#4099ff;'>Twitter</a>
<a expr:href='"http://digg.com/submit?url=" + data:blog.url' rel='nofollow' style='background:#000;'>Digg</a>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' style='background:#FF9900;'>Lintaskan</a>");
//]]>
</script>
<div class='clear'/>
</div>
</b:if>
Kemudian Save Template anda.Sekian dulu tutorial 'Membuat Share Button ala Mas Sugeng (Facebook, Twitter, GPlus, LintasMe, Digg)'