Menampilkan Tombol Reaksi Di Blog Valid HTML5

Menampilkan Tombol Reaksi Di Blog Valid HTML5

Bola Hero Gawai

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

68 Comments Add Comment

Beberapa template default sudah bisa aktif, termasuk dari template Kompiananya Kang adhy....
Iya ngga kang ?

Balas

Tapi ini yang valid ... top dah kang ;)
Master valid-validan emang nih kang Adhy....ajaib

Balas

Jika tidak muncul silahkan tambahkan kodenya secara manual :)

Saya lihat di Google banyak yang share tapi belum valid, jadi saya validkan hehehe :D

Balas

Iya mas jadi ada tombol vote-nya hehehehe :D

Balas

coba dulu ah....!

oh ya mas....! udah dapat alamat url +google spesial belom?

Balas

Udah mas hehehe :D +AdhySuryadi

Balas

Ikutan nimbrung +HasbyAshShiddiq :D

Balas

Mantap nih si akang update'y cepet !!

Balas

Alhamdulillah dari mulai ngeblog blom pernah pake :) keren lah postingana :-bd

Balas

Bisa ngerti nih pengunjung suka artikel kita atau tidak :D

Balas

Mumpung aya ide kang :D

Balas

Sami abdi ge kang :D Mung nembe ayeuna we dina demo :)

Balas

Ingin pasang kang tapi takut tidak ada respon dari komentator, hehe

Balas

pa khabar mas adhy, kliatan blognya makin ramei,
yuk mas jalan2 d blog saya http://www.indodetik.com/

Balas

Heheheeehe bisa aja mas Adjie :D

Balas

Makasih mas,
Indodetik makin OK, beritanya makin yahut.... semoga makin sukses :)

Balas

Pinter sekali mas andhy ini :)

Balas

Mas saya mau tanya, saya sudah menerapkan cara dari kang ismet untuk membuat author rich snipet. Dan juga sudah saya cek di Google Structured Data testing tool foto g + saya muncul, tetapi kalau cek langsung di google kok belum muncul ya ?? apakah harus menunggu beberapa hari atau minggu dulu ya mas ?

Balas

Iya untuk di hasil pencariannya harus tunggu beberapa waktu.

Balas

Ah belajar aja mas :D

Balas

kok kayak sperti polling mas..? ada counternya juga? kayaknya template default blogger ada kayak gininya juga.

Balas

Iya ini kan dari default blogger, cuman dari default blogger blm valid HTML5 jadi saya valid-kan :D. Pada template custom biasanya ini tidak akan muncul, jadi bisa gunakan kode ini yang sudah valid HTML5. :D

Balas

Paling lama 1minggu bahkan 2 minggu :)

Maaf kalo saya nyambung-nyambung..

Balas

Ada efeknya sama SEO ngga kang? :)

Balas

Untuk SEO saya belum tahu, namu jika suatu artikel banyak yang menyukai maka dengan sendirinya akan kuat d SERP, setidaknya seperti itu :)

Balas

saya nyimak dulu mas, nanti kalau saya ingin pasang bisa tak coba...

Balas

Mas, maaf sebelumnya kalo OOT.
Aku mau tanya nih, gimana caranya agar tampilan template responsive bisa menyesuaikan layar hp Jika di buka pake' opera mini hp, (sperti blog kompiajaib ini) ??.
Soalnya aku pake' template zikazev blue dari kang ismet, kok tampilannya gk sesuai layar hpnya alias melebar.

Mohon penjelasannya mas. Terima kasih.

http://indradp-share.blogspot.com

Balas

setau saya zikazev blue itu udah responsive,kalo boleh tau itu mas nya pake layar ukuran berapa?

Balas

mas...! kalau boleh usul bikin post soal pengalaman plus minus bikin responsif blog ini, saya sudah membuat kodi responsif semua blog saya tapi belum berani pasang (page view dan visitor masih naik turun)

Balas

Waooooo..tampilan blog nya baru...........keren.......mantab... :)

Balas

buka dulu aja deh demo nya

Balas

Silahkan mas Agus :D

Balas

Untuk homepage pakai tag conditional mas untuk tiap ukuran device-nya. Misalnya

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
@media screen and (max-width:800px){
Kode CSS untuk mengatur tampilan homepage
}
@media screen and (max-width:685px){
Kode CSS untuk mengatur tampilan homepage
}
@media screen and (max-width:600px){
Kode CSS untuk mengatur tampilan homepage
}
@media screen and (max-width:480px){
Kode CSS untuk mengatur tampilan homepage
}
@media screen and (max-width:300px){
Kode CSS untuk mengatur tampilan homepage
}
</style>
</b:if></b:if>


Simpan di bawah skin

Balas

Iya nanti saya coba :D

Balas

iya mas tapi masih belum pas :D

Balas

Hehehe silahkan biar lebih paham :D

Balas

TAMPILAN BARU KOMPI AJAIB :D TAMBAH KEREN :D

www.mestiqui.com :D wkwkw

Balas

huff.. main berubah wujud ya? kalau gitu saya juga mau ah.. hehehe tapi hanya label atau page menu di klik aja akan berubah... :)

Balas

tampilan barunya unik mas :)

Balas

mas...! menu drop yang more yang muncul cuma al-quran flash dan pasang iklan saja, ukuran tengtop saya 1336x768

Balas

lah tadi ane liat tampilan baru, setelah direfresh kok balik lagi ke template yg lama? ada yg kurang ya / masih harus diedit :D

Balas

thanks KOmpi Ajaib ....tipsnya memang...A J A I B.......salam blogger !! :) :p

Balas

mas, yang Kode CSS untuk mengatur tampilan homepage di template zikazev blue itu yang mana ya,??
bingung mas, maklum soalnya aku masih belajar di dunia blog :D

mohon baantuannya mas :)

Balas

Yang di bawah kode ]]></b:skin>

Balas

tipsnya memang mantap :)

Ditunggu kunjungan balik ya

http://dbunggul-site.blogspot.com/

Balas

mantap kang tipsnya....ehm, tampilan blognya baru nih. tambah keren! :)

Balas

Biasa mas bosenan :D

Balas

Lumayan lah mas :D

Balas

Iya mas blm fix nih :D

Balas

Hehehehe iya belum fix jadi begitu deh hehehe :D

Balas

Hehehehe Ajaib bisa ngilang ya :D

Balas

Siap melucur :D

Balas

Hehehe maksain, bosen yang lama :D

Balas

thanks,

masih banyak kekurangan di blog saya

Balas

hehehe tapi bagus mas ;)

Balas

wow.. blognya sedang maintenis kayaknya nih :-bd

Balas

Tuda sok dimimitian wae ku kang Is hehehehe :D

Balas

thanks mas tutornya,, :D

oiya, ada satu masalah lagi nih,
saat aku daftar di feedburner, kok muncul peringatan begini

"The URL does not appear to reference a valid XML file. We encountered the following problem: Error on line .. : The reference to entity "zx" must end with the ';' delimiter."

ini gimana ya mas???
minta solusinya mas..
terima kasih..

Balas

Coba daftar pakai URL ini

http://NAMABLOG/feeds/posts/default

Balas

nih di konversi jadi mata uang LoL www.nagichat.com

Balas

terima kasih mas,,
akhirnya berhasil..
maju terus mas adhi ,,,,,, :D

Balas

kok punya ane gak work ya Mas ??

Balas

Sudah diaktifkan reaksi buttonnya? Lewat tata letak >> edit blog post >> centang option reaksi, baru pasang kode pemanggilnya.

Balas

bener-bener valid html5 yah,,,, mas Adhy emang jago deh,,, :)

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×