Cara / tutorial membuat kotak search dinamis ( keren ) di Blog dan wordpress

Cara / tutorial membuat kotak search dinamis ( keren ) di Blog dan wordpress
hey sobat 4techna kali ini saya akan berbagi ilmu membuat blog lebih lengkap saya berharap artikel ini berguna dan dapat membantu
yuk cekidot,,,
Cara membuat Google Custom Search Engine (Pencarian Kustom Google) ini
hasil praktek sebagai mana saya posting di Fasilitas Pencarian dengan Google Custom Search Engine.
Untuk membuat Google Custom Search Engine (atau diterjemahkan juga sebagai Google Penelusuran Ubahsuaian), ikuti langkah-langkah berikut:
  1. Login dengan menggunakan Google Account. Jika belum mempunyai Google Account, lakukan registrasi lebih dahulu.
  2. Masuk ke Google Custom Search Engine dengan alamat di www.google.co.id/cse.
  3. klik tombol Buat Custom Search Engine atau Buat Mesin Penelusuran Ubahsuaian yang ada di pojok kanan atas.
  4. Akan terbuka halaman baru (1. Konfigurasikan mesin telusur Anda).
  5. Lakukan konfigurasi mesin pencari yang akan dibuat dengan mengisi kolom-kolom yang tersedia. Mulai nama (di sini saya tulis: Pencarian Artikel Alamendah Via Google), deskripsi (saya tulis: Lingkungan Hidup, Flora (Tumbuhan), Fauna (Hewan), Isu Lingkungan, Indonesia), bahasa (saya pilih Indonesia), situs yang akan ditelusuri (bisa satu situs atau beberapa situs sekaligus. Di sini saya hanya mengisikan satu url blog yakni alamendah.wordpress.com), pilih edisi (gratis atau yang berbayar), dan jangan lupa beri contreng pada persetujuan layanan.
  6. Setelah terisi semua klik tombol “lanjut” di bagian bawah.
  7. Akan terbuka halaman baru (2. Coba saja).
  8. Sobat dapat memilih gaya dan tampilan, terdapat 6 gaya. Klik yang sobat sukai dan akan ditampilkan preview di bawahnya.
  9. Sobat dapat juga mencoba menggunakannya dengan mengetikkan keyword kemudian mengklik tombol seach.
  10. Klik “lanjut” di bagian bawah
  11. Terbuka halaman baru (3. Dapatkan kode). Di sini disediakan kode javascript untuk meletakkan kolom Google Custom Search Engine yang bisa diletakkan di side bar blog.
Sampai di sini mesin pencarian kita telah jadi. Untuk blog yang mendukung javascript dapat langsung menyalin kodenya dan memasangnya di sidebar.
Sayangnya untuk blog WordPress gratisan (WordPress.com) tidak bisa menggunakan kode javascript. Karena itu untuk memasang Google Custom Search Engine pada wordpress.com dibutuhkan sedikit improvisasi.
  1. Masuk ke halaman “Panel Kontrol”. Caranya, dari halaman “3. Dapatkan kode” klik salah satu tulisan “Tampilan dan nuansa”, “dasar-dasar”, atau “tampilan dan nuansa” (berwarna biru) hingga terbuka halaman control panel, kemudian klik tulisan “Mesin telusur saya” yang ada di sudut kiri atas. Atau bisa dengan langsung mengetikkan alamat “www.google.co.id/cse/manage/all”
  2. Cari tulisan sesuai dengan nama mesin yang kita isikan sewaktu melakukan konfigurasi (sebagaimana saya jelaskan di langkah ke-5). Di situ saya memberikan nama” Pencarian Artikel Alamendah Via Google”
  3. Copy url pada tulisan tersebut dengan cara klik kanan maouse, kemudian “copy link location”.
Sekarang cara memasang di side bar Blog WordPress.
  • Login dan masuklah ke dashbor blog. Pilih halaman “Widget”.
  • Seret widget “teks” ke lokasi sidebar.
  • Isikan kode berikut dalam widget teks tersebut:
<div style=”border:1px dotted #000000;background-color:#F5F5F5;width:200px;padding:5px;”>
<div style=”text-align:center;”>
Pencarian Artikel Alamendah’s Blog via Google </div>
<div style=”text-align:right;”> <strong>Klik <a href=”http://www.google.co.id/cse/home?cx=007433225687596300141:8ajiges0fnu” target=”_blank”><span style=”color:#0000ff;”>DI SINI</span></a></strong></div>
</div>
  • Ganti tulisan yang berwarna hijau sesuai keinginan.
  • Ganti tulisan yang berwarna merah dengan url yang telah sobat copy sebagaimana langkah ke-3 di atas.
  • Atur besar kotak / kolom sesuai dengan lebar sidebar dengan mengubah angka pada tulisan “width:200px;padding:5px”
  • Klik tombol “Simpan” di bawah kotak teks.
Selesai, Custom Search Engine atau Mesin Penelusuran Ubahsuaian telah jadi dan siap digunakan.
terima kasih cukup sekian...

sumber: alamendah.wordpress.com