Menampilkan Tombol Reaksi Di Blog Valid HTML5

Tombol Reaksi Di Blog Valid HTML5
Blogger reaction button atau dalam bahasa Indonesia-nya tombol reaksi bisa menjadi acuan kepada penulis bahwa tulisannya disukai pembaca atau tidak. Bisa diwakili dengan lucu, menarik, bermanfaat, bagus, dan lain sebagainya.

Untuk menampilkannya di template default blogger ini adalah hal mudah, namun bagi Anda yang menggunakan custom template akan menjadi sulit karena hampir semua pembuat template telah menghapus kode untuk menampilkan tombol reaksi ini. Namun perlu diketahui bahwa tombol ini memberikan lumayan banyak error pada validasi HTML5. Ada sekitar 11 error pada validasi HTML5 dari tombol ini.

Untuk itu saya akan share cara membuat valid tombol reaksi ini baik untuk yang menggunakan template default blogger ataupun yang menggunakan custom template.

Bagi yang belum ada tombol reaksinya di blog silahkan aktifkan dulu dari dashboard >> tata letak >> lalu klik edit pada elemen blog post dan centang pada "Reaksi", jika ingin mengganti kata-kata atau option yang tampil Anda bisa menggantinya dengan klik "edit" di sampingnya.

Kemudian masuk ke edit HTML dan temukan kode seperti di bawah ini. Biasanya pada custom template kode ini sudah tidak ada.

<span class='reaction-buttons'>
        <b:if cond='data:top.showReactions'>
          <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
            <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>              <span class='reactions-label'>
              <data:top.reactionsLabel/></span>&#160;</td>
            <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
           </tr></table>
        </b:if>
      </span>

Itulah kode yang menampilkan tombol reaksi blogger, dan kode yang saya beri warna merah adalah kode yang menyebabkan error pada validasi HTML5. Untuk kode "span" silahkan ganti dengan "div" karena ini menjadi error ketika ada table di dalamnya dan untuk kode warna merah lainnya silahkan dihapus. Dan kode yang berwarna biru adalah kode untuk menampilkan kata "Reaksi :" di samping tombol, jika Anda tidak ingin menampilkan kata ini silahkan hapus juga kode tersebut. Sehingga penampilannya akan seperti di bawah ini.

  <div class='reaction-buttons'>
        <b:if cond='data:top.showReactions'>
          <table><tr>
            <td><iframe class='reactions-iframe' expr:src='data:post.reactionsUrl' name='reactions'/></td>
           </tr></table>
        </b:if>
      </div>

Bagi yang menggunakan custom template silahkan gunakan kode di atas untuk menampilkan tombol reaksinya. Bisa Anda simpan di bawah kode-kode post footer, misalnya di bawah kode <div class='post-footer-line post-footer-line-2'>. Sebenarnya tombol reaksi bisa ditampilkan di mana saja baik di bawah postingan, di atas, di kiri, atau di kanan. Secara default tombol ini akan berada di samping kiri, jika ingin menampilkan di sebelah kanan silahkan tambahkan style pada class-nya. Sehingga tampilannya akan seperti di bawah ini.

  <div class='reaction-buttons' style='float:right'>
        <b:if cond='data:top.showReactions'>
          <table><tr>
            <td><iframe class='reactions-iframe' expr:src='data:post.reactionsUrl' name='reactions'/></td>
           </tr></table>
        </b:if>
      </div>

Dan untuk custom template biasanya iframe-nya akan muncul dengan border, jika demikian silahkan tambahkan kode CSS di bawah ini untuk menghilangkan border dan mengatur tinggi iframenya dan tambahkan di atas kode ]]></b:skin> atau </style>

.reaction-buttons iframe{border:none;overflow:hidden;height:30px}


Pada demo saya menggunakan float:right untuk menampilkan tombol reaksinya di sebelah kanan.

Selamat mencoba....

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
Disqus Comments