CARA EDIT MEMODIFIKASI CUSTOM SEARCH BAR DI BLOGSPOT 2015

Saya telah menggunakan bar pencarian kustom dalam beberapa template gratis yang saya miliki di sini dan aku sadar bahwa aku tidak termasuk petunjuk tentang cara untuk menyesuaikan lebar.

Jika Anda menggunakan salah satu template gratis blog ini dengan bar pencarian kustom, berikut adalah cara untuk menyesuaikan lebar bar pencarian sehingga tidak akan terlihat menjengkelkan ketika Anda menyesuaikan lebar sidebar.

1. Masuk ke Template, lalu Edit HTML. Pastikan Anda sudah didukung template anda terlebih dahulu!
2. Cari kode ini:

masukan # searchinput {
background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia7IE4vhKT_NKGGUDQ2DeDWDHN3Kb0T2DvFv4ewYkMHKey27VfSHd2D1IiMB3Pd0jBhwvKaI4LeOK2Hq1cZwivCstM1qge8dfB0IoqFf9tAZYT5rOEOh501ogdDNB-4ZrEsKbsuC5LbRo/s1600/spyglass.png) no-repeat 5px 6px;
-moz-border-radius: 2px;
border-radius: 2px;
font-size: 14px;
height: 22px;
line-height: 1.2em;
padding: 4px 68 px 4px 30px;
}

3. Anda dapat menyesuaikan lebar dengan menyesuaikan padding, khususnya angka kedua (68 dalam contoh di atas).
4. Edit padding dan preview template anda terlebih dahulu untuk memastikan semuanya berbaris sebelum menyimpan semua perubahan ke template Anda!

Bagaimana menambahkan bar pencarian kustom

Saya tidak ingat di mana saya menemukan tutorial untuk bar pencarian kustom karena sudah begitu lama. Aku sangat menyesal saya tidak bisa menghubungkan ke tutorial itu! Anyway, berikut adalah cara untuk menambahkan jenis bar pencarian ke blog Blogger.

1. Pertama, back up template anda.
2. Lalu pergi ke Template, lalu Edit HTML.
3. Masukkan kode ini di atas]]> </ b: skin>

/ * Bentuk * /
input [type = text],
input [type = sandi],
textarea {
background: # f3f3f3;
-moz-box-shadow: inset 0 1px 1px RGBA (0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 1px RGBA (0,0,0,0.1);
box-shadow: inset 0 1px 1px RGBA (0,0,0,0.1);
border: 1px # ccc padat;
color: # 222;
}

input [type = text]: fokus,
textarea: fokus {
color: # 363636;
}

textarea {
padding-left: 0;
width: 98%;
}

input [type = text] {
padding: 2px;
}

masukan # searchinput {
background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia7IE4vhKT_NKGGUDQ2DeDWDHN3Kb0T2DvFv4ewYkMHKey27VfSHd2D1IiMB3Pd0jBhwvKaI4LeOK2Hq1cZwivCstM1qge8dfB0IoqFf9tAZYT5rOEOh501ogdDNB-4ZrEsKbsuC5LbRo/s1600/spyglass.png) no-repeat 5px 6px;
-moz-border-radius: 2px;
border-radius: 2px;
font-size: 14px;
height: 22px;
line-height: 1.2em;
padding: 4px 68px 4px 30px;
}

masukan # searchsubmit {
display: none;
}

4. Simpan perubahan ke template Anda.
5. Pergi ke Layout dan menambahkan HTML / Javascript gadget.
6. Copy / paste kode ini:

<Div align = "left">
<Form action = "http: ANDA URL BLOG / search / //" id = metode "searchform" = "mendapatkan">
<Class input = "lapangan" id = "searchinput" name = "q" placeholder = "Cari" type = "text" />
<Class input = "submit" id = "searchsubmit" name = "submit" type = "submit" value = "Search" />
</ Form>
</ Div>