Rabu, 06 Juli 2011

Cara mudah posting kode warna html di blog

Cara mudah posting kode warna html di blog. Kode warna html sangat penting saat kita ingin mengutak-utik warna template blog. Terkadang kita harus mondar-mandir browsing mencari kode warna. Banyak menyita waktu bukan? Untuk itu, kali ini saya ingin berbagi bagaimana agar kita tidak lagi kesana-kemari hanya untuk mencari kode warna html tersebut. 

Untuk membuatnya sangat mudah, langkahnya sebagai berikut:
1. Login ke account blog anda.
2. Klik Rancangan.
3. Pilih Edit HTML.
4. Backup dulu template anda (Download Template Lengkap).
5. Centang pilihan Expand Template Widget.
6. Copy kode </head>
7. Tekan tombol Ctrl + F pada keyboard anda (cara cepat untuk menemukan kode)
8. Pastekan pada kotak hasil tekanan Ctrl + F anda tadi.
9. Maka kode </head> akan tampak diblok warna hijau.
10. Lalu copy seluruh kode di bawah ini tepat di atas kode tersebut.

function Barva(koda) { document.getElementById("vzorec").bgColor=koda; document.hcc.barva.value=koda.toUpperCase(); document.hcc.barva.select(); } function BarvaDruga(koda) { document.getElementById("vzorec2").bgColor=koda; document.hcc.Barva2.value=koda.toUpperCase(); document.hcc.Barva2.select(); }

var hue; var picker; //var gLogger; var dd1, dd2; var r, g, b; function init() { if (typeof(ygLogger) != "undefined") ygLogger.init(document.getElementById("logDiv")); pickerInit(); //ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1" //ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1" } // Picker --------------------------------------------------------- function pickerInit() { hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180); hue.onChange = function(newVal) { hueUpdate(newVal); }; picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180); picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); }; hueUpdate(); dd1 = new YAHOO.util.DD("pickerPanel"); dd1.setHandleElId("pickerHandle"); dd1.endDrag = function(e) { // picker.thumb.resetConstraints(); // hue.thumb.resetConstraints(); }; } executeonload(init); function pickerUpdate(newX, newY) { pickerSwatchUpdate(); } function hueUpdate(newVal) { var h = (180 - hue.getValue()) / 180; if (h == 1) { h = 0; } var a = YAHOO.util.Color.hsv2rgb( h, 1, 1); document.getElementById("pickerDiv").style.backgroundColor = "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")"; pickerSwatchUpdate(); } function pickerSwatchUpdate() { var h = (180 - hue.getValue()); if (h == 180) { h = 0; } document.getElementById("pickerhval").value = (h*2); h = h / 180; var s = picker.getXValue() / 180; document.getElementById("pickersval").value = Math.round(s * 100); var v = (180 - picker.getYValue()) / 180; document.getElementById("pickervval").value = Math.round(v * 100); var a = YAHOO.util.Color.hsv2rgb( h, s, v ); document.getElementById("pickerSwatch").style.backgroundColor = "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")"; document.getElementById("pickerrval").value = a[0]; document.getElementById("pickergval").value = a[1]; document.getElementById("pickerbval").value = a[2]; var hexvalue = document.getElementById("pickerhexval").value ='#'+ YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]); ddcolorposter.initialize(a[0], a[1], a[2], hexvalue) if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select(); }

11. Simpan template.

Langkah selanjutnya:
1. Buka Entri Baru, seperti biasa kita akan membuat posting baru.
2. Ketik apa yang anda ungkapkan tentang postingan kode warna tersebut.
3. Copy seluruh kode di bawah ini:
4. Klik Edit HTML di pojok nanan atas kotak posting (bukan compose).
5. Pastekan kode tersebut di bawah postingan awal anda tadi.
6. Klik Compose, coba lihat apakah kolom warna sudah tampil dengan benar di postingan anda.
Jika benar, pasti tampil kolom warna HTML dengan sempurna.
7. Terbitkan Entri Baru, atau jika anda ingin meninjau dahulu sebelum diterbitkan klik Pratinjau.
8. Selesai.

"Selamat mencoba"

Related Posts

Cara mudah posting kode warna html di blog
4/ 5
Oleh

Contact Me

Nama

Email *

Pesan *