Cara membuat code color picker interaktif

Color picker interaktif dilihat dari bentuk dan fungsinya memang sangat berbeda dengan tabel kode warna yang saya bahas pada waktu yang lalu dalam artikel cara buat tabel kode warna, bila belum baca anda bisa lihat DISINI.
Tabel kode warna yang ini lebih interaktif dan lebih banyak fungsinya, diantaranya adalah kita dapat menyesuaikan warna dengan menyeret panah keatas dan kebawah pada bar warna sebelah kanan, dan dapat menyesuaikan saturation dengan menarik lingkaran kecil disekitar area gradasi. Dan pada kotak output disebelah bawah selain muncul kode color Hex, juga kode color RGB, dan nilai-nilai HSV, serta dilengkapi sebuah kotak warna yang muncul sesuai dengan warna yang ada pada area gradasi ketika lingkaran kecil ditempatkan pada posisi tertentu.

Anda bisa lihat gambar Color picker interaktif dibawah ini :

Atau anda bisa lihat dan mencobanya sendiri Color picker interaktif pada sidebar sebelah kanan halaman ini.

OK... Bila nada berminat silahkan anda ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.

2. Klik Rancangan dan pilih Elemen Laman

3. Tambah Gadget

 

4. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

5. Copy dan paste kode dibawah ini pada gadget tersebut :

<div style="position:relative;height:430px; width:295px;border:2px solid #ABACAC;background-color:#E8E7EA;"> <div id="gradientBox" style="cursor:crosshair; top:5px;position:absolute;left:5px; width:240px;height:256px;border: 2px solid #FFFFFF;"> <img id="gradientImg" style="display:block;width:240px;height:256px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs4OubzyM00oatkpkLmjc1ho2h3ogJtmsw_5wRzdkyD33qVitJb5p0BesCUZLRJPOS05lHXBN6vi-S0FSMdJkUeKg9G5dG8bn9KnlLDLZ3HBKtf6piBG_g_vKBbPxie0f2N5aaIRc_WMlr/s300/color_picker_gradient..png" /> <img id="circle" style="position:absolute;height:11px; width:11px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHFkIgan_aXc27zWWc-hsbcY_IFW66nzZ97PiCcuUVlARsXI2tm46lF9QIUZYPSXFmYACqMjN4C43IWG9Kt4bNNdevvJ5LoHKT7BPt4WPWglzpoS0DTtDPvjo0YoRX78s2XtViFoDtoQKp/s104/color_picker_circle.gif" /> </div> <div id="hueBarDiv" style="position:absolute; left:255px;width:30px;border:2px solid #FFFFFF;background-color:#D9D8DB; height:255px;top:5px;"> <img style="position:absolute;height:251px; width:19px;left:6px;top:2px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwL05HhJ_Mw9Is9mI4Yt6HIMlesg6_3A3_d_ccTL6QkYOZQ8b_2M3RQr98_0-67PAC3DVH-VRMEUWAodjvWW08Y_ovaQfbKHMADM06r7Jtvr-4LE-BPTQDpkYT7OfYa3QNI05D2zXHDFyU/s104/color_picker_bar.png" /> <img id="arrows" style="position:absolute; height:9px;width:30px;left:0px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVbia8EgmjYbT7ma3yp-etY1cBmGCDqPlDgIMal_63PH-DvU5uOvCSRse8Qt3yJbdPFcUcltIthx9bjKUjrCpNk1FecDkUJDcIuY5py3aNK3s5Ck8x2zk0gbYEee0ziQOqWiC6Yk8c_Hex/s104/color_picker_arrows.png" /> </div> <div style="position:absolute;left:5px; width:145px; height:50px;top:280px;"> <div style="position:absolute; border: 2px solid #FFFFFF; height:50px;width:150px;top:0px;left:0px;"> <div id="quickColor" style="position:absolute; height:50px;width:140px;top:0px;left:0px;"> </div> <div id="staticColor" style="position:absolute; height:50px;width:100px;top:0px;left:50px;"> </div> </div> </div> <table width="150px" style="position:absolute;left:170px;top:275px;height:30px;"> <tr> <td><b>Hex: </b></td> <td> <input size="8" type="text" id="hexBox" onchange="hexBoxChanged();" /> </td> </tr> </table> <a href="http://www.carabuatwebgratis.com/" target="_blank"><img style="display:block;width:25px;height:25px;position:absolute;left:265px;top:307px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnL6z2IZvWyXu8c9gy90CqLDNEa76SeYr4vGNkk31ggGmT2VuFHFyWrxcocgZPTyMVzjJEtEIzspiASRJRUk1Eg3ca4vPk_4-Cf5WRwPzzuraRi1B_cUQ6y-X2c2_0EEyxeBHMKLPBSKIG/s75/Logo %2Bcara%2Bbuat%2Bweb%2Bgratis.jpg" /></a> <table width="285px" style="position:absolute;left:5px;top:340px;border: 2px solid #FFFFFF;"> <tr> <td>Hue:</td> <td> <input size="8" type="text" id="hueBox" onchange="hueBoxChanged();" /> </td> <td bgcolor="red"><span style="color: #FFFFFF;"> Red: </span></td> <td> <input size="8" type="text" id="redBox" onchange="redBoxChanged();" /> </td> </tr> <tr> <td>Saturation:</td> <td> <input size="8" type="text" id="saturationBox" onchange="saturationBoxChanged();" /> </td> <td bgcolor="green"><span style="color: #FFFFFF;">Green:</span></td> <td> <input size="8" type="text" id="greenBox" onchange="greenBoxChanged();" /> </td> </tr> <tr> <td>Value: </td> <td> <input size="8" type="text" id="valueBox" onchange="valueBoxChanged();" /> </td> <td bgcolor="blue"><span style="color: #FFFFFF;"> Blue:</span></td> <td> <input size="8" type="text" id="blueBox" onchange="blueBoxChanged();" /> </td> </tr> </table> <script type="text/javascript"> var Colors = new function() { this.ColorFromHSV = function(hue, sat, val) { var color = new Color(); color.SetHSV(hue,sat,val); return color; } this.ColorFromRGB = function(r, g, b) { var color = new Color(); color.SetRGB(r,g,b); return color; } this.ColorFromHex = function(hexStr) { var color = new Color(); color.SetHexString(hexStr); return color; } function Color() { //Stored as values between 0 and 1 var red = 0; var green = 0; var blue = 0; //Stored as values between 0 and 360 var hue = 0; //Strored as values between 0 and 1 var saturation = 0; var value = 0; this.SetRGB = function(r, g, b) { if (isNaN(r) || isNaN(g) || isNaN(b)) return false; r = r/255.0; red = r > 1 ? 1 : r < 0 ? 0 : r; g = g/255.0; green = g > 1 ? 1 : g < 0 ? 0 : g; b = b/255.0; blue = b > 1 ? 1 : b < 0 ? 0 : b; calculateHSV(); return true; } this.Red = function() { return Math.round(red*255); } this.Green = function() { return Math.round(green*255); } this.Blue = function() { return Math.round(blue*255); } this.SetHSV = function(h, s, v) { if (isNaN(h) || isNaN(s) || isNaN(v)) return false; hue = (h >= 360) ? 359.99 : (h < 0) ? 0 : h; saturation = (s > 1) ? 1 : (s < 0) ? 0 : s; value = (v > 1) ? 1 : (v < 0) ? 0 : v; calculateRGB(); return true; } this.Hue = function() { return hue; } this.Saturation = function() { return saturation; } this.Value = function() { return value; } this.SetHexString = function(hexString) { if(hexString == null || typeof(hexString) != "string") return false; if (hexString.substr(0, 1) == '#') hexString = hexString.substr(1); if(hexString.length != 6) return false; var r = parseInt(hexString.substr(0, 2), 16); var g = parseInt(hexString.substr(2, 2), 16); var b = parseInt(hexString.substr(4, 2), 16); return this.SetRGB(r,g,b); } this.HexString = function() { var rStr = this.Red().toString(16); if (rStr.length == 1) rStr = '0' + rStr; var gStr = this.Green().toString(16); if (gStr.length == 1) gStr = '0' + gStr; var bStr = this.Blue().toString(16); if (bStr.length == 1) bStr = '0' + bStr; return ('#' + rStr + gStr + bStr).toUpperCase(); } this.Complement = function() { var newHue = (hue>= 180) ? hue - 180 : hue + 180; var newVal = (value * (saturation - 1) + 1); var newSat = (value*saturation) / newVal; var newColor = new Color(); newColor.SetHSV(newHue, newSat, newVal); return newColor; } function calculateHSV() { var max = Math.max(Math.max(red, green), blue); var min = Math.min(Math.min(red, green), blue); value = max; saturation = 0; if(max != 0) saturation = 1 - min/max; hue = 0; if(min == max) return; var delta = (max - min); if (red == max) hue = (green - blue) / delta; else if (green == max) hue = 2 + ((blue - red) / delta); else hue = 4 + ((red - green) / delta); hue = hue * 60; if(hue <0) hue += 360; } function calculateRGB() { red = value; green = value; blue = value; if(value == 0 || saturation == 0) return; var tHue = (hue / 60); var i = Math.floor(tHue); var f = tHue - i; var p = value * (1 - saturation); var q = value * (1 - saturation * f); var t = value * (1 - saturation * (1 - f)); switch(i) { case 0: red = value; green = t; blue = p; break; case 1: red = q; green = value; blue = p; break; case 2: red = p; green = value; blue = t; break; case 3: red = p; green = q; blue = value; break; case 4: red = t; green = p; blue = value; break; default: red = value; green = p; blue = q; break; } } } } (); function Position(x, y) { this.X = x; this.Y = y; this.Add = function(val) { var newPos = new Position(this.X, this.Y); if(val != null) { if(!isNaN(val.X)) newPos.X += val.X; if(!isNaN(val.Y)) newPos.Y += val.Y } return newPos; } this.Subtract = function(val) { var newPos = new Position(this.X, this.Y); if(val != null) { if(!isNaN(val.X)) newPos.X -= val.X; if(!isNaN(val.Y)) newPos.Y -= val.Y } return newPos; } this.Min = function(val) { var newPos = new Position(this.X, this.Y) if(val == null) return newPos; if(!isNaN(val.X) && this.X > val.X) newPos.X = val.X; if(!isNaN(val.Y) && this.Y > val.Y) newPos.Y = val.Y; return newPos; } this.Max = function(val) { var newPos = new Position(this.X, this.Y) if(val == null) return newPos; if(!isNaN(val.X) && this.X < val.X) newPos.X = val.X; if(!isNaN(val.Y) && this.Y < val.Y) newPos.Y = val.Y; return newPos; } this.Bound = function(lower, upper) { var newPos = this.Max(lower); return newPos.Min(upper); } this.Check = function() { var newPos = new Position(this.X, this.Y); if(isNaN(newPos.X)) newPos.X = 0; if(isNaN(newPos.Y)) newPos.Y = 0; return newPos; } this.Apply = function(element) { if(typeof(element) == "string") element = document.getElementById(element); if(element == null) return; if(!isNaN(this.X)) element.style.left = this.X + 'px'; if(!isNaN(this.Y)) element.style.top = this.Y + 'px'; } } var pointerOffset = new Position(0, navigator.userAgent.indexOf("Firefox") >= 0 ? 1 : 0); var circleOffset = new Position(5, 5); var arrowsOffset = new Position(0, 4); var arrowsLowBounds = new Position(0, -4); var arrowsUpBounds = new Position(0, 251); var circleLowBounds = new Position(-5, -5); var circleUpBounds = new Position(250, 250); function correctOffset(pos, offset, neg) { if(neg) return pos.Subtract(offset); return pos.Add(offset); } function hookEvent(element, eventName, callback) { if(typeof(element) == "string") element = document.getElementById(element); if(element == null) return; if(element.addEventListener) { element.addEventListener(eventName, callback, false); } else if(element.attachEvent) element.attachEvent("on" + eventName, callback); } function unhookEvent(element, eventName, callback) { if(typeof(element) == "string") element = document.getElementById(element); if(element == null) return; if(element.removeEventListener) element.removeEventListener(eventName, callback, false); else if(element.detachEvent) element.detachEvent("on" + eventName, callback); } function cancelEvent(e) { e = e ? e : window.event; if(e.stopPropagation) e.stopPropagation(); if(e.preventDefault) e.preventDefault(); e.cancelBubble = true; e.cancel = true; e.returnValue = false; return false; } function getMousePos(eventObj) { eventObj = eventObj ? eventObj : window.event; var pos; if(isNaN(eventObj.layerX)) pos = new Position(eventObj.offsetX, eventObj.offsetY); else pos = new Position(eventObj.layerX, eventObj.layerY); return correctOffset(pos, pointerOffset, true); } function getEventTarget(e) { e = e ? e : window.event; return e.target ? e.target : e.srcElement; } function absoluteCursorPostion(eventObj) { eventObj = eventObj ? eventObj : window.event; if(isNaN(window.scrollX)) return new Position(eventObj.clientX + document.documentElement.scrollLeft + document.body.scrollLeft, eventObj.clientY + document.documentElement.scrollTop + document.body.scrollTop); else return new Position(eventObj.clientX + window.scrollX, eventObj.clientY + window.scrollY); } function dragObject(element, attachElement, lowerBound, upperBound, startCallback, moveCallback, endCallback, attachLater) { if(typeof(element) == "string") element = document.getElementById(element); if(element == null) return; if(lowerBound != null && upperBound != null) { var temp = lowerBound.Min(upperBound); upperBound = lowerBound.Max(upperBound); lowerBound = temp; } var cursorStartPos = null; var elementStartPos = null; var dragging = false; var listening = false; var disposed = false; function dragStart(eventObj) { if(dragging || !listening || disposed) return; dragging = true; if(startCallback != null) startCallback(eventObj, element); cursorStartPos = absoluteCursorPostion(eventObj); elementStartPos = new Position(parseInt(element.style.left), parseInt(element.style.top)); elementStartPos = elementStartPos.Check(); hookEvent(document, "mousemove", dragGo); hookEvent(document, "mouseup", dragStopHook); return cancelEvent(eventObj); } function dragGo(eventObj) { if(!dragging || disposed) return; var newPos = absoluteCursorPostion(eventObj); newPos = newPos.Add(elementStartPos).Subtract(cursorStartPos); newPos = newPos.Bound(lowerBound, upperBound) newPos.Apply(element); if(moveCallback != null) moveCallback(newPos, element); return cancelEvent(eventObj); } function dragStopHook(eventObj) { dragStop(); return cancelEvent(eventObj); } function dragStop() { if(!dragging || disposed) return; unhookEvent(document, "mousemove", dragGo); unhookEvent(document, "mouseup", dragStopHook); cursorStartPos = null; elementStartPos = null; if(endCallback != null) endCallback(element); dragging = false; } this.Dispose = function() { if(disposed) return; this.StopListening(true); element = null; attachElement = null lowerBound = null; upperBound = null; startCallback = null; moveCallback = null endCallback = null; disposed = true; } this.StartListening = function() { if(listening || disposed) return; listening = true; hookEvent(attachElement, "mousedown", dragStart); } this.StopListening = function(stopCurrentDragging) { if(!listening || disposed) return; unhookEvent(attachElement, "mousedown", dragStart); listening = false; if(stopCurrentDragging && dragging) dragStop(); } this.IsDragging = function(){ return dragging; } this.IsListening = function() { return listening; } this.IsDisposed = function() { return disposed; } if(typeof(attachElement) == "string") attachElement = document.getElementById(attachElement); if(attachElement == null) attachElement = element; if(!attachLater) this.StartListening(); } function arrowsDown(e, arrows) { var pos = getMousePos(e); if(getEventTarget(e) == arrows) pos.Y += parseInt(arrows.style.top); pos = correctOffset(pos, arrowsOffset, true); pos = pos.Bound(arrowsLowBounds, arrowsUpBounds); pos.Apply(arrows); arrowsMoved(pos); } function circleDown(e, circle) { var pos = getMousePos(e); if(getEventTarget(e) == circle) { pos.X += parseInt(circle.style.left); pos.Y += parseInt(circle.style.top); } pos = correctOffset(pos, circleOffset, true); pos = pos.Bound(circleLowBounds, circleUpBounds); pos.Apply(circle); circleMoved(pos); } function arrowsMoved(pos, element) { pos = correctOffset(pos, arrowsOffset, false); currentColor.SetHSV((256 - pos.Y)*359.99/255, currentColor.Saturation(), currentColor.Value()); colorChanged("arrows"); } function circleMoved(pos, element) { pos = correctOffset(pos, circleOffset, false); currentColor.SetHSV(currentColor.Hue(), 1-pos.Y/255.0, pos.X/255.0); colorChanged("circle"); } function colorChanged(source) { document.getElementById("hexBox").value = currentColor.HexString(); document.getElementById("redBox").value = currentColor.Red(); document.getElementById("greenBox").value = currentColor.Green(); document.getElementById("blueBox").value = currentColor.Blue(); document.getElementById("hueBox").value = Math.round(currentColor.Hue()); var str = (currentColor.Saturation()*100).toString(); if(str.length > 4) str = str.substr(0,4); document.getElementById("saturationBox").value = str; str = (currentColor.Value()*100).toString(); if(str.length > 4) str = str.substr(0,4); document.getElementById("valueBox").value = str; if(source == "arrows" || source == "box") document.getElementById("gradientBox").style.backgroundColor = Colors.ColorFromHSV(currentColor.Hue(), 1, 1).HexString(); if(source == "box") { var el = document.getElementById("arrows"); el.style.top = (256 - currentColor.Hue()*255/359.99 - arrowsOffset.Y) + 'px'; var pos = new Position(currentColor.Value()*255, (1-currentColor.Saturation())*255); pos = correctOffset(pos, circleOffset, true); pos.Apply("circle"); endMovement(); } document.getElementById("quickColor").style.backgroundColor = currentColor.HexString(); } function endMovement() { document.getElementById("staticColor").style.backgroundColor = currentColor.HexString(); } function hexBoxChanged(e) { currentColor.SetHexString(document.getElementById("hexBox").value); colorChanged("box"); } function redBoxChanged(e) { currentColor.SetRGB(parseInt(document.getElementById("redBox").value), currentColor.Green(), currentColor.Blue()); colorChanged("box"); } function greenBoxChanged(e) { currentColor.SetRGB(currentColor.Red(), parseInt(document.getElementById("greenBox").value), currentColor.Blue()); colorChanged("box"); } function blueBoxChanged(e) { currentColor.SetRGB(currentColor.Red(), currentColor.Green(), parseInt(document.getElementById("blueBox").value)); colorChanged("box"); } function hueBoxChanged(e) { currentColor.SetHSV(parseFloat(document.getElementById("hueBox").value), currentColor.Saturation(), currentColor.Value()); colorChanged("box"); } function saturationBoxChanged(e) { currentColor.SetHSV(currentColor.Hue(), parseFloat(document.getElementById("saturationBox").value)/100.0, currentColor.Value()); colorChanged("box"); } function valueBoxChanged(e) { currentColor.SetHSV(currentColor.Hue(), currentColor.Saturation(), parseFloat(document.getElementById("valueBox").value)/100.0); colorChanged("box"); } function fixPNG(myImage) { if(!document.body.filters) return; var arVersion = navigator.appVersion.split("MSIE"); var version = parseFloat(arVersion[1]); if(version < 5.5 || version >= 7) return; var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "" var imgStyle = "display:inline-block;" + myImage.style.cssText var strNewHTML = "<span " + imgID + " style=\"" + "width:" + myImage.width + "px; height:" + myImage.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>" myImage.outerHTML = strNewHTML } function fixGradientImg() { fixPNG(document.getElementById("gradientImg")); } </script> </div> <script type="text/javascript"> fixGradientImg(); var currentColor = Colors.ColorFromRGB(72,128,64); new dragObject("arrows", "hueBarDiv", arrowsLowBounds, arrowsUpBounds, arrowsDown, arrowsMoved, endMovement); new dragObject("circle", "gradientBox", circleLowBounds, circleUpBounds, circleDown, circleMoved, endMovement); colorChanged('box'); </script>

Catatan :
Lebar tabel Color picker interaktif ini adalah 300px, jadi area gadget yang dibutuhkan tidak kurang dari 300px.

6. Simpan.

Selamat mencoba ya...
Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :

Cara membuat tab menu Accordion

Bentuk tampilan tab menu Accordion ini sangat menarik, sangat bagus bila kita pasang pada web ataupun blog kita. Tab menu accordion ini dilengkapi dengan efek animasi sliding. Yaitu animasi sliding yang bekerja ketika kita mengklik pada salah satu tab menu accordion, maka ketika itu pula muncul sebuah kotak bergerak kebawah yang berfungsi menampilkan sebuah dokumen informasi singkat tentang Link yang kita klik tadi.

Silahkan anda lihat contoh tab menu Accordion di bawah ini :

Cara buat web gratis

Cara buat web ternyata tidaklah sesulit yang kita fikirkan. Kita hanya membutuhkan lima langkah mudah, cepat dan gratis. Anda tidak harus mengerti tentang bahasa programer. Disini saya jabarkan bagaimana Cara buat web dari mulai Cara dapat domain gratis, Cara dapat hosting gratis, Cara seting domain gratis dihosting gratis, Cara dapat template gratis, dan Cara Upload Template gratis.

Cara buat blog

Ada beberapa keuntungan bila kita buat blog atau memiliki sebuah blog. Disamping Gratis, mudah dan cepat, Blog bisa kita gunakan untuk keperluan pribadi atau sekedar penyalur hoby menulis atau apapun, Blog juga bisa kita gunakan sebagai sarana berbagi ilmu pengetahuan. Bahkan saat ini sudah tidak asing lagi bawha sebuah blog menjadi sarana bisnis.

Selain fungsi menampilkan sebuah dokumen informasi singkat, tab menu accordion juga bisa kita gunakan untuk membuat daftar isi :

Tutorial Blogger

Cara membuat gambar memutar

---

Cara agar blog cepat diakses dengan HP

---

Cara mengganti forum komentar blogger dengan Disqus

---

Cara mengganti forum Komentar Blogger dengan IntenseDebate

---

5 Tampilan Dinamis dari blogger

---

Cara menambah gadget pada Header

---

Cara submit sitemap blog

---

Cara memberi Meta Tag pada blog

---

Cara memberi meta tag pada setiap posting

---

Cara memasukkan Blog ke Facebook

---

Cara membuat Read More otomatis

---

Cara membuat Tooltip

---

Cara membuat slide dengan efek marquee

---

Cara membuat efek membesar pada gambar

---

Cara membuat gambar melayang

---

Cara membuat efek transparan pada gambar

---

Cara membuat daftar isi menggunakan efek marquee

---

Cara membuat daftar isi dengan drop down

---

Cara Membuat Link Dalam Satu Halaman

---

Cara membuat background warna gradasi

---

Cara membuat tombol scroll "To Top"

---

Cara pasang tombol share

---

Cara mencari kode HTML

---

Cara membuat Blog menjadi Dofollow

---

Cara membuat textarea dengan tombol "select all"

---

Cara membuat effek scroll pada Titel Bar

---

Cara membuat tanggal otomatis update

---

Cara Membuat Pop-up Window

---

Cara Membuat Navigasi Halaman

---

Cara Membuat Subscribe email pada blog

---

Cara membuat efek shadow pada kotak dan gambar

---

Cara Membuat Tabel (Tahap 2)

---

Cara membuat List pada daftar

---

Cara pasang Iklan diatas postingan

---

Cara membuat "Embed ULR, HTML, Link Forum" dibawah artikel

---

Cara membuat artikel berhubungan

---

Cara Menambah widget pengatur Ukuran dan Warna teks pada Blog

---

Cara Menambahkan Efek Teks pada Cursor Mouse

---

Cara buat kotak Pencarian

---

Cara buat Menu navigasi Drop-Down Horisontal

---

Cara Membuat Label Animasi "blogumulus"

---

Cara membuat Tag Cloud

---

Cara Pasang Radio Online

---

Cara Membuat label di blog

---

Cara membuat Slider

---

Cara membuat slideshow

---

Cara Membuat variasi Font pada Teks

---

Cara Buat Kotak atau Teks Area

---

Cara membuat Scroll Box

---

Cara Membuat Tabel (Tahap 1)

---

Cara membuat Link Terbuka di halaman Baru

---

Cara Menambah Gadget diatas Header

---

Cara Buat Sitemap / Peta Situs

---

Cara buat tabel kode warna

---

Cara Membuat Teks Berjalan ( Marquee )

---

Cara Membuat Refresh Otomatis pada Blog

---

Cara Membuat Rounded Corner

---

Cara membuat Text-Shadow

---

Cara Memasang Background Gambar pada postingan

---

Cara membuat daftar isi otomatis

---

Cara Menambah Widget Jam pada Blog

---

Cara Membuat Read more

---

Cara Menghilangkan Navbar Pada blog

---

Cara Membuat Navbar Auto-Hide

---

Cara Membuat Forum Login

---

Cara Membuat Anti Copy Paste

---

Cara Membuat pesan selamat datang

---

Cara Membuat Animasi Status Loading

---

Cara Membuat Text Area blok Otomatis

HTML

HTML

---

HTML Dasar

---

Membuat garis

---

Penggunaan Spasi

---

Format Teks

---

Blockquote html

---

HTML Style

---

Hyperlinks

---

Tabel HTML

---

HTML LIST

CSS

CSS

---

CSS Background

---

CSS Teks

---

CSS FONT

---

CSS LINK

---

CSS LIST

---

CSS BORDER

---

CSS BOX

---

CSS Border-Radius

---

CSS Margin

---

CSS Padding

---

CSS Dimensi

OK... bila anda berminat, anda bisa ikuti lankah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<style type="text/css"> .AccordionContainer { border: none; margin-left:10px; } .AccordionTitle { position:relative; width:300px; height:20px; overflow:hidden; cursor:pointer; font-family:Arial; font-size:8pt; font-weight:bold; vertical-align:middle; text-align:center; background-repeat:repeat-x; display:table-cell; border: solid 1px #BDBDBD; background: -moz-linear-gradient(center top, #ffffff 0%,#c4d69f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff),color-stop(1, #c4d69f )); -moz-user-select:none; padding: 10px; } .AccordionContent { position:relative; width:300px; height:0px; overflow:auto; display:none; border: solid 1px #C1C1C1; border-color:rgb(225, 225, 225); background-color:#FAFAFA; padding:10px; } a:link {text-decoration:none;} a:link {color:#000000;} a:visited {text-decoration:none;} a:hover {color:#2E9AFE;} a:active {text-decoration:underline;} </style> <script type="text/javascript"> var ContentHeight = "200"; var TimeToSlide = 400.0; var openAccordion = ''; function runAccordion(index) {var nID = "Accordion" + index + "Content"; if(openAccordion == nID) nID = ''; setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'"+ openAccordion + "','" + nID + "')", 33); openAccordion = nID; } </script> <script type="text/javascript"> function animate(lastTick, timeLeft, closingId, openingId) { var curTick = new Date().getTime(); var elapsedTicks = curTick - lastTick; var opening = (openingId == '') ? null : document.getElementById(openingId); var closing = (closingId == '') ? null : document.getElementById(closingId); if(timeLeft <= elapsedTicks) { if(opening != null) opening.style.height = ContentHeight + 'px'; if(closing != null) { closing.style.display = 'none'; closing.style.height = '0px'; } return; } timeLeft -= elapsedTicks; var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight); if(opening != null) { if(opening.style.display != 'block') opening.style.display = 'block'; opening.style.height = (ContentHeight - newClosedHeight) + 'px'; } if(closing != null) closing.style.height = newClosedHeight + 'px'; setTimeout("animate(" + curTick + "," + timeLeft + ",'" + closingId + "','" + openingId + "')", 33); } </script>

6. Simpan Template.

Langkah selanjutnya anda tinggal menampilkan Widget pada halaman depan blog anda. Perhatikan langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div id="AccordionContainer" class="AccordionContainer"> <div onclick="runAccordion(1);">  <div class="AccordionTitle" onselectstart="return false;"> JUDUL ARTIKEL 1 ANDA </div> </div> <div id="Accordion1Content" class="AccordionContent"> <a href="ULR ARTIKEL ANDA" target="_blank"> DISINI INFORMASI SINGKAT ARTIKEL (1) ANDA /  DAFTAR ARTIKEL  (1) ANDA </a> </div> <div onclick="runAccordion(2);">  <div class="AccordionTitle" onselectstart="return false;"> JUDUL ARTIKEL ANDA </div> </div> <div id="Accordion2Content" class="AccordionContent"> <a href="ULR ARTIKEL (2) ANDA" target="_blank"> DISINI INFORMASI SINGKAT ARTIKEL (2) ANDA /  DAFTAR ARTIKEL (2) ANDA </a> </div> </div>

Catatam : 

• Untuk menambah Tab menu accordion, anda tinggal menambah kode seperti dibawah ini sesuai kebutuhan anda, tapi jangan lupa mengganti dan mengurutkan nomor atau angka yang berwarna PING :

<div onclick="runAccordion(3);">

 <div class="AccordionTitle" onselectstart="return false;">

JUDUL ARTIKEL ANDA

</div>

</div>

<div id="Accordion3Content" class="AccordionContent"> <a href="ULR ARTIKEL (2) ANDA" target="_blank"> DISINI INFORMASI SINGKAT ARTIKEL (2) ANDA /  DAFTAR ARTIKEL (2) ANDA

</a>

</div>

• Untuk menambah daftar, anda tinggal menambah kode hiperlink seperti dibawah ini sesuai kebutuhan anda, dan diakhiri tag <hr> sebagai garis pembatas :

<a href="ULR ARTIKEL ANDA" target="_blank"> JUDUL ARTIKEL ANDA

</a>

<hr>

5. Simpan.

Selamat mencoba ya... Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :

Cara membuat gambar memutar

Fitur CSS memungkinkan kita untuk membuat banyak hal khususnya membuat tampilan halaman web ataupun blog menjadi lebih menarik. Pada waktu yang lalu saya sudah banyak mengulas tentang fitur CSS dan contoh - contohnya. Kali ini saya akan berikan contoh lagi tentang bagaimana kita membuat gambar memutar menggunakan CSS transitions. Cara kerjanya sangat sederhana, yaitu ketika pointer mouse diletakkan diatas gambar maka secara otomatis gambar akan memutar dan membesar.

Silahkan anda lihat contoh gambar dibawah ini. Anda bisa coba meletakkan pointer mouse diatas gambar, maka gambar tersebut langsung memutar dan membesar.

OK... bila anda berminat, anda bisa ikuti lankah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<style type="text/css">
#Gambar_memutar div
{
height:100px;
width:100px;
border: 3px solid #D8D8D8;
border-style:double;
margin:10px auto;
text-align:center;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;  
transition: all 2s ease-in-out;
padding-top:5;
padding-left:5;
padding-bottom:5;
padding-right:5;
}

#Gambar_memutar div:hover, #Gambar_memutar div.hover_effect
 {
-webkit-transform:rotate(720deg) scale(2,2);
-moz-transform:rotate(720deg) scale(2,2);
-o-transform:rotate(720deg) scale(2,2);
-ms-transform:rotate(720deg) scale(2,2);
transform:rotate(720deg) scale(2,2);      
}
</style>

6. Simpan Template.

7. Langkah selanjutnya, anda tinggal copy kode dibawah ini dan anda bisa taruh kode gambar ini pada gadget atau akan dipasang pada artikel post anda untuk menampilkan gambar dengan efek memutar dan membesar, silahkan ... itu terserah anda.

<div id="Gambar_memutar">
    <div class="hover"><a href="http://www.carabuatwebgratis.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnL6z2IZvWyXu8c9gy90CqLDNEa76SeYr4vGNkk31ggGmT2VuFHFyWrxcocgZPTyMVzjJEtEIzspiASRJRUk1Eg3ca4vPk_4-Cf5WRwPzzuraRi1B_cUQ6y-X2c2_0EEyxeBHMKLPBSKIG/s1600/Logo+cara%2Bbuat%2Bweb%2Bgratis.jpg" width="100" height="100"/></a>
</div>
</div>

catatan :

- Ganti ULR blog dan ULR image dengan ULR milik anda.

Nah....Mudah kan...?
Silahkan anda coba dan diotak atik sendiri sesuka selera anda.
Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

Cara agar blog cepat diakses dengan HP

Saat ini sudah bukan hal yang baru lagi, orang mengakses internet menggunakan HP. Hal ini karena selain HP sudah dilengkapi fitur GPRS atau 3G, tapi karena memang sudah banyak situs yang menggunakan fasilitas tersendiri sehingga dapat lebih mudah dan cepat diakses menggunakan HP, misalnya seperti Facebook, Twitter, Yahoo, google, dan lain - lain.

Tapi tentu bagi kita yang memilki blog juga tidak ingin banyak kehilangngan pengunjung karena blog yang kita miliki sulit diakses menggunakan HP, iya kan...?.

OK..., Sekarang anda bisa ikuti langkah-langkah sederhana dibawah ini, agar blog anda lebih mudah diakses menggunakan HP :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode yang sama atau mirip dengan kode berikut :
 

<b:include data='blog' name='all-head-content'/>

5. Silahkan sisipkan kode dibawah ini tepat sebelum kode diatas :
 

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

6. Simpan Template.

Nah.... jadi deh...., mudah kan ?
Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :

Cara mengganti forum komentar blogger dengan Disqus

DISQUS adalah platform komentar yang membantu membangun komunitas yang aktif dari pengunjung web atau blog kita. forum komentar ini memiliki banyak fitur dan bisa digunakan pada banyak platform seperti Wordpress, Blogger, Tumblr dll, sama seperti forum komentar IntenseDebate, anda bisa lihat artikelnya DISINI.
Dan untuk menginstall forum komentar Disqus juga sangat mudah.

Beberapa fitur Disqus diantaranya adalah :

Realtime comment system  Disqus adalah cara favorit setiap orang untuk komentar. Jadi komentar menjadi lebih hidup seperti diskusi. Notification and reply system  Sistem notifikasi membuat pengunjung tahu ketika mereka telah menerima sebuah jawaban. Jadi mereka dapat melanjutkan percakapan langsung dari email. Inline media embedding  Memiliki Integrasi penuh dengan layanan media seperti Youtube, Flickr, dan banyak lagi. Lampirkan media seperti foto dan video langsung di dalam komentar. Mobile commenting  Sepenuhnya kompatibel dengan situs Web mobile untuk memberikan komentar saat bepergian. Tema default mobile diformat dengan smartphone, seperti iPhone atau ponsel Android. Social integration  Memiliki Integrasi penuh dengan Facebook, Twitter, dan banyak lagi. Membiarkan pengunjung login, berkomentar, dan berbagi menggunakan layanan sosial yang mereka gunakan.

Liking and sharing  Orang dapat menilai apa yang mereka suka dengan menyukai halaman atau komentar dan kemudian berbagi yang di Facebook, Twitter, dan jaringan lain. Moderation tools  Powerfull dan alat-alat yang mudah digunakan akan membantu Anda menjaga komunitas Anda di bawah kendali. Panel moderasi ini dirancang untuk mengelola sejumlah besar komentar yang masuk.   The Community Box  Cara cepat untuk memamerkan sebuah komunitas. Dan pengunjung dapat melihat ringkasan aktivitas dari orang yang ikut berpartisipasi. Mobile apps  Disqus aplikasi tersedia untuk iPhone, Android, dan webOS telepon. Sehingga kita dapat mengelola komunitas saat kita bepergian. Blacklists and whitelists  Disqus memberi Anda alat-alat yang kuat seperti blacklist, whitelists, dan kata penyaringan. Import and export  Komentar Impor yang ada ke Disqus dan sinkronisasi up data. Semua data benar-benar portabel dan dapat diekspor setiap saat.

Dan masih banyak fitur dari Disqus, yang bisa anda lihat sendiri di http://disqus.com

Berikut gambar forum komentar Disqus :

Silahkan anda lengkapi dengan banyak fitur untuk forum komentar Disqus pada blog anda nanti.

OK... Bila anda berminat, anda bisa ikuti langkah - langkah dibawah ini :

Sebelum kita menginstall forum komentar Disqus, sebaiknya anda Login terlebih dahulu ke blogger dan silahkan anda Download Template dan simpan di komputer agar lebih aman jika terjadi kesalahan. Setelah itu baru menuju langkah - langkah berikut :

1. Silahkan anda langsung ke Disqus dengan Link dibawah ini : http://disqus.com/admin/register/

Pada halaman tersebut tepatnya langkah pertama "Register Site", silahkan anda isi seluruh forum yang diberikan dan Klik tombol Continue.

3. Pada bagian "seting", anda bisa seting pengaturan seperti gambar dibawah ini nanti pada Dashboard Disqus anda setelah selesai. Dan sekarang langsung saja Klik tombol Continue lagi.

4. Masuk pada bagian "Install". Silahkan anda pilih platform blog anda. Dan pada contoh kali ini saya contohkan untuk pilih platform Blogger :

 
5. Kemudian silahkan anda Klik tombol seperti gambar dibawah ini :

6. Karena anda tadi sudah Login ke blogger, maka anda langsung diarahkan menuju halaman blogger seperti berikut :

 Catatan :
Bila anda memiliki blog lebih dari satu, pastikan anda pilih blog yang anda daftarkan tadi. (tanda panah 1). Kemudian anda Klik "Menambah widget" (tanda panah 2).

7. Halaman berikutnya anda lihat widget sudah masuk pada Elemen Laman milik anda.

8. Selesai, silahkan anda lihat hasilnya.
9. Langkah selanjutnya anda kembali menuju ke Dashboard Disqus anda dan silahkan anda seting sesuai selera anda.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :