Bagaimana Mengubah Tampilan Google Custom Search

Cari, kirim ke FB | Tweet | WA | Print!.

Kali ini saya ingin berbagi tentang bagaimana caranya untuk mengubah tampilan Google Custom Search dengan menggunakan CSS pada blog WordPress self-hosted. Tampilan Google Custom Search aseli memang tidak menarik, sehingga tidak heran orang ingin mengubah tampilannya.

Meskipun ada beberapa pilihan tampilan Google Custom Search, namun hanya satu CSS saja yang disajikan pada tulisan ini. CSS ini digunakan di Aroengbinang Travelog ketika tulisan ini dibuat. Maklum seriang apa yang saya telah pakai, kemudian digantikan dengan yang lain.

Untuk mengubah tampilan Google Custom Search anda seperti pada TAProject:

  1. Back-up style.css, lalu buka file style.css-nya.
  2. Sisipkan kode CSS berikut ini:
    #search-form {
     background: #e1e1e1; /* Fallback color for non-css3 browsers */
     width: 227px;
    
     /* 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: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
    
     /* 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: 14px;
     margin: 4px 0 4px 4px;
     padding: 1px;
     width: 146px;
    
     /* Rounded Corners */
     border-radius: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
    
     /* 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: 12px Arial, Helvetica, sans-serif;
     font-weight: bold;
     height: 20px;
     padding:0 0 2px 0;
     margin: 4px 4px 0 0;
     text-shadow: 0 -1px 0 rgba(0,0,0,.3);
     width: 64px;
     outline: none;
    
     /* Rounded Corners */
     border-radius: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
    
     /* 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%);
    }
  3. Save
  4. Klik Appearance > Widget, buka widget Google Custom Search anda, sisipkan kode id=”search-form” lalu Save.

Anda juga bisa melakukan modifikasi tampilan Google Custom Search dengan mengubah parameter di atas agar sesuai dengan theme dan selera anda.

Untuk melihat kode CSS aselinya, dan pilihan CSS lain, silahkan kunjungi blog ini.



Kirim ke FB | Tweet | WA | Email | Print!

Home » Blog » WordPress » Bagaimana Mengubah Tampilan Google Custom Search
Tag:

Oleh Bambang Aroengbinang. Lahir di Desa Mersi, Purwokerto, Jawa Tengah, sekarang tinggal di Jakarta. Blogger dan pejalan musiman yang senang berkunjung ke situs, makam, dan tempat bersejarah. Menyukai pemandangan daratan subur dan pegunungan hijau ketimbang laut. Kirim pesan ke BA lewat email, atau lewat WA jika ingin menjadi penulis di Aroengbinang. Diperbaiki 21 Maret 2017.

Lalu «
Baru » »