Monday, November 21, 2016
Cara Modifikasi Google Custom Search CSE Box di Blog
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 :
<script>
(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 ).
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: -moz-linear-gradient(#fff, #d4e8ec);
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: -moz-linear-gradient(#95d788, #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: -moz-linear-gradient(#6cbb6b, #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
Available link for download
