Penulis: Moch Adnan dipublikasikan: 26 Januari 2015
Cara Membuat Tombol Berbagi Untuk Postingan Blog
Dalam hal mensiasati tampilan artikel pada posting template yang tidak dilengkapi dengan fitur tombol share atau tombol untuk berbagi kita bisa memasang sendiri tombol share this atau tombol untuk berbagi ini, kedalam setiap halaman artikel blog kita. Dan untuk mendapatkan tombol berbagi yang bisa kita pasang langsung kedalam posting template tersebut, Anda hanya cukup menyimpan beberapa kode yang akan coba saya bagikan berikut ini kedalam Template blog anda. Untuk itu silahkan lanjutkan untuk membaca artikel ini, semoga bermanfaat bagi sahabat yang tengah mengalami kendala dalam memasang (membuat) tombol berbagi kedalam postingan blognya.

Cara Membuat Tombol Berbagi Untuk Postingan Blog



Cara Membuat Tombol Berbagi Untuk Postingan Blog 


Baik tanpa berpanjang lebar lagi mari kita langsung saja menuju ke medan pengeditan html template blog sahabat, dengan cara: Masuk kedalam dasbor blog, lalu pilih Template, kemudian pilih edit html. Selanjutnya simpan kode berikut tepat diatas kode  ]]></b:skin>

.share-buttons-box {height: 67px;background: url() no-repeat 330px 10px;margin:20px 0 15px;overflow:hidden;}

.share-buttons{margin:0 0;height:67px;float:left}

.share-buttons .share{float:left;margin-right:10px;display:inline-block}
Sudah !. Ok, selanjutnya simpan kembali kode dibawah ini tepat diatas kode <data:post.body/> jika Anda ingin menampilkan tombol berbagi ini tepat dibawah judul artikel, dan lakukan kebalikannya jika anda ingin menampilkan tombol berbagi ini terlihat dibawah artikel (postingan)


<div class='share-buttons-box'>

<div class='share-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 fbshare'><div class='fb-share-button' data-type='box_count' 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 class='share linkedin'><script src='//platform.linkedin.com/in.js' type='text/javascript'>

lang: en_US </script><script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/></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><br/>


Sudah, baik. Selanjutnya jangan lupa untuk menekan tombol 'Save' agar hasil pengeditan tadi tersimpan, lakukan pratinjau apakah keseluruhan tombol sudah muncul semua atau belum dalam halaman artikel anda. jika sudah, maka selesailah sudah cara membuat tombol berbagi untuk postingan blog anda. Namun jika ada yang tidak muncul, semisal tombol facebook like atau facebook share, maka simpan kembali kode terakhir ini tepat diatas kode  </head>


<script>(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;js.async=true;

js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;

fjs.parentNode.insertBefore(js, fjs);

}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Untuk mempermudah pencarian kode silahkan tekan ctrl + F. 

Note : Lakukan backup pada template agar supaya ketika terjadi error' saat pengeditan dan sobat masih memiliki template yang aslinya.