Cara Memasang Share Button Sederhana di Blog

Cara Memasang Share Button Sederhana di Blog

oke kali ini saya akan membagikan salah satu penghias atau yang membuat blog anda terlihat lebih bagus atau pada bagian akhir artikel ada Share Button atau icon share

oke langsung saja kita ketoturialnya

pertama anda login blog dulu Disini atau buka di  URL pada google crome , uc browser , mozila ,dll.

Kemudian klik tamplate

Kemudia Edit HTML

Kemudian cari kode  ]]></b:skin> atau </style>  Dengan menggunakan CTRL + F 

Kemudian copy kode CSS dibawah ini

social-buttons-box {
height: 67px;
margin: 20px 0px 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;
}

Letakkan kode CSS  tepat sebelum kode ]]></b:skin> atau </style> 

Kemudian cari kode <data:post.body/> dengan CTRL + F                

Biasanya kode <data:post.body/>lebih dari satu biasanya diletakan pada kode yang terakhir , kalau tidak berhasil pada bagian akhir coba satu persatu ,

Kemudian copy kode dibawah ini

<div class='social-buttons-box'>
<div class='social-buttons'>
<div class='share gplus'><div class='g-plusone' data-count='true' 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-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a></div>
<div class='fb-share-button' data-layout='box_count' expr:data-href='data:post.url'/>
</div>
</div>
<div style='clear: both;'/>

Selanjutnya letakkan setelah kode <data:post.body/>

Kemudian cari </body> pada tamplate dengan CTRL + F

Kemudian salin kode JavaScript di bawah in

<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>

 lalu letakkan di atas kode </body>

 Selanjutnya Simpan template dan lihat hasilnya

Sekian toturial atau cara dari saya jika ada kesalahan silahkan komentar dibawah atau ada yang ingin ditanyakan silahkan komentar

Maaf jika artikel atau toturial dari saya banyak kurang atau belum bermoto sekian dari saya

Terima kasih

Tweet

Subscribe to receive free email updates: