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.
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):
- Save dulu template nya agar kalau terjadi apa2 bisa diperbaiki lagi
- 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 - Klik Buat
akan muncul window baru, artinya sudah berhasil - Klik Dapatkan Kode
Maka akan muncul window code
(jangan copy dulu codenya)
Karena kita mau mengeditnya dulu - Klik Edit Mesin Telusur
Maka akan muncul window baru - Klik Tampilan dan Nuansa
Maka akan muncul window baru - Pilih Hamparan (two Column)
Hamparan= Menampilkan hasil penelusuran dalam bentuk hamparan - Klik tombol "Simpan & Dapatkan Code" (klik kotak yang paling kanan)
- Maka akan terbuka window baru yang berisi script
(jangan copy dulu scripnya) - Karena kita mau memasukkannya ke menu bar (top menu) maka kita harus mendapatkan code V1
- Klik tombo; "Get the V1 code"
Maka akan terbuka window baru berisi code - 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> - Sekarang kita buka Dashboard Blogspot --->> Template ---->>> Edit HTML
- Lalu cari tempat menu drop down yang kemarin kita buat
yaitu dibawah tabs-outer
lalu pastekan code tersebut tepat dibawah <ul> - Klik Simpan Template
- Lihat Blog
Perhatikan kolom search enginenya menjadi panjang, biar kan saja jangan bingung hehehe.... - 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%;'> - Sekarang bagaimana caranya menu search tsb menjadi ke kanan
(saat ini berda di sebelah kiri) - Tambahkan tulisan float:right;
Jadi hasilnya seperti ini:
<div id='cse-search-form' style='width: 30%; float:right;'> - Save Template
- 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; - Lihat Blog, sekarang ganti border color nya
border-color: #666666; --->>> border-color: #86522b;
Ternyata semua warna border tombol yang ada di blog menjadi berubah - Lihat blog, Sekarang kita mau memperkecil buttonnya yang mleber keluar itu
Aduh... belum berhasil - Jika kita ketikkan tulisan lalu kita seacrh, maka tidak akan terjadi apa2
Karena kita belum memasang kode penelusuran - Sekarang kita Klik tulisan dibawah code yang tadi kita ambil
Klik tombol "Berikutnya Dapatkan Kode untuk hasil penelusuran" - Maka akan muncul code penelusuran seperti ini:
<div id='cse' style='width: 100%;'></div> - Copy code tersebut
- Lalu buka Dashboard ----> template ----->>>Edit HTML
- Pastekan scode penelusuran tersebut dibawah tulisan tabs-outer
atau dibawah <div class='tabs-outer'> - 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 - Sekarang kita pastekan code penelusuran itu diatas tulisan tabs-cap-top cap-top
atau diatas <div class='tabs-cap-top cap-top'> - 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 - Sekarang kita letakkan code penelusuran itu dibawah tulisan column-center-inner
atau dibawah <div class='column-center-inner'> - Hasilnya bagus karena menu bar yang ada dikanannya tetap kelihatan, dam top menu juga tetap kelihatan
Ini bagus ! - 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;
} - 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;
} - Kalau kita punya background web nya putih, hal ini tak jadi masalah
- Sekarang kita mau kalau ditunjuk hasil searchnya akan berubah warnanya (disebut hover)
- 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; - Hasilnya seperti ini:
- 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