Cara Memasang Tombol Share di Blog

Memasang tombol share di blog dapat memudahkan pengunjung membagikan konten kita. Oleh karena itu, saya akan berbagi tips untuk memasang share button di blog. 

Tombol share berikut ini merupakan karya mas sugeng di template evo magz, 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

1. Masuk ke akun blogger anda

2. Lalu klik "Template"  -->  klil "Edit HTML"

3. Setelah itu letakan (paste) kode css dibawah ini tepat diatas ]]</b:skin>

.share-buttons-box {height: 67px;background: url(http://3.bp.blogspot.com/-moj4-jk-UB0/U1qCkCPaGQI/AAAAAAAADTY/tixmak8NHV8/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}

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

5. Terakhir, simpan template anda. Selesai!

Tutorial yang mudah kan? anda pasti bisa mempraktekannya. Terimakasih telah membaca tutorial Cara Memasang Widget Share Button di Blog ( Facebook, twitter, google+ dll ). Jika tidak keberatan bantu saya membagikan artikel ini juga ya.