Membuat Social Share Valid AMP Melayang Di Atas

Assalamualaikum..
Semangat Pagi...

Setelah berjibaku dengan kegagalan menerapkan sosial share yang bisa muncul dan melayang diatas pada saat melakukan scrolling halaman , akhirnya ketemu juga cara menerapkannya dengan menggunakan amp-position-observer wkwkwk...

Update tambahan melayang dibawah

Berikut ini saya sedikit jelaskan fungsi dari amp-position-observer
Amp-position-observer ini bekerja pada saat sebuah halaman , entah itu halaman beranda, halaman posting maupun halaman static di scroll ke bawah , biasanya amp-position-observer ini digunakan dan di terapkan pada scrolling to top (kembali ke halaman atas)
Lalu bagaimana cara membuatnya..
Berikut ini tahap penerapannya :

Copy kode dibawah ini dan letakkan tepat di atas kode &lt;!--</body>--&gt;&lt;/body&gt;

<!-- TopSlideShareBuzz -->
<b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'>
<amp-animation id="showAnim" layout="nodisplay">
<script type="application/json"> { "duration": "200ms", "fill": "both", "iterations": "1", "direction": "alternate", "animations": [ { "selector": "#topSlideShareBuzzButton", "keyframes": [ { "opacity": "1", "visibility": "visible" } ] } ] }
</script>
</amp-animation>
<amp-animation id="hideAnim" layout="nodisplay">
<script type="application/json"> { "duration": "200ms", "fill": "both", "iterations": "1", "direction": "alternate", "animations": [ { "selector": "#topSlideShareBuzzButton", "keyframes": [ { "opacity": "0", "visibility": "hidden" } ] } ] }
</script>
</amp-animation>
<div id="topSlideShareBuzzButton" class="topSlideShareBuzz" >
<div class='share-buzz'>
<amp-social-share height='44px' layout='responsive' type='whatsapp' width='60px'/>
<amp-social-share data-param-app_id='XXX' height='44px' layout='responsive' type='facebook' width='60px'/>
<amp-social-share height='44px' layout='responsive' type='twitter' width='60px'/>
<amp-social-share height='44px' layout='responsive' type='line' width='60px'/>
<amp-social-share height='44px' layout='responsive' type='sms' width='60px'/>
<amp-social-share height='44px' layout='responsive' type='system' width='60px'/>
</div>
</div>
<div class="trigger"><amp-position-observer on="enter:hideAnim.start; exit:showAnim.start" layout="nodisplay"></amp-position-observer></div>
</b:if>
<!-- End TopSlideShareBuzz -->

Ganti XXX dengan id facebook anda.
Cara mengetahui ID FB bisa anda baca di artikel Cara Mengetahui ID Facebook

Selanjutnya copy CSS kode dibawah ini dan letakkan di dalam CSS <style amp-custom='amp-custom'>
Saran saya letakkan di <style amp-custom='amp-custom'> bagian postingan.

.share-buzz{display:flex;}
.topSlideShareBuzz{width:100vw;height:80px;z-index:9999;top:60px;left:0;position:fixed;opacity:0;visibility:hidden;overflow:hidden;clear:both;}
.topSlideShareBuzz-title{float:left;}

ganti nominal height:80px dengan 40px agar posisi tidak terlalu jauh , ganti top:60px dengan bottom:0px jika posisi yang diinginkan berada dibawah.

Sebelum menyimpan tema , terlebih dahulu lihat pratinjau halaman untuk melihat hasilnya..
Selamat mencoba..

Semangat Berbagi