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.
Rubah Tampilan 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.


No comments:

Sebelum menuliskan komentar, Anda harus baca syarat dibawah ini :
1. Tidak diperbolehkan menaruh link aktif,
2. Tidak boleh ada unsur huru hara dan pornograpi,
3. Jika membuat spam, komentar Anda akan dihapus, dan
4. Silahkan bertanya dan berbagi pikiran dengan kalimat yang baik dan membangun.

AK NEW SITE. Powered by Blogger.