Cara Membuat Tombol Share di Blog seperti Evo Magz

Keberadaan tombol share untuk saling membagi artikel atau sharing ke media sosial seperti Facebook, Twitter dan lainnya sangat diperlukan dalam blog maupun website. Banyak dari pembaca yang suka men-sharing apa yang mereka baca di blog kita. Secara otomatis, justru hal ini akan membuat blog Anda semakin dikenal banyak orang melalui artikel yang mereka share.

Pada kesempatan hari ini saya akan bagikan bagaimana cara membuat tombol share button di blog yang letaknya dibawah postingan ,tombol yang saya bagikan ini merupakan tombol share yang disertai dengan box_count karya mas sugeng yang sudah ada sebelumnya di template evo magz.

Berikut Cara Membuat Tombol Share Keren Ala Evo Magz:

1. Seperti biasanya , masuk dulu ke editor template html
2. Pasang kode css berikut tepat di atas ]]</b:skin> atau </style>
   

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

3. Kemudian carai lagi kode <data:post.body/> ( biasanya kode tersebut lebih dari 2 , sobat pilih aja yang terakhir atau di coba satu persatu )
4. Setelah ketemu kode diatas kemudian pasang script 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'></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>

5. Terakhir Simpan Template dan Lihat Hasilnya