Trik memasang tombol berbagi Addthis simple pada template lama blogspot

Addthis adalah tombol berbagi buatan pihak ketiga yang paling lengkap, dan ia dapat di pasang dengan berbagai gaya supaya tampilannya beda.

 
Adapun salah satu bentuk tombol akan saya bagikan adalah berbentuk sebagai berikut:

Jika tombol tersebut yang bertuliskan "BAGIKAN" disentuh akan berubah warna  segera menampilkan deretan tombol berbagi dari AddThis sbb:

Saya jamin sangat responsive. Cara pemasangannya adalah sebabagi berikut:

1. Masuk ke pengaturan blogger, pilih tema lalu pilih editHTML. Setelah halaman HTML muncul tekan ctrl+f tuliskan "share buttons" (tanpa tanda kutip) pada kotak pencarian dan tekan enter, tampilannya seperti ini: <!--share buttons-->

Nah dibawahnya ada kode: 

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

Atau: <div class='post-share-buttons goog-inline-block'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</div>

Pokonya di antara salah satu keduanya, kedua kode itu yang menampilkan tombol share bawaan blogger yang jadul seperti gambar di bawah ini:

Jadi hapus saja kode tersebut sampai habis, tinggalkan

 <!--share buttons--> karena  dibawahnya akan kita pastekan kode pengganti yang telah saya edit, kodenya adalah sbb silahkan di copy dan di pastekan.

<style type='text/css'>

.addthis_share_btn a, .addthis_share_btn a:visited {

background: #1E90FF; /* background color of the button */

display: inline-block;

padding: 6px 12px;

font-family: arial,helvetica,lucida,verdana,sans-serif;

font-size: 14px;

line-height: 1em;

color: #fff;

text-decoration: none;

-moz-border-radius: 10px;

-webkit-border-radius: 15px;

-moz-box-shadow: 0 3px 9px rgba(0,0,0,0.5);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

border-radius: 5px;

box-shadow: 0 1px 3px rgba(0,0,0,0.5);

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

border-bottom: 1px solid rgba(0,0,0,0.25);

position: relative;

cursor: pointer;

}

.addthis_share_btn a:hover {

background: #FF00FF; /* background color on mouse hover */

color: #fff;

}

.addthis_share_btn a:active { top: 1px; }

.addthis_share_btn a span, .addthis_share_btn:visited a span {

background: url(http://www.addthis.com/cms-content/images/gallery/icon-addthis.gif) no-repeat left;

padding: 1px 0 1px 18px;

}

</style>

<!-- editblog share buttons start-->

<div class='addthis_toolbox addthis_share_btn'>

<a class='addthis_button_compact' href='http://addthis.com/bookmark.php'>

<span><i aria-hidden='true' class='fa fa-share-alt'> BAGIKAN:</i></span></a>

</div>

<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>

<!-- editblog share buttons end-->

SAVE template.

Pada template baru (misalnya template contempo) cara pemasangannya adalah: Letakan kode CSS (warna cokelat kemerahan di atas) dari <style> ke </style> di atas kode </head>

Lalu letakan seluruh kode berikutnya (warna biru) tepat di bawah kode <data:post.body/>

Demikian cara memasang tombol berbagi Addthis simple agar terlihat beda tampilannya.