Cara Membuat Tombol Share Artikel yang Menarik

Halo semuanya, kali ini saya mau posting tentang tutorial menambahkan tombol share ke sosmed yang posisinya terletak di bawah artikel. Karena beberapa waktu yang lalu saya mengubah tombol share menjadi lebih menarik. Dan tentu saja tombol share ini akan menambah nilai kita di seo.

Dari berbagai jenis form tombol share akhirnya saya memilih tombol share yang simple dan terdapat icon di sampingnya. Simpel dan menarik, saya nggak mau ribet dengan tampilan yang nantinya mengakibatkan waktu loading blog saya menjadi lambat.

Oke, langsung aja ya simak tutorial berikut ini.

1. Bagi yang belum login silahkan login terlebih dahulu, kita login dulu ke dashboard blog kita.

2. Pilih menu template dan kemudian edit HTML

3. Copy dan tempel script berikut ini di atas kode ]]></b:skin>

/* social share buttons */
.social-buttons-box {
height: 67px;
background: url(http://1.bp.blogspot.com/-OYT-JDviP2k/VHrWc3ofkiI/AAAAAAAAEJs/yyNAhuCUELA/s1600/rect3799.png) no-repeat 200px 0px;
margin:20px 0 15px;
overflow:hidden;
}
.social-buttons {
margin:0 0;
height:67px;
float:left;
}
.social-buttons .share {
float:left;
margin-right:10px;
display:inline-block;
}
.share-btn {
margin:15px 0 25px;
height:20px;
overflow:hidden;
}

4. Selanjutnya copy script berikut dan tempelkan di bawah kode <data:post.body/>

<div class='social-buttons-box'>
 <div class='social-buttons'>
  <div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
  <div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
  <div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
 </div>
 </div>
 <!-- <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>-->
 <div style='clear: both;'/>

5. Tahap selanjutnya kita pasangkan kode JS berikut ini unutk memanggil tombol share yang kita pasangkan tadi, kode JS ini kita tempatkan di atas kode </body>

<script>
  window.___gcfg = {lang: &#39;id&#39;};

  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);
</script><div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

6. Simpan template dan kita lihat hasilnya.

Demikian sedikit tutorial cara menambahkan tombol share pada artikel blog. Dan ini juga sama seperti yang terpasang di blog ini. Semoga membantu dan terus semangap blogging teman - teman.

Enter your email address:

Tweet