Social Sharing Buttons Untuk Blogger Valid AMP

Hi.... Apakah kamu sedang mencari artikel yang mengulas cara mmbuat social sgaring button untuk blogger valid AMP? Jika jawaban kamu "YA" maka kamu kini telah mendarat dengan benar pada artikel yang saya ulas ini.

Pada kesempatan kali ini saya akan membahas cara membuat Social Sharing Buttons Untuk Blogger Valid AMP.  tentang artikel ini sebelumnya saya jug sempat menyimaknya di artikel Mas Adhy Suryadi yang berjudul Responsive AMP Social Sharing Buttons For Blogger.

Social Sharing Buttons Untuk Blogger Valid AMP  ini cukup sangat responsive dan lengkap yaitu tombol berbagi untuk Facebook, Google+, Twitter, Pinterest, LinkedIn, Tumblr, Whatsapp, SMS, dan Email.

Social Sharing Buttons Untuk Blogger Valid AMP ini sudah dicoba langsung oleh Mas Adhy Suryadi di terapkan pada salah satu template premiumnya, untuk demonya silahkan sobat lihat dengan klik pada tombol di bawah ini.

DEMO

Jika sobat ingin memasangnya di template blogger AMP sobat silahkan ikuti langkah-langkah di bawah ini dengan seksama dan sampai selesai.

1. Silahkan simpan kode js amp-social-share 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>

2. Kemudian silahkan simpan kode CSS berikut 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;}

3. Silahkan cari kode berikut

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

............

............

............

</b:includable>

4. Kemudian simpan kode berikut di bawah kode tadi (di bawah kode </b:includable>

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

5. Kemudian silahkan simpan kode di bawah ini di mana Anda ingin menampilkan tombol berbaginya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:include data='post' name='share-tool'/>

</b:if>

Itulah cara memasang Social Sharing Buttons Untuk Blogger Valid AMP yang pernah saya simak di artikel situs Kompi Ajaib by Mas Adhy Suryadi

AMP CSS HTML Social Media Widget