Letakkan kode berikut:
<script>
var loadCseCallback = function () {
// Forward hijacked focus to the real CSE searchbox
document.getElementById("gsc-i-id1").focus();
// @TODO - handling more than one CSE on one page
};
window.__gcse = {
callback: loadCseCallback
};
function loadCSE(i) {
// We are temporary hijacking users focus on the input field and now notifying
// them to wait, with: horizontal throbber and no border on .gsc-placeholder-input
i.style.backgroundImage = 'url(data:image/gif;base64,R0lGODlhEgAEAKECAAAAAH9/f////////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJDwABACwAAAAAEgAEAAACB4yPqcvtrwoAIfkECQ8AAAAsAAAAABIABAAAAgyMA6m7hwyTi3FSVgAAIfkECQ8AAgAsAAAAABIABAAAAhGEIRkb6XmQYs9Fx1oVd64tFAAh+QQJDwADACwAAAAAEgAEAAACEYQxeZjhsdKI7dF55INZ9bEVACH5BAkPAAMALAAAAAASAAQAAAIRjDMJCzkMDlLMQWkrXXg3XwAAIfkECQ8AAwAsAAAAABIABAAAAhGcP6Fx4IDOYubBmFZ7OKvtFAAh+QQJDwADACwAAAAAEgAEAAACDJyPGBvpx9pzcVJWAAA7)';
i.style.borderColor = '#FFFFFF';
var cx = '0025152312xxxxxx4:mi0p7qogfqy';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
}
</script>
<style>
/* .gsc-placeholder-* is non-functional input-text and submit-button pair, which looks like CSE */
.gsc-placeholder-input {
background : url(data:image/gif;base64,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) 0% 50% no-repeat rgb(255, 255, 255);
border : 1px solid rgb(217, 217, 217);
height : 25px;
width : 100%;
}
.gsc-placeholder-search-button {
background : rgb(206, 206, 206) none;
border-radius : 2px;
border : 1px solid rgb(102, 102, 102);
float : right;
padding : 6px 27px;
}
.gsc-placeholder-table {
padding : 1em;
}
</style>
<gcse:search>
<div class="gsc-placeholder-table">
<input class="gsc-placeholder-search-button" title="search" type="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDU0NDVDNjI0MUE4MTFFMTk3OURDRDgxOTNEMUU3NTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjlFQzUyODQ0MUIyMTFFMTk3OURDRDgxOTNEMUU3NTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENTQ0NUM2MDQxQTgxMUUxOTc5RENEODE5M0QxRTc1NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENTQ0NUM2MTQxQTgxMUUxOTc5RENEODE5M0QxRTc1NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuhQNCgAAABuSURBVHjaYmCAgv///zcA8fv/CABiNzDgAkDJ8/9xg/PYNDQgmRyAJB6AZHMDuiaYRAAWAwNgBqJLgAEep2PIMzGQAUCaPsCcgs15UOYHqgSEAJYgf4/GL8DlYayRC9KAM77wASSX0Ffje4AAAwDkqAbz4euqrgAAAABJRU5ErkJggg==" />
<div style="overflow: hidden; padding-right: 1em;">
<input onclick="loadCSE(this);" type="text" class="gsc-placeholder-input" title="search" />
</div>
</div>
</gcse:search>