Cara Memasang Tombol Sosial Sharing Responsive di Template AMP Blogger

Postingan kali ini adalah lanjutan dari postingan sebelumnya yaitu Cara Memasang Tombol Share BBM Dan Line Di Blogger disini kita membahas masih seputar Tombol Sosial Media Share yang akan dipasang pada blog. Namun di postingan kali ini agak berbeda lebih di khususkan untuk pengguna Template Blogger AMP.

Di pembahasan kali ini akan kita tambahkan lebih banyak tombol sosial sharenya seperti Facebook, Google Plus, BBM, Whatsapp, Twitter, Pinterest, LinkedIn, Tumblr, SMS dan Email tampilannya dibuat lebih Responsive sehingga dapat menyesuaikan pada tampilan di smart phone sehingga lebih enak dilihat dan pastinya tidak menggangu area pandang postingan pengunjung.

Bagaimana penasaran ? bagi sobat yang mau mencobanya mari kita simak Cara Memasang Tombol Sosial Sharing Responsive di Template AMP Blogger.

Langkah Pertama

Silahkan sobat salin kode Js amp-social-share dibawah ini lalu letakkan di atas kode </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>
</b:if>

Untuk yang sudah pernah memasang kode Js amp-social-share di template nya silahkan lewati langkah ini.


Langkah Ke Dua
Silahkan salin dan simpan kode CSS dibawah ini.

/* Social 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:11.111111%;height:30px;line-height:30px;margin:0;text-align:center;display:inline-block;float:left}
.sharethis amp-social-share{vertical-align:middle}
.sharethis .tw{background-color: #55acee;}
.sharethis .gp{background-color: #dc4e41;}
.sharethis .fb{background-color: #3b5998;}
.sharethis .pi{background-color: #bd081c;}
.sharethis .li{background-color: #0077b5;}
.sharethis .wa{background-color: #25d366;}
.sharethis .ta{background-color: #3c5a77;}
.sharethis .sms{background-color: #ca2b63;}
.sharethis .em{background-color: #000;}

Langkah Ke Tiga
Silahkan cari kode berikut dibawah ini.

<b:includable id='shareButtons' var='post'>
............
............
............
</b:includable>

Setelah ketemu silahkan sobat salin kode berikut ini lalu letakkan diatas kode </b:includable> yang nantinya akan seperti ini.

            <b:includable id='share-tool' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharethis'>
<div class='tw'>
<amp-social-share height='20' type='twitter' width='20'/>
  </div>
<div class='gp'>
<amp-social-share height='25' type='gplus' width='25'/>
  </div>
<div class='fb'>
<amp-social-share data-param-app_id='254325784911610' height='20' type='facebook' width='20'/>
  </div>
<div class='pi'>
<amp-social-share expr:data-param-media='data:post.firstImageUrl' height='25' type='pinterest' width='25'/>
  </div>
<div class='li'>
<amp-social-share height='25' type='linkedin' width='25'/>
  </div>
<div class='ta'>
<amp-social-share height='20' type='tumblr' width='20'/>
  </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='15' type='whatsapp' width='15'/>
</div>
<div class='sms'>
<amp-social-share height='15' type='sms' width='15'/>
</div>
<div class='em'>
<amp-social-share height='25' type='email' width='25'/>
</div>
<div class='clear'/>
</div>
</b:if>
</b:includable>

Langkah Ke Empat
Silahkan salin kode dibawah ini lalu letakkan bebas dimana sobat ingin menampilkan tombol share nya.

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

Selesai silahkan SAVE, selamat mencoba semoga bermanfaat.