Cara Membuat Tombol Share AMP Lengkap Dan Responsive

Sahare button yang akan kita buat ini tampilanya kekinian sederhana tapi keren, responsive tidak memberatkan loading blog, bisa menyesuaikan ketika blog diakses menggunakan komputer ataupun mobile

Dan menariknya lengkap dengan share sosial media whatsapp, sms, dan email. Jadi pengunjung blog kamu bisa share artikel dengan mudah lewat sms melalui tombol button tersebut

Banyak menfaat memasang tombol share di blog maka tidak heran apabila ini menjadi atribut wajib sebuah web. Lebih-lebih jika tombol share jelas dan mudah diketahui, mudah digunakan untuk share artikel keberbagai media sosial oleh pengunjung

Maka akan memberikan dampak baik untuk blog itu sendiri diantaranya dapat meningkatkan pengunjung blog jika banyak orang yang melakukan share artikel-artikel yang ada diblog kita, selain itu juga dapat memperkuat Seo off page

Cara mudah membuat tombol share Responsive lengkap dengan whatsapp di blog AMP

Naah inilah cara membuat tombol share yang responsive dan lengkap, untuk DEMO bisa kamu lihat dibawah artikel ini atau lihat gambar diatas artikel ini, cara yang saya bagikan ini sama dengan apa yang saya pasang di blog ini

Login blogger
Pilih menu TEMA →  EDIT HTML
Copy kode dibawah ini letakkan diatas kode <head/> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>

Kemudian copy paste kode dibawah ini letakkan diantara kode CSS postingan

/* Tombol Share */
.sharethis{position:relative;margin:20px 0;padding:0;font-size:0}
.sharethis .tw,.sharethis .gp,.sharethis .pi,.sharethis .fb,.sharethis .li,.sharethis .wa,.sharethis .ta,.sharethis .sms,.sharethis .em{width:15%;height:50px;line-height:50px;margin:0;text-align:center;display:inline-block;float:left;}
.sharethis amp-social-share{vertical-align:middle}
.sharethis .fb{background-color: #3b5998;border-radius: 2px 0 0 2px}
.sharethis .tw{background-color: #1DA1F2;}
.sharethis .gp{background-color: #dc4e41;}
.sharethis .wa{background-color: #25d366;}
.sharethis .sms{background-color: #ca2b63;}
.sharethis .em{background-color: #000;border-radius: 0 2px 2px 0}

Perhatikan kode width:15%; yang saya beri tanda warna merah silahkan sesuaikan dengan lebar wrapper yang ada di blog kamu, semakin tinggi angkanya maka akan semakin lebar dan begitu sebaliknya

Selanjutnya cari kode <b:includable id='shareButtons' var='post'> dengan menekan ctrl+f
Nanti kurang lebih akan muncul kode seperti ini <b:includable id='shareButtons' var='post'>...</b:includable>

Nah copy paste kode berikut, kemudian letakkan dibawah kode </b:includable> (yang saya sebutkan diatas)

<b:includable id='share-tool' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharethis'>
<div class='fb'>
<amp-social-share data-param-app_id='168694007115948' height='25' type='facebook' width='25'/>
  </div>
<div class='tw'>
<amp-social-share height='25' type='twitter' width='25'/>
  </div>
<div class='gp'>
<amp-social-share height='30' type='gplus' width='30'/>
  </div>
<div class='wa'>
<amp-social-share data-share-endpoint='whatsapp://send' expr:data-param-text='&quot;Check out this article: &quot; + data:post.title + &quot; - &quot; + data:post.url' height='20' type='whatsapp' width='20'/>
</div>
<div class='sms'>
<amp-social-share height='20' type='sms' width='20'/>
</div>
<div class='em'>
<amp-social-share height='30' type='email' width='30'/>
</div>
<div class='clear'/>
</div>
</b:if>
</b:includable>

Terakir copy paste kode dibawah ini kemudian letakkan dimana kamu ingin menampilkan tombol share

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

Kalau menurut saya lebih efisien jika ditaruh dibawah artikel namun tergantung selera Anda bisa juga dipasang diatas artikel

Seperti contohnya di blog ini saya taruh dibawah artikel, karena kenapa ? karena umunya orang mengunjungi blog akan mencari informasi terlebih dahulu sebelum mendapatai tombol share. Namun itu tergantug selera masing-masing pemilik blog (nyatanya banyak juga yang pasang tombol share diatas postingan/di samping blog)

Apakah cara ini berhasil diterapkan di blog Non AMP ?  saya kira tidak berhasil karena AMP dan NoAMP itu berbeda

Nah itulah cara mudah untuk membuat tombol share yang responsive di blog Valid AMP lengkap dengan whatsapp, sms, dan email. Jika kamu kesulitan butuh pertanyaan silahkan tingalkan dikolom komentar dibawah