Kali ini Info Blog News
akan berbagi tutorial " Bagaimana untuk menambah Responsive Share Button dibawah
postingan responsive dengan Counter " Ya, ini adalah widget
share button yang sering anda 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.
Catatan : 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>
CSS - InfoBlogNews
/* Share Button dengan
Counter untuk Blogger by http://infoblogberita.blogspot.co.id*/
.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 kode di bawah ini tepat di bawah atau di atas <data:post.body/>
atau
<div class='post-footer'>
HTML - InfoBlogNews
<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>
Ganti kode yang ditandai
dengan username Twitter Anda.
3.
Tambahkan kode di bawah ini sebelum </body>
jQuery - InfoBlogNews
<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 dan lihat hasilnya.
Jika ada pertanyaan dengan tutorial diatas, silahkan tinggalkan pesan pada kotak komentar, terima kasih dan semoga bermanfaat.....