Cara Validasi Widget Musik Dari ReverbNation

Cara Validasi Widget Musik Dari ReverbNation

Bola Hero Gawai

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

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

23 Comments Add Comment

Kalo udah valid begini mah kang, jadi tidak ragu ragu lagi kalo mau share!
Hatur nuhun ah ditampi script na :)

Balas

Iya kang hanya perlu ketelitian aja :D

Balas

wah cocok nih ... Mau ngeshare lagu sweet memories biar lagunya bisa di coba dulu :) makasih mas

Balas

Iya mas silahkan dicoba :D

Balas

gan mau nanya kan url google plus udah berubah ,apa link google plus yg di template link author di ubah yg baru???

Balas

Dirubah bisa, ga dirubah juga ga apa2 :)

Balas

tanpa judul pun, tutorial KompiAjaib, selalu mengutamakan validasi.. salute brow :D -d

Balas

Kaleresan eta we nu kapendakna kang :D

Balas

ternyata bisa di palit-palitin, kereeeeen :-bd

Balas

Saya juluki deh Mr.Validasi keren kan hehe

Balas

kereeen... kereeen :-bd

Balas

Kalo ini bakalan bikin pengunjung betah kalo kita pasang diblog ya Kang..ntar saya coba biar blog saya hingar bingar..nuhun Kang Kompi..hahahahyyyyyyyyyyy

Balas

wah lansung ada contoh validnya dibawah mas Andi memang top dah..

Balas

kayak ditempat dugem dung .. hehe

Balas

Bis sis asal jangan pelit-pelitan aja hehehe

Balas

Hadeueeuhh aya-aya wae :D

Balas

Heheheeh iya dong, kan mas Icah penggemar musik-musik keras lho... iya kan mas? hehehehe :D

Balas

Biar tambah josss hehehehe :D

Balas

haneut keneh kang :D .. ngiring ngahodod didieu ah nyobian playlist na .. hehe

Balas

Assalamu alaikum, salut dg tutorial Mas. saya sdh dapat solusinya disini. Izin copy kode htmlnya. Thanks sebelumnya.
Salam sukses:)

Balas

Mangga dicobian nu haneutna heheheh :D

Balas

Silahkan mas semoga bisa dimengerti :)

Balas

Mas mau tanya donk , gmn cara hapus / ganti judul lagu d blog Reverbnation

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!

×
×
×