Dalam membuat sebuah blog, kita pasti dihadapkan pada pemilihan sebuah
warna. Warna dalam membuat blog memiliki kode tersendiri. Kode warna
bagi sebagian blogger yang senang merias tampilan dan keindahan Blog,
sangat dibutuhkan untuk kemudahan mendapatkan kode HTML dari setiap
warna yang diperlukan. Nah untuk lebih mudah mendapatkan kode HTML
setiap warna yang diinginkan, alangkah baiknya jika temen-temen memasang
tabel kode warna ini di Blog atau di dalam postingan artikel. Dengan
demikian dijamin teman-teman akan lebih cepat dalam bekerja merias blog
karena tabel kode warrna sudah terinstall di Blog.
Cara pasang widget kode warna pada blogger
Langkah Pertama
1. Login ke blogger dengan id anda
2. Klik menu Tata Letak
3. Pada tab menu klik Edit HTML
4. Silahkan Backup dulu template anda dengan klik Download Template Lengkap
5.
Sekarang cari kode </head>. Jika sudah ketemu, copy lalu paste kode berikut di atas kode </head>
Langkah Kedua :
Berikutnya, memasang tabel kode warna pada blog. Ada dua pilihan, pertama dipasang sebagai posting blog dan yang kedua dipasang pada halaman utama (homepage) blog. Nah, kode untuk tabel kode warna yang akan dipasang adalah berikut ini :
Kode Warna :
Cara pasang kode warna sebagai posting blog :* Yang pasti, anda buat posting baru terlebih dahulu
* Copy lalu paste Kode Warna tersebut pada posting anda
* Berikan judul posting yang sesuai
* Jangan lupa untuk memberi label posting
* Kemudian terbitkan postingan
* Selesai
Cara pasang kode warna di halaman utama (homepage) blog :
* Masuk ke menu Elemen Halaman
* Klik Tambah Gadget
* Pilih tambahkan HTML/JavaScript
* Copy lalu paste Kode Warna tersebut di dalamnya.
* Berikan judul atau nama gadget
* Klik tombol Simpan
* Silahkan tempatkan gadget kode warna dengan men-drag ke tempat yang sesuai
* Klik tombol Simpan
* Selesai
Hasilnya nanti akan seperti ini :
Cara pasang widget kode warna pada blogger
Langkah Pertama
1. Login ke blogger dengan id anda
2. Klik menu Tata Letak
3. Pada tab menu klik Edit HTML
4. Silahkan Backup dulu template anda dengan klik Download Template Lengkap
5.
Sekarang cari kode </head>. Jika sudah ketemu, copy lalu paste kode berikut di atas kode </head>
<script language='javascript'>6. Selesai
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();
}
</script>
<script type='text/javascript'>
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();
}
</script><!--[if gte IE 5.5000]>
<script type="text/javascript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
YAHOO.util.Event.addListener(window, "load", correctPNG);
</script>
<![endif]-->
Langkah Kedua :
Berikutnya, memasang tabel kode warna pada blog. Ada dua pilihan, pertama dipasang sebagai posting blog dan yang kedua dipasang pada halaman utama (homepage) blog. Nah, kode untuk tabel kode warna yang akan dipasang adalah berikut ini :
Kode Warna :
</div><center><form name="hcc" id="hcc"> <table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808"> </td><td onclick="Barva(this.bgColor)" bgcolor="#b40404"> </td><td onclick="Barva(this.bgColor)" bgcolor="#df0101"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f78181"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#61380b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08"> </td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04"> </td><td onclick="Barva(this.bgColor)" bgcolor="#df7401"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#faac58"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907"> </td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#868a08"> </td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404"> </td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907"> </td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#38610b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08"> </td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404"> </td><td onclick="Barva(this.bgColor)" bgcolor="#74df00"> </td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00"> </td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58"> </td><td onclick="Barva(this.bgColor)" bgcolor="#bef781"> </td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#088a08"> </td><td onclick="Barva(this.bgColor)" bgcolor="#04b404"> </td><td onclick="Barva(this.bgColor)" bgcolor="#01df01"> </td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58"> </td><td onclick="Barva(this.bgColor)" bgcolor="#81f781"> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9"> </td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#effbef"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138"> </td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f"> </td><td onclick="Barva(this.bgColor)" bgcolor="#01df74"> </td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#58faac"> </td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be"> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec"> </td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#088a85"> </td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae"> </td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4"> </td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3"> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2"> </td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861"> </td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0174df"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe"> </td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa"> </td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5"> </td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8"> </td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61"> </td><td onclick="Barva(this.bgColor)" bgcolor="#08088a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0101df"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe"> </td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa"> </td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5"> </td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8"> </td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719"> </td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#380b61"> </td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4"> </td><td onclick="Barva(this.bgColor)" bgcolor="#7401df"> </td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff"> </td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa"> </td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb"> </td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29"> </td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39"> </td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886"> </td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae"> </td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24"> </td><td onclick="Barva(this.bgColor)" bgcolor="#610b38"> </td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f"> </td><td onclick="Barva(this.bgColor)" bgcolor="#df0174"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f781be"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#151515"> </td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#424242"> </td><td onclick="Barva(this.bgColor)" bgcolor="#585858"> </td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#848484"> </td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4"> </td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd"> </td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff"> </td></tr></tbody></table></td></tr></tbody></table><table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" height="24" width="24"> </td><td valign="bottom"><p>Kode warna : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table> </form></center>
Cara pasang kode warna sebagai posting blog :* Yang pasti, anda buat posting baru terlebih dahulu
* Copy lalu paste Kode Warna tersebut pada posting anda
* Berikan judul posting yang sesuai
* Jangan lupa untuk memberi label posting
* Kemudian terbitkan postingan
* Selesai
Cara pasang kode warna di halaman utama (homepage) blog :
* Masuk ke menu Elemen Halaman
* Klik Tambah Gadget
* Pilih tambahkan HTML/JavaScript
* Copy lalu paste Kode Warna tersebut di dalamnya.
* Berikan judul atau nama gadget
* Klik tombol Simpan
* Silahkan tempatkan gadget kode warna dengan men-drag ke tempat yang sesuai
* Klik tombol Simpan
* Selesai
Hasilnya nanti akan seperti ini :
