Cara Modifikasi Google Custom Search ( CSE ) Box di Blog

Salam Blogger, Kali ini saya akan bagikan cara Cara Modifikasi Google Custom Search ( CSE ) Box di Blog. Untuk penjelasan dan pengertian Google Custom Search, Karena ini penting Saya harap Sobat Blogger berkenan membaca terlebih dahulu artikel tentang Cara Membuat Google Custom Search Engine (CSE) Terbaru Sebelum memulai memodifikasinya.

Langsung saja kepada tahap modifikasi Widget Search box-nya

Saya anggap Sobat Blogger telah membaca artikel Cara Membuat Google Custom Search Engine (CSE) Terbaru, sebelum kita lanjutkan ke langkah Modifikasi widget di bawah ini :

1. Masuk ke akun Bogger Sobat

2. Default kodenya seperti dibawah ini dari Google Custom Search :

(function() {

var cx = '006420419849788133608:qq-bsgwa0vk'; ( Id unik CSE Search engine Sobat )

var gcse = document.createElement('script');

gcse.type = 'text/javascript';

gcse.async = true;

gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +

'//www.google.com/cse/cse.js?cx=' + cx;

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(gcse, s);

})();

</script>

<gcse:search></gcse:search>

Kode ini bukan untuk dicopy paste...!!!!

3. Buat LAMAN >> klik pada Laman Baru >> Lalu pilih HTML ( jangan pilih compose ), Lalu copy pastekan Kode default ( bawaaan/asli ) dari Google Custom Search milik Sobat di dalamnya. Kemudian tekan Publikasikan

Catatan :

Setelah Publikasi Lihat LINK URLcustom search Sobat pada adress bar ( sementara simpan link URL di notepad ).

4. Masuk ke TEMPLATE >> EDIT HTML ( BACKUP Template Sobat dahulu, Penting !!!! )

5. Cari kode ]]></b:skin>

6. Letakkan kode CSS dibawah ini sebelum kode ]]></b:skin>

7. Silahkan Sobat pilih Kode CSS Search Box Modifikasinya :

Modifikasi kotak Search box # 1

Kode CSS

#searchbox{

background: #eaf8fc;

background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));

-moz-border-radius: 35px;

border-radius: 35px;

border-width: 1px;

border-style: solid;

border-color: #c4d9df #a4c3ca #83afb7;

width: 250px;

height: 35px;

padding: 10px;

margin: 10px auto 10px;

overflow: hidden;

}

#search, #submit

{

float: left;

}

#search

{

padding: 5px 9px;

height: 23px;

width: 380px;

border: 1px solid #a4c3ca;

font: normal 13px 'trebuchet MS', arial, helvetica;

background: #f1f1f1;

-moz-border-radius: 50px 3px 3px 50px;

border-radius: 50px 3px 3px 50px;

-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);

}

#submit

{

background: #6cbb6b;

background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));

-moz-border-radius: 3px 50px 50px 3px;

border-radius: 3px 50px 50px 3px;

border-width: 1px;

border-style: solid;

border-color: #7eba7c #578e57 #447d43;

-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;

-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;

box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;

height: 35px;

margin: 0 0 0 10px;

padding: 0;

width: 70px;

cursor: pointer;

font: bold 14px Arial, Helvetica;

color: #23441e;

text-shadow: 0 1px 0 rgba(255,255,255,0.5);

}

#submit:hover

{

background: #95d788;

background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));

}

#submit:active

{

background: #95d788;

outline: none;

-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;

-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;

}

#submit::-moz-focus-inner

{

border: none;

}

/* ----------------------- */

#search::-webkit-input-placeholder {

color: #9c9c9c;

font-style: italic;

}

#search:-moz-placeholder {

color: #9c9c9c;

font-style: italic;

}

#search.placeholder {

color: #9c9c9c !important;

font-style: italic;

}

#search:focus

{

border-color: #8badb4;

background: #fff;

outline: none;

}

>> Masukkan kode CSS diatas sebelum kode ]]></b:skin> tekan Simpan Template

>> Langkah Selanjutnya Sobat masuk Ke TATA LETAK >> Add Gadget Letakkan kode HTML di bawah ini di dalam kotak HTML-nya :

HTML

</form>

“ Kustomisasi “

1. Gantikan warna biru dengan ID unik custom search Sobat

2. Ganrtikan warna merah dengan URL yang sudah sobat buat pada langkah ke-3 ( di atas )

>> Simpan

Search Box Modifikasi # 2

CSS

/* search form

-------------------------------------- */

.searchform {

display: inline-block;

zoom: 1; /* ie7 hack for display:inline-block */

*display: inline;

border: solid 1px #d2d2d2;

padding: 3px 5px;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);

-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);

box-shadow: 0 1px 0px rgba(0,0,0,.1);

background: #f1f1f1;

background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));

background: -moz-linear-gradient(top, #fff, #ededed);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */

}

.searchform input {

font: normal 12px/100% Arial, Helvetica, sans-serif;

}

.searchform .searchfield {

background: #fff;

padding: 6px 6px 6px 8px;

width: 202px;

border: solid 1px #bcbbbb;

outline: none;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

}

.searchform .searchbutton {

color: #fff;

border: solid 1px #494949;

font-size: 11px;

height: 27px;

width: 27px;

text-shadow: 0 1px 1px rgba(0,0,0,.6);

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

background: #5f5f5f;

background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));

background: -moz-linear-gradient(top, #9e9e9e, #454545);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */

}

>> Masukkan kode CSS diatas sebelum kode ]]></b:skin> tekan Simpan Template

>> Langkah Selanjutnya Sobat masuk Ke TATA LETAK >> Add Gadget Letakkan kode HTML di bawah ini di dalam kotak HTML-nya :

</form>

>> Kustomisasi caranya sama seperti diatas

>> Simpan

GB3

#search-form {

background: #e1e1e1; /* Fallback color for non-css3 browsers */

width: 365px;

/* Gradients */

background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));

background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);

/* Rounded Corners */

border-radius: 17px;

-webkit-border-radius: 17px;

-moz-border-radius: 17px;

/* Shadows */

box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);

-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);

-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);

}

/*** TEXT BOX ***/

input[type="text"]{

background: #fafafa; /* Fallback color for non-css3 browsers */

/* Gradients */

background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));

background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);

border: 0;

border-bottom: 1px solid #fff;

border-right: 1px solid rgba(255,255,255,.8);

font-size: 16px;

margin: 4px;

padding: 5px;

width: 250px;

/* Rounded Corners */

border-radius: 17px;

-webkit-border-radius: 17px;

-moz-border-radius: 17px;

/* Shadows */

box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);

-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);

-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);

}

/*** USER IS FOCUSED ON TEXT BOX ***/

input[type="text"]:focus{

outline: none;

background: #fff; /* Fallback color for non-css3 browsers */

/* Gradients */

background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));

background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);

}

/*** SEARCH BUTTON ***/

input[type="submit"]{

background: #44921f;/* Fallback color for non-css3 browsers */

/* Gradients */

background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));

background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);

border: 0;

color: #eee;

cursor: pointer;

float: right;

font: 16px Arial, Helvetica, sans-serif;

font-weight: bold;

height: 30px;

margin: 4px 4px 0;

text-shadow: 0 -1px 0 rgba(0,0,0,.3);

width: 84px;

outline: none;

/* Rounded Corners */

border-radius: 30px;

-webkit-border-radius: 30px;

-moz-border-radius: 30px;

/* Shadows */

box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);

-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);

-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);

}

/*** SEARCH BUTTON HOVER ***/

input[type="submit"]:hover {

background: #4ea923; /* Fallback color for non-css3 browsers */

/* Gradients */

background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));

background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);

}

input[type="submit"]:active {

background: #4ea923; /* Fallback color for non-css3 browsers */

/* Gradients */

background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));

background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);

}

>> Masukkan kode CSS diatas sebelum kode ]]></b:skin> tekan Simpan Template

>> Langkah Selanjutnya Sobat masuk Ke TATA LETAK >> Add Gadget Letakkan kode HTML di bawah ini di dalam kotak HTML-nya :

HTML

</form>

>> Kustomisasi caranya sama seperti diatas

>> Simpan

Search Box Modifikasi # 3

CSS

#search-form {

background: #e1e1e1; /* Fallback color for non-css3 browsers */

width: 365px;

/* Gradients */

background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));

background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);

/* Rounded Corners */

border-radius: 17px;

-webkit-border-radius: 17px;

-moz-border-radius: 17px;

/* Shadows */

box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);

-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);

-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);

}

/*** TEXT BOX ***/

input[type="text"]{

background: #fafafa; /* Fallback color for non-css3 browsers */

/* Gradients */

background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));

background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);

border: 0;

border-bottom: 1px solid #fff;

border-right: 1px solid rgba(255,255,255,.8);

font-size: 16px;

margin: 4px;

padding: 5px;

width: 250px;

/* Rounded Corners */

border-radius: 17px;

-webkit-border-radius: 17px;

-moz-border-radius: 17px;

/* Shadows */

box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);

-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);

-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);

}

/*** USER IS FOCUSED ON TEXT BOX ***/

input[type="text"]:focus{

outline: none;

background: #fff; /* Fallback color for non-css3 browsers */

/* Gradients */

background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));

background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);

}

/*** SEARCH BUTTON ***/

input[type="submit"]{

background: #44921f;/* Fallback color for non-css3 browsers */

/* Gradients */

background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));

background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);

border: 0;

color: #eee;

cursor: pointer;

float: right;

font: 16px Arial, Helvetica, sans-serif;

font-weight: bold;

height: 30px;

margin: 4px 4px 0;

text-shadow: 0 -1px 0 rgba(0,0,0,.3);

width: 84px;

outline: none;

/* Rounded Corners */

border-radius: 30px;

-webkit-border-radius: 30px;

-moz-border-radius: 30px;

/* Shadows */

box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);

-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);

-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);

}

/*** SEARCH BUTTON HOVER ***/

input[type="submit"]:hover {

background: #4ea923; /* Fallback color for non-css3 browsers */

/* Gradients */

background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));

background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);

}

input[type="submit"]:active {

background: #4ea923; /* Fallback color for non-css3 browsers */

/* Gradients */

background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));

background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);

}

>> Masukkan kode CSS diatas sebelum kode ]]></b:skin> tekan Simpan Template

>> Langkah Selanjutnya Sobat masuk Ke TATA LETAK >> Add Gadget Letakkan kode HTML di bawah ini di dalam kotak HTML-nya :

HTML

</form>

>> Kustomisasi caranya sama seperti diatas

>> Simpan

Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel Cara Modifikasi Google Custom Search ( CSE ) Box di Blog. Semoga bermanfaat dan terima kasih..

Wong Pasuruan

Cara Modifikasi Google Custom Search ( CSE ) Box di Blog

4 comments: