Gampang Caranya Membuat 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 Gampang Caranya 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 Gampang Caranya Membuat Social Sharing Buttons Untuk Blogger Valid AMP For Blogger.

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

Gampang Caranya Membuat Social Sharing Buttons Untuk Blogger Valid AMP Untuk Blogger Valid AMP ini sudah dicoba langsung oleh Mas Adhy Suryadi di terapkan pada salah satu template premiumnya, untuk demonya silahkan teman,kerabat,sahabat blogger,yang kucintai kalian semua lihat dengan klik pada tombol di bawah ini.

DEMO

Jika teman,kerabat,sahabat blogger,yang kucintai kalian semua ingin memasangnya di template blogger AMP teman,kerabat,sahabat blogger,yang kucintai kalian semua 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 Gampang Caranya Membuat Social Sharing Buttons Untuk Blogger Valid AMPUntuk Blogger Valid AMP yang pernah saya simak di artikel situs Kompi Ajaib by Mas Adhy Suryadi