[Terbaru] Cara membuat tombol share di blog seperti template evo magz

Membuat tombol share blog seperti template evo magz – Sebenarnya banyak cara yang di gunakan untuk membuat tombol share yang telah dibagikan secara Cuma-Cuma. Kali ini saya akan membagikan cara terbaru membuat tombol share di blog seperti template evo magz.

Kalau sebelumnya ada error pada tombol share yang dimana ketika dibuka artikel tersebut tombol share berada pada judul artikel blog. Tapi setelah ada pembetulan maka hal terebut tidak terjadi lagi.

Dan ternyata masih banyak pengguna template evo magz dikalangan blogger indonesia dan anehnya mungkin mereka jarang update maka tombol tersebut tetap dibiarkan berada pada posisi atas judul artikel, sehingga sangat disayangkan karena akan mengganggu pembaca yang ingin membaca artikelnya.

Namun bila anda memiliki template lain tapi ingin dipasang tombol share seperti template evo magz maka tidak ada salahnya mencoba cara yang saya bagikan dibawah ini.

Kode untuk memasang tombol share blog ini sudah saya coba dan hasilnya tombol tidak berada pada posisi menutupi judul artikel

Baca juga : Cara memperbaiki tombol evo magz yang menutupi judul artikel

Semoga tidak panjang lebar ngomongnya, langsung saja caranya sebagai berikut :

1. Masuk ke dasbord template
2. Pilih Edit HTML
3. Cari kode ]]</b:skin> atau </style> dengan cara (Ctrl + F)
4. Letakkan kode berikut ini tepat diatas kode salah satu kode nomor 3

/* SHARE BUTTONS */
.share-buttonsx-box {
height: 67px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjurGi1hWOITIWuFiPwG6DYtEJPwuhD9YXsMtoVGzrr3H4Qk5kn0FPq4CdLpaia0Ga4xYDuFk_uAOBHBRSZsaU5ywy481NegCkeffK8VKtHTBsS5wafNRPEvJ57UQe3CUdzjRykTpAJbMVG/s1600/share.png) no-repeat 330px 10px;
margin:20px 0 15px;
overflow:hidden;
}
.share-buttonsx {
margin:0 0;
height:67px;
float:left;
}
.share-buttonsx .share {
float:left;
margin-right:10px;
display:inline-block;
}
.share-buttonsx .tweet {
margin-top: 41px;
}

5. Lanjutkan dengan mencari kode <data:post.body/> (Pilih kode yang paling bawah)
6. Jika sudah ketemu letakkan kode berikut ini tepat dibawah kode nomor 5

<!-- Tombol share media sosial -->
<div class='share-buttons-box'>
<div class='share-buttonsx'>
<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>
<div style='clear: both;'/>

7. Langkah terakhir jika sudah klik Simpan Template

Kemudian lihat apakah tombol share tersebut sudah muncul dalam artikel anda seperti pada template  evo magz.

Memang template evo magz ini tidak ada matinya sih.. masih banyak pengguna template tersebut dan well… itu adalah hak masing-masing blogger.

Jika ada kendala dalam pemasangan  tombol share ala evo magz silahkan tinggalkan pesan pada kolom komentar yang tersedia.