ads here

MEMASANG TOMBOL BERBAGI ADDTHIS DI BLOG AMP

Originally constributed by: Anissa Auliasari
addthis share button atau tombol berbagi AddThis sangat terkenal responsive dan untuk AMP sendiri sampai saat ini AddThis merupakan satu satunya pilihan tombol berbagi yang kompitabel, pemasangan juga dapat dilakukan dengan cara di kustomisasi menurut selera pemasang agar tampilannya nampak beda.
Tampilan Tombol berbagi medsos pada halaman AMP Anissa
Namun disini kita hanya akan membahas bagaimana cara pemasangan tombol berbagi ini secara default ke bloggger AMP. Jika pemasangannya nanti sudah benar maka akan tampil tombol share inline berjajar pada halaman postingan di blog AMP seperti tampak pada gambar di atas.
Gambar letak kode unik dan kode inline AddThis

Langkah pertama:
Tentu saja buat terlebih dahulu akun AddThis melalui: AddThis
Tentu saja membuat akun adalah gratis.

Langkah kedua:
Setelah akun dibuat masuk ke dasbor pengaturan AddThis, untuk membuat kustomisasi tombol berbagi anda, hingga saat ini tampilan tombol berbagi untuk Blogger AMP adalah berjajar atau inline.

Langkah ketiga:
Pilih Tombol tombol medsos yang anda sukai setelah dirasa cukup, tekan "activate tool" untuk mengaktifkan tool. dari sini akan muncul kotak halaman kodenya.

Langkah ke empat:
Copy kode unik tersebut dengan menekan tombol "snippet code" di bawah halaman kode tersebut. Pastekan kode tersebut tepat diatas </head> kode HTML template AMP anda. Tampilan kode </head> pada AMP bisa saja normal bisa jadi dibungkus seperti pada kode yang saya sorot warna hijau:

<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>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5aac9c0a5226a9c5' type='text/javascript'/>
<!--letakan kode unik AddThis disini--!>
&lt;/head&gt;&lt;!--<head/>--&gt;
  <body>
  
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<amp-sidebar id='sidebar1' layout='nodisplay' side='right'>
  <div aria-label='close sidebar' class='close-sidebar' on='tap:sidebar1.toggle' role='button' tabindex='0'>&#10005;</div>

Langkah ke 5.
Terakhir tapi penting, Copy-Paste-kan kode inline AddThis pada bagian body (tepatnya diatas </body> templat dimana anda inginkan tombol share itu tampil nantinya. Pada tampilan template AMP bisa saja seperti contoh dibawah ini:
  <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
&lt;/div&gt;
<b:else/>
&lt;/div&gt;
</b:if>
    <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;index&quot;}'>
&lt;/div&gt;
</b:if> 
<!--letakan kode inline AddThis disini--!>
&lt;!--</body>--&gt;&lt;/body&gt;

</HTML>

Mudah mudahan ini bisa membantu karena jika tidak ada perbedaan susunan struktur kode pada template yang berbeda, misalnya anda memodifikasi tampilan dengan menambahkan kode CSS diatas kode </style> atau kode: ]]></b:skin> maka hapus saja kode CSS tambahan tersebut agar tidak mengganggu tampilan tombol berbagi AddThis ini yang seharusnya dipasang secara default, maka seharusnya AddThis share Button dapat bekerja dengan baik pada template blog AMP anda.


Comments

  1. Makasih sharenya mas..akhirnya bisa pasang juga di blog kipudin

    ReplyDelete
  2. Mas Sarofudin blog yang satunya mengapa gak di monotosi ya...yang itu keren, lho

    ReplyDelete
  3. Mas saya ikut baca artikel ini saja tapi kalo disuruh utak-utik html saya udh pusing duluan hehehe

    ReplyDelete
    Replies
    1. @Aris Armunanto: Sebenarnya sama saja dengan saya. Cuma mau gimana lagi, blog ini sudah memilih niche beginian he he he

      Delete

Post a Comment

请给我们一个礼貌的评论与任何相关的主题
Just give us a polite comments with any related topics
Hanya komentar yang sopan dan berhubungan dengan topik