Tips Memasang Tombol Share di Blog

Memasang tombol share di blog dapat memudahkan pengunjung membagikan konten kita.  Tombol share berikut ini merupakan contoh tombol share yang letaknya ada dibawah postingan. Dalam widget ini terdapat tombol facebook like & share, google+ 1 dan twitter dan dilengkapi pula dengan box_count untuk setiap share button. 

Penampakannya bisa anda lihat pada gambar dibawah ini.

Nah, bagi anda yang berminat memasang widget share button ini, silahkan simak langkah-langkah tutorial pemasangannya dibawah ini.

Cara Memasang Tombol Share di Blog

• Masuk ke akun blogger anda
• Lalu klik "Template"  -->  klil "Edit HTML"
•  Setelah itu letakan (paste) kode css dibawah ini tepat diatas ]]</b:skin>

.share-buttons-box {height: 67px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3B20xDNDaX0_OhDtxtfahJFAcsTEiPpLxCzWT8j1roS8yUCMSTrdBoV1uAR6F1FZ4tzqZicvN8DXKWwF9QO9fDw0jODhKkXwKJYv0tcNFlZ-Be9BF5EOC7bUFTVVw1Skg2jvd0Vg7h_Xd/s1600/share.png) 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}

• Kemudian letakan (paste) kode css dibawah ini tepat dibawah kode <data:post.body/>

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

Catatan : jika anda menemukan kode <data:post.body/> lebih dari 1, maka pilih saja yang terakhir, atau coba satu-persatu

• Terakhir, simpan template anda. Selesai!