Cara Validasi Widget Musik Dari ReverbNation

Widget Musik Dari ReverbNation
Seperti halnya di SoundCloud, banyak penyanyi-penyanyi besar mengupload lagu-lagunya di ReverbNation. Dengan berbagai genre musik, kita dapat menampilkan musik favorite kita di blog kesayangan kita dengan widget yang telah disediakan.

Namun meskipun widget musik dari ReverbNation ini diberi title widget HTML5 Player, nyatanya widget ini masih error pada validasi HTML5. Cukup banyak error yang disebabkan widget ini.

Untuk itu kini saya sharing cara membuat valid widget musik dari ReverbNation ini agar tidak menimbulkan error validasi HTML5.

Biasanya kode embed dari widget musik ReverbNation akan seperti di bawah ini.

<div class="widget_iframe" style="display:inline-block;width:100%;height:320px;margin:0;padding:0;border:0;"><iframe class="widget_iframe" src="http://www.reverbnation.com/widget_code/html_widget/artist_1132007?widget_id=50&posted_by=fan_3273989&pwc[design]=default&pwc[background_color]=%23333333&pwc[included_songs]=1&pwc[photo]=0%2C1&pwc[size]=fit" width="100%" height="100%" frameborder="0" scrolling="no"></iframe><div class="footer_branding" style="margin-top:-5px;font-size:10px;font-family:Arial;"><center><a href="http://www.reverbnation.com/band-promotion/widgets?utm_campaign=a_features_widgets&utm_medium=widget&utm_source=HTML5_Player&utm_content=widgetfooter_Free embed music player from ReverbNation.com" target="_blank" style="text-decoration:none;color:#444;">Free embed music player from ReverbNation.com</a></center></div></div>

Perhatikan kode-kode yang berwarna merah, itulah kode yang menyebabkan error pada validasi HTML5. Sebenarnya kode iframe sudah valid HTML5 namun error pada skor seo blog di Chkme, untuk itu iframe perlu dirubah juga. Kode iframe ganti dengan object. Kode src ganti dengan data. Kode ?widget_id=50&posted_by=fan_3273989&pwc[design]=default&pwc[background_color]=%23333333&pwc[included_songs]=1&pwc[photo]=0%2C1&pwc[size]=fit silahkan di hapus. Ganti kode width="100%" height="100%" frameborder="0" scrolling="no" menjadi style="width:100%;height:100%". Kemudian tambahkan kode amp; pada kode & serta ganti spasi pada kode Free embed music player from ReverbNation.com dengan %20. Untuk kode <center> hapus dan tambahkan text-align:center pada div-nya. Dan akan lebih baik tambahkan juga title tag untuk linknya. Sehingga penampakannya akan seperti di bawah ini.

<div class="widget_iframe" style="display:inline-block;width:100%;height:320px;margin:0;padding:0;border:0;"><object class="widget_iframe" data="http://www.reverbnation.com/widget_code/html_widget/artist_1132007" style="width:100%;height:100%"></object><div class="footer_branding" style="margin-top:-5px;font-size:10px;font-family:Arial;text-align:center"><a href="http://www.reverbnation.com/band-promotion/widgets?utm_campaign=a_features_widgets&amp;utm_medium=widget&amp;utm_source=HTML5_Player&amp;utm_content=widgetfooter_Free%20embed%20music%20player%20from%20ReverbNation.com" target="_blank" style="text-decoration:none;color:#444;" title="Free embed music player from ReverbNation.com">Free embed music player from ReverbNation.com</a></div></div>

Sebagai contoh silahkan nikmati widget musik player dari ReverbNation yang sudah valid HTML5 dari kode di atas.

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