Buat Tombol Reaksi Di Postingan Blogger AMP

Masih bertahan menggunakan amp :D apa sudah pindah ke template lama berbasis HTML5 hehe template amp sudah mulai banyak fitur nya lo makin lama fitur untuk amp akan makin banyak jadi harus sering-sering browsing cara tau sana sini  , dan kali ini saya akan memberikan satu kecantikan untuk blog yang sudah menggunakan template amp. Seperti judul yang saya buat, Buat Tombol Reaksi Di Postingan Blogger AMP  seperti gambar di atas contoh nya dan jika kamu berminat memasang nya silakan ikuti tutorial di bawah ini dan semoga bisa di pahami dengan baik

Oow ia Tutorial ini pertama sekali saya baca di blog nya kompiajaib.com dan penulis nya +Adhy Suryadi kemarin belum lama ini template yang saya gunakan ini sedikit ada problem dan sudah di selesaikan dengan kang adhy di modif dengan suhu nya dan akhir nya selesai dan masalah nya hilang terimakasih kang adhy

silakan di simak tutorial nya :

Silahkan copy kode di bawah ini dan simpan di bawah postingan blog Anda di edit HTML.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<span class='reactions-label'><data:top.reactionsLabel/></span><span class='reactions-iframe'><amp-iframe allowtransparency='' expr:src='data:post.reactionsUrl' frameborder='0' height='21' layout='fixed' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' scrolling='no' width='300'>
</amp-iframe></span>
</b:if>
</div>
</b:if>

Dan untuk blog NON AMP silahkan ganti kode amp-iframe dengan iframe HTML5.
Kemudian agar tampilannya rapih, silahkan tambahkan CSS di bawah ini pada custom CSS untuk tampilan postingan.
.reaction-buttons{margin:20px 0}
.reactions-label{margin-right:.7em}
.reactions-iframe{overflow:hidden}
.reactions-iframe amp-iframe{vertical-align:-5px;margin-left:-0.7em}

Dan pastikan Anda sudah memasang js amp-iframe untuk halaman postingan.
Kemudian silahkan masuk ke tata letak lalu klik edit pada gadget Blog Posts dan silahkan centang untuk reaksi.


Use parse tool to easy get the text style on disqus comments:

Show ParserHide Parser