Cara Gampang Menciptakan Share Addthis Tanpa Counter Blog Amp Html


Cara Praktis Membuat Share AddThis Tanpa Counter Blog AMP HTML. Sebagaimana postingan mas adhy ihwal cara menciptakan button share addthis dengan counter, sudah cukup terperinci dan rapi lengkap dengan counter, sehingga pengunjung dapat mengetahui jumlah sharing dari postingan tersebut.

Untuk blog besar menyerupai Kompi Ajaib jumlah sharenya dapat hingga angka puluhan, tapi bagi blog kecil menyerupai blog aku ini hanya kisaran angka 0-10 saja. Karena itulah terkadang sebagian blogger menyerupai aku merasa kurang cocok jikalau counter nya ditampilkan. Akhirnya aku mencoba menciptakan sendiri sekaligus melengkapi share whatsapp, telegram, line, dan messenger menyerupai yang anda lihat diatas judul postingan blog ini (jika belum diganti).

Disini aku 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 memilih share counters semoga tidak tampil pilih None menyerupai gambar berikut:


Namun jikalau anda ingin lebih gampang dan praktis tanpa harus menciptakan sendiri menyerupai diatas, anda dapat eksklusif menyimpan kode-kode dibawah ini:

Simpan arahan berikut diatas <b:includable id='shareButtons' var='post'>

<b:includable id='shareAddThis' var='post'>
<div class='shareAddThis'>
<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'>
<amp-addthis data-pub-id='ra-5b26a638a2e9bb21' data-widget-id='pgxk' expr:data-share-media='data:post.firstImageUrl' expr:data-share-title='&quot;Check out this article: &quot; + data:post.title + &quot; - &quot; + data:post.url' height='63' layout='flex-item'>
</amp-addthis>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'>
<amp-addthis data-pub-id='ra-5b26a638a2e9bb21' data-widget-id='pgxk' expr:data-share-media='data:post.firstImageUrl' expr:data-share-title='&quot;Check out this article: &quot; + data:post.title + &quot; - &quot; + data:post.url' height='110' layout='flex-item'>
</amp-addthis>
</b:if>
</div>
</b:includable>

Lalu gunakan arahan dibawah ini sebagai pemanggilnya, simpan dimana anda inginkan contohnya dibawah postingan atau dibawah judul:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 gampang bukan? selamat mencoba...
Sumber https://www.nengain.web.id/

Belum ada Komentar untuk "Cara Gampang Menciptakan Share Addthis Tanpa Counter Blog Amp Html"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel