Responsive Amp Social Sharing Buttons For Blogger

Sebelumnya aku sudah memposting responsive social sharing buttons with Whatsapp, Line, and BBM, sekarang aku bagikan juga responsive AMP social sharing buttons untuk Blogger AMP HTML.

Responsive AMP social sharing button ini cukup lengkap yakni tombol menyebarkan untuk Facebook, Google+, Twitter, Pinterest, LinkedIn, Tumblr, Whatsapp, SMS, dan Email.

Tombol responsive social sharing untuk AMP HTML ini sudah aku coba dan sudah aku terapkan pada salah satu template premium aku menyerupai pada tombol di bawah ini.

DEMO

Jika Anda ingin mencoba memasangnya sendiri, silahkan ikuti langkahnya di bawah ini.

Silahkan simpan instruksi js amp-social-share di atas instruksi </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>

Kemudian silahkan simpan instruksi 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;}

Silahkan cari instruksi berikut

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

Kemudian simpan instruksi berikut di bawah instruksi tadi (di bawah instruksi </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>

Kemudian silahkan simpan instruksi 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>

Bagaimana, gampang bukan? Selamat mencoba....
Sumber https://www.kompiajaib.com/

Share this post