Skip to main content
Ivhaa Design

follow us

Cara Memasang Share Addthis Pada Blog AMP

Bagaimana pasang share addthis di blog amp, penasaran begini caranya

Baca juga:



Suku alhamdulillah pada kali ini saya akan memberikan tutorial lagi buat kalian semua, tutorial tersebut adalah Cara Memasang Share Addthis Pada Blog AMP. Tutorial ini saya dapat dari blog Kompi ajaib dan saya share di blog saya ini.

Addthis adalah platform share atau tool share ke sosial media, kita tau jika share ini cuman bisa di share di blog HTML5 tapi setelah ada tutorial dari kompi ajaib ini tau kalau bisa di taruh di blog AMP juga.

Nah terus bagaimana caranya memasang di Blogger, pada blog AMP?? Ini Caranya.

Cara Memasang Share Buttom Addthis Pada Blog AMP

Langkah pertama yang kita lakukan adalah membuat akun addthis dulu, jika kalian sudah punya akun bisa langsung log in ke akun kalian.

Langkah kedua kalian setting dari tinggi, lebar, dan berapa jumlah share yang di tampilan. Disini kalian membuat widget share button Addthis agar bisa di pasang di blog.

Langkah ketiga jika kalian sudah melakukan setting sesuai keinginan kalian, selanjutnya bisa copy code yang di tandai ini.


Langkah keempat tinggal kita memasang di blog kita, copy kode di bawah ini di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script async='async' custom-element='amp-addthis' src='https://cdn.ampproject.org/v0/amp-addthis-0.1.js'/>
</b:if>
Selanjutnya cari kode seperti berikut ini  <b:includable id='shareButtons' var='post'>
            <b:includable id='shareAddThis' var='post'>
<div class='shareAddThis'>
<amp-addthis data-pub-id='ra-5863290ccdeac772' data-widget-id='iecc' 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>
  </div>
</b:includable>
Selanjutnya ganti kode berikut yang di tandai dengan kode punya kalian, widgetID kalian yang telah di buat tadi

Kemudian copy kode berikut ini untuk memasang di atas postingan atau bawah postingan
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='shareAddThis'/>
</b:if>
Setelah itu copy CSS ini agar share bisa rapih dan rata di blog
.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;}}

Selasai, selamat mencoba

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar