Cara Membuat Tombol Share Sosial Responsive Di Blog - Tombol berbagi atau share perlu kita pasang sebagai widget di blog. Share button sangat penting untuk web atau blog agar visitor bertambah dan juga menambah informasi sesuai dengan artikelnya.
Fiture dari tombol share ini yaitu memiliki design flat dan tentunya responsive dan juga meningkatkan SEO dalam blog anda. Tampilan tombol share ini seperti gambar di atas.
Note: Pastikan dalam template anda sudah memasang Font Awesome.
Jika belum terpasang Baca: Cara Memasang dan Menggunakan Font Awesome Di Blog
Cara Memasang Tombol Share Sosial Responsive Di Blog
1. Klik menu template > Edit HTML
2. Cari kode dan letakkan kode dibawah ini tepat di atas kode ]]><b:skin> atau </style>
/* Share Button dengan Counter */
.gowidget_sharebutton{position:relative;z-index:2;width:100%;padding:20px 0;display:inline-block;margin:20px auto;border-bottom:2px solid rgba(0,0,0,.08)}
.gowidget_sharebutton .share_blog {display:block;}
.gowidget_sharebutton .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;}
.gowidget_sharebutton .share_blog .wrap1 {display:inline-block;width:31px;float:left;}
.gowidget_sharebutton .share_blog ul {margin:0;padding:0;}
.gowidget_sharebutton .share_blog ul li{list-style:none;list-style-type:none;padding:0;margin:2px;float:left;width:16%;max-width:115px;display:inline-block;font-size:13px;overflow:hidden;text-align:left;height:32px;line-height:32px;color:#fff;border-radius:3px;transition:all .4s}
.gowidget_sharebutton .share_blog ul li a,.gowidget_sharebutton .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}
.gowidget_sharebutton .share_blog ul li .fa{color:#fff;font-size:16px;font-weight:normal;font-family:FontAwesome;display:inline-block;text-align:center;padding:0;height:32px;line-height:inherit;width:30px;background-color:rgba(0,0,0,.05)}
.gowidget_sharebutton .share_blog .btn_fb{background:#3a579a}.gowidget_sharebutton .share_blog .btn_fb:hover{background:#314a83}.gowidget_sharebutton .share_blog .btn_twtr{background:#00abf0}.gowidget_sharebutton .share_blog .btn_twtr:hover{background:#0092cc}.gowidget_sharebutton .share_blog .btn_gplus{background:#df4a32}.gowidget_sharebutton .share_blog .btn_gplus:hover{background:#be3f2b}.gowidget_sharebutton .share_blog .btn_pntrst{background:#cd1c1f}.gowidget_sharebutton .share_blog .btn_pntrst:hover{background:#ae181a}.gowidget_sharebutton .share_blog .btn_linkdin{background:#2554BF}.gowidget_sharebutton .share_blog .btn_linkdin:hover{background:#224EB4}
.gowidget_sharebutton .share_blog .share.h6{font-size:10px;font-weight:700;text-align:center;color:#999;border-top:1px solid #e3e3e3;padding:8px 0 0;margin:8px auto 0;line-height:8px;width:42px;letter-spacing:.5px}
.gowidget_sharebutton .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:95px}
.gowidget_sharebutton .share_blog .share .count.h4{font-size:22px;font-weight:700;text-align:center;color:#ff8349;line-height:16px;margin:-8px 0 0;min-height:15px}
.gowidget_sharebutton .share_blog .btn_fb .share-btn,.gowidget_sharebutton .share_blog .btn_twtr .share-btn,.gowidget_sharebutton .share_blog .btn_gplus .share-btn,.gowidget_sharebutton .share_blog .btn_pntrst .share-btn,.gowidget_sharebutton .share_blog .btn_linkdin .share-btn{position:relative;color:#fff;display:inline-block;text-align:center;font-weight:700;font-size:11px;float:right;min-width:12px;padding:0 8px 0 0}
@media only screen and (max-width: 979px) {
.gowidget_sharebutton .share_blog .btn_linkdin {width:34px;}
.gowidget_sharebutton .share_blog .btn_fb .share-btn,.gowidget_sharebutton .share_blog .btn_twtr .share-btn,.gowidget_sharebutton .share_blog .btn_linkdin .share-btn,.gowidget_sharebutton .share_blog .btn_gplus .share-btn,.gowidget_sharebutton .share_blog .btn_pntrst .share-btn{display:none}}
@media only screen and (max-width:768px) {
.gowidget_sharebutton .share_blog ul li a,.gowidget_sharebutton .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.gowidget_sharebutton .share_blog .wrap{min-width:34px}.gowidget_sharebutton .share_blog .btn_linkdin,.gowidget_sharebutton .share_blog .btn_pntrst{width:30px}.gowidget_sharebutton .share_blog ul li{margin:1px 3px}}
@media only screen and (max-width:479px) {
.gowidget_sharebutton .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.gowidget_sharebutton .share_blog ul li{width:25px;margin:2px;}.gowidget_sharebuttonn .share_blog .wrap{display:none}.gowidget_sharebutton .share_blog ul li .fa{width:25px}}
3. Tambahkan kode dibawah ini tepat di atas <div class="post-footer"> atau di bawah <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='gowidget_sharebutton'>
<div class='share_blog'>
<ul>
<li class='share'>
<div class='share-btn' data-service='total'>
<div class='count h4'/>
<div class='share h6'>SHARES</div>
</div>
</li>
<li class='btn_fb'><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'>
<div class='wrap1'><i class='fa fa-facebook'/> </div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='facebook'>
<div class='count'/></div>
</a>
</li>
<li class='btn_twtr'><a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + " via @ArlinaDesign - "' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-twitter'/></div>
<div class='wrap'>Tweet</div>
<div class='share-btn' data-service='twitter'>
<div class='count'/></div>
</a>
</li>
<li class='btn_gplus'><a 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'>
<div class='wrap1'><i class='fa fa-google-plus'/></div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='google'>
<div class='count'/></div>
</a>
</li>
<li class='btn_pntrst'><a data-pin-config='beside' expr:href='" http://pinterest.com/pin/create/button/?url=" + data:post.url + " &media=" + data:blog.postImageUrl + "&description=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-pinterest'/></div>
<div class='wrap'>Pin</div>
<div class='share-btn' data-service='pinterest'>
<div class='count'/></div>
</a>
</li>
<li class='btn_linkdin'><a expr:href='" http://www.linkedin.com/shareArticle?mini=true& url=" + data:post.url + " & title=" + data:post.title + " & summary=& source=" ' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-linkedin'/></div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='linkedin'>
<div class='count'/></div>
</a>
</li>
</ul>
</div>
</div>
</b:if>
4. Tambahkan kode dibawah ini tepat diatas </body>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
// Share Button with Counter by widgetmefor.blogspot.co.id
$(document).ready(function(){var t=$("link[rel=canonical]").attr("href");$.getJSON("http://sharecount.twistblogger.com/?url="+encodeURIComponent(t)+"&callback=?",function(t){shares=t.shares,$(".count").each(function(t,e){service=$(e).parents(".share-btn").attr("data-service"),count=shares[service],count>1e3&&(count=(count/1e3).toFixed(1),count>1e3?count=(count/1e3).toFixed(1)+"M":count+="k"),$(e).html(count)})})});
//]]>
</script>
</b:if>
5. Simpan Template. Done.
-> Komentar (relevan) sesuai posting di atas.
-> Dilarang Menyertakan Link/Url