Cara Menampilkan Demo Jsfiddle Di Blog Agar SEO Dan Valid HTML5

Cara Menampilkan Demo Jsfiddle Di Blog Agar SEO Dan Valid HTML5

Bola Hero Gawai

Cara Menampilkan Demo Jsfiddle Di Blog Agar SEO Dan Valid HTML5

Demo Jsfiddle Di Blog Agar SEO Dan Valid HTML5
Jsfiddle adalah salah satu web yang menyediakan editor kode baik kode javascript, css, atau html untuk membentuk sebuah elemen blog atau website. Dengan kata lain bisa dijadikan sebagai sarana pengujian atau demo yang sedang kita buat.

Dan hasilnya bisa kita tampilkan juga di postingan blog dengan mengambil kode embednya. Kode embed dari jsfiddle menggunakan iframe. 

Namun seperti telah kita ketahui bahwa iframe ini akan mengurangi skor SEO blog dan bisa dicek di Chkme. Juga ada beberapa kode yang menyebabkan error di validasi HTML5. Untuk itu agar kode embed jsfiddle ini bisa SEO Friendly dan valid HTML5, maka perlu sedikit perubahan pada kode embednya.

Biasanya kode embed dari Jsfiddle untuk disimpan di postingan akan tampak seperti di bawah ini.


<iframe width="100%" height="300" src="http://jsfiddle.net/kompiajaib/e6XhG/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Silahkan ganti kode iframe dengan embed, hilangkan % (persen) pada width dan ganti angkanya dengan yang Anda kehendaki misalnya disesuaikan dengan lebar daerah postingan (tanpa memakai satuan px), dan ganti kode allowfullscreen="allowfullscreen" frameborder="0" dengan kode / (garis miring), juga hapus kode </iframe>. Sehingga penampakannya akan seperti di bawah ini.


<embed width="600" height="300" src="http://jsfiddle.net/kompiajaib/e6XhG/embedded/" />

Dan perlu diperhatikan, jika akan mempublikasikan postingannya harus dalam posisi HTML bukan Compose, karena jika dipublikasikan dalam keadaan Compose maka secara otomatis kode di atas akan berubah dan menjadi tidak valid di HTML5. perubahan yang terjadi yang menyebabkan error HTML5 seperti di bawah ini.


<embed width="600" height="300" src="http://jsfiddle.net/kompiajaib/e6XhG/embedded/" ></embed>

Kode / (garis miring) yang ada di ujung akan menghilang dan diganti dengan kode </embed> di akhir kode, nah kode itulah yang akhirnya menyebabkan menjadi error lagi di HTML5.

Sebagai contoh, di bawah ini adalah demo result dari Jsfiddle yang sudah valid HTML5 dan tentunya SEO Friendly yang menampilkan tab javascript, css, html, dan result dengan kode di bawah ini.

<embed width="600" height="300" src="http://jsfiddle.net/kompiajaib/e6XhG/embedded/" />


Demo result hanya menampilkan tab dengan hanya result-nya saja.

<embed width="600" height="300" src="http://jsfiddle.net/kompiajaib/e6XhG/embedded/result/" />


Semoga bisa dimengerti dan bermanfaat...

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

77 Comments Add Comment

keren kang, kodenya lebih simpel yang pastinya valid dan SEO, :) mantap, pertamax deuih hehe

Balas

Iya kang biar valid html5 dan SEO :D

Balas

Bagus mas :D serba valid html5

Balas

Iya mas sayang kan gara-gara ini blognya jadi tidak valid html5 dan seo blog berkurang :D jadi semuanya harus valid heheheh :D

Balas

SAngat bermanfaat gan tutornya ...terimakasih

Balas

Sama2 mas Rahmat :D iya semoga bisa bermanfaat :)

Balas

kayaknya saya harus pelajari nih, mana tau suatu saat mau jadi dukun tutorial hahahaha...

Balas

Keren gan, lengkap tutorialnya..
Boleh juga dicoba, makasih gan info dan tutorialnya :)

Balas

Nah ini dia yang saya tunggu keluar juga yah Kang Adhy
ijin simak dan belajar Kang makasih :)

Balas

seep ini mah untuk blog blog penyedia tutorial code kayak kompiajaib.com
maaf OOT nih kang, search result di blog saya kok kumat ya, ngga berfungsi gitu

Balas

tterimakasih tips dan penjelasannya mas.. memang harus lebih hati hati ya mas dalam meletakan html agar valid html5..

blog saya belum valid html5 mas, jadi kalau tidak hati hati ntr malah tambah banyak error nya hehehe...

Balas

Memangnya, apa yah pengaruh dari valid html5 di blog kita kang ?, apakah menambah Pageviews atau menambah seo ?, atau yang lain kang?, maaf saya masih newbie, mohon bimbingannya :)

Balas

Jadi lebih simple ya kang demo nya gak usah dilempar kesana kemari he,,,

Balas

kebetulan saya pake iframe loader.. jadi walaupun hasinya iframe, tidak terdeteksi sebagai iframe.. btw.. keren jagona validasi yeuh :-bd

Balas

saya baru tau nih mas,katro banget dah

Balas

Hehe ampun master ... saya belum sanggup nih ... harus belajar dulu ... :)

Balas

nyimak, postingan yang sangat bermanfaat apalagi untuk sobat yang berbagi tips tentang script blogging..... kl ane, nunggu artikel tentang widget aja hehe........

Balas

Iya sis siapa tahu lain waktu membutuhkannya :D

Balas

Silahkan mas Wandhy :D

Balas

Mangga kang Saud hehehehe... :D

Balas

Iya mas hasil pencariannya selalu nol. coba periksa lagi settingannya di Google Custom Search-nya :D

Balas

Iya mas biar ga tambah banyak errornya :D

Balas

Valid html5 itu biar blog bersahabat dengan browser-browser mas, jadi proses perayapannya terhadap blog kita akan lebih mudah. Dengan begitu kekuatan blog kita di serp akan bertambah... kira2 seperti itu mas :D

Balas

Iya kan jadi lebih simple :D

Balas

owh begitu kang,, trnyata cukup mengubah iframe aja toh hehe,, okelah,, patut di coba nih :)

Balas

Iya kang saya pernah nemu trik yang pakai iframe loader...cuman saya coba untuk tidak menambahkan kode script (js) dengan trik ini dan ternyata berhasil. Sebelumnya saya coba pakai object tapi malah ga muncul :D

Balas

Nah lho...heheheheh dicoba aja mbak, lebih enak bikin demonya di jsfiddle :D

Balas

Ah saya bukan master mas Nazar...sama masih sedang belajar :D

Balas

Silahkan mas :D

Balas

Hehehehe iya sis buat blog yang tutorial widget biar lebih gampang demonya :D

Balas

Mayan lah mas Angwyn :D

Balas

hmm bagus nih dan tidak mengurangsi seo score :)

Balas

Iya mas, kalau kita nemu iframe coba akalin biar seo dan valid. Sebenarnya iframe sudah valid html5 tapi tanpa allowfullscreen="allowfullscreen" frameborder="0" tapi iframe bisa mengurangi skor seo blog karena iframe kurang bagus di browser.

Balas

iya itu maksudnya mas biar tidak mengurangi skor seo blog :D

Balas

gara gara si gadget robot ijo html5 blog jg ikutan valid html5 hehe
nyobian tips na kang akh hayong seo :-D

Balas

jadi karender embed flash!!! jiga pelem euy...xixixi

Balas

Iya jadi sagala valid html5 kang hehehe :D

Balas

Muhun kang jadi siga pelem flash gordon wkwkwkw :D

Balas

mantap ini gan, bisa saya coba nanti..makasih ilmunya ya gan

Balas

punten kang.. kopi ajaib hompepage tos 100% di chkme.. postingana teu acan, rupina keywordna kosong keneh

Balas

mantab mas kompi , .....
bookmark dulu hehehehh :)

Balas

Muhun kang keywordna dimunculkeun di homepage wungkul, janten dipostingan teu aya keywordna.

Balas

Sama-sama mas :D

Balas

Silahkan mas Hasman :D

Balas

Informasi yang sangat menarik, cocok untuk para blogger yang biasa menyampaikan tutorial mengenai editing blog/website.

Balas

Semuanya serba valid HTML5 tapi blog saya sampai sekarang belum berbenah karena waktu... hmmmm

Balas

Sangat Bermanfaat sekali mas .. terimakasih :)

Balas

Iya mas bagi yang suka bagi-bagi kode widget :D

Balas

Hehehehe iya jadi serba valid html5 :D

Balas

Sama-sama mas Febri :D

Balas

Lah, orang saya juga sering belajar disini ya bagi saya Mas Adhy itu masternya ... :D

Balas

Wah, keren mas valid tapi mungkin akan memberatkan blog cukup menyimpan tautan link demonya aja :D
Ditunggu kelanjutannya tentang valid..

Balas

Gambarnya kok gak keliatan di laptopku ya? jadi gak bisa praktek nih :(

Balas

Jika khawatir dengan loading blog, nyimpen link tautan juga tidak masalah mas :D

Balas

Biasanya ada addons atau plugin yang belum teriinistall untuk melihat konten flash mas, coba install dulu missing plugin-nya. Biasanya ada bar kuning di browsernya yang meminta install plugin-nya.

Balas

lantas, apakah cara ini juga bsa diterapkan utk pengaturan html komentar pada template blog kang?

Balas

untuk iframe komentar tidak perlu dan kita susah juga untuk akses script iframe komentar blogger, dan iframe komentar blogger aman untuk seo blog (sepengetahuan saya hehehee )

Balas

jujur saja...kalo hal-hal yang beginian aku kurang paham sobat...jadi izinkan aku untuk duduk manis menyimak saja ya :-)

Balas

Oke kang, terima kasih. Harus pindah ke artikel custom searchnya lagi deh

Balas

saya harus belajar banyak dari blog ini karena membahas teknik blogger terkini. makasih mas Adhy, sangat bermanfaat sekali sharingnya ^^

Balas

Soal valid memvalid emang wajib nih kang, biar blog makin SEO friendly...

Makasih kang Adhy, siapa tahu saya nanti juga bikin demo dalam postingan

Balas

mirip u tube y mas?!

Balas

nitip mas http://info-citra.blogspot.com

hehehe

Balas

Heheheehe silahkan mas Hari :D

Balas

Sama-sama mbak Indri :D Sama saya juga masih belajar jadi mari kita sama-sama belajar :D

Balas

Iya kang Muroi, dengan validnya blog maka makin bersahabat dengan browser sehingga makin mudah dijelajah oleh peramban :D

Balas

iya sis tari akhirnya dirender sebagai flash seperti youtube :D

Balas

valid emg harus di optimalkan mas,, makasih dan salam kenal yah =D

Balas

Maksudnya itu situs untuk ngedit javascript dan html online gitu? Boleh juga untuk referensi utak-atik kode. Makasih banyak informasinya. Kunjungan perdana saya nih ke blog Kang Adhy. Salam kenal :)

Balas

Salam kenal juga mas Mawan =D

Balas

Salam kenal juga mas, iya itu situs untuk uji coba/demo kode =D

Balas

sekarang saya sering pakai jsfiddle
makasih infonya

Balas

cara upload ke site jsfiddle nya gimana Kang?
Kalau demonya di luar blog atau di site jsfiddle nya
Gimana caranya Kang Adhy.?

Balas

Kalau mau nyoba jsfiddle, dan agar bisa disave hasilnya silahkan kang Saud bikin akun JSFiddlenya, setelah itu buka editornya kemudian simpan kode CSS di kolom CSS dan kode html di kolom html. Jika yang sedang kita bikin menggunakan javascript, silahkan simpan kode javascriptnya di kolom javascript tanpa kode
<script type='text/javascript'>
//<![CDATA[

//]]>
</script>

dan pada panel sebelah kiri silahkan pilih jquery versi berapa saja kemudian klik RUN untuk mengetahui hasilnya.

Dan untuk mendapatkan link demonya silahkan save dulu pekerjaannya dan klik pada menu share.

Balas

atas saran mas Ardhy di komentar blog, kenapa saya tidak menggunakan jsfiddle ini ya dari dulu, tak pernah terlintas memang mas...
langsung saya lakukan pencarian mengenai tutorial jsfiddle, dan dapat blognya mas Ardhy, sekali lagi makasih banyak atas sarannya.. :-d :-d

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!

×
×
×