Membuat Tool Kode Warna Di Blog Valid HTML5

Membuat Tool Kode Warna Di Blog Valid HTML5

Bola Hero Gawai

Membuat Tool Kode Warna Di Blog Valid HTML5

Membuat Tool Kode Warna Valid HTML5
Jika Anda seorang blogger yang suka kutak-katik tampilan blog, tentunya Anda memerlukan sebuah tool untuk mendapatkan kode warna. Banyak cara untuk mendapatkan kode warna, baik dengan photoshop ataupun dengan aplikasi lainnya.

Namun ada juga sebuah tool yang berbasis file swf yang bisa kita simpan di blog kita. Dan tool ini sudah banyak juga digunakan dan disimpan di blog, namun banyak yang tidak menyadari bahwa kodenya ternyata tidak valid HTML5.

Kode dari tool kode warna yang biasa digunakan untuk disimpan di blog biasanya akan seperti kode di bawah ini.


<object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="420" id="obj1" width="420"> <param value="http://www.2createawebsite.com/build/color.swf" name="movie"><param value="High" name="quality"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" name="obj1" type="application/x-shockwave-flash" width="420" height="420"> </object> <object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="420" id="col" width="420"> <param value="sameDomain" name="allowScriptAccess"><param value="http://www.2createawebsite.com/build/col.swf" name="movie"><param value="high" name="quality"><param value="#ffffff" name="bgcolor"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="420" align="middle" height="420"> </object>

Dan penampakan tool kode warna di blog akan tampak seperti gambar di bawah ini.

Tool kode warna

Nah untuk membuat kode di atas menjadi valid HTML5, kita hanya perlu menggunakan kode embed object dan file swf serta style untuk mengatur sizenya. Sehingga dari kode-kode embed di atas yang lumayan banyak bisa menjadi lebih simple dan tentunya valid HTML5 seperti berikut ini.


<object style="height:420px;width:420px;border:0" data="http://www.2createawebsite.com/build/color.swf"></object>
<object style="height:420px;width:420px;border:0" data="http://www.2createawebsite.com/build/col.swf"></object>

Untuk mengetes validasi HTML5 dari tool kode warna ini, silahkan coba test halaman tool Kode Warna Kompi Ajaib DI SINI.

Agar toolnya berada di tengah halaman postingan (baik di halaman postingan biasa atau statis), hindari penggunaan kode <center> namun silahkan gunakan kode <div style="text-align:center"> sehingga menjadi seperti ini.


<div style="text-align:center">
<object style="height:420px;width:420px;border:0" data="http://www.2createawebsite.com/build/color.swf"></object>
<object style="height:420px;width:420px;border:0" data="http://www.2createawebsite.com/build/col.swf"></object>
</div>

Jika ingin kode warna ini responsive, silahkan simak DI SINI

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

44 Comments Add Comment

kalau ini patut dicoba mas adhy :-bd

Balas

Silahkan sis :)

Balas

ketigaxxx....hehhee...berkunjung :) izin bookmark Kang :) oh ya Kang Adhy, minta rahasia mempercepat loading blog dong???heheh

Balas

gak perlu pake photoshop lagi nih cari kode warna, thanks kang Adhy :D

Balas

wah mantab sekali kang ...
kodenya menjadi lebih singkat :)
ijin coba kang

Balas

Sebenarnya ini bukan rahasia lagi hehhehe :) saya sudah banyak memposting tentang loading blog. Coba saja buat blognya valid html5 dan css3 (homepage dan postingan), kompres gambar, gunakan asynchronous pada widget social media dan sharing. gunakan widget yang benar-benar diperlukan, kurangi dan minimalkan eksternal link, dan lain-lain. Bisa di search atau cari di daftar isi.

Balas

Hehehehe iya mas :)

Balas

Hehehehe betul jadi singkat :)

Balas

wah wah ketinggalan nih :D izin nyoba ya mas

Balas

Kalo saya sih pakek Instant Eyedropper mas hehehe

Balas

oh iya kang ,,,
tapi Tool Kode Warna tersebut belum responsive kang ...

mungkin di tambahai <div class="Video-Responsive">

biar responsive kang hehheheh :)

sehingga kodenya seperti ini kang
<div class="Video-Responsive">
<div style="text-align:center">
<object style="height:420px;width:420px" data="http://www.2createawebsite.com/build/color.swf"></object>
<object style="height:420px;width:420px" data="http://www.2createawebsite.com/build/col.swf"></object>
</div></div>


demo : http://ahmadsuyadi.blogspot.com/2014/01/cara-memasang-tools-kode-warna-di-blog.html

Balas

Saya sudah pasang tool kode warna itu Kang Adhy
Tapi belum di cek valid atau tidaknya mohon ijin pakai
Yang ini saja. terima kasih Kang Adhy :)

Balas

Namun sayangnya belum valid html5 dan background tool yang atasnya meluber ke samping, jika ingin valid html5 dan responsive silahkan coba kode ini.

Kode CSS:
.color-code{text-align: center;margin:20px auto;width:60%;}
.color-responsive {position: relative;padding-bottom: 100%;height: 0;overflow: hidden}
.color-responsive object {position: absolute;top: 0;left: 0;width:100%;height:100%;border:0}


Kode HTML:
<div class="color-code">
<div class="color-responsive">
<object height="420" width="420" data="http://www.2createawebsite.com/build/color.swf"></object>
</div></div>
<div class="color-code">
<div class="color-responsive">
<object height="420" width="420" data="http://www.2createawebsite.com/build/col.swf"></object>
</div>
</div>


Silahkan coba responsive Kode Warna Kompi Ajaib dan validasi html5-nya. Dengan ini background tool yang pertama (tool yang atas) tidak meluber di samping.

Balas

Silahkan sista :)

Balas

Makasih mas :)

Balas

Pakai apa aja boleh-boleh aja mas :)

Balas

Eh itu mas apa mbak ya? hehhehhe maaf kalau salah :)

Balas

Sama-sama kang Saud :) Silahkan dicoba aja kang :)

Balas

Untuk width (lebar) pada kode berikut
.color-code{text-align: center;margin:20px auto;width:60%;}
Silahkan sesuaikan dengan lebar halaman postingan Anda, jika tampilannya agak kecil silahkan tambahkan persentase-nya.

Balas

keren kang.. tapi saya lebih suka pake Web Developer yang ada di browser.. karena lebih efisien..

oh iya kang saya mau tanya nih.. kenapa kok kode berikut ini:
...pe='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=9153615203189217294&zx=af38089d-94f8-4ee8-bb7b-8a38bf98629b' />
muncul secara diam-diam ya?? padahal di edit HTML kagak ada lho.. bikin kagak valid nih..
solusinya gimana nih?

Balas

untuk membaut postingan valid html 5 bagaimana mas adhy :)

Balas

makasih banget mas :)

Balas

Oke kang Adhy, ini boleh saya coba valid html5 nya. kode nya jadi lebih irit ya kang... |o|

Balas

oh ya mas untuk postingan http://www.kompiajaib.com/2014/03/membuat-tool-kode-warna-di-blog-valid.html kok gak bisa di di buka di firefox ya apa cuma milik saya saja...

Balas

Itu adalah kode pengaturan css blogger, kode itu tidak ada di edit html namun bisa dilihat melalui page source blog. Jika ingin valid html5, maka kode tersebut harus disembunyikan dengan trik. Silahkan search di Kompi Ajaib untuk CSS Reset Blogger.

Balas

Iya mas silahkan dicoba :)

Balas

Saya coba buka dengan FF bisa mas :) ini saya balas komentarnya dengan FF mas :)
Ini ss-nya http://prntscr.com/2yj2et

Balas

Wuiiih tambah mantep... kelamaan bertapanya saya kang :D

Balas

Wah kang Ismet udah pulang dari tapanya hehehee kalamian kang tapana tos pada ngantri tuh hehehehe :) wilujeng buka deui ah kang diantos oleh-oleh tapana hehhehe

Balas

mas ADHY SURYADI , memang jago nih , kalau urusan kayak ginian |o|

ijin nyimak dulu ya mas , kapan-kapan saya coba ..

Balas

oo gitu ya.. makasih kang :-d

langsung ane cari nih

Balas

Ahay... Ada yang baru turun gunung Nich...
Siap-siap nyandak karung Kang!, kanggo ngawadahan oleh-oleh :)

Balas

sudah bisa mas tau napa kemarin kok gak bisa...

Balas

tenyata dukun tutorial lagi mencari ilmu di gunung wkwkwkwk.. @@,

Balas

kang, apakah data uri juga termasuk?

Balas

mungkin koneksi internetnya ada gangguan pak :)

Balas

makasih gan atas info bermanfaatnya,,, update terus ya ,, hehehehe

Balas

Saha eta saha hehe ....!! alah gening pangersa

Balas

makanya web aq banyak yang eror jadi kode warna juga pengaruh

Balas

makasih mas adhi buat tutornya.. kapan2 dicoba :)

Balas

apapun yang saya posting selalu kode diawal postingan
...............left;" trbidi="on">
yang bikin ngga valid html5 kang

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!

×
×
×