cara membuat widget share button facebook share twitter share dan google plus share.
Screenshoot :
Nanti hasil nya akan seperti itu, kalau gitu kita langsung saja menuju tutorial nya di bawah ini :
Pertama letakan kode di bawah ini di atas </body> scrool saja ke yang paling bawah karna </body> ada di bagian paling bawah
<script type='text/javascript'>//<![CDATA[var _0x2dba=["href","attr","link[rel=canonical]","http://caragery.blogspot.com/share/?url=","&callback=?","shares","data-service",".AXShare-total","parents","toFixed","M","k","html","each",".count","getJSON","ready"];$(document)[_0x2dba[16]](function(){var _0x4440x1=$(_0x2dba[2])[_0x2dba[1]](_0x2dba[0]);$[_0x2dba[15]](_0x2dba[3]+(_0x4440x1)+_0x2dba[4],function(_0x4440x2){shares=_0x4440x2[_0x2dba[5]];$(_0x2dba[14])[_0x2dba[13]](function(_0x4440x3,_0x4440x4){service=$(_0x4440x4)[_0x2dba[8]](_0x2dba[7])[_0x2dba[1]](_0x2dba[6]);count=shares[service];if(count>1000){count=(count/1000)[_0x2dba[9]](1);if(count>1000){count=(count/1000)[_0x2dba[9]](1)+_0x2dba[10]}else {count=count+_0x2dba[11]};};$(_0x4440x4)[_0x2dba[12]](count);});});});//]]></script>
Kedua letakan kode di bawah ini di atas <data:post body/> yang kedua jika anda ingin widget share button nya tampil di atas postingan dan letakan di bawah <data:post body/> jika ingin tampil di bawah postingan.
<div class='AXshare_top ' id='AXshare_top'>
<div class='total_share'>
<span class='AXShare-total' data-service='total'><span class='count'/> Kali</span> <strong>share</strong>
</div>
<div class='AXshare_link'>
<a expr:href='" http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + " & t=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'> <img alt='Share ke Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgimKC90q85VqE3vILlq2ivPR1W2IeRZW-lviOymwcpFRpNnzA4ouLN_2V0_Cz31CgqCfm84iV4fyZ4Vdt4uzp8NrDeMHTlXSfM6uYIcezvp1keYbRyptXlCwfk_zZVMpn_hcwiJxbF_wME/s1600/icon_fb.png' title='Share ke Facebook'/> <span class='AXShare-total' data-service='facebook'>Share <span class='count'/></span></a> <a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); return false; ' rel='nofollow'> <img alt='Share ke G+' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn7OsJCBCMkXTjfqAVCthcec3TqWb8AEwbn-wFbhGOB8OhTTks5rDmJe_-emC86ftVJG8O5OL0tpTP65QHHjWygeH_HX9g7jBkqBq3Sf1huPNY4FV6BHtm5Gk9Tahd_ZHV_yt0UT9BawGt/s1600/icon_gplus.png' title='Share ke G+'/> <span class='AXShare-total' data-service='google'>Share <span class='count'/></span>
</a> <a class='twitter' expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + " via @ - "' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'> <img alt='Share ke Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDUb0IaTctwZ3oiZrYDKbP11RPVp0dGPcQB5oICd78IaUv27LN679gL_qB5ue4R5zDF6lmfRaGXiLOmnqZRTu1AxVVHHOs33uXE6vt_lHDFig2a-oH4lP3r4UqaT70VDxHMmANxug7yYvA/s1600/icon_tw.png' title='Share ke Twitter'/> <span class='AXShare-total' data-service='twitter'>Share <span class='count'/></span>
</a>
</div>
Ketiga letakan kode di bawah ini di atas ]]><b:skin>
.AXshare_top {
display: inline-block;
margin: 10px 0;
}
.AXshare_top .total_share {
float: left;
width: 100px;
font-weight: bold;
text-align: center;
color: $(pilihan.warna);
}
.AXshare_top .total_share strong {
display: block;
text-align: center;
color: #cccccc;
font-size: 14px;
}
.AXshare_link {
float: left;
}
.AXshare_link a {
float: left;
margin-left: 5px;
max-width: 160px;
color: #fff;
background: #39579a;
padding: 5px;
height: 30px;
text-decoration: none;
cursor: pointer;
}
.AXshare_link .count {
background: rgba(253, 254, 255, 0.19);
padding: 5px 10px;
font-weight: bold;
}
.AXshare_link a:hover {
-webkit-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.4);
box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.4);
}
.AXshare_link a img {
height: 30px;
float: left;
}
.AXshare_link a span {
height: 30px;
line-height: 30px;
margin-left: 10px;
}
.AXshare_link .tw {
background: #1aa9e4;
}
.AXshare_link .gplus {
background: #DA4835;
}
.AXshare_link .twitter {
background: #1aa9e4;
}
Selesai...
Aksesoris share button ini saya ambil dari template alexia ,karna ada permintaan dari temen-temen Cara Gery yang ingin di buatkan share button seperti itu. Dan sekarang sudah saya postingkan disini.
Sekian dari cara membuat widget share button facebook share twitter share dan google plus share nya. Semoga bisa bermanfaat.