Cara Memasang Kode Warna Pada Halaman Utama dan Postingan Blog

Bagi Blogger Kode Warna sangat lah penting untuk kelancaran dalam mengedit kode warna pada HTML,banyak Blogger yang kebingungan untuk menentukan kode warna karena tidak mengetahui kode apa yang pas untuk warna yang di inginkan.

Untuk itu dalam kesempatan kali ini Ngescript akan menjelaskan bagaimana memasang kode warna pada halaman depan blog dan juga sebagai isi blog untuk potingan,untuk yang hanya ingin mengetahui kode warna silahkan lihat di sini " Mengetahui Kode Warna dengan Mudah dan Lengkap ".

Disini Ngescript akan menjelaskan tutorial utuk memasang kode pertama pada edit HTLM,untuk langkah pertama adalah sebagai berikut :

Untuk langkah pertama memasang kode script :

1. Masuk ke Dasboard Blogger.
2. Klik Tata Letak.
3. Pilih edit HTML.
4. Copy kode dibawah ini tepat diatas kode </head> pada HTML.
5. Setelah mengcopy kode dibawah,kemudian Simpan Template.

<script language='javascript'>
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]-->

Untuk langkah kedua memasang kode selanjutnya :

Pada bagian ini kita diberikan 2 pilihan untuk memasang kode sesuai keinginan dan kebutuhan kita,Ngescript akan menjelaskan cara memasang kode warna pada halaman depan blog.

Langkah memasang kode warna dihalaman utama blog dengan widget :

• Masuk ke Dasboard - Tata Letak - Tambahkan Gadget - HTML/JavaScript.
• Copy kode warna dibawah ini.

</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>

• Kemudina Simpan Widget dan lihat hasilnya pada blog.

Langkah memasang kode pada postingan :

• Masuk pada halaman untuk membuat postingan baru kemudian copy kan kode kedua di atas pada HTML bukan Compose seperti gambar dibawah ini.
  
• Kemudian pastekan kode script tadi dihalaman tersebut,untuk melanjutkan postingan kembali ke Compose.
• Setelah selesai,kemudian simpan  publikasikan postingan dan lihat hasilnya.
• Hasil akhir akan seperti ini 

itu adalah tutorian Ngescript kali ini semoga bermanfaat bagi kita semua dan lebih mempermudah kita dalam menjalani aktifitas blogging,jika ada kritik dan saran kamu bisa menggunakan kolom komentar yang telah disediakan.Terima kasih

Sumber : http://www.contohblog.com/2015/09/membuat-halaman-kode-warna-html-sendiri.html

Salam

Ngescript

Related Posts:

Tweet

Mengetahui Kode Warna dengan Mudah dan Lengkap

Baik pada kesempatan kali ini Ngescript akan mempublikasikan tentang cara mudah mengetahui kode warna untuk mempermudah dalam menjalankan aktifitas kita sehari-hari yang terus berkecimpung dalam dunia blogging,Blogger pasti merasa merasa kebingungan jika kita dalam hal edit mengedit kode template tidak mengetahui kode warna yang di inginkan.

Itu juga pernah Ngescript rasakan saat belum mengetahui kode-kode pada warna,tapi dengan ada nya warna dan kode-kode warna dibawah ini dapat sedikit membantu aktifitasi Ngescript dalam kegiatan blog.

Langsung saja untuk kamu yang sedang mencari kode warna yang diinginkan,bisa dilihat dan dipilih sesuai kebutuhan kamu,karena dalam memilih kode warna dibawah ini sangat mudah dan simpel. Hanya dengan mengklik warna dibawah ini,kita dapat mengetahui kode warna tersebut. 

Jika ada keluhan seputaran cara menghilangkan icon obeng dan kunci pas bisa baca di sini " Cara menghapus icon obeng dan kunci pas "

Pilih warna yang dibutuhkan :

Kode warna :

sesuaikan dengan kebutuhan kode mana yang sedang diperlukan dan itulah kode-kode terlengkap yang Ngsecript sediakan,semoga dapat bermanfaat bagi kita semua. Jika ada kritik dan saran bisa cantumkan dikolom komentar agar Ngscript dapat mengetahui kekurangan dan keluhan yang kamu sedang hadapi. Terima kasih

Salam 

Ngescript

Related Posts:

Tweet

Cara Menghapus Icon Obeng dan Kunci Pas Pada Blog

Saat seorang Blogger sudah memiliki dan mengelola akun blog miliknya,terkadang banyak juga Blogger yang merasa terganggu dengan icon yang ada di sudut kanan bawah pada widget template yang mereka gunakan. Padahal jika kita yang tidak ingin repot untuk bolak balik ke bagian tata letak untuk mengedit bagin-bagian widget yang sedang di edit,tentu dengan adanya icon ini sangat membantu karena dapat mempermudah dalam pengeditan widget.

Seperti yang Ngescript jelaskan diatas yang masih banyak Blogger yang merasa risih dengan icon tersebut,sehingga ingin sekali menghilangkan icon tersebut. Sebelum kita membahas lebih jaun tentang Cara menghapus Icon Obeng dan Kunci pas Pada Blog yang kebanyakan Blogger menyebutnya Obeng dan Tang,yang pada kenyataannya itu bukan lah Tang seperti yang para Blogger sebut kebanyakan.

Sedikit menggelitik saat Ngescript sering mendengar blogger sering menyebut icon tersebut dengan Obeng dan Tang,memang tidak ada salahnya jika mereka menyebutnya dengan Obeng dan tang. Tapi tidak ada salah nya juga jika kita menyebut Obeng dengan kata Screw Driver dan Kunci pas dengan kata Spanner,untuk Blogger yang masih belum teliti dengan icon tersebut dengan senang hati Ngescript melampirkan dalam bentuk gambar dibawah ini.

Coba kamu cermati baik-baik apakah itu seperti "Tang" ? ,nah setelah mengetahuinya semoga kita bisa menyebut icon tersebut yang dalam bahasa Indonesia sebagai Kunci Pas atau dalam bahasa Asing disebut Spanner,sekedar saran dan masukan dari Ngescript saja.

Tentunya sebelum kita mempelajari blog dan mengedit kode-kode didalam nya kita haru membuat blog dan mempelajari seluk-beluk tentang blog,untuk tutorial lengkap cara membuat blog di Blogspot bisa baca disini

Cara Menghapus Icon Obeng dan Kunci Pas Pada Blog

Langkah-langkah menghapus icon screw driver dan spanner :

1. Sebelum kita menghapus icon tersebut maka tampilan icon akan tetap mucul seperti gambar dibawah ini.

Berhubung template yang Ngescript gunakan ini memiliki desain template polos dan hasil kreasi sendiri maka widget yang dihasilkan pun tidak memiliki corak template pada umumnya.

2. Kemudian masuk ke Dasboard - Template - edit HTML untuk mulai mencari kode seperti gambar di bawah ini dan untuk memudahkan pencarian kode,kamu dapat menekan Ctrl + F dan ketik kode yang akan dicari.

3. Setelah kode yang dicari ditemukan,selanjutnya kita hapus saja kode tersebut.

4. Setelah kode tersebut berhasil ditemukan dan dihapus langkah terakhir adalah klik Simpan Template lalu lihat hasilnya pada blog kamu.

5. selesai.

Perlu dipahami jika icon obeng dan kunci pas yang muncul pada blog kamu ada 5,maka di dalam edit HTML pun sama ada lima dan 5 kode tersebut harus dihapus.

Nah itulah Cara Menghapus Icon Obeng dan Kunci Pas Pada Blog,semoga dengan tutorial yang Ngescript sampaikan ini dapat memudahkan kamu untuk menghapus icon tersebut dan dapat menjadi ilmu yang bermanfaat bagi kita semua.

Salam

Ngescript

Related Posts:

Tweet

Membuat Widget Kotak Search Terlengkap Tanpa Edit HTML

Mungkin pada keseluruhan template yang ada saat ini kotak pencarian atau kotak search sudah terpasang pada edit HTML yang template kamu gunakan,namun jika template yang kita gunakan belum terpasang kotak pencarian atau kotak search maka menjadi masalah tersendiri bagi kita sebagai pemilik blog yang belum terpasang kotak pencaharian.

Sebelum mempelajari tentang edit mengedit tentunya kita harus membuat blog terlebih dahulu kita membuat blog di blogspot untuk lebih mudah baca juga " Cara membuat blog di blogspot lengkap dengan gambar ". 

Kembali kepembahasan sebelumnya untuk mempermudah pemasangan kotak search,disini Ngescript akan menjelaskan langkah dan kode HTML/Javascript nya. Untuk lebih jelasnya lihat langkah dan kode script dibawah ini.

Langkah-langkah memasang kode script ke dalam widget HTML/Javascript 

Kode Script dan gambar :

1.

Kode gambar diatas

<style type="text/css">#blr_torn_page_search {   background:rgba(0,0,0,0) url('http://2.bp.blogspot.com/-WOtFhkqSuwM/Un9kXYdUhGI/AAAAAAAAC5k/P2F5OeupizU/s1600/torn_page_image.png') scroll 50% 50% no-repeat;   width:340px;   height:58px;   display:block;}#blr_torn_page_search_box {   display:block;   padding:14px;   margin:0;}#blr_torn_page_search_input {   padding:6px;   margin:0;   width:266px;   font-size:14px;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}#blr_torn_page_search_submit {   margin:0;   padding:0;   height:25px;   width:25px;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}</style>

<div id="blr_torn_page_search">    <form expr:action="/search" method="get" id="blr_torn_page_search_box">        <input type="text" name="q" placeholder="Search this site..." id="blr_torn_page_search_input" />        <input type="image" id="blr_torn_page_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />    </form></div>

2. 

Kode gambar diatas

<style>
#searchbox {
width: 240px;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB2eFJj0_-UL0XxyMPtB0dPUYhezkxq7MKJq0FA2ezDNbvHy-SqHmpoixiys5QTzG8Zd-1kwUIy57exgUqveyYz0vFku-OQIigyQhbSXdRZ2h7kedsGUUtPoApksP1VZ8KeTNGLAjglJML/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 160px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih2fuuCsnorSUU54QLn9IUipBDWONhLT3kwmdiakR2qwLuiOrI72BdrV0yKzys98pdx3QdlDBy0OKSI7w-WwrNoNDsQxs_WTcWUhxqijGwACRTqBV_4pfhWAggUaDar0-2peTSHkWOdVeR/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

3.

Kode gambar diatas

<style>
#search-box {
position: relative;
width: 100%;
margin: -15px 0px -20px 0;
}

#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

4.

Kode gambar diatas

<style>
.cf:before, .cf:after{
    content:"";
    display:table;
}

.cf:after{
    clear:both;
}

.cf{
    zoom:1;
}

 /* Form wrapper styling */
.search-wrapper {
width: 288px;
margin:10px 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}

/* Form text input */

.search-wrapper input {
width: 190px;
height: 20px;
padding: 10px;
float: left;
font: bold 14px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #EEE;
border-radius: 3px 0 0 3px;
}

.search-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.search-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}

.search-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

.search-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

/* Form submit button */
.search-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 78px;
font: bold 14px/35px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: white;
text-transform: uppercase;
background: #D83C3C;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}

.search-wrapper button:hover{
    background: #e54040;
}

.search-wrapper button:active,
.search-wrapper button:focus{
    background: #c42f2f;
    outline: 0;
}

.search-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 12px;
    left: -6px;
}

.search-wrapper button:hover:before{
    border-right-color: #e54040;
}

.search-wrapper button:focus:before,
.search-wrapper button:active:before{
        border-right-color: #c42f2f;
}  

.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}
</style>
<form action="/search" class="search-wrapper cf">
        <input type="text" method="get" name="q" placeholder="Search here..." required="" />
        <button type="submit">Search</button>
    </form>

5.

Kode gambar diatas

<style>
.serching{margin:-20px 0 5px 0;width:100%;}.serching form{border:1px solid #ddd;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:14px}.serching form input{display:block!important;margin:0;border:0;padding:5px 0;outline:0;height:20px;line-height:20px;font-size:13px;border-radius:0!important}.serch{float:left;width:85%!important;text-indent:10px}.serchg{float:right;width:15%!important;height:30px!important;padding:0!important;background:#48d;color:#fff;border:0!important;font-size:12px!important}
</style>
<div class='serching'><form action='/search?q='><input class='serch' name='q' placeholder='Cari...' title='Cari Tulisan di Sini' type='text'/><button class='serchg' type='submit'> GO </button><span style='clear: both;display:block'/></span></form></div>

6.

Kode gambar diatas

<form action=”/search” style=”display:inline;” method=”get”>
<input id=”s” name=”q” type=”search” placeholder=”cari artikel disini”/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
 width: 200px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
 position: relative;
    z-index: 2;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4eua8gzjeiGwQ6PorEF23rcHq7pD_LCsI3zcuzVKq1IPoKSrHKnlz_SXVjixYVDN288tsHiWGkVwD7aeTTcveX6yYWRxioVfgWSDp-MLUEmltm7vEorfhG8xD_k4BgaieLmqwiWCaEYA/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

7.

Kode gambar diatas

<style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhhLe-6gQY-IW26wUnHQqvfEpXbOUp7PTGUFa-72SUqCorRX-nKKa46-YEEaZYFwoHwB5rnUU0iOj8giL7lcXjB2gygNH1XV27QrsOQ6ZJ3vLx5zsIwIp9BuxNxsxveYVwIkoxgluE0S5Q/s1600/searchbar.png) no-repeat;
        width: 208px;
        height: 29px;
    }
    input:focus::-webkit-input-placeholder {
        color: transparent;
    }
    input:focus:-moz-placeholder {
        color: transparent;
    }
    input:focus::-moz-placeholder {
        color: transparent;
    }
    #searchbox input {
        outline: none;
    }
    #searchbox input[type="text"] {
        background: transparent;
        margin: 3px 0px 0px 20px;
        padding: 5px 0px 5px 0px;
        border-width: 0px;
        font-family: "Arial Narrow", Arial, sans-serif;
        font-size: 12px;
        color: #828282;
        width: 70%;
        display: inline-table;
        vertical-align: top;
    }
    #button-submit {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfh0-xSBHarOKmCgCv3RCQzrzDx21L_oCd1M-iCo4MpYd8Bi4iIKRS8pGJpl_uryOqQ5hWRQ0wn7vD0I2epl0IWEmGDes9oUW-VBQW5QTeA8jkGZtDj70oF39rP6dlO9wdm9tvIvIW_4pi/s1600/magnifier.png) no-repeat;
        border-width: 0px;
        cursor: pointer;
        margin-left: 10px;
        margin-top: 4px;
        width: 21px;
        height: 22px;
    }
    #button-submit:hover {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLLN5XfkIeML1TM8BFHrC5pL3fFQDch7GwKrz5z84t5WGPNZyoaW7CcjE54gEQfkcQYOT06VwCvwxdZNzfrfxe7p06IopEjfNVXKWctYasOvgNevLX7hA7iW4j5icawul6AwQl6a0pHvvB/s1600/magnifier-hover.png) no-repeat;
    }
    #button-submit:active {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLLN5XfkIeML1TM8BFHrC5pL3fFQDch7GwKrz5z84t5WGPNZyoaW7CcjE54gEQfkcQYOT06VwCvwxdZNzfrfxe7p06IopEjfNVXKWctYasOvgNevLX7hA7iW4j5icawul6AwQl6a0pHvvB/s1600/magnifier-hover.png) no-repeat;
        outline: none;
    }
    #button-submit::-moz-focus-inner {
        border: 0;
    }
    </style>

    <form id="searchbox" method="get" action="/search" autocomplete="off">
        <input name="q" type="text" size="15" placeholder="search..." />
        <input id="button-submit" type="submit" value="" />
    </form>

8.

Kode gambar diatas

<style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhxxYQrPE2P0OUdi4ZVWqQfvNsVnietTgMcWw3Scb1vkNRYPq1DF0c2pcoi-jpoBVWKhWzmXmKhyphenhyphenaQk_JYAhXTqXXPT0TdU_yS0JnwCPwnAdBIqpek0-4RzZW0mPMlh_r_5MYOZduc093N/s1600/search-box.png) no-repeat;
        height: 27px;
        width: 202px;
    }

    input:focus::-webkit-input-placeholder {
        color: transparent;
    }

    input:focus:-moz-placeholder {
        color: transparent;
    }

    input:focus::-moz-placeholder {
        color: transparent;
    }

    #searchbox input {
        outline: none;
    }

    #searchbox input[type="text"] {
        background: transparent;
        margin: 0px 0px 0px 12px;
        padding: 5px 0px 5px 0px;
        border-width: 0px;
        font-family: "Arial Narrow", Arial, sans-serif;
        font-size: 12px;
        font-style: italic;
        width: 77%;
        color: #828282;
        display: inline-table;
        vertical-align: top;
    }

    #button-submit {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgluK9vn5m0hiuoGQ3tbmG-M6xdzTbG_ltYM5az3AM5xHTo7Rr03TW0Awos6TWUTwft38xsOSzMaFKe7oiNAM78DRDWjHOIx4oBpRI56Ic7FRFqYj6MQQgXqbble-SMxOrj2_26XVjctRxE/s1600/search-button.png) no-repeat;
        border-width: 0px;
        cursor: pointer;
        width: 30px;
        height: 25px;
    }

    #button-submit:hover {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbvHxoMIiYfmf2qc1nNdyhfXn8YiM579hD2yPOdHchzuga8AeInGmHn7vAx6WkU6mZyhQbKoxGN8UEraHdIzO0buPEuIZkkHD9Ze3dmgRJDwAPxe-5JOegKlfq_bWJceRwPBWuwlnpR2AP/s1600/search-button-hover.png) no-repeat;
    }

    #button-submit::-moz-focus-inner {
        border: 0;
    }
    </style>

    <form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size="15" placeholder="search..." />
    <input id="button-submit" type="submit" value="" />
    </form>

9.

Kode gambar diatas

<style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb0l4rhTS6WVyRDbrookvodZTnd-RFit5Nl5tiwjBIU9hPOOO0SnIElMaXyJD_RShFQpJ_fDtDoe30o412GWgRf12h0QgEobiuX8f3dbiWLS9DUjQ7Jz248A8T_DoJARZxRjbI5YmUY7Iw/s1600/search-box1.png) no-repeat;
        width: 250px;
        height: 65px;
    }

    input:focus::-webkit-input-placeholder {
    color: transparent;
    }

    input:focus:-moz-placeholder {
    color: transparent;
    }

    input:focus::-moz-placeholder {
    color: transparent;
    }

    #searchbox input {
        outline: none;
    }

    #searchbox input[type="text"] {
        background: transparent;
        padding: 5px 0px 5px 20px;
        margin: 10px 15px 0px 0px;
        border-width: 0px;
        font-family: "Brush Script MT", cursive;
        font-size: 12px;
        color: #595959;
        width: 65%;
        font-weight: bold;
        display: inline-table;
        vertical-align: top;
    }

    #button-submit {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4VO89kro3iKbnkmMp5zCY-mjmDD_InG5B7cBOp_scu6utqjSsgd8eElqqriByWiee3cs8VxWfjzUtkmOQfJGw9UrGrDvtvQEvHyoUJFCcQ-YdrV9tfUjnnGSg9QVVl7Y_AGZL0byPixLw/s1600/magnifier.png) no-repeat;
        border-width: 0px;
        cursor: pointer;
        margin-top: 10px;
        width: 19px;
        height: 25px;
    }

    #button-submit:hover {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVj0JzNVj6GlL2FCuC_HmP-LQVRnptjB4WSh2qGExvX6VnyNuSxr_rzF0Zih7EqSGeK6elju8x7BxbhpBFDIEwAgCxKiXzApQHJPxCDozvhAvKibfkDmuyJVtO1mIcIWmPWt4gDro41Sq9/s1600/magnifier-hover.png) no-repeat;
    }

    #button-submit:active {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVj0JzNVj6GlL2FCuC_HmP-LQVRnptjB4WSh2qGExvX6VnyNuSxr_rzF0Zih7EqSGeK6elju8x7BxbhpBFDIEwAgCxKiXzApQHJPxCDozvhAvKibfkDmuyJVtO1mIcIWmPWt4gDro41Sq9/s1600/magnifier-hover.png) no-repeat;
        outline: none;
    }

    #button-submit::-moz-focus-inner {
        border: 0;
    }
    </style>

    <form id="searchbox" method="get" action="/search" autocomplete="off">
        <input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
        <input id="button-submit" type="submit" value="" />
    </form>

10.

Kode gambar diatas

<style>
    #searchbox {
    width: 280px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJh1pxyxnsYmFgduSgxC706PuXWKX_kGczQXT8qZz5adu9U8AysckzVHsoaeHvA10En6NBIbMwSZdi3L1LfFiCZuqG-nu9FxfvhHWNGOJSTXLxXmdH6WGwtHKWaNjssZ2lANbe3Ltu9N26/s1600/search-box.png) no-repeat;
    }

    #searchbox input {
        outline: none;
    }

    input:focus::-webkit-input-placeholder {
        color: transparent;
    }

    input:focus:-moz-placeholder {
        color: transparent;
    }

    input:focus::-moz-placeholder {
        color: transparent;
    }
    #searchbox input[type="text"] {
    background: transparent;
    border: 0px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 14px;
        color: #f2f2f2 !important;
        padding: 10px 35px 10px 20px;
        width: 220px;
    }
    #searchbox input[type="text"]:focus {
    color: #fff;
    }

    #button-submit{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5WV2zMizQ0i_6y2BlWs5OYRjYGLYh3TcxrY2_SJDNUAYCC843pWGyEEoAr7YLCosbI9KUzaogujjXIM7fz-W5m-d-KAAk3Q_Hy_kH1g6dOULkufyNsLXhVZPWxJTHNA4mFV8pMf-tGZ4O/s1600/search-icon.png) no-repeat;
    margin-left: -40px;
    border-width: 0px;
    width: 40px;
    height: 50px;
    }

    #button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPH_Dtzi7KZAHJYlDVwhc91wkJXJTErCwNKGjRt93URpmKz0tgJzWIhn9mUr4-fYHWwZmVY3cTJ7xUuB-xLrgOZGF3ee80TdzdP7c8b7bjY3Q3pbFWiJKRVTbL2mf9D8Bzzs-PT4PWt-Qf/s1600/search-icon-hover.png);
    }
    </style>

    <form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size="15" placeholder="Enter keywords here..." />
    <input id="button-submit" type="submit" value=" "/>
    </form>

11.

Kode gambar diatas

<form action="http://nama-blogmu.blogspot.com/search" method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

12.

Kode gambar diatas

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiO0m6BATttOof-A_RZG3e305SCVkdFvnemX4hemoAmRsJhM8MGX_I449w_oPlm676CwvMOI_1zJGGe3KWHKg0vE_IW22ZDeZv4Es7CvmW0AYjB130EG_lqkPVS5nvs-ZCL7tWWLZnoMad/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get">    <input type="text" id="a" name="q" value="Search Here..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>
</span>

13.

Kode gambar diatas

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Search Here...."/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
 width: 300px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
 position: relative;
    z-index: 2;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4eua8gzjeiGwQ6PorEF23rcHq7pD_LCsI3zcuzVKq1IPoKSrHKnlz_SXVjixYVDN288tsHiWGkVwD7aeTTcveX6yYWRxioVfgWSDp-MLUEmltm7vEorfhG8xD_k4BgaieLmqwiWCaEYA/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

14.

Kode gambar diatas

<style type="text/css">#mediablogger-searchbox {    border-radius: 5px;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVTBul3GbIGaLOIyd5g723kfd4Ut_v2Ev3mdpy_7qVKnc2XQGnG1sesL6v8HZWAfPpSEoXo2y8j5jwLjju-jFoO0yd7Mc8m5JtHP93Jx_X4S-mN-5RzeEEd_FXQKRJzlFB5w1h9CbRjp8q/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center transparent;    width: 307px;    height: 50px;    disaply: block;}  form#mediablogger-searchform {    display: block;    padding: 9px 16px;    margin: 0;}  form#mediablogger-searchform #s {    padding-left: 24px !important;    padding: 7.5px;    margin: 0;    width: 198px;    font-size: 16px;    font-family: georgia;    font-style: italic;    color: #666666;    vertical-align: top;    border: none;    background: transparent;}  form#mediablogger-searchform#sbutton {    margin: 0;    padding: 0;    height: 40px;    width: 74px;    vertical-align: top;    border: none;    background: transparent;}</style><div id="mediablogger-searchbox">    <form id="mediablogger-searchform" action="/search" method="get">        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'        onblur='if (this.value == "") {this.value = "Search...";}' /></form></div>

15.

Kode gambar diatas

<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUqb2vY9eOqus3NetIk-_pM8isukKRIeYEq4sE6l76UXC7wZUBxU7NWYZctu9gbTt72Vhm8pbrczJhYkcE2SvmXRFFTB7qYK_t2MS5pSatMsf0NOOxsTgpxiAI3ulDxSnHhIGGBAtnUPoO/s1600/lostsector-search-box-blue.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<center>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />
</form>
</div></center>

16.

Kode gambar diatas

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" value="Search this Site" type="text" id="searchBox" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" style="width: 150px;color:#636363;" vinput="" name="q" /> <input id="searchButton" value="Go" type="submit" /></form>

Nat itulah Cara Membuat Widget Kotak Search Terlengkap Tanpa Edit HTML,semoga kamu dapat menemukan widget yang sesuai dengan keinginan kamu disini ya. Semoga kedepannya Ngescript dapat menambah lagi Kode Script untuk membuat kotak searching atau kotak pencarian lebih bagus lagi.

Semoga dengan pembahasan kali ini dapat menambah pengalaman kita tentang edit mengedit seputar blog ya dan terima kasih sudah berkunjung ke blog yang sederhana ini,jika ada saran dan komentar jangan sungkan untuk menyampaikannya di kolom komentar yang sudah disediakan.Terima Kasih.

Salam 

Ngescript

Related Posts:

Tweet