Skip to main content
Mister Design

follow us

Choose Your Categories

Redesign by BUNG MADAF

Tutorial Memasang Share Button AddThis With Counter di Blog AMP

AddThis merupakan sebuah jasa yang ditawarkan untuk para blogger untuk menyebarkan konten mereka ke berbagai media sosial. Kali ini saya akan membagikan cara memasang share button AddThis dengan Counter pada Blog AMP HTML.

Tool atau widget ini dapat Anda customisasi yang Anda inginkan, seperti warna color, size, dan tata letak widget tersebut. Dengan adanya button ini, akan menambah pengunjung dan otomatis akan menambah penghasilan yang Anda dapat dari ngeblog ini.

Tutorial ini saya dapatkan dari blog Kompi Ajaib, dan sudah saya terapkan langsung ke blog ini, dan hasilnya memuaskan. Pada blog saya sendiri memakai salah satu jenis share button dengan nama Inline. Adapun jenis share button yang Anda ingin pakai yaitu Floating Bar, Image Sharing, Expanding, dan Inline.

Cara Memasang Share Button With Counter Pada Blog AMP


Silakan ikuti tutorial dibawah ini jika widget ini ingin bekerja dengan baik, berikut tutorialnya.

Langkah pertama

Silakan kunjungi web AddThis dan Anda login disana, jika Anda belum mempunyai akunnya silakan Anda daftar terlebih dahulu.

Langkah kedua

Silakan Anda menuju halaman Tool, dan Anda buat widgetnya dengan nama Inline. Cara buatnya, silakan klik Add New Tool, lalu pilih Share Button, lalu pilih Inline (sejajar kesamping).

Langkah ketiga

Jika Anda sudah setting, dan menyesuaikan disannya, silakan Save & Continue. Dan silakan klik Tool yang sudah Anda buat, dan Anda copy url ra-5863290ccdeac772 dan iecc



Langkah ke-empat

Sekarang kita memasangnya ke template, silakan copy kode dibawah ini di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;


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

Kemudian simpan kode dibawah ini di atas kode <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>

Silakan ganti tulisan yang saya tandai dengan kode pub dan kode widgetID Anda seperti langkah ketiga.

Selanjutnya silakan copy kode dibawah ini diatas atau dibawah postingan, kalau saya di atas postingan.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='shareAddThis'/>
</b:if>

Silakan tambahkan kode CSS dibawah ini agar terlihat rapih.


.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;}}

Demikian tutorial yang bisa saya berikan kali ini, semoga bermanfaat.

Source : https://www.kompiajaib.com/2018/05/cara-memasang-share-button-addthis.html

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