Loading
  • Home
  • Link
  • Welcome
  • Tutorial
  • Tips
  • Jamu Gendong
Related Posts Plugin for WordPress, Blogger...
Share

Friday, July 19, 2013

Search Engine di Menu Bar (Top Menu)

TUTORIAL MEMBUAT KOTAK SEARCH DI MENU BAR

Hasil yang saya buat belum sempurna betul karena masih kelihatan kotak kolom dan tombol menu search nya masih mleber keluar.

Saya ingin melebarkan top menu yang dibawah header saja agar hasilnya menjadi lebih sempurna, gimana ya caranya?


Dalam tutorial ini kita membutuhkan fitur CSE = Custom Search Engine. 
Silakan akses di sini: http://www.google.com/cse/create/new

Cara membuat Search Engine di Menu Bar (Top Menu):

  1. Save dulu template nya agar kalau terjadi apa2 bisa diperbaiki lagi
  2. Buka alamat web ini https://www.google.com/cse/create/new
    (sebaiknya buka pakai browser Google Chrome)
    CSE adalah Custum Search Engine
    Kita akan buat search engine dari google yang khusus buat website kita
    Tuliskan alamat situs kita misalnya: www.anitanetphotography.com
    Lalu isikan bahasa yang kita gunakan dalam situs tersebut
    Disini mesin telusur saya akan dinamai Anitanetphotography (default)
    nama ini bisa kita ganti
  3. Klik Buat
    akan muncul window baru, artinya sudah berhasil
  4. Klik Dapatkan Kode
    Maka akan muncul window code
    (jangan copy dulu codenya)
    Karena kita mau mengeditnya dulu
  5. Klik Edit Mesin Telusur
    Maka akan muncul window baru
  6. Klik Tampilan dan Nuansa
    Maka akan muncul window baru
  7. Pilih Hamparan (two Column)
    Hamparan=  Menampilkan hasil penelusuran dalam bentuk hamparan
  8. Klik tombol "Simpan & Dapatkan Code" (klik kotak yang paling kanan)
  9. Maka akan terbuka window baru yang berisi script
    (jangan copy dulu scripnya)
  10. Karena kita mau memasukkannya ke menu bar (top menu) maka kita harus mendapatkan code  V1 
  11. Klik tombo; "Get the V1 code"
    Maka akan terbuka window baru berisi code
  12. Copy code tersebut, code nya seperti ini:

    <div id='cse-search-form' style='width: 100%;'>Loading</div>
    <script src='//www.google.com/jsapi' type='text/javascript'></script>
    <script type='text/javascript'>
    google.load('search', '1', {language: 'id', style: google.loader.themes.V2_DEFAULT});
    google.setOnLoadCallback(function() {
    var customSearchOptions = {};
    var orderByOptions = {};
    orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}];
    customSearchOptions['enableOrderBy'] = true;
    customSearchOptions['orderByOptions'] = orderByOptions;
    var customSearchControl = new google.search.CustomSearchControl('001962328210864988379:e55iq0rvo3s', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setSearchFormRoot('cse-search-form');
    options.setAutoComplete(true);
    customSearchControl.draw('cse', options);
    }, true);
    </script>
    <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: #666666;
    background-color: #CECECE;
    background-image: none;
    filter: none;

    }
    .gsc-tabHeader.gsc-tabhInactive {
    border-color: #FF9900;
    background-color: #FFFFFF;
    }
    .gsc-tabHeader.gsc-tabhActive {
    border-color: #E9E9E9;
    background-color: #E9E9E9;
    border-bottom-color: #FF9900
    }
    .gsc-tabsArea {
    border-color: #FF9900;
    }
    .gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
    }
    .gsc-webResult.gsc-result:hover, .gsc-imageResult:hover {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
    }
    .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: #0000CC;
    }
    .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: #0000CC;
    }
    .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: #0000CC;
    }
    .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: #0000CC;
    }
    .gsc-cursor-page {
    color: #0000CC;
    }
    a.gsc-trailing-more-results:link {
    color: #0000CC;
    }
    .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {
    color: #000000;
    }
    .gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl {
    color: #008000;
    }
    .gs-webResult div.gs-visibleUrl-short {
    color: #008000;
    }
    .gs-webResult div.gs-visibleUrl-short {
    display: none;
    }
    .gs-webResult div.gs-visibleUrl-long {
    display: block;
    }
    .gs-promotion div.gs-visibleUrl-short {
    display: none;
    }
    .gs-promotion div.gs-visibleUrl-long {
    display: block;
    }
    .gsc-cursor-box {
    border-color: #FFFFFF;
    }
    .gsc-results .gsc-cursor-box .gsc-cursor-page {
    border-color: #E9E9E9;
    background-color: #FFFFFF;
    color: #0000CC;
    }
    .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    border-color: #FF9900;
    background-color: #FFFFFF;
    color: #0000CC;
    }
    .gsc-webResult.gsc-result.gsc-promotion {
    border-color: #336699;
    background-color: #FFFFFF;
    }
    .gsc-completion-title {
    color: #0000CC;
    }
    .gsc-completion-snippet {
    color: #000000;
    }
    .gs-promotion a.gs-title:link,.gs-promotion a.gs-title:link *,.gs-promotion .gs-snippet a:link {
    color: #0000CC;
    }
    .gs-promotion a.gs-title:visited,.gs-promotion a.gs-title:visited *,.gs-promotion .gs-snippet a:visited {
    color: #0000CC;
    }
    .gs-promotion a.gs-title:hover,.gs-promotion a.gs-title:hover *,.gs-promotion .gs-snippet a:hover {
    color: #0000CC;
    }
    .gs-promotion a.gs-title:active,.gs-promotion a.gs-title:active *,.gs-promotion .gs-snippet a:active {
    color: #0000CC;
    }
    .gs-promotion .gs-snippet, .gs-promotion .gs-title .gs-promotion-title-right, .gs-promotion .gs-title .gs-promotion-title-right * {
    color: #000000;
    }
    .gs-promotion .gs-visibleUrl,.gs-promotion .gs-visibleUrl-short {
    color: #008000;
    }
    </style>
  13. Sekarang kita buka Dashboard Blogspot --->> Template ---->>> Edit HTML
  14. Lalu cari tempat menu drop down yang kemarin kita buat
    yaitu dibawah tabs-outer
    lalu pastekan code tersebut tepat dibawah <ul>
  15. Klik Simpan Template
  16. Lihat Blog
    Perhatikan kolom search enginenya menjadi panjang, biar kan saja jangan bingung hehehe....
  17. Kita kembali ke EDIT HTML
    ubah : <div id='cse-search-form' style='width: 100%;'>
    menjadi (kecilkan width nya menjadi 30%):
    <div id='cse-search-form' style='width: 30%;'>
  18. Sekarang bagaimana caranya menu search tsb menjadi ke kanan
    (saat ini berda di sebelah kiri)
  19. Tambahkan tulisan float:right;
    Jadi hasilnya seperti ini:
    <div id='cse-search-form' style='width: 30%; float:right;'>
  20. Save Template
  21. Ganti background search
    ganti tulisan background-color: #CECECE;
    menjadi: background-color: #a7b88c;
    Asalnya:
    input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
    border-color: #666666;
    background-color: #CECECE;
    background-image: none;
    filter: none;
    Dirubah menjadi seperti ini:
    input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
    border-color: #666666;
    background-color: #a7b88c;
    background-image: none;
    filter: none;
  22. Lihat Blog, sekarang ganti border color nya
    border-color: #666666;  --->>> border-color: #86522b;
    Ternyata semua warna border tombol yang ada di blog menjadi berubah
  23. Lihat blog,  Sekarang kita mau memperkecil buttonnya yang mleber keluar itu
    Aduh... belum berhasil
  24. Jika kita ketikkan tulisan lalu kita seacrh, maka tidak akan terjadi apa2
    Karena kita belum memasang kode penelusuran
  25. Sekarang kita Klik tulisan dibawah code yang tadi kita ambil
    Klik tombol "Berikutnya Dapatkan Kode untuk hasil penelusuran"
  26. Maka akan muncul code penelusuran seperti ini:
    <div id='cse' style='width: 100%;'></div>
  27. Copy code tersebut
  28. Lalu buka Dashboard ---->  template ----->>>Edit HTML
  29. Pastekan scode penelusuran tersebut dibawah tulisan tabs-outer
    atau dibawah <div class='tabs-outer'>
  30. Ternyata kurang baik kalau ditaruh disini karena kalau kita serach maka top menu jadi hilang
    Kurang bagus karena top menu dan side bar menu di kanan tertimpa
  31. Sekarang kita pastekan code penelusuran itu diatas tulisan tabs-cap-top cap-top
    atau diatas <div class='tabs-cap-top cap-top'>
  32. Maka hasilnya masih kurang bagus, karena menu sidebarnya jadi hilang
    Hasilnya kurang bagus karena side bar menu sebelah kiri tertimpa, yang kelihatan hanya top menu nya saja
  33. Sekarang kita letakkan code penelusuran itu dibawah tulisan column-center-inner
    atau dibawah <div class='column-center-inner'>
  34. Hasilnya bagus karena menu bar yang ada dikanannya tetap kelihatan, dam top menu juga tetap kelihatan

    Ini bagus !
  35. Sekarang mau merubah warna background tampilan search nya, kita pergi ke  control
    ganti warna #FFFFFF (putih) dibawah ini dengan warna lain

    .gsc-control-cse {
    font-family: Arial, sans-serif;
    border-color: #FFFFFF;
    background-color: #FFFFFF;
    }
  36. Kalau mau ganti warna background dalamnya, kita pergi ke result
    ganti warna #FFFFFF (putih) dibawah ini dengan warna lain

    .gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
    }
  37. Kalau kita punya background web nya putih, hal ini tak jadi masalah
  38. Sekarang kita mau kalau ditunjuk hasil searchnya akan berubah warnanya (disebut hover)
  39. Kita cari hover

    .gsc-webResult.gsc-result:hover, .gsc-imageResult:hover {
    border-color: #FFFFFF;
    background-color: #FFFFFF;

    kita ganti warna background-color nya menjadi fdf6e5

    .gsc-webResult.gsc-result:hover, .gsc-imageResult:hover {
    border-color: #FFFFF;
    background-color: #fdf6e5;
  40. Hasilnya seperti ini:
  41. Selesai, selamat mencoba!
    Tapi saya belum berhasil merapikan kotak dan tombol searchnya, masih mleber keluar
    Kalau teman2 bisa, bantu aku ya...... tq.

No comments:

Post a Comment