Kali ini aku akan menawarkan tutorial wacana Cara Membuat Tombol Berbagi dengan Jumlah yang dibagikan, atau Share Button with Count. Yo, pribadi saja ke intinya
1, Login ke Blogger kalian > Template > Edit HTML
pastikan di blog kalian sudah memiliki Fontawesome, Biasanya yang memakai template responsive atau html5 sudah ada. Tapi, kalau belum silahkan kalian masukkan ke blog kalian
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' rel='stylesheet'/> 2. Tambah CSS dibawah ini sebelum </style>
/* CSS Share Button */ .abdurrahim_share_btn{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)} .abdurrahim_share_btn .share_blog {display:block;} .abdurrahim_share_btn .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;} .abdurrahim_share_btn .share_blog .wrap1 {display:inline-block;width:31px;float:left;} .abdurrahim_share_btn .share_blog ul {margin:0;padding:0;} .abdurrahim_share_btn .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} .abdurrahim_share_btn .share_blog ul li a,.abdurrahim_share_btn .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none} .abdurrahim_share_btn .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)} .abdurrahim_share_btn .share_blog .btn_fb{background:#3a579a}.abdurrahim_share_btn .share_blog .btn_fb:hover{background:#314a83}.abdurrahim_share_btn .share_blog .btn_twtr{background:#00abf0}.abdurrahim_share_btn .share_blog .btn_twtr:hover{background:#0092cc}.abdurrahim_share_btn .share_blog .btn_gplus{background:#df4a32}.abdurrahim_share_btn .share_blog .btn_gplus:hover{background:#be3f2b}.abdurrahim_share_btn .share_blog .btn_pntrst{background:#cd1c1f}.abdurrahim_share_btn .share_blog .btn_pntrst:hover{background:#ae181a}.abdurrahim_share_btn .share_blog .btn_linkdin{background:#2554BF}.abdurrahim_share_btn .share_blog .btn_linkdin:hover{background:#224EB4} .abdurrahim_share_btn .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} .abdurrahim_share_btn .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:95px} .abdurrahim_share_btn .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} .abdurrahim_share_btn .share_blog .btn_fb .share-btn,.abdurrahim_share_btn .share_blog .btn_twtr .share-btn,.abdurrahim_share_btn .share_blog .btn_gplus .share-btn,.abdurrahim_share_btn .share_blog .btn_pntrst .share-btn,.abdurrahim_share_btn .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) { .abdurrahim_share_btn .share_blog .btn_linkdin {width:34px;} .abdurrahim_share_btn .share_blog .btn_fb .share-btn,.abdurrahim_share_btn .share_blog .btn_twtr .share-btn,.abdurrahim_share_btn .share_blog .btn_linkdin .share-btn,.abdurrahim_share_btn .share_blog .btn_gplus .share-btn,.abdurrahim_share_btn .share_blog .btn_pntrst .share-btn{display:none}} @media only screen and (max-width:768px) { .abdurrahim_share_btn .share_blog ul li a,.abdurrahim_share_btn .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.abdurrahim_share_btn .share_blog .wrap{min-width:34px}.abdurrahim_share_btn .share_blog .btn_linkdin,.abdurrahim_share_btn .share_blog .btn_pntrst{width:30px}.abdurrahim_share_btn .share_blog ul li{margin:1px 3px}} @media only screen and (max-width:479px) { .abdurrahim_share_btn .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.abdurrahim_share_btn .share_blog ul li{width:25px;margin:2px;}.abdurrahim_share_btn .share_blog .wrap{display:none}.abdurrahim_share_btn .share_blog ul li .fa{width:25px}} 3. Lalu Tambahkan Javascript dibawah ini sebelum </body>
<script type='text/javascript'> //<![CDATA[ // Share Button with Counter $(document).ready(function(){var t=$("link[rel=canonical]").attr("href");$.getJSON("http://tbncounts-sharecounts.rhcloud.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> 4. dan masukkan script Sharenya dibawah ini sesudah <data:post.body/>
<b:if cond='data:blog.pageType == "item"'> <div class='abdurrahim_share_btn'> <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 www.abdurrahim.id - "' 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_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> Untuk Demonya dapat kalian pada Blog ini,
Jika mengalami problem silahkan komen dibawah.
