Cara Membuat Tombol Share di Blog seperti Evo Magz [Tahap 6]

Cara Terbaru Membuat dan Memasang Tombol Share di Blog seperti Template Blog Evo Magz Mas Sugeng - Ada banyak sekali cara untuk membuat tombol share button yang dapat kita pasang di blog kita, ada yang menggunakan java script dan ada yang tidak menggunakan java script.

Kali ini saya akan bagikan bagaimana cara tuk membuat tombol share button di blog yang letaknya dibawah postingan, tombol share ini merupakan tombol share karya mas sugeng yang sudah ada sebelumnya di template evo magz dan brosense. tombol share ini sangat unik sekali, dimana tombol share ini disertai dengan box_count, untuk lebih jelasnya anda bisa lihat demo gambar dibawah ini, ataipun di tombol share saya.

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/AVvXsEidG7DF5kqEPS-fwPp86-LP-3qxym-G7LFLf5LDlKrtxrmAyipadbhdFf8RUmNKqk1e6xXAvCclPsZJwyZ_Vq6Xw0H_BgqshsfizuS8XyQ43SGdc_i8seT5g5U08zIuv3bip_vfd9JW6zqM/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'>
      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>

5. Terkhir Simpan Template dan Lihat Hasilnya

Jika Berhasil maka tombol share tadi akan seperti pada gambar diatas, atau pada share button yang saya pasang (bila masih saya pasang) hehheheheh, gimana?

Penutup

Terima kasih atas kunjungan anda di LingkaranDunia, serta membaca artikel yang mengenai Cara Membuat Tombol Share di Blog seperti Evo Magz [Tahap 6]. Jika ada yang kurang di mengerti silahkan ajukan pertanyaan lewat Email, Facabook LingkaranDunia dan lewat kolom komentar yang kami sediakan di bawah artikel ini.