TRIK MEMASANG TOMBOL SHARE ADDTHIS TERBARU GAYA EDITBLOG

Saya benar benar tidak bisa melewatkan waktu untuk menjawab pertanyaan dan berbagi, ketika seorang pengunjung bertanya gimana sih caranya memasang tombol berbagi mirip editblog? Sebelum saya tidak bisa menjawab setiap pertanyaan lebih baik saya manfaatkan waktu untuk menjawabnya.

Lagian tentu saja tombol share ini hanya dipasang sementara buat contoh saja di blog ini.  Walau bagaimanapun, para pengunjung benar benar "nyawa" blog ini, mereka adalah insipirasi. Mereka semua yang membuat editblog menjadi "hidup" dan bernyawa.

Adapun bentuk tombol yang dipakai editblog adalah hasil modifikasi saya adalah sebagai berikut:
Jika tombol tersebut yang bertuliskan "BAGIKAN" disentuh akan berubah warna  segera menampilkan deretan tombol berbagi dari AddThis sbb:

Saya jamin sangat responsive dan akurat. 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>

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


Comments