Memasang Responsive Share Button dengan Counter di Blog - Kali ini Twisted Shape akan berbagi sebuah widget yang sudah tidak asing lagi buat Blogger. Ya, ini adalah widget share button yang sering sobat temui di blog yang memasangnya. Fungsi dari widget share button ini masih sama seperti widget share button lainnya yaitu memungkinkan pengunjung untuk berbagi artikel yang dirasa bermanfaat ke sosial media.
Widget ini pun sudah mendukung tampilan responsive dan ditambahkan dengan plugin counter dari http://donreach.com/social-share-count yang akan memunculkan jumlah share yang di klik oleh pengunjung. Untuk tampilan dari share button ini bisa sobat lihat seperti gambar di atas.
Widget ini menggunakan fontawesome, pastikan di dalam template sudah terdapat link fontawesome.
Cara Memasang Responsive Share Button dengan Counter di Blog
1. Login ke Blogger > Template Editor > Tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>
/* Share Button dengan Counter untuk Blogger by http://twistedshape.blogspot.com */
.arlina_share_button{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)}
.arlina_share_button .share_blog {display:block;}
.arlina_share_button .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;}
.arlina_share_button .share_blog .wrap1 {display:inline-block;width:31px;float:left;}
.arlina_share_button .share_blog ul {margin:0;padding:0;}
.arlina_share_button .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}
.arlina_share_button .share_blog ul li a,.arlina_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}
.arlina_share_button .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)}
.arlina_share_button .share_blog .btn_fb{background:#3a579a}.arlina_share_button .share_blog .btn_fb:hover{background:#314a83}.arlina_share_button .share_blog .btn_twtr{background:#00abf0}.arlina_share_button .share_blog .btn_twtr:hover{background:#0092cc}.arlina_share_button .share_blog .btn_gplus{background:#df4a32}.arlina_share_button .share_blog .btn_gplus:hover{background:#be3f2b}.arlina_share_button .share_blog .btn_pntrst{background:#cd1c1f}.arlina_share_button .share_blog .btn_pntrst:hover{background:#ae181a}.arlina_share_button .share_blog .btn_linkdin{background:#2554BF}.arlina_share_button .share_blog .btn_linkdin:hover{background:#224EB4}
.arlina_share_button .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}
.arlina_share_button .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:95px}
.arlina_share_button .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}
.arlina_share_button .share_blog .btn_fb .share-btn,.arlina_share_button .share_blog .btn_twtr .share-btn,.arlina_share_button .share_blog .btn_gplus .share-btn,.arlina_share_button .share_blog .btn_pntrst .share-btn,.arlina_share_button .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) {
.arlina_share_button .share_blog .btn_linkdin {width:34px;}
.arlina_share_button .share_blog .btn_fb .share-btn,.arlina_share_button .share_blog .btn_twtr .share-btn,.arlina_share_button .share_blog .btn_linkdin .share-btn,.arlina_share_button .share_blog .btn_gplus .share-btn,.arlina_share_button .share_blog .btn_pntrst .share-btn{display:none}}
@media only screen and (max-width:768px) {
.arlina_share_button .share_blog ul li a,.arlina_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.arlina_share_button .share_blog .wrap{min-width:34px}.arlina_share_button .share_blog .btn_linkdin,.arlina_share_button .share_blog .btn_pntrst{width:30px}.arlina_share_button .share_blog ul li{margin:1px 3px}}
@media only screen and (max-width:479px) {
.arlina_share_button .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.arlina_share_button .share_blog ul li{width:25px;margin:2px;}.arlina_share_button .share_blog .wrap{display:none}.arlina_share_button .share_blog ul li .fa{width:25px}}2. Tambahkan kode di bawah ini tepat di bawah atau di atas <data:post.body/> atau <div class='post-footer'>
<b:if cond='data:blog.pageType == "item"'>
<div class='arlina_share_button'>
<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>Ganti kode yang ditandai dengan username Twitter sobat.
3. Tambahkan kode di bawah ini sebelum </body>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
// Share Button with Counter by twistedshape.blogspot.com
$(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 dan lihat hasilnya.
Demikian Cara Memasang Responsive Share Button dengan Counter di Blog, semoga bermanfaat.
Tambahkan komentar Anda