Menampilkan Tombol Reaksi Untuk Post Pada Blog AMP HTML

Ditulis oleh: Adhy Suryadi

Ditulis pada: 1/14/2017

Salah satu cara untuk mendapatkan feedback untuk postingan blog adalah dari tombol reaksi dari pembaca. Dan sebenarnya Blogger sendiri sudah menyediakan fasilitas 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 karena tidak mengetahuinya atau mungkin karena tampilannya yang kurang menarik.

Nah jika 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 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.