Membuat hasil pencarian google custom tampak lebih menarik

Tampilan hasil pencarian google custom
Baiklah... kali ini saya akan kembali menulis tentang tutorial blog. Hal ini berkaitan dengan cara memperindah hasil dari mesin pencarian google custom. Coba sobat gunakan mesin pencarian google custom pada blog ini, seperti itulah nanti mesin pencarian sobat, itu tentu saja jika sobat mengikuti intruksi yang akan saya berikan... :)

Pertama-tama sebelum kita lanjut membahas masalah ini sebaiknya sobat membaca dulu artikel sebelumnya tentang membuat mesin pencarian dengan google custom dan cara pemasangan search engine pada blog. Jika sobat sudah membacanya... mari kita lanjutkan... hehehe..

Ok kita mulai..
  1. Pertama sobat harus login dulu pada blog sobat...(*wajib)
  2. Buka halaman untuk hasil mesin pencarian sobat. Jika belum ada buat yang baru.
  3. Halaman Blog
  4. Masukkan kode berikut di halaman tersebut pada bagian HTML
    <style type='text/css'>
    .gsc-control-cse {
    font-family: Arial, sans-serif;
    border-color: #FFFFFF;
    background-color: #FFFFFF;
    }
    .gsc-control-cse .gsc-table-result {
    font-family: Arial, sans-serif;
    }
    input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
    border-color: #D9D9D9;
    }
    input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
    border-color: #D9D9D9;
    background-color: #660000;
    background-image: none;
    }
    .gsc-tabHeader.gsc-tabhInactive {
    border-color: #D9D9D9;
    background-color: #FFFFFF;
    }
    .gsc-tabHeader.gsc-tabhActive {
    border-color: #D9D9D9;
    border-bottom-color: #FFFFFF;
    background-color: #FFFFFF;
    }
    .gsc-tabsArea {
    border-color: #CCCCCC;
    }
    .gsc-webResult.gsc-result,
    .gsc-results .gsc-imageResult {
    border-color: #D9D9D9;
    background-color: #fff;
    }
    .gsc-webResult.gsc-result:hover,
    .gsc-imageResult:hover {
    border-color: #D9D9D9;
    background-color: #fff;
    }
    .gs-webResult.gs-result a.gs-title:link,
    .gs-webResult.gs-result a.gs-title:link b,
    .gs-imageResult a.gs-title:link,
    .gs-imageResult a.gs-title:link b {
    color: #003399;
    }
    .gs-webResult.gs-result a.gs-title:visited,
    .gs-webResult.gs-result a.gs-title:visited b,
    .gs-imageResult a.gs-title:visited,
    .gs-imageResult a.gs-title:visited b {
    color: #003399;
    }
    .gs-webResult.gs-result a.gs-title:hover,
    .gs-webResult.gs-result a.gs-title:hover b,
    .gs-imageResult a.gs-title:hover,
    .gs-imageResult a.gs-title:hover b {
    color: #003399;
    }
    .gs-webResult.gs-result a.gs-title:active,
    .gs-webResult.gs-result a.gs-title:active b,
    .gs-imageResult a.gs-title:active,
    .gs-imageResult a.gs-title:active b {
    color: #003399;
    }
    .gsc-cursor-page {
    color: #003399;
    }
    a.gsc-trailing-more-results:link {
    color: #003399;
    }
    .gs-webResult .gs-snippet,
    .gs-imageResult .gs-snippet,
    .gs-fileFormatType {
    color: #000000;
    }
    .gs-webResult div.gs-visibleUrl,
    .gs-imageResult div.gs-visibleUrl {
    color: #3b3535;
    }
    .gs-webResult div.gs-visibleUrl-short {
    color: #3b3535;
    }
    .gs-webResult div.gs-visibleUrl-short {
    display: none;
    }
    .gs-webResult div.gs-visibleUrl-long {
    display: block;
    }
    .gs-promotion div.gs-visibleUrl-short {
    display: block;
    }
    .gs-promotion div.gs-visibleUrl-long {
    display: none;
    }
    .gsc-cursor-box {
    border-color: #FFFFFF;
    }
    .gsc-webResult.gsc-result.gsc-promotion {
    border-color: #F6F6F6;
    background-color: #F6F6F6;
    }
    .gsc-completion-title {
    color: #003399;
    }
    .gsc-completion-snippet {
    color: #000000;
    }
    .gs-promotion a.gs-title:link,
    .gs-promotion a.gs-title:link *,
    .gs-promotion .gs-snippet a:link {
    color: #1155CC;
    }
    .gs-promotion a.gs-title:visited,
    .gs-promotion a.gs-title:visited *,
    .gs-promotion .gs-snippet a:visited {
    color: #1155CC;
    }
    .gs-promotion a.gs-title:hover,
    .gs-promotion a.gs-title:hover *,
    .gs-promotion .gs-snippet a:hover {
    color: #1155CC;
    }
    .gs-promotion a.gs-title:active,
    .gs-promotion a.gs-title:active *,
    .gs-promotion .gs-snippet a:active {
    color: #1155CC;
    }
    .gs-promotion .gs-snippet,
    .gs-promotion .gs-title .gs-promotion-title-right,
    .gs-promotion .gs-title .gs-promotion-title-right *  {
    color: #666666;
    }
    .gs-promotion .gs-visibleUrl,
    .gs-promotion .gs-visibleUrl-short {
    color: #009933;
    }
    </style>
  5. Lalu masukkan kode hasil pencarian google custom lihat disini di bawah code css diatas
  6. Simpan halaman pencarian sobat dan lihat hasilnya
Demikian tutorial singkat ini semoga bermanfaat
Selanjutnya
« Sebelumnya
Sebelumnya
Selanjutnya »