Menampilkan Tombol Reaksi Untuk Post Pada Blog AMP HTML

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.



Reactions:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser

Hot on this week: