Modifikasi Tampilan Google Search Custom / Kustom

Setelah kemarin saya nulis, baca Cara menghilangkan Logo Powered By Google Di Mesin Pencari Custom jadi punya ide untuk mengedit/merombak habis tampilan dari search custom google.

Berikut ini cara memodif-nya :
>> Login Blogger
>> Rancangan/Design
>> Edit Html
Cari kode seperti ini ]]></b:skin> (cari Ctrl+f) Kemudian copy kode di bawah ini dan paste kan tepat di atas kode ]]></b:skin>

/* Search */
.gsc-control-cse {
font-family: Arial, sans-serif;
border-color: #FFFFFF;
background-color: #FFFFFF;
}
.gsc-tabHeader.gsc-tabhInactive {
border-color: #E9E9E9;
background-color: #E9E9E9;
}
.gsc-tabHeader.gsc-tabhActive {
border-top-color: #FF9900;
border-left-color: #E9E9E9;
border-right-color: #E9E9E9;
background-color: #FFFFFF;
}
.gsc-tabsArea {
border-color: #E9E9E9;
}
.gsc-webResult.gsc-result {
border-color: #FFFFFF;
background-color: #FFFFFF;
}
.gsc-webResult.gsc-result:hover {
border-color: #FFFFFF;
background-color: #FFFFFF;
}
.gs-webResult.gs-result a.gs-title:link,
.gs-webResult.gs-result a.gs-title:link b {
color: #444444;
}
.gs-webResult.gs-result a.gs-title:visited,
.gs-webResult.gs-result a.gs-title:visited b {
color: #444444;
}
.gs-webResult.gs-result a.gs-title:hover,
.gs-webResult.gs-result a.gs-title:hover b {
color: #444444;
}
.gs-webResult.gs-result a.gs-title:active,
.gs-webResult.gs-result a.gs-title:active b {
color: #444444;
}
.gsc-cursor-page {
color: #444444;
}
a.gsc-trailing-more-results:link {
color: #444444;
}
.gs-webResult.gs-result .gs-snippet {
color: #000000;
}
.gs-webResult.gs-result .gs-visibleUrl {
color: #ffffff;
}
.gs-webResult.gs-result .gs-visibleUrl-short {
color: #ffffff;
}
.gsc-cursor-box {
border-color: #FFFFFF;
}
.gsc-results .gsc-cursor-page {
border-color: #E9E9E9;
background-color: #FFFFFF;
}
.gsc-results .gsc-cursor-page.gsc-cursor-current-page {
border-color: #FF9900;
background-color: #FFFFFF;
}
.gs-promotion.gs-result {
border-color: #444444;
background-color: #FFFFFF;
}
.gs-promotion.gs-result a.gs-title:link {
color: #444444;
}
.gs-promotion.gs-result a.gs-title:visited {
color: #444444;
}
.gs-promotion.gs-result a.gs-title:hover {
color: #444444;
}
.gs-promotion.gs-result a.gs-title:active {
color: #444444;
}
.gs-promotion.gs-result .gs-snippet {
color: #000000;
}
.gs-promotion.gs-result .gs-visibleUrl,
.gs-promotion.gs-result .gs-visibleUrl-short {
color: #999999;
}

#searchform {
position: absolute;
top: 220px;
width:300px;
left: 650px;
height: 37px;
}
#searchform label.screen-reader-text {
display: none;
}

input.gsc-input {

padding: 10px 1px;padding-left:10px;width:200px;
}

input.gsc-search-button{
border: none;
background: #ee7e06 url(http://photoserver.ws/images/vFLi4c7e90b2f332e.gif);
color: #fff;
font-size: 0.9em;
font-weight: bold;
text-transform: uppercase;
padding-top: 20px;
margin-left: 27px;
cursor: pointer;
text-indent: -9999em;
width: 79px;
height: 37px;
}
.gsc-branding-text, .gsc-branding-img-noclear,.gsc-branding-img {
display:none;
}

Jangan lupa simpan template anda...

Anda bisa sesuaikan tampilan-nya dengan mengedit Css di atas.
Selamat mencoba dan semoga bermanfaat...