Cara Pasang Tombol Share Di Blogspot Dengan Fitur Counter Keren

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.

Pastinya kalian sudah mengetahui apa sih tujuan dan manfaat dari membuat tombol share di blogspot ini? Manfaat dari memasang tombol bagikan atau share ini tidak lain lagi adalah untuk memudahkan pengunjung blog kamu dapat berbagi ke teman-teman mereka pada media sosial tersebut. Lalu apakah tujuannya? tujuannya sudah jelas untuk mendapatkan trafik blog melalui sosial media dengan cara si pengunjung membagikan artikelnya memudahkan kita mendapatkan visitor tambahan.

Hal ini pada dasarnya sangat penting, tombol ini sangat berfungsi baik untuk blogspot. Cara membuatnya pun cukup sangat mudah bahkan blogger pemula juga bisa melakukannya. Kita hanya menambahkan beberapa kode agar bisa tampil tombol share ini di blogspot yang kamu kelola. Oke langsung saja bagaimana cara memasang tombol share di blogger pada berikut ini.

Cara Mudah Pasang Tombol Share Di Blogspot Dengan Fitur Counter Keren

1. Silahkan tambahkan kode berikut ini diatas kode </stlye> atau ]]</b:skin>

/* 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}}

2. Tambahkan juga kode di bawah ini pada kode tag postingan kamu atau pada dibawah kode <div class=”post-footer”> atau boleh juga 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>

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.