Cara Merubah Tampilan Google Costum Search

Pada sebelumnya saya share artikel Cara Buat Google Costum Search Ringan di Blog. Dan kali ini saya bagikan buat anda artikel Cara Merubah tampilan Google Costum Search. Hal ini akan membuat widget Google Costum Search anda akan menjadi lebih keren tentunya. wkwkwk.

Cara Merubah Tampilan Google Costum Search

Bagi anda yang memang belum mempunyai widget ini atau bila anda sudah punya, tetapi widgetnya memperlambat loading blog anda, silahkan saja baca artikel Cara Buat Google Costum Search.

Untuk penjelasan dan kegunaannya, memang Google Costum Search adalah widget Search Blog yang sangat berguna untuk SEO dan mempermudah bagi para pembaca/pengunjung blog, untuk mencari artikel di blog anda sesuai yang pengunjung ketik di Widget Search blog anda. Selain itu Google Costum Search juga berguna untuk menghasilkan uang tambahan bagi blog yang sudah mempunyai adsense google.

Nah, sekarang kembali kepembahasan kita, yaitu cara Merubah Tampilan Google Costum Search ada dibawah ini :

Ganti java scrift widget google costum anda yang ada pada Tata Letak widget dengan java scrift dibawah ini, dan ganti text yang berwarna erange dengan ID Google Costum anda dan URL Postingan Anda.
<div class='menusearch'>
<form action='URL Postingan' class='searchform'>
<input name='cx' type='hidden' value='partner-pub-ID Mesin Telusur'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='searchfield' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search article here... !!'/>
<button type='submit' class='search' title='Search Now!'><img alt='search button' height='21' src='http://2.bp.blogspot.com/-2jHjDZuQt-Q/Uluj1K7q-AI/AAAAAAAAaPE/k2uOoGDyrjw/s1600/search.png' title='Search Now!' width='21'/>
</button>
</form>
</div>
Lalu simpan widget yang telah anda ganti tersebut.
Setelah itu masuk ke bagian Tempelate dan Edite Tempelate anda. Dan masukan kode dibawah ini dibawah kode ]]></b:skin> atau kode </style>. (cari dengan menggunakan CTRL+F).
.menusearch {background: #fff;border-radius: 2px;}
.search-form, #searchfield {color:gray;width:35%;padding:6px 70px 6px 10px;font-style: italic;font-size: 13px;font-family:arial, serif;;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px solid #ccc;border-radius:2px;}
.search, .search:hover{background-color:#4D90FE;width:60px;padding:2px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px 0;font-size:13px;cursor:pointer;border:none;position:relative;}
.search:hover{border:1px solid #AAA}
.search:focus{border:1px solid #4D90FE;outline:none;color:black;}
Demo
 
Atau masukan kode CSS dibawah ini :
.menusearch {background: #fff;border-radius: 2px;}
.search-form, #searchfield {color:#003283;width:35%;padding:6px 70px 6px 10px;font-style: italic;font-size: 13px;font-family:arial, serif;;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px solid #003283;border-radius:2px;}
.search, .search:hover{background-color:#003283;width:60px;padding:2px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px 0;font-size:13px;cursor:pointer;border:none;position:relative;}
.search:hover{border:2px solid #AAA}
.search:focus{border:1px solid #003283;outline:none;color:black;}
Demo

Semoga bermanfaat sobat, dan bagi anda yang memang kurang puas dengan tampilannya. Silahkan berkomentar, nanti saya akan memberikan kode CSS lagi. Dan maaf hanya segini saya berikan tampilan menunya, masalahnya saya lagi buru-buru ada keperluan.

Sekian dan terimakasih.
Perhatian Copas !!! "Mohon bagi anda para sahabat blog, jangan sekali-kali copy paste dengan tanpa mencantumkan link sumber kami dan menulis tanpa anda tulis dalam narasi atau kalimat anda sendiri saya akan mengapus url anda sesuai kebijakan privasi google DMCA/DMCA.com. Atas perhatiannya, saya ucapkan terimakasih."
Next
Previous

No comments

aturan berkomentar pada blog ini !.
1. berkomentarlah dengan baik, sesuai konten yang dibahas dan berkualitas.
2. kalimat yang tidak berkenan saya akan hapus.
3. jika menaruh "LINK HIDUP" akan dimasukan ke folder spam.
4. dilarang mempromosikan produk melalui komentar.

Emoticon