Mediababe.net – Memasang tombol share di blogger adalah salah satu cara meningkatkan trafik blog dengan natural karena postingan yang dibagikan oleh pengunjung dapat terlihat melalui media sosial yang dijadikan tempat untuk membagikan sebuah postingan.
Cara Mudah Pasang Tombol Share Di Blogspot Dengan Fitur Counter Keren
/* 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}}
<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>
3. Setelah langkah diatas tambahkan juga kode javascript ini diatas kode </body> agar efek counter bisa aktif pada tombol share.
<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>
4. Simpan template anda.
Nah demikianlah cara mudah memasang tombol share atau tombol bagikan di blogspot. Semoga bermanfaat.
