5 Langkah Dalam Memasang Tombol Social Share Berikut Counter Pada Setiap Halaman Bawah Artikel
Artikel kali ini akan memberikan tutorial cara memasang tombol social share khususnya pada blogspot. Pentingnya tombol social share atau tombol media sosial seperti facebook, twitter, google plus dan linkedin yang terpasang pada blog pribadi memudahkan pembaca untuk membagikan artikel yang sudah baca ke medial sosial pribadi milik si pembaca.
Tutorial tombol social share ini juga sudah dilengkapi dengan counter (penghitung) untuk tiap artikel yang telah dishare sehingga memberikan informasi "jumlah" (tiap tombol media sosial) dan "total jumlah" (jumlah keselurahan tombol media sosial) artikel yang sudah dibagikan,
tentunya semakin keren dan berkualitas untuk blog pribadi. Untuk pemasangan tombol social share ini, bisa mengikuti langkah berikut:
- Pertama, pasangkan kode dibawah ini (cetak miring) lalu letakkan diantara <head> /**other script**/</head> (sebaiknya dibawah meta content "viewport")
- Kedua, pasangkan juga script css (cetak miring) dibawah lalu letakkan diatas </b:skin>
.sky_en{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)}
.sky_en .share_blog {display:block;}
.sky_en .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;}
.sky_en .share_blog .wrap1 {display:inline-block;width:31px;float:left;}
.sky_en .share_blog ul {margin:0;padding:0;}
.sky_en .share_blog ul li{list-style:none;list-style-type:none;padding:0;margin:2px;float:left;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}
.sky_en .share_blog ul li a,.sky_en .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}
.sky_en .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)}
.sky_en .share_blog .btn_fb{background:#3a579a}.sky_en .share_blog .btn_fb:hover{background:#314a83}.sky_en .share_blog .btn_twtr{background:#00abf0}.sky_en .share_blog .btn_twtr:hover{background:#0092cc}.sky_en .share_blog .btn_gplus{background:#df4a32}.sky_en .share_blog .btn_gplus:hover{background:#be3f2b}.sky_en .share_blog .btn_pntrst{background:#cd1c1f}.sky_en .share_blog .btn_pntrst:hover{background:#ae181a}.sky_en .share_blog .btn_linkdin{background:#2554BF}.sky_en .share_blog .btn_linkdin:hover{background:#224EB4}
.sky_en .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}
.sky_en .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:95px}
.sky_en .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}
.sky_en .share_blog .btn_fb .share-btn,.sky_en .share_blog .btn_twtr .share-btn,.sky_en .share_blog .btn_gplus .share-btn,.sky_en .share_blog .btn_pntrst .share-btn,.sky_en .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}
- Ketiga, Pasang kode javascript (cetak miring) dibawah ini dan letakkan diatas </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>
- Keempat, letakkan kode dibawah ini (cetak miring) lalu pasangkan tepat dibawah <data:post.body/>, biasanya kode <data:post.body/> ada lebih dari 1 (satu) coba pasangkan pada yang ke 2 atau ke 3.
<b:if cond='data:blog.pageType == "item"'>
<div class='sky_en'>
<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>
- Kelima, Save templete anda
Dan seharusnya tombol social share sudah muncul pada bagian bawah halaman posting pada setiap artikel.
Jika mendapat kendala dalam tutorial ini silahkan tuliskan dikolom komentar dan saya (penulis) akan mencoba untuk membantu. Terima kasih salam www.MauBergaya.Blogspot.com
Post a Comment