Menampilkan Tombol Reaksi Untuk Post Pada Blog Amp Html

Salah satu cara untuk mendapat feedback untuk postingan blog yakni dari tombol reaksi dari pembaca. Dan gotong royong Blogger sendiri sudah menyediakan akomodasi feedback post dengan tombol reaksi untuk setiap postingan blog, namun hanya beberapa blogger saja yang menggunakannya.

Entah apa alasannya, banyak blogger yang tidak memanfaatkan tombol feedback post blogger ini. Bisa saja alasannya mungkin alasannya tidak mengetahuinya atau mungkin alasannya tampilannya yang kurang menarik.

Nah jikalau Anda tertarik untuk mencoba tombol reaksi untuk mengetahui bagaimana reaksi pembaca pada postingan Anda, silahkan ikuti caranya di bawah ini. Untuk DEMO silahkan coba tombol reaksi di bawah postingan ini.

Tombol reaksi ini untuk pengguna template AMP HTML.

Silahkan copy instruksi 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 instruksi amp-iframe dengan iframe HTML5.

Kemudian supaya 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 kemudian klik edit pada gadget Blog Posts dan silahkan centang untuk reaksi.

Sumber https://www.kompiajaib.com/

Share this post