Saya mempostingkan cara membuat share button lengkap dengan line watshapp bbm dan lain sebagainya. Karna ada temen-temen Cara Gery yang ingin membuat share button di blog nya sama seperti yang saya pakai di blog ini.
Screenshoot :
Kalau gitu kita langsung saja menuju ke tutorial nya :
Simpan kode di bawah ini di atas ]]<b:skin>
Selesai...
"aksesoris share button ini saya ambil dari template idntheme"
Dan untuk hasil nya bisa lihat saja di blog ini ,karna saya memakai aksesoris share button tersebut.
Semoga artikel tutorial nya dapat bermanfaat untuk yang request ke email saya dan untuk anda semua.
Screenshoot :
Kalau gitu kita langsung saja menuju ke tutorial nya :
Simpan kode di bawah ini di atas ]]<b:skin>
#share_btnper{margin:20px auto;padding:0}
.showother{display:none}
.share_btn{position:relative;margin:0;padding:0;display:block;overflow:hidden}
.share_btn ul,ul .showother{position:relative;margin:0;padding:0;font-size:12px}
.share_btn ul li{float:left;display:inline-block;overflow:hidden}
.share_btn li a,.shareplus{color:#fff;padding:0;width:40px;display:block;text-align:center;height:35px;line-height:35px;transition:all 0.25s;margin:0 5px 5px 0;text-transform:uppercase;letter-spacing:1px;border-radius:4px;overflow:hidden}
.share_btn ul li span{padding:0;}
.share_btn i{font-size:16px;padding:0;margin:0;line-height:35px;text-align:center}
.shareplus{padding:0;background:#aaa;cursor:pointer}
.share_btn li a.fb i,.share_btn li a.tw i{width:20px;text-align:left}
.share_btn a:hover{background:#333;color:#fff}
.share_btn li a.fb{background:#4867aa;padding:0 35px;width:auto}
.share_btn li a.tw{background:#1da1f2;padding:0 35px;width:auto}
.share_btn li a.gp{background:#dc4a38}
.share_btn li a.pt{background:#ca2128}
.share_btn li a.le{background:#0673ab}
.share_btn li a.tr{background:#43556e}
.share_btn li a.em{background:#141b23}
.share_btn li a.ln{background:#00c300}
.share_btn li a.bm{background:#000}
.share_btn li a.wa{background:#4dc247}
.share_btn li a:hover,.shareplus:hover{-webkit-filter:grayscale(100%)}
Lalu cari kode ini <b:includable id='shareButtons' var='post'> ..... </b:includable> nah simpan kode di bawah ini tepat di bawah </b:includable>
<b:includable id='sharethis' var='post'>
<div class='share_btn'><ul>
<li><a class='fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=626,resizable=0,top=50,left=100");return false;' rel='nofollow' title='Share to Facebook'><i class='fa fa-facebook'/> <span class='hidetitle'></span></a></li>
<li><a class='tw' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' expr:title='data:top.shareToTwitterMsg' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/> <span class='hidetitle'></span></a></li>
<li><a class='gp' expr:href='"http://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Share on Google+'><i class='fa fa-google-plus'/></a></li>
<li><div id='showshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById('showother').style.display='block';document.getElementById('showshare').style.display='none''><i aria-hidden='true' class='fa fa-plus'/></span></div></li></ul>
<ul class='showother' id='showother'>
<li><a class='pt' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' target='_blank'><i class='fa fa-pinterest'/></a></li>
<li><a class='le' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Share on LinkEdin'><i aria-hidden='true' class='fa fa-linkedin'/></a></li>
<li><a class='tr' href='http://www.tumblr.com/share' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/></a></li>
<li><a class='ln' expr:href='"https://timeline.line.me/social-plugin/share?url=" + data:post.url' target='_blank' title='Share On Line'>
<svg class='icon icons8-LINE' viewBox=� 0 48 48&#>
<path d='M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23 C6,39.09,8.91,42,12.5,42z' style='fill:#00C300;'/>
<path d='M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637 c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185 c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001 C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687 C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652 c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688 c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035 c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917 c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603 c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604 c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z' style='fill:#FFFFFF;'/>
</svg>
</a></li>
<li><whatsapp expr:href='data:post.url' expr:text='data:post.title'/><a class='wa' data-action='share/whatsapp/share' href='idntheme'><i aria-hidden='true' class='fa fa-whatsapp' style='clear:both;font-size:24px!important'/></a></li>
<li><a class='em' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=email"' expr:title='data:top.emailThisMsg' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><i class='fa fa-envelope-o'/></a></li>
<b:if cond='data:blog.isMobileRequest == "true" and data:blog.pageType == "item"'>
<li><a class='bm' expr:href='"bbmi://api/share?message=" + data:post.url + "?ref=bbm&userCustomMessage=" + data:post.title' target='_blank' title='Share On BBM'>
<svg class='icon BlackBerry-Icon' viewBox='-350 0 5950 8390'>
<rect height='5600' rx='600' ry='600' style='fill: black;width:40px;overflow:hidden' width='6500'/>
<g>
<path d='M1327 885l2018 0c141,0 269,58 361,150 93,93 150,221 150,361l0 1457c0,141 -57,268 -150,361 -92,93 -220,150 -361,150l-1584 0 -724 737c64,-258 143,-487 226,-741 -115,-15 -219,-68 -297,-146 -93,-93 -150,-220 -150,-361l0 -1457c0,-140 57,-268 150,-361 92,-92 220,-150 361,-150zm2018 135l-2018 0c-104,0 -197,43 -266,111 -68,68 -110,162 -110,265l0 1457c0,103 42,197 110,265 69,69 162,111 266,111l27 0 90 0 -26 87c-11,37 -57,177 -102,312l369 -379 20 -20 28 0 1612 0c104,0 198,-42 266,-111 68,-68 110,-162 110,-265l0 -1457c0,-103 -42,-197 -110,-265 -68,-68 -162,-111 -266,-111z' style='fill: white; fill-rule: nonzero;'/>
<path d='M1655 1452l310 0c91,0 149,75 129,166l0 0c-19,91 -110,166 -201,166l-310 0 72 -332z' style='fill: white;'/>
<path d='M1565 1938l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/>
<path d='M2291 1452l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
<path d='M2200 1938l309 0c92,0 150,74 130,165l0 0c-20,92 -111,166 -202,166l-309 0 72 -331z' style='fill: white;'/>
<path d='M2872 1748l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/>
<path d='M2781 2233l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
<path d='M2118 2419l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
<path d='M3819 1091l10 0c233,0 423,190 423,422l0 1715c0,232 -190,422 -423,422l-13 0 225 735 -719 -735 -1224 0c-165,0 -308,-96 -378,-235 17,2 34,2 51,2l1586 0c301,0 548,-246 548,-547l0 -1486c0,-107 -32,-208 -86,-293z' style='fill: white;'/>
</g>
</svg>
</a></li>
</b:if>
<li><div id='showshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById('showother').style.display='none';document.getElementById('showshare').style.display='block''><i aria-hidden='true' class='fa fa-minus'/></span></div></li>
</ul>
</div>
</b:includable>
Lalu letakan kode di bawah ini di atas </body> scrol saja ke bawah karna </body> ada di paling bawah
<script type='text/javascript'>
//<![CDATA[
var x = document.getElementsByTagName("whatsapp")[0].getAttribute("href");
var y = document.getElementsByTagName("whatsapp")[0].getAttribute("text");
var z = "whatsapp://send?text=" + y + ' ' + x;
document.body.innerHTML = document.body.innerHTML.replace('idntheme', z);
//]]>
</script>
Sekarang pasang kode pemanggil nya ,letakan kode di bawah ini di bawah <data:post body/>
<h4>Share :</h4>
<b:if cond='data:blog.pageType == "item"'>
<div class='share-wrapper' id='share_btnper'>
<b:include data='post' name='sharethis'/>
</div>
</b:if>
Selesai...
"aksesoris share button ini saya ambil dari template idntheme"
Dan untuk hasil nya bisa lihat saja di blog ini ,karna saya memakai aksesoris share button tersebut.
Semoga artikel tutorial nya dapat bermanfaat untuk yang request ke email saya dan untuk anda semua.