Menampilkan Tombol Reaksi Di Blog Valid Html5

Blogger reaction button atau dalam bahasa Indonesia-nya tombol reaksi dapat menjadi contoh 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 ialah hal mudah, namun bagi Anda yang memakai custom template akan menjadi sulit alasannya hampir semua pembuat template telah menghapus arahan untuk menampilkan tombol reaksi ini. Namun perlu diketahui bahwa tombol ini memperlihatkan tidak mengecewakan banyak error pada validasi HTML5. Ada sekitar 11 error pada validasi HTML5 dari tombol ini.

Untuk itu aku akan share cara menciptakan valid tombol reaksi ini baik untuk yang memakai template default blogger ataupun yang memakai custom template.

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

Kemudian masuk ke edit HTML dan temukan arahan menyerupai di bawah ini. Biasanya pada custom template arahan 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 arahan yang menampilkan tombol reaksi blogger, dan arahan yang aku beri warna merah ialah arahan yang menjadikan error pada validasi HTML5. Untuk arahan "span" silahkan ganti dengan "div" alasannya ini menjadi error dikala ada table di dalamnya dan untuk arahan warna merah lainnya silahkan dihapus. Dan arahan yang berwarna biru ialah arahan untuk menampilkan kata "Reaksi :" di samping tombol, kalau Anda tidak ingin menampilkan kata ini silahkan hapus juga arahan tersebut. Sehingga penampilannya akan menyerupai 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 memakai custom template silahkan gunakan arahan di atas untuk menampilkan tombol reaksinya. Bisa Anda simpan di bawah kode-kode post footer, contohnya di bawah kode <div class='post-footer-line post-footer-line-2'>. Sebenarnya tombol reaksi dapat ditampilkan di mana saja baik di bawah postingan, di atas, di kiri, atau di kanan. Secara default tombol ini akan berada di samping kiri, kalau ingin menampilkan di sebelah kanan silahkan tambahkan style pada class-nya. Sehingga tampilannya akan menyerupai 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, kalau demikian silahkan tambahkan arahan 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}

DEMO

Pada demo aku memakai float:right untuk menampilkan tombol reaksinya di sebelah kanan.

Selamat mencoba....

Sumber https://www.kompiajaib.com/

Share this post