Cara Mudah Membuat Share AddThis Tanpa Counter Blog AMP HTML. Sebagaimana postingan mas adhy tentang cara membuat button share addthis dengan counter, sudah cukup jelas dan rapi lengkap dengan counter, sehingga pengunjung bisa mengetahui jumlah sharing dari postingan tersebut.
Untuk blog besar seperti Kompi Ajaib jumlah sharenya bisa sampai angka puluhan, tapi bagi blog kecil seperti blog saya ini hanya kisaran angka 0-10 saja. Karena itulah terkadang sebagian blogger seperti saya merasa kurang cocok jika counter nya ditampilkan. Akhirnya saya mencoba membuat sendiri sekaligus melengkapi share whatsapp, telegram, line, dan messenger seperti yang anda lihat diatas judul postingan blog ini (jika belum diganti).
Disini saya tidak mengulas ulang apa yang sudah dijelaskan oleh mas Adhy Suryadi, jadi silahkan simak terlebih dahulu postingannya pada link diatas. Yang membedakan hanya pada langkah ke 3 poin 1 untuk menentukan share counters supaya tidak tampil pilih None seperti gambar berikut:
Namun jika anda ingin lebih mudah dan simpel tanpa harus membuat sendiri seperti diatas, anda bisa langsung menyimpan kode-kode dibawah ini:
Simpan kode berikut diatas
<b:includable id='shareButtons' var='post'><b:includable id='shareAddThis' var='post'>
<div class='shareAddThis'>
<b:if cond='data:blog.pageType == "item" and data:blog.isMobileRequest == "false"'>
<amp-addthis data-pub-id='ra-5b26a638a2e9bb21' data-widget-id='pgxk' expr:data-share-media='data:post.firstImageUrl' expr:data-share-title='"Check out this article: " + data:post.title + " - " + data:post.url' height='63' layout='flex-item'>
</amp-addthis>
</b:if>
<b:if cond='data:blog.pageType == "item" and data:blog.isMobileRequest == "true"'>
<amp-addthis data-pub-id='ra-5b26a638a2e9bb21' data-widget-id='pgxk' expr:data-share-media='data:post.firstImageUrl' expr:data-share-title='"Check out this article: " + data:post.title + " - " + data:post.url' height='110' layout='flex-item'>
</amp-addthis>
</b:if>
</div>
</b:includable>Lalu gunakan kode dibawah ini sebagai pemanggilnya, simpan dimana anda inginkan misalnya dibawah postingan atau dibawah judul:
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='shareAddThis'/>
</b:if>Supaya lebih rapi, simpan CSS berikut pada
<style amp-custom='amp-custom'>.shareAddThis{margin:0;height:53px;overflow:hidden;}
.shareAddThis amp-addthis iframe{margin-top:0;margin-left:-8px;}
@media screen and (max-width:640px){.shareAddThis{height:98px;}}Gimana mudah bukan? selamat mencoba...
Advertisement
