Jan 14, 2017

Mengaktifkan Tombol Reaksi Untuk Post Pada Blog AMP HTML

Banyak diantara kita sebagai Blogger yang belum memaksimalkan Tools atau alat pelengkap pada Blogspot kita, salah satunya adalah manfaat mengaktifkan tombol reaksi untuk postingan termasuk saya ini. Ternyata tombol reaksi tersebut mempunyai pengaruh dan manfaat cukup baik untuk feedback di setiap postingan blog yang kita terbitkan, entah kenapa saya perhatikan banyak dari blogger yang tidak mengaktifkan atau menampilkan Tombol feedback Reaksi Untuk Post Pada Blog apa karena tampilan iconnya yang biasa saja sederhana atau alasan lainnya atau bisa saja mungkin tidak mengetahui manfaatnya.

Ada kabar baik di postingan kali ini saya akan berbagi kode script untuk Tombol Reaksi Untuk Post Pada Blog AMP HTML. Bagi sobat yang tertarik ingin menggunakannya silahkan ikuti cara-cara dibawah ini.

Cara pertama ini khusus untuk Blog Template AMP HTML, silahkan sobat copy kode dibawah ini pada Edit HTML Blognya dan simpan tepat dibawah postingan blog.
<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>

Perhatikan baik-baik penempatan kode scriptnya

Cara ke dua ini khusus untuk Blog Template HTML yang non AMP sobat hanya cukup rubah kode amp-iframe dengan iframe HTML5.

Agar nantinya postingan blog terlihat rapih maka sobat tambahkan kode CSS dibawah ini tempatkan di Custom CSS pada edit HTML blog sobat.
.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}

Oia sampai lupa bagi sobat yang belum memasang kode js silahkan tambahkan js amp-iframe dihalaman postingan blognya

Nah jika cara diatas sudah selesai lanjut ke setingan tata letak klik edit di gadget Blog Postnya kemudian gulung kebawah cari dan ceklist atau centang reaksi, untuk kalimatnya silahkan sobat atur sesuaikan.

Lebih Jelasnya perhatikan Capture Gambar dibawah ini

Edit BlogAMP



Kemudian perhatikan selanjutnya

Cara Edit Blog AMP


Baiklah Sobat itu saja mungkin kali ini yang saya bisa bagikan, penerapan kode untuk template Blog AMP agak sedikit berbeda seperti yang sudah saya bahas sebelumnya (Baca juga : Cara Mudah Edit Template Blog AMP) di situ ada penjelasan penerapan kode Blog AMP. Jika ada sobat yang ingin menambahkan dan berbagi pengalamannya bisa berbagi di kolom komentar ini, terima kasih sudah berkunjung.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.